css override how?

[zsero]

It is a beginner question, but how can I set for example the color of an object by a class, when it is already set by another css property?

To be clear, an example:


xxx
yyy
zzz


xxx and zzz color is already set in the css property "#bulletmenu" to white. I would like use a different background and different font color for the actual menu using ".currentpage", but it doesn't work.

[jelle]

That depends in what order the css is served out. in 0.11.2 there is no forced order, so your adaptations may come before the thing you wanted to override, so that is overrides your adaptation instead. just follow the css-link in the html and read what it does. the best solution right now is to copy the css snippet that you wish to override and change the colors there (or put all colors in a separate colors snippet and remove them alltogether). I hear this has changed in 0.12beta.

[zsero]

.currentpage{font-weight: bold;} works,
.currentpage{color: red;} doesn't, because it is defined in "#menu_vert li a" property too.

I saved the page with css and it doesn't work even with text editor + browser preview.

I don't understand it why, because if I make a very simple file, it works as it should:

Code: Select all

<div id="text">
<p>text</p>
<p>text</p>
<p>text</p>
<p class="red">text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

Code: Select all

#text {
	color: black;
}

.red {
	color: red;
}

[jelle]

@Patricia: you might be wrong...

@zsero: did you look at the order in the css? does the thing you want to override have the same specifiers and does it come before yours? If it is more specific or comes after your declaration it will override yours. 

If the code you posted worked, why did you post it? It's the code that does not work as expected that you are interested in, isn't it?

Usually the method of stripping down until it works as expected is fruitfull. then you undo your actions one by one and try each time. and then all of a sudden: "ping", it dawns on you and you have learned something. (Unless you have entered the 'let's start throwing things' stage before and need a broom

[zsero]

OK, I striped it down, and now I know:
try this:

Code: Select all

<div id="text">
  <p><a>text</a></p>
  <p><a class="red">text</a></p>
  <p><a>text</a></p>
</div>

Code: Select all

.red {
	color: red;
}

#text a{
	color: blue;
}

[zsero]

I still don't know how to solve, but it is clear, that "#id a" overwrites ".class"

[LeisureLarry]

Try this

#bulletmenu {
color: red;
}

#bulletmenu .currentpage {
color: blue;
}

[zsero]

Thanks, it worked!

Finally I can do it using:

Code: Select all

#menu_vert li .currentpage

"#menu_vert li .currentpage a" doesn't work, but luckily the page generates that class only for an tag.

[zsero]

Can you have a look?
http://hasznaltlego.hu/kek/

That hover is really annoying, i think, and I cannot use "... a:hover .currentpage" because there IS the conflicting a!

Maybe removing the link for the active page could solve the problem, but that would meen digging into function.bulletmenu.php...