different style for same module position on different page?

osseo

Hi - How can I have a different css styles for the same module position (i.e. Position 1) but on different page?
For example, I want to have a css background for Position 1 on homepage, but a different background color for Position 1 on About us page.

Thanks.

Ninja

osseo
Hi
You can use Module suffix to apply different style those published on same module position.
This work only for the Module area not module position.
https://docs.joomla.org/Module_Class_Suffix
Define the style code in custom.css file.

Regards

osseo

Thank you for the info.
I put in the "menu id 1224" for the background color for module position 1-4 to apply only on this page: https://www.district279.org/demo-enroll.
However, I can't figure out why the background color didn't extend to the full page width? Please see my screenshot below how I want the gray background extend to cover the full browser width. The code I use is this:
.itemid-1244 .spotlightbg-1 {background:#ddd !important;}

Thanks.

teitbite

osseo Hi. You may add this to css:

.itemid-1244 .t3-top-sl { width: 100%; background:#ddd !important; }

.itemid-1244 .t3-top-sl .row { width: 980px; margin: 0 auto; }

osseo

Hi teitbite

I want the color background to extend to "full browser width" so I don't want to set a limit of 980px width so should I set it to "100%" instead of 980px? But then why my code .itemid-1244 .spotlightbg-1 {background:#ddd !important;} didn't work?

Thanks!

osseo

teitbite

The script didn't work as it spread out the icons too far apart. I want the 4 icons to stay the same width apart (see the top half of my screenshot), after adding the css code it did extended the background but also made the icons further apart (on the bottom half of my screenshot).

Ninja

osseo
Hi
Spotlight position are not full width http://prntscr.com/pelrcw
So the background on this position not cover the area that is not part of module position container.
If you want to increase the width to full width It will look like this http://prntscr.com/pelroz

osseo

The script works this time! Very odd, maybe I was looking at the old cahce??
Thank You!

osseo

Ninja
I know you did help me to make it a full width background before, that's where the first screenshot coming from.... it's on our internal testing site that's why I'm trying to duplicate that on the live site.
It is the same set up so the code should work and I tried searching our support chat from the past and I can't seem to find it... can you help please?

Thanks!

teitbite

osseo Hi. I just checked and the code I gave You worked. Can You please put it back so I'll check why wasn't it showing correctly?

teitbite

osseo Hi. Great to hear that. Can this thread be closed or do You need anything else done.