Css and angular

👨‍💻 Development Help
1

Hi everyone,

I’m using 8.6.1 and am trying to customise some css.

I’ve added the following to legacy/custom/themes/suite8/css/Dawn/style.css

/* Global styles applied to all body elements */
body{
background-color: #red!important;
}

I’m getting some strange results, sometimes the background is red, and sometimes not.
I think this has something to do with angular, in that some views are loaded using angular and others are not.

One custom module that shows the correct background colour has :

<scrm-classic-view-ui class="ng-star-inserted"><div class="classic-view-container"><iframe src="./legacy/index.php?module=Site_Site&amp;action=index" style="display: block; height: 1260px;"></iframe></div></scrm-classic-view-ui>

But another custom module ignores the background colour and has :

<scrm-list class="ng-star-inserted"><div class="list-view ng-star-inserted"><scrm-list-header><div class="list-view-header"><div class="row mr-0 justify-content-md-between justify-content-end"><div class="custom-col-4 d-none d-md-flex align-items-center"><scrm-module-title class="list-view-title"> PLANNING APPLICATIONS

I don’t know why one module is using a classic ui, and the other isn’t - or how to change the colour for the angular based one.

How can i go about troubleshooting this?

thanks :slight_smile:

2

Try out this:

config/services/module/module_routing.yaml

For Example:-

image
The email module is rendered in legacy view

image
The accounts module is rendered in Angular UI

You will have to clear your server cache after doing any changes.

3

From your instance root folder run bin/console cache:clear

 bin/console cache:clear
4

ahh, thank you.

it seems to work for stock modules, but not for custom modules?

5

Do you have those module names into module_routing.yaml file.

6

yes. making changes to the standard modules and clearing cache works, but adding custom modules has no effect?

7
8

thank you so much,
I now realise that i’ve trodden this path before and had a file in

extensions//config/module_routing.php

Which explains the different behaviour between custom modules!

I can now control the routing, but still need to figure how to modify the css for the new views?

9

still need to figure how to modify the css for the new views?

i managed to get there…making changes to the following file :

 /var/www/html/SuiteNew/core/app/shell/src/themes/suite8/css/layout/listview.css

and then running the following command from the root folder gave me a step forward :slight_smile:

 yarn run build-dev:shell
1 Like
10

So, you could see background color for all the modules?

11

Yes, all of the list view backgrounds for modules that use the new angular system worked, and for classic views the old css works

12

Awesome! It worked for you.