Forums

Add custom .css file to core dashboard theme (v.8)

Permalink
Hi all!
I need to include some styles in dashboard interface. Does anybody know how to include custom css file into Dashboard interface. I'm using Concrete5 v8.0.2
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi vonanko,

There a multiple approaches for doing this.

Here is one way:
- open app.php
application\bootstrap\app.php
- paste this code
Events::addListener('on_before_render', function() {
    $customCSS = <<<EOT
    <style>
        #ccm-dashboard-page * {
            color: red !important;
        }
    </style>
EOT;
    // get the current page object
    $c = \Page::getCurrentPage();
    // get one instance of the view object
    $v = \View::getInstance();
    // check that $c is an object before adding the custom CSS
    if (is_object($c)) {
        // get the permissions for the current page
Viewing 15 lines of 22 lines. View entire code block.

This code can also be added to a package on_start() method.

It looks like dashboard pages all share the id "ccm-dashboard-page". You could add CSS that targets that selector.
vonanko replied on at Permalink Reply
Thanks for the answer a lot!
It's almost what I need. But is there a possibility to include my custom css-file to the dashboard (which is in my /application/themes/MY_THEME_FOLDER/css)?
I want to include a .css file to dashboard (not to add string like <style>...</style> in event function). Because I already have this string in file I want to include. Can I avoid the duplication of this css-code?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@vonanko

I am not sure how to do it when the theme is in /application. It would likely be easier if the theme was in /packages.
vonanko replied on at Permalink Reply
So, what would you do if the theme was in /packages man? Maybe I should use this approach instead?
vonanko replied on at Permalink Reply
OK! So, I think I have found a decision. Maybe it will be useful for someone.
I've edited application/bootstrap/app.php and put this inside of it:
// Overriding core asset by my custom asset from application/themes/dashboard/css folder
$al = AssetList::getInstance()
    ->getAsset('css', 'core/app')
    ->setAssetURL('/application/themes/dashboard/css/app.css');

And inside of my app.css I have added this:
@import url("../../../../concrete/css/app.css"); // Import core styles by default
@import url("../../my_theme/fonts/style.css"); // Import required styles from my_theme

And it works. I've found the idea here:https://documentation.concrete5.org/tutorials/customize-attributes-e...