MLE: How to apply different styles for menu and body links?

[darconny]

Hi to all,

After a few days playin' with mle module, and serching through this board, I come up with problem with styling different languages. I've read topics written by Alby regarding this, I succed in some basic styling.
For example, I can change the colors of the body text:

body{ ..... }    common styles are here

#body_en_US { color: #666666; }
#body_rs_RS { color:#333333; }
#body_fr_FR { color:#999999; }

and in temlate I have it works fine.

Also I made different header image for every language, with , also works very nice.

Now I have to make different link colors for every language, and I just dont't get it right. I tried to use something like this in stylesheet:

#a:hover_en_US {
   text-decoration: underline;
   background-color: inherit;
   color: #dc2828;
}

the same for other languages...
Nothing actually happens, ie when I cut the hover state in the main body style I get nothing, no underline etc.
What is the right syntax for this, obviously I'm missing something here?

Also, I need some advice how to apply different style colors for menu items.
First, I have a horizontal menu, like this in template:


The stylesheet is modified  "Navigation: Simple - Horizontal" menu.
Now I want to have different colors for different languages, for mouse over. This is part which has to be changed, in the menu sheet:

div#menu_horiz li a:hover {
   background-color: #45A2DD;
   color: #fff;
   text-align: center;
   height: 18px;
}

So I want to  change background color for every of three languages, but don't know how..

Sorry for bothering, and thank you very much
Darko

[RonnyK]

If you ave a body like

#body_en_US

You could style the links inside like:
#body_en_US a:hover

as that specifically sets a a:hover link inside the container #body_en_US. fit the others you could do the same, I dont think that all elements get the language behind the element. So the elements remain as they are, you can style them independently in each container.

Ronny

[darconny]

Thank you very much, Ronny. That solved the problem.

But, for the menu style sheet it's not working just like that. It seems that I have to separate all of the properties for every language, because if I make something like this:

div#menu_vert_en_US a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #a9a38b;
}

the same for other languages, and in template ...
everything messes i.e. common styles are not rendered like it should. Any thoughts on this?

Regards
Darko

[alby]

But, for the menu style sheet it's not working just like that. It seems that I have to separate all of the properties for every language, because if I make something like this:

div#menu_vert_en_US a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #a9a38b;
}

the same for other languages, and in template ...
everything messes i.e. common styles are not rendered like it should. Any thoughts on this?

I am not a css guru but in this case you can apply a style in this way:

/* en_US link style */
div#menu_vert a.en_US {
  ........
}
div#menu_vert a.en_US:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #a9a38b;
}

and in MenuManager template find a tag and add class attribute (before baclup template): class="{$lang}"

for example:

Code: Select all

  <li><a class="{$lang}" href="{$node->url}" ....

Alby

[darconny]

Thank you very much, Alby. That solved the problem with styling menu link colors. I still have some problems with behaviour of  activeparent links but I think I'll handle this following your instructions.

Thanks again and a Happy New Year to all CMSMS people