1

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>
  <frontend_type>textarea</frontend_type>
  <sort_order>2</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>

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
8
  • 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()); Commented Oct 26, 2015 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 Commented Oct 27, 2015 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? Commented Oct 27, 2015 at 16:56
  • Try to debug _afterSave method. And share your current system.xml section and new backend class. Commented Oct 27, 2015 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> Commented Oct 27, 2015 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.