• Products
      • Products

        Build Streaming Platforms like Netflix, Udemy or Audible

        Live stream events, shows, tournaments on any device

        Host, publish, manage video, and audio files in one place

        Cloud playout software for linear TV & FAST channels

        New

        Video compliance checks and fixes with AI

        New

        Host branded video meetings on your platform

        Sell your individual videos online with pay-per-view instantly

        SDKs to deliver cutting-edge video, efficiently and on any device

        Test TV Apps on Real Smart TVs Remotely

        Alie AI Header

        Alie AI - World's First Streaming Focused AI Engine

        • ExamplesRight Arrow
        • Alie AI DemoRight Arrow
        • Ask SalesRight Arrow
        • Switch to MuviRight Arrow
    • Alie AI
        • Alie AI
          Built on Alie

          Video compliance checks and fixes with AI.

          World’s First Streaming Focused AI Engine
          Discover Alie
          AI Subtitles

          Auto‑generate video subtitles in primary language.

          AI Translations

          Translate subtitles instantly in 75+ languages.

          AI Recommendations

          Deliver tailored content recommendations.

          AI Metadata

          Smart fill meta titles, descriptions, tags & casts.

          AI Compliance

          Automate regulation checks and edits in one click.

          AI Dubbing

          Dub videos into languages your customers speak.

          AI Chaptering

          Split long videos & audio files into structured chapters.

          AI Clips

          Create clips, reels, social snippets and more in one click.

          AI Chat with Video

          Chat with videos to ask questions, brainstorm & more.

          View all AI FeaturesRight Arrow
          Demo Center
          Menu Image

          Experience Muvi products first hand by taking a quick demo.

          Learn moreRight Arrow
    • Pricing
    • Solutions
        • Solutions
          • Video Streaming (VOD)
          • Audio Streaming (AOD)
          • Live Streaming
          • Offline Streaming
          • Video Hosting Platform
          • Podcast Platform
          • Mobile & TV Apps
          • Meetings & Webinars
          • Online Video Platform
          • IPTV Solution
          • Live Events
          • Media & Entertainment
          • Sports
          • Healthcare
          • Health & Fitness
          • Tourism & Hospitality
          • Education
          • Religion
          • Judiciary
          • Enterprises
          • Film Festivals
          • Broadcasters
          • Government
          • Telcos
          • Finance
          • Beauty
          Web App
          • Website
          Casting
          • Chromecast
          • AirPlay
          • Apple Watch
          Mobile
          • iOS
          • Android
          • Mobile SDKs
          Others
          • Get Only Apps
          • Muvi Onyx
          • Muvi Blue
          TV
          • Roku TV
          • Android TV
          • Apple TV
          • Samsung TV
          • Fire TV
          • LG TV
          • VEWD TV
          • VIDAA OS TV
          • Astro TV
          • Netflix
          • YouTube
          • ESPN+
          • Udemy
          • Audible
          • Apple Music
          • Zoom Meetings
          • AVO TV
          • Calm
          • Shahid
          • Nebula
          • Pluto TV
          • beIN
          • Poppo Live
          • Rumble
          • TikTok
          • Reelshort
          • OnlyFans
          • Clubhouse
          • Clipclaps
          • Google Podcast
          • Fanhouse
          • OnlyFans TV
          • Spotify
          • Bigo Live
          • Whatnot
          • Hulu
          • Tango
          • Equinox
          • Cerebral
          • Masterclass
          • Twitch
          • Curiosity Stream
          • WorldStarHipHop
          • Baller TV
          • TinyZone
          • BXNG
          • Dramabox
          • Boomplay
          • Blinkist
          • Seekho
          • UpScrolled
          • Featured Solutions
          • On-premise
          • Short Videos
          • eLearning
          • FAST
    • Help
        • Help
          Help & Support
          • Help Center
          • Community
          • Support Plans
          • Wiki
          • Migrate to Muvi
          Services
          • CMS Management
          • End-User Support
          • Design & Visuals
          • Product & UX Consulting
          • Professional Services
          • Critical Events Support
          Resources
          • Resource Center
          • Blogs
          • Events & Webinars
          • Case Studies
          • Product Updates
          • Free Tools
          Developers
          • APIs
          • SDKs
          • BYOD
          • Webhook
    • Company
        • Company
          Company
          • About Us
          • Newsroom
          • Compliances
          • Awards & Recognition
          • Muvi Academy
          • Contact Us
          • Ask Sales
          Partners
          • Partnership Program
          • Partner Portal Login
          • Find a Partner
          • Integrations
          • Become a Partner
          • Affiliate Program
          CareersRight Arrow
          Muvi Foundation
          Menu Image

          An inspiration, to strengthen, to help, to empower our entire community.

          Learn moreRight Arrow
    Login
    Free Trial
     
    Create a ticket
    1. Help Articles
    2. Website Design
    3. How to Customize Opal Template Using the Widgets
    Table of Content
    • Introduction
    • How to Customize the Homepage Layout
    • How to Customize Register & Login page
    • Customizing Category Listing Page
    • Customizing Content Details Page
    • Customizing User Menu Pages
    • Customizing CSS

    How to Customize Opal Template Using the Widgets

    Introduction

    Opal template is created by using multiple widgets. Once the template is activated, all the default widgets used in the template will be automatically loaded in the widget section in the CMS. You can easily edit each widget used in the template by using the Widget Editor in the CMS. Also, you can add a new widget to the template using the Widget Editor. In this article, we have described how you can easily modify different widgets that are used in the Opal template in different sections (i.e., Homepage, Registration Page, Log in Page, Footer, etc.) and change the template design.

    How to Customize the Homepage Layout

    (Before Login)

    We have two separate designs for both the before login and after login of the home page. Following are the widgets for before login home page and how you can edit them.

    Note: All the widget changes are done in views/site/index.html in the Template Editor.

     

    1. First widget item: Widget code in the CMS – “available_on_your_favourite_devices”

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    2. Second widget item: Widget code in the CMS – “whatever_mood_you”

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    3. Third widget item: Widget code in the CMS – “home_page_slider1_content1”

    This item specifically highlights a specific content. To show content, we just need to give the permalink of the content in the widget content section and the details of that content will appear in that place.

    For the first content in the slider, ‘home_page_slider1_content1’ widget is used and for the second content in the slider ‘home_page_slider1_content2’ widget is used.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.
    Note: You can find these sections in views->site->index.html. We have used AngularJS to show this section. We fetched the permalink from the widget and used GetContentDetails API to get all the content-related data.

    4. Fourth widget item: Widget code in the CMS – “one_account_for”

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    5. Fifth widget item: Widget code in the CMS – “home_page_slider2_content1” & “home_page_slider2_content2”

    This is exactly like the 3rd widget. We are displaying another two contents here by adding the permalink in the content part of the widget. And using GetContentDetails API we are displaying the content-related data.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    6. Sixth widget item: Widget code in the CMS – “our_features”

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    7. Seventh and the last widget for the homepage: Widget code in the CMS - “footer_widget”. This is common for all the pages.

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    (After Login):

    We are showing banners and featured sections on the after-login home page which are added in CMS.

    How to Customize Register & Login page

    Register and login page background image you can change by changing the. inner-content-top2:before CSS. Currently, this background CSS is added for this class :

    background: url(../images/outer-bg.jpg) no-repeat center top;

    You can change the texts in the widget in the widget editor in the CMS. After editing the widget, refresh the homepage. You will see the changes.

    • To edit this widget for both the “Register” and the “Login” page, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget and then click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    Customizing Category Listing Page

    For the “Category Listing Page,” we have one widget for the background image, and the widget code in the CMS is common_background.

    So we need to add {$this->widgets['common_background']['content']} in views/media/list.html (in the Template Editor) and in the CMS, in the widget editor, we need to set the background image.

    • To edit this widget, navigate to “Website” -->” Widgets” in the CMS.
    • Click on “Edit” to edit the widget.
    • Click on the “Source Code” <> to view the image source.
    • You can remove the existing image source and add a new image.
    • Click on “Save and Continue”.
    • Refresh your homepage to view the changes.

    Customizing Content Details Page

    We are showing Headlines, Genres, Duration, Stories, Release Date, Pricing, Add to Favourite, Play Button, Trailer, Casts, Related Content, and Reviews on the same page. The design is different from other templates. We have used the “common_background” widget for the background image when the banner of the content is not present for a content.

    You can change the image by following the process mentioned above for the “Category Listing Page”.

    Customizing User Menu Pages

    You can customize user menu pages like Profile, My Favourites, Watch history, etc.

    We have one common widget for the background images for each page. Widget code: “common_background”. You can change the image by following the process mentioned above for the “Category Listing Page”.

    Customizing CSS

    All the template-specific CSS changes are listed in /css/style.css in the Template Editor. If you want to add a new CSS to this template, then please create a new CSS file - custom.css inside the CSS folder and add your custom CSS into that file.

    Was this article helpful?
    Yes
    No
    Let us know so that we can improve.

    Your email address will not be published. Required fields are marked *

    Next

    How to Integrate Shopify into Muvi

    Ask the Community

    Our super friendly community helpers are on hand to help out ask away. They can help with almost anything.

    Products
    • One
    • Live
    • Flex
    • Playout
    • TrueComply
    • Muvi Meet
    • TV
    • Player
    • TV Lab
    Products
    • One
    • Live
    • Flex
    • Playout
    • TrueComply
    • Muvi Meet
    • TV
    • Player
    • TV Lab
    Company
    • About Muvi
    • Careers
    • Awards & Recognition
    • Global Compliances
    • Price Match
    • Legal Policies
    • Muvi Foundation
    • Muvi University
    • Contact Us
    • Ask Sales
    Solutions
    • OTT Platform Provider
    • Video-on-Demand Platform
    • Create Video Streaming Website
    • White Label Video Streaming Platform
    • Movie Streaming Platform
    • Online Video Platform
    • Mobile and TV App Builder
    • Live Streaming Platform
    • Audio Live Streaming
    • Secure Video Hosting
    • Cloud Playout Software
    • Create Online TV Channel
    Services
    • CMS Management Services
    • End-User Support Services
    • Design Services
    • Product & UX Consulting
    • Muvi Professional Services
    • Critical Events Support
    Resources
    • Blogs
    • Events & Webinars
    • Whitepapers
    • Case Studies
    • Free Tools
    • Build vs Buy Calculator
    Help and Support
    • Help Center
    • Community
    • Support Service
    • Partner Program
    • Find a Partner
    Developers
    • APIs
    • SDKs
    • BYOD
    • Webhook
    Developers
    • APIs
    • SDKs
    • BYOD
    • Webhook
    • 42241 Violet Mist Terrace, Ashburn, VA 20148
    • sales@muvi.com
    • +1-860-973-0083 (USA)

    Copyrights ©2025 Muvi LLC | Leading the streaming revolution since 2010