Table of Content

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.

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.

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.

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 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

Let us know so that we can improve.

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

Ask the Community

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