Creating a Style | Advanced Customization | WS.WebTV Documentation | WebTV Solutions

Print

A Style consists of CSS, graphic files and, optionally, a Javascript file. By creating/editing a Style you can modify the WebTV appearance to a high degree.

We will explain how to create a Style with an example...
For the example we will create a new Style based on the "Default" Style which we will call "My Style".

1. Open/Edit the _theme.ini file
The theme file is located in public/frontend/default/_theme.ini
Please note that it is a JSON, plain text, UTF-8, file. You can use any plain text editor like Notepad, Notepad2, Notepad++, Dreamweaver, etc. to edit it.

...now look for the following section:
"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},

2. Add a new entry for your new Style (and save...)
"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"my_style" : { "title" : "My Style" , "description" : "This is My Style" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},
Please note that "my_style" is the style ID of the new Style.
The ID must not contain any space or special characters.

Note: Since the JSON format is very strict, we recommend you to validate the file after performing any modification to it. In order to do this you can use an online validation tool like these.

3. Duplicate all folders corresponding to the "Default" Style which are:
public/frontend/default/css_default
public/frontend/default/images_default
public/frontend/default/js_default

4. Rename the duplicated folders to include your new Style ID:
public/frontend/default/css_my_style
public/frontend/default/images_my_style
public/frontend/default/js_my_style

5. Publish the modified "_theme.ini" file and new folders to the server
The New Style will appear in the Configuration > Appearance section of your WebTV.

6. Start editing the new Style's files!
• CSS files: public/frontend/default/css_my_style
(Don't forget to change image paths to reflect the new style's image folder name!)
     _main.css: Applies to the "Desktop" interface (the main interface).
     _main.mobile.css: Applies to the "Mobile" interface (in case your WebTV has the Mobile Extension).
     _popup.css: Applies to the Comments and Share By E-Mail popups.
     icons.css: Social and other common icons.
     modal.css: The Style definitions for the modal boxes and tooltips (tooltips are not used on the front-end).
• Style-specific Javascript (if any): public/frontend/default/js_my_style/style.js: You can include any style-specific script into this file.
• Images files: public/frontend/default/images_my_style

7. The Style thumbnail!
The thumbnail displayed for the Style is the file named "_style.jpg" inside the corresponding Style image folder, in this case, the thumbnail of your Style is: public/frontend/default/images_my_style/_style.jpg

Advice: Always keep track of any modification you make to the WebTV so you can re-apply it after updates or reinstallations.