Add a custom css to the Backend Admin UI

London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / Content Management System 12 /

Add a custom css to the Backend Admin UI

RJK Condor

Vote:

Hi,

I would like to add a custom CSS file to the backend of optimizely cms. I have read, it should be included in some "modules.config" file, but it seems not to be included in the backend view.

Where should this modules.config file be and is there anything more to do?

Documentation on this is very rare. If there are some suggestions, I would be happy to read them.

Best, Ralph

#298647

Mar 20, 2023 12:56

Minesh Shah (Netcel)

Vote:

What are you trying to Style ?

an example of a modules.config could look like, and exists in the root of your solution

<?xml version="1.0" encoding="utf-8"?>
<module>
  <assemblies>
    <!-- This adds the Alloy template assembly to the "default module" -->
    <add assembly="Alloy" />
  </assemblies>
  <clientResources>
    <add name="epi-cms.widgets.base" path="~/Resources/Styles.css" resourceType="Style"/>
  </clientResources>
  <dojo>
    <paths>
      <add name="alloy" path="Scripts" />
    </paths>
  </dojo>
</module>

See here for more documentation : module.config (optimizely.com)

If you wanted to change the style of the editor's toolbar, you could add the following configuration to the modules.config file:

    <add name="epi-cms.widget.EditorToolbar">
      <dojoModules>
        <add name="my-custom-style" path="/my/custom/style.css"/>
      </dojoModules>
      <clientResources>
        <add name="my-custom-style" path="/my/custom/style.css"/>
      </clientResources>
    </add>

In this example, we are adding a new dojo module and client resource called "my-custom-style" that references a custom CSS file located at "/my/custom/style.css". This will apply the styles defined in that file to the editor toolbar.

#298648

Edited, Mar 20, 2023 13:26

RJK Condor

Vote:

I am trying to get rid some of these spacings between the block-attibutes and display the "hints" under the label instead of a questionmark-icon.

#298649

Mar 20, 2023 14:01

Minesh Shah (Netcel)

Vote:

I'm guessing you have seen Scotts post : Restoring Help Text For Description in Latest Optimizely CMS

#298652

Mar 20, 2023 14:31

Scott Reed - Mar 20, 2023 15:24

thanks for the call out :p

RJK Condor

Vote:

Thank you for the suggestions.

When I install a new fresh alloy and add the editorStyle.css and the modules.config files nothing happens.

content of the modules.config

<?xml version="1.0" encoding="utf-8" ?>
<module>
    <clientResources>
        <add name="epi-cms.widgets.base" path="Styles/editorStyles.css" resourceType="Style"/>
    </clientResources>
</module>

Same goes with my other project. Seems to be something missing to get opti load the module.config file.

#298692

Mar 21, 2023 7:18

Scott Reed - Mar 21, 2023 9:55

If you look in my screenshot in https://world.optimizely.com/blogs/scott-reed/dates/2023/3/restoring-help-text-for-display-name/ you'll see there's a ClientResources folder under wwwroot. You need to make sure you have that folder and the path in the module folder is relative to that folder copied to the editor by convention

RJK Condor - Mar 21, 2023 10:06

That does the trick ... Thank you
I previously also had the module.config missspelled as modules.config

MrSuro

Vote:

are there any way to add custom css to admin views (url: EPiServer/EPiServer.Cms.UI.Admin)?

#306217

Aug 04, 2023 6:22

RJK Condor - Aug 16, 2023 7:46

Have you tried my solution above?
1. create your CSS in /wwwroot/...
2. create or modify modules.config in the root of your solution as above
The path to the CSS must be relative to the /wwwroot directory

MrSuro - Aug 22, 2023 3:25

Yes, I tried. But the css/js files only append for Edit page on CMS.
Other page not working with this solution

RJK Condor - Aug 22, 2023 8:08

Give it a try with: add name="admin" path="backendCss/editorStylesAdmin.css" resourceType="Style" where "Styles/adminStyles.css" is your styling for your admin--elements

RJK Condor

Vote:

give it a try with

where "Styles/adminStyles.css" is your styling for your admin--elements

#307272

Edited, Aug 22, 2023 8:10

MrSuro - Aug 22, 2023 9:21

Thanks alot, It works.

Before this solution, im used middleware to append the link tag to html response.
Now i just remove the middleware and using module.config to load css to my Admin page.

RJK Condor - Aug 22, 2023 9:35

I'm Glad to help.

This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.