Public Forums 71,145 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#123003

After having worked with a couple different JA Templates, I’ve noticed that when I add soem custome CSS menues (generally in a custom module), there is often a conflict with certain functions relating to the pre-existing CSS rules within the original tempalte file(s).

Usually, this has to do with an “arrow” graphic or a hover/active rule.

Now, I WANT to use the original rules for things like the mainmenu (for which it was intended), but I DON’T WANT To have those embedded rules trumping my custom CSS menus that I create and put into custom modules.

How can this be accomplished? Is there a particular hack or additional rule I can utilize so that my custom CSS menus function independently of the original/embedded CSS rules?

For an example of what I am talking about, see a WIP HERE based originally on JA-POLLUX.

The “embeded” CSS rules for menus is driving the top menu and the main menu (just under the logo).
My custom CSS menu is in the bottom “footer” bar (i.e. About UIs, FAQ, Terms & Conditions, etc.). Notice how, on mouseover/hover, the text turns to red as opposed to remaining white (as I have coded within the custom CSS rules in the custom module). Obviously, the site’s original/embedded CSS for active/hover is trumping my custom CSS.

How can I overcome this issue?

:((

TOM

[bernhar Friend bernharJoin date: July 2006Posts: 214Downloads:0Uploads:1 Thanks: 3 Thanked: 3 times in 1 posts]

#230315

What you call trumping is exactly what the “c” in css stands for: cascading.
Every setting of a rule in css is in a way percolated downwards unless you definitely choose another setting. What overrules what is stated explicitely in the W3C guide for the language CSS.

If you want something to have another color than the inherited one why don´t you just make a new css class?

Or did I misunderstand you?

Bernhard

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#230316

That’s what I thought I did in creating my custom CSS for the menus I made.

I guess what I really need to know is how can I go about arranging things so that the CSS rules for my custom menu(s) apply ONLY to my custom menus, and the CSS for the rest of the site applies to ONLY the rest of the site – ya know what I mean?

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#230318

A little busy here right now,but you can contact me anytime if you need it more described.

Lets say you wanna have different styling at the bottom and right side,then you can add something line this in the css file(

#bottom a:hover, #bottom a:active, #bottom a:focus,#right a:hover, #right a:active, #right a:focus {
And add the font,colors,size in there

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#230329

I think I understand what I need to do … I will try working with it tonight and see if I can’t configure things within the main templat.css file rather than a custom module with custom code.

[Author]

Posts