Thu, 2015-05-28 21:08
Greetings,
I have just "inherited" a Drupal website with a very complex (for me at least...) custom css stylesheet. I must perform many configuration changes in Drupal (no problem with that) but they also asked me one "little" change in the css that is driving me crazy. Here is the issue:
I have one drupal block that just contains this html code:
<a href="/category-county"><span class="case-closed">County</span></a><br> <a href="/category-nationwide"><span class="case-closed">Nationwide</span></a><br> <a href="/category-foreign"><span class="case-closed">Foreign</span></a>
I have found the "case-closed" class in the css:
p .case-closed { color: #999 }
The request is simply to change the three links above so that:
- non visited link is color #0000FF
- visited link is color #2200B6
- hover link is color #2200B6
those are just sample values, what I mean is non visited link must have one color, visited and mouse-hover another, the same one.
Well, how simple as this looks, I can't make it work. I have tried any combination of things like
a:link { color: #999;} a:visited {color: #2200B6;} a:hover {color: #22BDB6;}
that I could think of, without any result. It seems obvious to me that somewhere in that huge CSS spaghetti code there is something that overwrite whatever I write in the class definition, but... as I said is so big and ugly that it is over my skills to figure it out. So the question for the forum is:
what do I need to write INSIDE that class (so I am sure that I am not changing any other part of the css!!!) so that the links above, and them only, change colors as required?
As soon as possible I will suggest replacing that whole CSS mess with something cleaner, more maintainable, of course. But right now, I really need to make it work as required. Boss WANTS to see what those colors look like, ASAP 
Please help!
Thanks!
Fri, 2015-05-29 08:43
#1
gonnt
if you use mozilla or firefox , you can open the web console and see exactly what styles are being overridden and which CSS class definition is over riding your styles .
as for now you can try the following ::
a:link { color: #999 !important;} a:visited {color: #2200B6 !important;} a:hover {color: #22BDB6 !important}
Further referance here
https://css-tricks.com/when-using-important-is-the-right-choice/
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
but what u really need is to know how to use your web console to check whihc styles are applying !
Fri, 2015-05-29 18:41
#2
Selector, selector, selector
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.25 sans-serif; margin: 0; padding: 0: } p { font-size: 1em; } a:link .case-closed, a:visited .case-closed { color: red; } /*]]>*/ </style> </head> <body> <ul> <li> <a href="#"><span class="case-closed">country</span></a> </li> <li> <a href="#"><span>country</span></a> </li> </ul> </body> </html>
cheers,
gary
Sat, 2015-05-30 05:07
#3
About the spans
Were it my work, I'd get rid of the spans
Hi Gary,
you are right of course. As I said, I HAVE reported that the sustainable solution would be to (have the time to) rewrite a new stylesheet from scratch, and then change some HTML blocks accordingly.
HOWEVER: maybe I did not explain one thing well.
The actual MANDATORY requirement for this "patch" is ONLY that it works as required on that list of links (which as I said is the source code of a drupal block) without touching anything else in the whole site.
In other words, there is no real need to keep the spans. I just found them there when I took the job, and tried to make them work. But inside that Drupal block I can change the CSS coding as I want, as long as the result is as requested. So other solutions are very welcome, for my personal learning if nothing else, thanks!
On learning...
Wrt the other reply, which ended more or less like "learn to use the firefox developer tools": YES, I DO know I have to do that too. I'd only wish I didn't have THAT particular stylesheet as FIRST exercise. Really. I AM a beginner with CSS, but know enough to recognize very ugly code when I see it. That's why I'm looking for a temporary patch, until we can redo the whole thing properly (and much simpler...)
Sat, 2015-05-30 09:06
#4
did you try
did you try important ! ?
Tue, 2015-06-02 07:59
#5
yes, and it does the job for
yes, and it does the job for now, thanks. real solution will include substitution of the current CSS, asap
Tue, 2015-06-09 11:35
#6
If you don't want to use the
If you don't want to use the !important function everytime, you can load your custom CSS file before the other CSS files..
[Update] I read you used an custom CSS file already .. The best thing then is to create a new (extra) CSS file and let it load earlier than your other custom CSS file.
Tue, 2015-06-09 16:46
#7
A couple of notes
If you don't want to use the !important function everytime, you can load your custom CSS file before the other CSS files..
Given equal specificity, the last loaded rule will be honored. The overriding rules should be loaded after the more general rules.
[Update] I read you used an custom CSS file already .. The best thing then is to create a new (extra) CSS file and let it load earlier than your other custom CSS file.
It is a poor practice to just keep throwing new files into the mix. Is there some reason you wouldn't simply edit what you have already?
Regarding the use of "!important", it is almost certainly a symptom of a poorly designed/structured site. This is common where generic theme templates are used, as they are made predominately by theme "designers" (and I use the term sarcastically) who simply don't know what they're doing. Stuff is just piled on until any attempt to alter or maintain the code causes one thing or another to break.
cheers,
gary