change custom module 1-4 background color

osseo

Hi,
I want to assign the background color in module position 1 to 4 with a color #ddd (so it looks similar to the accordion ACE module below). I've added the following in custom.css:
.t3-position-1{background:#ddd !important;}
.t3-position-2{background:#ddd !important;}
.t3-position-3{background:#ddd !important;}
.t3-position-4{background:#ddd !important;}

However, the background color is still white, what did I miss?
Also, can I assign a different color (#fff) to those module position 1-4 on a different page (for example the background for those position will be white on the homepage)?

Please help, thanks!

Ninja

osseo
Hi
Use this code

.t3-spotlight-1 > div:nth-child(n+1) {background:orange;}


.t3-spotlight-1 > div:nth-child(n+2) {background:blue;}


.t3-spotlight-1 > div:nth-child(n+3) {background:green;}


.t3-spotlight-1 > div:nth-child(n+4) {background:red;}

change the color value as per needs.

osseo

Ninja Thanks for the code, but I want to make the module background a light grey color that will extend to "full browser width", just like the background color in "contentsliderbelow" module that goes full width. And how can I make it so it won't change the background color that's in the same module position that's on a different page? For example, I want Position 1-4 on the homepage stays as "white background" (https://wwwstaging.district279.org/) Thanks for your help.

aman204

osseo Hi

To be more precise and avoid confusion/ambiguity in addressing your query, Kindly provide screenshot marked with annotations showing as to what you wish to derive.

This should really help to ensure that we are able to address your query more appropriately.

osseo

aman204 Please see screenshot below.
#1. I want "Row A" (Position 1 to 4) to have full browser width grey background like "Row B" (Position contentsliderbelow).
#2. Can I assign the grey color for module position 1-4 ONLY to this page and not changing the color for position 1-4 on other pages, like the homepage (I want to keep it white on homepage)?

Thanks!

Ninja

osseo
Hi
Use this code

.spotlightbg-1  {background:#ddd;}

For the module color i already shared the code that you can use to change bg color for each module.

Regards

osseo

Ninja Yes, that does make the background color goes full width. However, it also changes the color on other pages. My question #2 was if I can make this background color adjustment only apply to a specific page instead of the whole site? For example, only on the enroll demo page, the position 1-4 are grey, the same position stays "white" on homepage. I've tired using "module class suffix" to assign the color in custom.css, but it didn't work, please help? Thanks again!

Ninja

osseo
Hi
use this

.itemid-1177 .spotlightbg-1  {background:#ddd;}

1177 is the menu item id that work only for this menu.

this code in custom.css file that make them white

.t3-spotlight-1 > div:nth-child(n+1) {background:#fff;}
.t3-spotlight-1 > div:nth-child(n+2) {background:#fff;}
.t3-spotlight-1 > div:nth-child(n+3) {background:#fff;}
.t3-spotlight-1 > div:nth-child(n+4) {background:#fff;}

you can add the item id if you want to apply it only for the demopage, as i shared in example.

Regards