We understand that there are times where you want to add your customize css codes but do not want to make these changes within the core css file to avoid overwritten by updates. Pixel template allows you to add custom css code in the template settings. Navigate to Extensions > Templates > Styles > (Pixel) > Template Options.

Custom Code

You can easily customize Pixel template with your own custom code, for example: CSS, JavaScript, Metatags, links and verification code by using the custom fields in that section of settings. Inserting custom code before your Joomla website’s </head> and/or </body> tags is a common requirement for a variety of scripts and services (e.g. Google Analytics).

Before < / head >

Any code you place here will appear in the < head > section of every page of your site. This feature is useful when you need to add verification code, extra Meta Tags, HTML Links Tags and other metadata. This feature is also very useful if you need to input a tracking code from Google Analytics.

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.

Always check if added code works correctly after saving.


Before < / body >

Any code you place here will appear at the bottom of the body section of all pages of your site. This feature is useful if you need to input a tracking code for a state counter such as Clicky. Some developers recommend to use their code should go directly before the closing body tag </body> of your page(s).


Custom CSS

Using Custom CSS gives you the power to create your unique design and allow you to customize the appearance of selected elements (colors, size etc.). You can use custom CSS to add your styles (code tweaks) or overwrite default CSS from a template or extension. This option is useful for small design changes. This is only for raw CSS code, do not use HTML or PHP code here.

For more extensive design changes (more than a few lines of code) we suggest using the custom.css file instead. By default custom.css file doesn’t exist, you have to create a new file (custom.css) inside /css folder of the template.

Warning! Please do not edit the template.css or any other CSS file from the Pixel template. The reason being that all of your changes will be overwritten by a template engine (reverting back to original code). Instead, we suggest using custom.css file where you can override the default CSS code created by the our team.


Custom JavaScript

Use this field to inject custom JavaScript to the whole website. It loads your custom Javascript code after all other JavaScript files (except special hard coded occasions), allowing you to be the last one who will affect your website. Add here only raw JavaScript code without starting tags.

For longer custom JavaScript code we suggest to use the custom.js file instead. By default this file doesn’t exist, you have to create a new file inside /js folder of template.

Warning! Wrong JS code may slow down or even temporary damage your template and block the edit toolbar. Always make a backup first.

Prev Article
Next Article