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.
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
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.
templates/template_name/error.php is extended in the layout folder as
templates/template_name/component.php is extended in the layout folder as
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/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.
In the similar manner all the HTML overrides
templates/template_name/html of the template is extended and implemented in
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
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
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 -
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 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.
Customize LESS variables to define colors, sizes and more for your custom theme. The LESS variables may defer between templates.
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.
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.
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/js/custom directory and it will get loaded to the template automatically.
Preview option allows you view your site immediately after making some changes in the template settings.