Public Forums 71,145 posts

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#149438

See a working example:
http://packetmonkey.net/farrellsusma

RE: ‘Locations‘ Module on right-hand side.

Put your mouse over “Beaverdale” or “Waukee”. See that horrible background color? Yea, would like to resolve that.

When you apply either the “_red”, “_blue”, “_green” or “_black” module class suffixes to module, the CSS formatted colors for (A Active, Hover, Focus), when the module is set as “List” (Not, ‘Legacy – Vertical’), is a horrible light gray and I would like to customize it per specific color. When using the “_green” suffice, I’ll want particular hover and active colors, different settings for “_red”, “_blue”, and “_black”. I know where in the template.css the various color modules are set and have tried to add appropriate formatting, but have been unsuccessful.

If someone could help me figure out how to customize the mouse over backgrounds, I would appreciate it. Thanks.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#335934

Hello,
You probably have to overrule this line (line 1297) :

#ja-container ul.menu li a:hover, #ja-container ul.menu li a:active, #ja-container ul.menu li a:focus {...}
Try to add code like:

.module_green ul.menu li a:hover, #ja-container ul.menu li a:active, #ja-container ul.menu li a:focus {...}
Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. thewraith2

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#335982

Thanks for your response. I implemented the following code:

.module_green ul.menu li a:hover, #ja-container ul.menu li a:active, #ja-container ul.menu li a:focus {color: #fff; text-decoration: none; background-color: #000;}

However, upon doing so, there is NO change in the hover effects of the _green module. It’s still hovering with the gray color and apparently not overruling. I even attempted to include code of ‘div.module_green‘, as that is how all the other CSS formatting within the /* green */ section starts out. Still no luck.

Please advise. I appreciate your assistance.

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#335983

Ok… I have found if I comment out this line my green CSS formatting takes effect:

/* #ja-container ul.menu li a:focus { color: #069; background: #eee; } */

Of course, it does so at the removal of the formatting around NON-colored modules. So, can I make this “ja-container ul.menu…” more specific so it applies to the non-colored modules but not the green, red, blue, black colored ones?

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#335984

Think I’ve got it…added this:

div.module ul.menu li a:hover {text-decoration: none; background-color: Orange;}

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#336087

Hello,
I see I was a bit too quick posting the alternative code-line. It should be:

.module_green ul.menu li a:hover, .module_green ul.menu li a:active, .module_green ul.menu li a:focus {...}
In general indeed you have to take care to be specific in targeting just the element you want to give special style. For example you could hit just the Locations Module with its id: id=”Mod77″

Good luck,
Micrantha

[Author]

Posts