7 replies [Last post]
gonnt
gonnt's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT+2
Joined: 2015-05-28
Posts: 3
Points: 4

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 Sad Please help!

Thanks!

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 !

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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>
Were it my work, I'd get rid of the spans. Used as these are, they indicate a lack of understanding of structure (html) and css. (common among theme "designers")

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gonnt
gonnt's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT+2
Joined: 2015-05-28
Posts: 3
Points: 4

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...)

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

did you try

did you try important ! ?

gonnt
gonnt's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT+2
Joined: 2015-05-28
Posts: 3
Points: 4

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

hielkio
hielkio's picture
Offline
newbie
Last seen: 6 years 7 weeks ago
Timezone: GMT+2
Joined: 2015-06-08
Posts: 3
Points: 3

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A couple of notes

hielkio wrote:

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.

Quote:

[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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.