CSS Sonata Admin

I would like to know why my dashboard does not change color when I change the SonataAdmin CSS.

It takes the css into account: – bundles/sonataadmin/vendor/admin-lte/dist/css/skins/skin-black.min.css

But for example if I try to call the file: skin-blue.min.css
Nothing happens, while the file exists :/

I do not understand at all.

Here is my config.yml:

sonata_admin:
security:
    handler:              sonata.admin.security.handler.noop
    acl_user_manager:     null
title:                'CheerUp!'
title_logo:           favicon.ico
templates:
    user_block:           'SonataAdminBundle:Core:user_block.html.twig'
    add_block:            'SonataAdminBundle:Core:add_block.html.twig'
    layout:               'SonataAdminBundle::standard_layout.html.twig'
    ajax:                 'SonataAdminBundle::ajax_layout.html.twig'
    dashboard:            'SonataAdminBundle:Core:dashboard.html.twig'
    search:               'SonataAdminBundle:Core:search.html.twig'
    list:                 'SonataAdminBundle:CRUD:list.html.twig'
    filter:               'SonataAdminBundle:Form:filter_admin_fields.html.twig'
    show:                 'SonataAdminBundle:CRUD:show.html.twig'
    show_compare:         'SonataAdminBundle:CRUD:show_compare.html.twig'
    edit:                 'SonataAdminBundle:CRUD:edit.html.twig'
    preview:              'SonataAdminBundle:CRUD:preview.html.twig'
    history:              'SonataAdminBundle:CRUD:history.html.twig'
    acl:                  'SonataAdminBundle:CRUD:acl.html.twig'
    history_revision_timestamp:  'SonataAdminBundle:CRUD:history_revision_timestamp.html.twig'
    action:               'SonataAdminBundle:CRUD:action.html.twig'
    select:               'SonataAdminBundle:CRUD:list__select.html.twig'
    list_block:           'SonataAdminBundle:Block:block_admin_list.html.twig'
    search_result_block:  'SonataAdminBundle:Block:block_search_result.html.twig'
    short_object_description:  'SonataAdminBundle:Helper:short-object-description.html.twig'
    delete:               'SonataAdminBundle:CRUD:delete.html.twig'
    batch:                'SonataAdminBundle:CRUD:list__batch.html.twig'
    batch_confirmation:   'SonataAdminBundle:CRUD:batch_confirmation.html.twig'
    inner_list_row:       'SonataAdminBundle:CRUD:list_inner_row.html.twig'
    outer_list_rows_mosaic:  'SonataAdminBundle:CRUD:list_outer_rows_mosaic.html.twig'
    outer_list_rows_list:  'SonataAdminBundle:CRUD:list_outer_rows_list.html.twig'
    outer_list_rows_tree:  'SonataAdminBundle:CRUD:list_outer_rows_tree.html.twig'
    base_list_field:      'SonataAdminBundle:CRUD:base_list_field.html.twig'
    pager_links:          'SonataAdminBundle:Pager:links.html.twig'
    pager_results:        'SonataAdminBundle:Pager:results.html.twig'
    tab_menu_template:    'SonataAdminBundle:Core:tab_menu_template.html.twig'
    knp_menu_template:    'SonataAdminBundle:Menu:sonata_menu.html.twig'
assets:
    stylesheets:

        # Defaults:
        - bundles/sonataadmin/vendor/admin-lte/dist/css/skins/skin-black.min.css
        - bundles/sonatacore/vendor/bootstrap/dist/css/bootstrap.min.css
        - bundles/sonatacore/vendor/components-font-awesome/css/font-awesome.min.css
        - bundles/sonatacore/vendor/ionicons/css/ionicons.min.css
        - bundles/sonataadmin/vendor/admin-lte/dist/css/AdminLTE.min.css
        - bundles/sonataadmin/vendor/iCheck/skins/square/blue.css
        - bundles/sonatacore/vendor/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css
        - bundles/sonataadmin/vendor/jqueryui/themes/base/jquery-ui.css
        - bundles/sonatacore/vendor/select2/select2.css
        - bundles/sonatacore/vendor/select2-bootstrap-css/select2-bootstrap.min.css
        - bundles/sonataadmin/vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css
        - bundles/sonataadmin/css/styles.css
        - bundles/sonataadmin/css/layout.css
        - bundles/sonataadmin/css/tree.css
        - bundles/sonataadmin/css/colors.css
    javascripts:

            # Defaults:
            - bundles/sonatacore/vendor/jquery/dist/jquery.min.js
            - bundles/sonataadmin/vendor/jquery.scrollTo/jquery.scrollTo.min.js
            - bundles/sonatacore/vendor/moment/min/moment.min.js
            - bundles/sonataadmin/vendor/jqueryui/ui/minified/jquery-ui.min.js
            - bundles/sonataadmin/vendor/jqueryui/ui/minified/i18n/jquery-ui-i18n.min.js
            - bundles/sonatacore/vendor/bootstrap/dist/js/bootstrap.min.js
            - bundles/sonatacore/vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js
            - bundles/sonataadmin/vendor/jquery-form/jquery.form.js
            - bundles/sonataadmin/jquery/jquery.confirmExit.js
            - bundles/sonataadmin/vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js
            - bundles/sonatacore/vendor/select2/select2.min.js
            - bundles/sonataadmin/vendor/admin-lte/dist/js/app.min.js
            - bundles/sonataadmin/vendor/iCheck/icheck.min.js
            - bundles/sonataadmin/vendor/slimScroll/jquery.slimscroll.min.js
            - bundles/sonataadmin/vendor/waypoints/lib/jquery.waypoints.min.js
            - bundles/sonataadmin/vendor/waypoints/lib/shortcuts/sticky.min.js
            - bundles/sonataadmin/Admin.js
            - bundles/sonataadmin/treeview.js

Thank you for your answers

What you need to do:

1. In the configuration of Sonata, change the CSS to the color you want:

sonata_admin:
    # ...
    assets:
        stylesheets:
            - bundles/sonataadmin/vendor/admin-lte/dist/css/skins/skin-blue.min.css

2. Override the standard_layout.html.twig by coping the original file located in

/vendor/sonata-project/admin-bundle/Resources/views/

to your own bundle:

/src/AppBundle/Resources/views/

3. Change the Sonata configuration to make use of your own

standard_layout.html.twig

template:

sonata_admin:
    # ...
    templates:
        layout: 'AppBundle::standard_layout.html.twig'

4. Inside your

standard_layout.html.twig,

go to the html <body> tag and rename the css class skin-black to skin-blue.

<body {% block body_attributes %}class="sonata-bc skin-blue fixed"{% endblock %}>

5. Rebuild the project’s assets by running the following command:

php bin/console assets:install

You should be good to go. Enjoy!

UPDATE: Tested without rebuilding the assets – still work.