How do Create Custom CSS Style in Helix Joomla Templates
In this tutorial we are going to see how do we use or add override CSS styles in Helix 3 and Helix 2 Joomla template framework. Helix 3 Framework template provided by JoomShaper where there is an one of options tab called 'Custom Code' with 'Custom CSS' field so using it you can esily add Custon CSS style but in Helix 2 Joomla framework we might to add custom css code manually.
Why we use CSS overrides?
It's always a good thing to keep your new custom CSS styles separate from the existing template CSS styling, if you're using a pre-built Joomla template
It's easier to control
Changes will not be missed if you upgrade the template
Easily copy or move the modifications to another template or another website.
CSS overrides general usage in Joomla 3
To load a custom style sheet in the Joomla tag, the following code can be added to the index.php file of your template (YOURDOMAIN.COM/templates/yourtemplate/index.php), right before the ending tag in order to ensure your file is loaded last.
May the CSS file can have any name, and it does not have to be in the /css/ subfolder, but it's cleaner that way.
It's also possible to add like a normal CSS link tag, but this is less flexible than the above mentioned option.
Usage of !Important in CSS
Some of extensions might load their CSS styles after yours (or even add styles directly(inline-style) in the index.php file), thus overriding your overrides. It can usually be solved by using or adding !important to your styles, eg. h2{color:red!important;}
How to Override CSS in Helix 3 Joomla Template
Go and click 'Extensions -> Templates'
Then find and click 'shaper_helix3 - Default' under 'Style'
Now click on 'Custom Code' tab and find 'Custom CSS' field, here you can add your own custom CSS code.
Finally click on 'Save' or 'Save & Close' button to save helix template options.
How to Override CSS in Helix 2 Joomla Template
As many other Joomla template frameworks, Helix ii also provides can create your own custom.css file. Simply create it, and place it inside the css folder of the helix Joomla template. The template will parse it and will include it in the head section of your pages.
First go and open 'shaper_helix_ii' Joomla template folder
Next open 'css' folder on it.
Now create new css file called 'custom.css' within 'css' folder
Now again go back on 'shaper_helix_ii' folder and open 'index.php' file
Then include 'custom.css' file using the code '->addCSS('custom.css')' in 'index.php' file.
Popular Posts Hits
How do Create Custom CSS Style in Helix Joomla Templates
In this tutorial we are going to see how do we use or add override CSS styles in Helix 3 and Helix 2 Joomla template framework. Helix 3 Framework template provided by JoomShaper where there is an one of options tab called 'Custom Code' with 'Custom CSS' field so using it you can esily add Custon CSS style but in Helix 2 Joomla framework we might to add custom css code manually.
Why we use CSS overrides?
It's always a good thing to keep your new custom CSS styles separate from the existing template CSS styling, if you're using a pre-built Joomla template
CSS overrides general usage in Joomla 3
To load a custom style sheet in the Joomla tag, the following code can be added to the index.php file of your template (YOURDOMAIN.COM/templates/yourtemplate/index.php), right before the ending tag in order to ensure your file is loaded last.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');May the CSS file can have any name, and it does not have to be in the /css/ subfolder, but it's cleaner that way.
It's also possible to add like a normal CSS link tag, but this is less flexible than the above mentioned option.
Usage of !Important in CSS
Some of extensions might load their CSS styles after yours (or even add styles directly(inline-style) in the index.php file), thus overriding your overrides. It can usually be solved by using or adding !important to your styles, eg. h2{color:red!important;}
How to Override CSS in Helix 3 Joomla Template
How to Override CSS in Helix 2 Joomla Template
As many other Joomla template frameworks, Helix ii also provides can create your own custom.css file. Simply create it, and place it inside the css folder of the helix Joomla template. The template will parse it and will include it in the head section of your pages.
'->addCSS('custom.css')'in 'index.php' file.Already have an account? Login into comment