All Collections
Website and App Development
Website Customizations
How to create a custom theme?
How to create a custom theme?

Create your own custom themes from a default theme

Anjana avatar
Written by Anjana
Updated over a week ago

Shape your streaming site exactly the way you envision it. With our custom theme creation feature, you can now take an existing theme and mold it into a unique representation of your brand.

Step 1: Select an existing Theme

  • From your dashboard, click on the Custom Theme from the Progress Tracker

(OR)

  • From the Apps section of the left Menu select Responsive Website and then Website.

  • Choose any one of our pre-defined themes (I am choosing Hybrid in this example, preview the themes and pick the one that's closest to your design)

Step 2: Changing the colors and assets to reflect your brand

  • Upload your brand assets in the Asset Details Section

  • Select your brand colors in the Color Customization Section

  • Type in your website name and short description (for SEO optimization) in the Website Details Section

What I changed

How it looks (with default content) - Before Login

How it looks (with default content) - AfterLogin

⚠️ Note: At this point, I will upload my videos to make sure the selected color schemes look good on my content.

Step 3: Changing Landing Page

Here is a detailed guide on landing page customization options.

In this section, I will only show the changes I made to change the look and feel for this custom template.

First Scroll - Scroll Widget - Full Image

Second Scroll - Grid Listing

Third Scroll - Scroll widget - Hero Image

  • Full-width Scroll Widget

  • Overline, Title, and Subline text added

  • CTA button pointing to the show with custom button text

  • Grid listing

  • Listed videos of a show (you can also choose videos from a playlist or select them individually)

  • Hero Image Scroll (Layout 1)

  • Title text added

  • CTA - Sign up page button with custom button text

Complete Look

Step 4: Changing Header

Let's start with the header, I want to change the header from a transparent strip to a solid bar. How do I do that? - I change to layout 1

Before

Change Made

After

  • Transparent Background

  • Center Alligned

Change Made

(Layout 3 to Layout 1)

  • Solid Strip

  • Left Allignd

  • Menu Item Text based on default content

  • All item names in capital by Default

  • Menu Items and pages mapped.

  • The casing was changed when giving menu item names

  • Menu Item Text based on my content

  • Casing Corrected

  • Removing/ Changing Case for Live TV - Based on your requirement

  • Live TV Removed

⚠️ Note: The given header (and footer) color is black, if you want to change the color of the header and footer bar, edit the surface color in the basic info tab

You can also further customize, by making the header

  • transparent (under Advanced Section)

  • add side padding (under Advanced Section)

  • Change the order of Menu items (Navigation Section)

  • Make search as an icon or box and change place holder text (under General Section)

Step 5: Customizing Footer

The Footer has five layouts

Layout 1

Layout 2

Layout 3

Layout 4

Layout 5

You can also add different links and map respective pages in your footer. Here is how to edit the default pages mapped on your footer

Step 6: Pages and Layouts

Home Page

  • A website should have a home page where the content can be listed as a carousel, horizontal listing, continue watching, Watchlist, grid listing, etc.

  • You can add Ad banners by following the steps here.

  • Make sure you showcase the most popular and best content in different card sizes to have a customized look

Show Details Page

  • You have 3 layouts to choose from. One with a Video thumbnail and the other without it and the third is with detail at the bottom of thumbnail. Once the layout is selected you can see a list of options to enable or disable to appear on the respective page.

  • For example, if you want to enable the header and search bar on the show details page you need to enable the toggle and they will be reflected on the page.

Movie Detail Page

  • You have 4 layouts to choose from.

  • You can also choose the layout for the recommended videos that appear at the bottom of the selected movie detail. Or turn off recommendations.

  • Enable and modify controls based on your content requirements

Video Details Page

  • You have 5 layouts to choose from.

  • Recommendation layouts can be selected

  • Choose controls and settings based on your requirement

Created Pages

  • In addition to default pages, you can create any number of custom pages to suit your need

Related Articles
Responsive Website Creation
Customizing Webpages
Theme Customization
Build and Runtime Parameters
Design guide - Assets required for Streaming Website
Did this answer your question?