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
* 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.