Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Add a custom css to the Backend Admin UI

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
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
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
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
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
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
Vote:
 

give it a try with

<module>
<clientResources>
<add name="epi-cms.widgets.base" path="Styles/editorStyles.css" resourceType="Style"/>
<add name="admin" path="Styles/adminStyles.css" resourceType="Style"/>
</clientResources>
</module>
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.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.