Video Portal Theming Design System Tour


About

The Theming design system is currently in a limited features release mode. The following features are not available for Channels as of date of publishing, but are under development and will be available very soon: Moderation, Search, Add media,  and Remove media

Exciting news! We've launched our new Theming design system to give your Video Portal more flexibility and easy customization options!

Technology - Aligned with industry-leading standards to assure faster, slicker, and better UI.

Branding -  Incorporate branding elements such as colors, logos, and typography to create a cohesive and recognizable visual identity for the website.

Design principles - Reuse of elements and components from the layout, and coherence in the design buttons, forms, and navigation menus that can be combined to create consistent and efficient designs.

Accessibility -  Prioritized accessibility to ensure all users can easily access and use the site.

Responsive design -  Ensures usability across various devices, from desktops to mobiles.

Design language - Clear terminology and naming conventions for design consistency.

✔ Room to Grow - Our new page builder allows you to create as many different pages as you want, with as many elements as you want on each page.

Check out the new template page!


Theme Builder

A new and improved Theme Builder to replace the previous Styling Page is now available! Instead of customizing each element, menu, and button individually, you simply set a theme once and it will be applied across your site. Select a light theme / dark theme or customize your own theme.

Add new pages to your site

Here is a list of new pages we've created for you.

Help page 

Do you want a Help Page with FAQs or Q&As? Now you can! The new Help Page can be separated into sections according to topics. You can add a title and a "Contact us" button which sends users to a dedicated URL or allows them to send an email (see example below). For the setup guide, see Helppage.

Login page 

Our newly designed login page gives you the option for adding text and logo to fit your branding. For the setup guide, see Login.

List page

This brand-new page is a list of links that can be used to spotlight special topics. You can customize the list with different titles, descriptions, and thumbnails (see example below). For the setup guide, see Listpage.

Personal profile

Give your users their own profile page with their own bio, content, and great design. For the setup guide, see Personalprofile.

Channels page

The Channels page got a facelift now allowing you to add your company logo, or any icon that represents what each channel is about. You can also add a ‘welcome video’ that will play automatically each time you navigate to this channel. For the setup guide, see Channelthemingui.

Channel collections

Instead of having all your channels listed on one page as we had before now, you can create Channel Collections. A channel collection contains multiple channels that may be displayed as a grid or as a list. The collection may also include filtering options specific to the collection and manual sort order for the channels in the collection. For the setup guide, see Channelcollections Module.

Groups page

Once enabled, this module allows you to create a dedicated 'group page' where users from a group are displayed in a tidy grid layout, while promoted users take the spotlight in a carousel. It's the perfect tool to organize and highlight the standout members of your community or enterprise. For the setup guide, see GroupPage Module.

Add custom pages using pre-built templates

You don't have to be a designer to create the pages you want! You now have creative freedom using a variety of great new components that you can mix and match.

With the new page builder, you can create as many different pages as you want, such as several Home pages or special landing pages. It gives you all the tools you'll need to refresh the look and feel of your site and help gives that WOW effect that you can be proud of. For the setup guide, see Create and Use a Template Page.

Here is a list of new components we've created for you.

Playlists

The new Theming Feature Set gives your playlists an attractive new design with more options. You can choose to have 2 to 4 thumbnails (shown above) as well as control the number of seconds that pass before the new set appears. Very useful for presenting something ‘fresh’ such as ‘Most viewed’ or ‘Recently added”.

Clickable images 

Attract your users with engaging images that redirect them to any web page of your choice. 

Footer 

No longer just an HTML box! The new and improved footer configuration allows anyone to create an attractive new footer without needing to touch a code. 

Header 

The new navigation bar has a slim & sleek look. You now have the option to have a 'clean' navbar (shown in image above) limited to only one or two items such as a call-to-action button and a custom logo.

Hero Unit

You can select from two types of navbars: Player Carousel (see example in image above), Text & Counter (see example below), or you can decide not to have a hero at all.... the choice is yours!

Text & Counter hero

News Items 

Have a playlist of articles in the form of a carousel. Each image on the carousel opens to an article, as shown below.

Plain text 

Use this tool to feature content such as a ‘welcome’ message, an introduction to your site, or a content policy. You control the color of the text and the background.

Registration

This component makes registering quick and easy for users. By clicking the "Register" button, the registration page opens on the side of the page for easy completion (as shown below). No need to navigate elsewhere!

Collection of channels

This feature gives users an easy way to explore and access channel collections. Clicking 'See All' will take users to your channel collection page. If you don't have any channel collections yet, you can set them up in the ChannelCollections module.

Banner & CTA

This component provides a banner with text, a call-to-action button and background image. 

That's not all ... check out these other new features!

Create button 

Upgrade your site with a newly designed +Create button to replace the previous Add New drop-down button. For the setup guide, see AddNew.

Upload media 

Now you can save time by uploading, editing, and publishing all your media in bulk! For the setup guide, see Uploadmedia Module.

Ready to get your new theming on? Check out this setup guide Getting Started with the Theming Module.

Was this article helpful?
Thank you for your feedback!
In This Article
Related Articles
Back to top

Never miss a thing!

Subscribe to our customer newsletter and our release notes updates, so you always get the best out of Kaltura.
Newsletter