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.
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).
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.
Warning! Wrong JS code may slow down or even temporary damage your template and block the edit toolbar. Always make a backup first.