How do Create Custom CSS Style in Helix Joomla Templates


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.

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

Helix 3 Framework Custom CSS Option by JoomShaper

  • 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.
  • (1 Ratings)