Right way to change Sonata Admin Bundle Css?

Question

I use the Sonata Admin Bundle with it's own bootstrap file. I am new to less, but I think I understand what it does.

So, now I want change the main link color ( @brand-primary in variables.less ) of sonata admin. How and where should I do that ?

We can all agree it should not be changed in the vendor folder, nor should it be changed in the installed assets. And where should I compile it to ?

I am a bit lost here, any help would be appreciated !

Answer 1

If you need to change css for every page in sonata admin, then you could override default template(layout) like this:

config.yml

sonata_admin:
    templates:
       //path to new layout
       layout: 'YourBundle:Admin:layout.html.twig'

YourBundle:Admin:layout.html.twig

{% extends 'SonataAdminBundle::standard_layout.html.twig' %}


//override stylesheets here, or rewrite css if you need
{% block stylesheets %}
    //if you call {{ parent() }},  it will load all sonata css for admin layout
    {{ parent() }}
    {% stylesheets'bundles/bundle/less/layout.css' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

{% endblock %}

Answer 2

You are able to add new stylesheet(s) in all admin templates and override needed properties without redefining stadnard layout by configuring assets :

sonata_admin:
    assets:
        extra_stylesheets:
            - build/admin/css/new.css # your css-file to add

It designed to include default css files in first place and only then add extra additional stylesheets from configuration above. So your properties should override vendors properties in cascade way. But it is vendors logics and can be changed anytime, so I would not rely on it. Instead it could be a good idea to remove default Sonata css file:

sonata_admin:
    assets:
        remove_stylesheets:
            - bundles/sonataadmin/css/old.css # vendor's css-file to remove