Changing container background color via CSS

[MattKan]

Could anybody walk me through changing the background color for a container in the Service portal? I am assuming you need to use a CSS class since there is no built in functionality for changing background color for individual containers, rows, and columns, but maybe there is a better approach.

Thanks!

Matthew

[Mike Patel]

You can do some css on browser than once you have results you want than copy css code to page and paste it.

[Shambhu5 · Accepted solution]

Hi Matt,

Yes, you are right! You will have to use CSS Class for this requirement along with the code as:

container{

background-color: <name of the color>

}

However, I have also tried to change CSS of a container through Edit Page Properties but what it does is, it changes all Containers color (in identical manner) since it is applied for entire Page. (my bad I tried this)

Another approach which I will suggest is, since you will be creating widgets for those containers, you can also provide appropriate <div> & <class> at the HTML side and use them in CSS-SCSS section for configuring/changing background-color.

Hope it helped!

Mark my answer as Correct/Helpful if that resolves your query.

Regards,
Vishrut

[MattKan]

Hi Vishrut,

Thanks for your help so far. I am having difficulty getting the style sheet imported altogether. Is there any way you could post an example? Here's what I have for each of the steps:

Service Portal - CSS

Name: module1.css

CSS: 

.module1 {
  background-color: #ff6961;
}

In the theme:

CSS Include name: moduletest

Style sheet: module1.css

Then finally in the page designer:

For the Row 1 field CSS class: 'module1'

However it does not seem to be reading from the module1 class as it does not change the background color. If I replicate the same CSS using the F12 dev tools, it does correctly change the background, so I believe it is an issue in the link chain rather than the CSS code itself. Any ideas?

Thanks, Matthew

[Shambhu5]

Hi MattKan,

Just go through these below links and check replies from Paul & Nathanfirth. That might give you some clarity.

CSS Override

Change Background color of Widget

I am also providing a link, which doesn't show how to create a CSS, but yes, inputs provided by developers might help you. Just click here . 

Just let me know if you achieved your goal 🙂

Mark it as Correct/Helpful if that helped you somehow.

Regards,
Vishrut