Style settings allows you to customize the layout and theme of a template powered by VP Framework.
Layout and Theme
Under this section you can change/customize HTML layout, create new themes, switch between existing themes and also customize LESS variables of a theme.
Layout
VP Framework allows you to customize all layout files of the template and all HTML overrides without changing any original template file. All templates powered by VP Framework has its own layout system. All layout files of the template is located at root/templates/template_name/layouts directory. Every template comes with its own default layout folder which located in root/templates/template_name/layouts directory.
Standard Joomla template system's templates/template_name/index.php is extended and implemented in the default layout directory as - templates/template_name/layouts/default/index.php. The same file is implemented in the layout as templates/template_name/layouts/default/index.fee.php for Joomla Front End Editing for better handling.
Similarly templates/template_name/error.php is extended in the layout folder as templates/template_name/layouts/default/error.php and templates/template_name/component.php is extended in the layout folder as templates/template_name/layouts/default/component.php
Further these index layouts are broken into individual blocks for easy customization. The block layout files are located in templates/template_name/layouts/default/blocks directory.
Examples:
templates/template_name/layouts/default/blocks/head.phpcontains the template codes which is loaded in the head.templates/template_name/layouts/default/blocks/header.phpcontains the header layout.templates/template_name/layouts/default/blocks/mainbody.phpcontains the main body layout.templates/template_name/layouts/default/blocks/footer.phpcontains the footer layout.
HTML Overrides
In the similar manner all the HTML overrides templates/template_name/html of the template is extended and implemented in templates/template_name/layouts/default/html
Examples:
A normal Joomla template article view HTML override is templates/template_name/html/com_content/article/default.php. But in VP Framework the same override is implemented at templates/template_name/layouts/default/html/com_content/article/default.php
Layout Customization
As we mentioned earlier, you can very easily customize any of the template layout files (block and HTML overrides) without changing any original template file. To do that you need to first create your own custom layout which will allow you to override the default layout of the template.
How to override default template layout
To override the default layout you need first create a new template layout. Create a new folder in templates/template_name/layouts directory of the template which will represent your custom layout. Please remember the name of the layout folder must be in lower case and it should not have any special characters or space. Lets say the name of this folder which you created is mylayout.
Lets consider you want to override (customize) the default artcile page layout of the template. To do that first copy layout file to your new layout folder. Which means -
copy templates/template_name/layouts/default/html/com_content/article/default.php
to templates/template_name/layouts/mylayout/html/com_content/article/default.php.
Next in the Style Settings select Mylayout as your Layout instead of Default. That's it. Now you can make your necessary customization in templates/template_name/layouts/mylayout/html/com_content/article/default.php. At any point of time if you need to revert back to the original layout of the template then you can switch back to the Default layout from template settings.
Similarly you can also override any other template layout files as per your need.
Theme
Theme contains the CSS styles of the template. You can have unlimited number of themes for template. You can easily switch between the themes from Theme drop down list. You can also create new themes by clicking on Add New button. When you create a new theme the CSS for the same is automatically created by the LESS compiler of VP Framework. Later you can also customize the LESS variables under Customize Theme options.
Do not customize any of the original themes that comes with the template because those customization will get overridden during future template updates. Always create your own theme for customization.
Theme Customization
Customize LESS variables to define colors, sizes and more for your custom theme. The LESS variables may defer between templates.
Custom CSS
You need to add your custom CSS codes in your custom CSS file. You should not add your custom CSS codes in any of the CSS files that comes with the original template as those customization may get overridden during future template updates.
VP Framework allows you to add any number of custom CSS files to the template which always remains unaffected by the future template updates. You just have to upload the CSS file to templates/template_name/css/custom directory and it will get loaded to the template automatically.
Advanced Scenario
If you have created few custom themes and want to add theme specific custom CSS files then you need to rename the custom CSS files with the theme name prefix in lower case separated by a dot.
Example:
Lets say, you have created a theme called Sports and you have custom css file called custom.css which you want to be loaded only when Sports theme is active. Then you need to rename the custom.css to sports.custom.css and upload it to templates/template_name/css/custom.
Custom JavaScript
You need to add your custom JavaScript in your custom JavaScript file. You should not add your custom JavaScript codes in any of the JavaScript files that comes with the original template as those customization may get overridden during future template updates.
VP Framework allows you to add any number of custom JavaScript files to the template which always remains unaffected by the future template updates. You just have to upload the JavaScript file to templates/template_name/js/custom directory and it will get loaded to the template automatically.
Preview
Preview option allows you view your site immediately after making some changes in the template settings.
