German Greek English Spanish French Italian
menu

User config files : Blog

Add custom CSS rules and javascript without modifying any file. Blog

Home/ Blog/ User config files

User config files

Code editor
Code editor

Since version 5.2 Elxis allows you to modify most extensions' CSS and javascript files directly from within the administration panel with the help of a powerful code editor from CodeMirror. However modifying extensions' files is something we don't recommend as after an update you will lose your changes. So, what we did is to introduce the user config files. You can add your custom CSS rules, or your javascript code, in these files and anything you put there will be preserved after an update.

Navigate from the side menu to Site > Code editor. On the top of the list of the existing CSS and JS files you will notice 3 filenames in bold and green colour. user.config.css is for applying custom styling, user.config-rtl.css is the RTL version of the CSS file, and user.config.js is where you can add your custom javascript.

Elxis code editor
Elxis code editor

user.config.css

Go to code editor and click on the user.config.css file. Via the code editor you can add your own custom CSS rules or overwrite existing ones. On load time Elxis checks if you have supplied custom code and if yes then it loads this file to page's head section. Moreover Elxis loads this file last in order to ensure that your CSS rules will overwrite anything pre-existing from the extensions. The best part is that you don't have to edit your template in order to load the user.config.css file as Elxis injects it automatically just before the end of the head section.

Editing CSS with editor
Editing CSS with editor

user.config.js

In this file you can add custom javascript code. As for the CSS case, Elxis includes automatically this file in your pages.

Conclusion

With the user.config files you can customize your site's style and javascript without modifying any core file. Moreover you do this from the Elxis administration panel with the help of a code editor and without having to use a filemanager or an FTP client to access the files. We strongly recommend the usage of user.config files, don't modify core CSS/JS files any more!

Previous article
Bubbles forum
Next article
Open Shop 3