I'm looking to add an option to a module that gives users the power to override CSS styling. The option in system.xml looks like this:

 <additional_css translate="label, comment">
  <label>Additional CSS:</label>

Where I'm stuck is where to put the contents of this option. Ideally it is added to a CSS file that is loaded after the main module CSS is loaded. However I don't know if this is even possible. Anyone who has experience with this?


You can use custom backend_model for system field.

Add the following line <backend_model>your_module/config_css</backend_model> for <additional_css translate="label, comment"> node.

And create new model:

class Your_Module_Model_Config_Css extends Mage_Core_Model_Config_Data
    protected function _afterSave()
        if ($this->isValueChanged()) {
            try {
                $ioFile = new Varien_Io_File();
                $ioFile->open(array('path' => ***specify path to your css file***));
                $ioFile->filePutContent(***specify path to your css file*** . 'additional.css', $this->getValue());
            } catch (Exception $e) {
                // TODO: add error msg
        return parent::_afterSave();

Don't forget change pathes to file and class name

When you save config, content in additional.css will be changed as separated css file.

And you can add the separated css file by addCss or addItem methods in layout.

  • I'm pretty sure we're on the right track with your answer, however I'm still not able to get this to work and I think the path to the CSS file is causing the problem. In my module option I can see that the input is being saved but the assigned custom.css file is not being populated. This is how I configured the paths: $ioFile->open(array('path' => 'my_module/css')); $ioFile->filePutContent('my_module/css/' . 'custom.css', $this->getValue()); – Badger Oct 26 '15 at 21:29
  • try to use full path for open and filePutContent. BP . DS . 'my_module' . DS . 'css' for open call and BP . DS . 'my_module' . DS . 'css' . DS . 'custom.css' for `filePutContent – DmitryFurs Oct 27 '15 at 15:42
  • It's not working. I'm also not sure whether I should define DS and BP first in the function but even declaring the full URL to the CSS won't make it work. I'm I missing something here? – Badger Oct 27 '15 at 16:56
  • Try to debug _afterSave method. And share your current system.xml section and new backend class. – DmitryFurs Oct 27 '15 at 17:36
  • <additional_css translate="label, comment"> <label>Additional CSS:</label> <frontend_type>textarea</frontend_type> <backend_model>frontpage/cssconfig</backend_model> <sort_order>40</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </additional_css> – Badger Oct 27 '15 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.