How to customise other elements?

[muppsy007]

Hi there, just wondering how you go about changing things like $menu-padding-x for the grouped menu li items?

[Rhym]

Currently there are no hooks for your own variables, but you can always overwrite the css with extra_requirements_css in your project's config.

[muppsy007]

Thanks for the reply. Just tried that. Unfortunately the module CSS is included after extra_requirements_css, so any customization is overridden. I added this in config.yml as follows:

LeftAndMain: extra_requirements_css:

• mysite/css/branding-extra.css

Custom style is included fine, it's just disabled by the module styles being included after it when SS renders.

[Rhym]

You could get around it by adding another level of specificity to the css.

[muppsy007]

Thanks mate. I got around it a bit cleaner by creating my own Left and Main Extension that simply has an init() method with Requirements:customCSS()

class MyLeftAndMainExtension extends LeftAndMainExtension
{
    public function init()
    {
        parent::init();

        Requirements::customCSS(
            ".cms-menu .cms-menu-list li.children li a {padding-left: 40px;}"
        );
    }
}

Then adding that to my primary config.yml

LeftAndMain:
   extensions:
     - MyLeftAndMainExtension

So I can tweak the admin as I please in there.

Cheers!

[Rhym]

Great. May be worth me adding a before and after hook or something. Maybe even namespacing the document.