Custom "Visitor Groups" styling in Dashboards interface for CMS

rabo

Vote:

Hi Episerver support,

We're having a hard time figuring out how we can apply custom styling to the Visitor Groups page in the CMS Dashboards interface.

We have a custom styling module which loads succesfully into the "Edit" part of the CMS Dashboard, so that part works as intended.

It has however been challenging for us to discover how to get this module into the "Admin" and "Visitor Groups" parts of the CMS Dashboard.

We are trying to solve this issue with the standard styling of visitor groups:

The styling unfortunately means that it is impossible to select any of the criteria not shown in the visible part of the box. Therefore, we wanted to override the styling to apply the following:

#criteriaCategoryContainer.epi-criteriaCategoryContainer {
    height: auto;
}

Which, when we do it directly through Developer Tools, appears to solve the issue. However, as mentioned, getting this custom styling into the Visitor Groups dashboard has proven troublesome. The documentation (https://world.episerver.com/documentation/developer-guides/CMS/client-resources/) doesn't seem to make any mention of the "Admin" or "Visitor groups" parts of the dashboard, and the other people asking the same question online go without an answer, e.g.:

- https://world.episerver.com/forum/developer-forum/Developer-to-developer/Thread-Container/2018/9/easiest-way-to-theme-admin-gui/

- https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2019/10/override-admin-ui-css--anyone-know-how-11-5-3/

We tried the approach outlined here as well:

- https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2015/5/inject-jscss-into-cms-edit-view/

Which stipulates that custom styling can be included without being in a 'module', but this approach has not worked for us at all so far.

The only approach we haven't tried is setting up a complete custom theme. We are wary of this approach since it would make upgrading Episerver harder, as we would need to maintain that custom theme ourselves, instead of just overriding specific stylings as needed.

Episerver CMS version: 11.14.1.0.

#227443

Edited, Sep 04, 2020 7:31

Tomas Hensrud Gulla

Vote:

To include a stylesheet in admin mode, just include the following in your module.config:

<clientResources>
    <add name="navigation" path="Styles/Styles.css" resourceType="Style"/>
</clientResources>

Make sure to use navigation, and place the file in /ClientResources/Styles/Styles.css

Verify that the CSS file gets loaded. You could do this using F12 dev tools in Chrome, and look at the Sources-tab.

I just tested this. The css file gets loaded, and the style is applied.

#227444

Edited, Sep 04, 2020 9:28

rabo

Vote:

Hi Tomas,

Thanks a lot for your quick response. It did indeed work. I did the following:

Created a 'module.config' file in the root of the project with the following content:

<?xml version="1.0" encoding="utf-8"?>

<module>

<clientResources>

<add name="navigation" path="Styles/custom-styles.css" resourceType="Style" />

</clientResources>

</module>

Created a "ClientResources" folder in the root (same root as the above 'module.config') with a "Styles" subfolder containing the .css file

Finally I verified that the script was indeed loaded, by using Chrome Developer Tools:

Thanks again!

#227450

Edited, Sep 04, 2020 12:50

Tomas Hensrud Gulla - Sep 04, 2020 12:52

Happy to help - glad it worked out! :-)