By alex.ihlo on

I'm in my theme trying to edit the way my Users names are formatted on the User List page. The div tag is: div .profile> div .name> a - so I wrote a rule that goes like this: .profile .name a{ font-color:#ccc;} but it did not override the original a {} rule from the beginning of style.css. How do you make it override?

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

The Firefox extension firebug us useful here. Using the inspect feature you can find the css that currently applies to the link. My guess is there is a current rule of the form some_element a where some_element is outside/above .profile so you would need to include some_element in your rule

alex.ihlo’s picture

alex.ihlo commented

Thanks nevets. yeah I just got the firebug, that things awesome! thank you.

I inspected it and the a {} rule (link rule) is overriding the rule I created. If you read what I originally wrote, I described the rule I created, which did include "some_element" (a{}) in it. I believe the rule went something like ".profile .name a {}"....so it did have the 'a'(some_element" in it. I'm just wondering now that you've told me what i did was correct, I'm wondering if there's anything in the way i wrote that rule that's not up to standards? I wrote the rule exactly as it appears in my style.css, in the original post.

Thanks again

nevets’s picture

nevets commented

Without a link to the page in question it is hard to give a specific answer.

Make sure that when you inspect a link for names in profile that it has a parent class of 'name' which has parent class of 'profile'

alex.ihlo’s picture

alex.ihlo commented

I know it sucks without a link...and I can't give you a link because it's on localhost, I was going to post some screenshots, but it seems there is no way to attach pictures anymore? I could've sworn that the forum had that capability, they might have missed it when upgrading the site to 6.x...

It has name and profile as a parent link, i'll read off the html code for it so you can see:
html .js > body > div #page> div .wrapper> div #primary> div .singlepage> div #profile> div .profile> div .name> a

I am trying to make the rule for this, so do I have to add a #profile to the beginning of the rule I create? I mean how far back do i have to bring my css rule so that it affects what I want?

nevets’s picture

nevets commented

Next step if you could, use firebug and determine the css rule(s) that current apply for that part you are trying to override

alex.ihlo’s picture

alex.ihlo commented

I did that and the rule I created actually partially showed up in the css window of firebug, though what I'm trying to change is still rendering according to the rule I'm trying to override..

What shows up in the firebug is .profile .name a{ but this area is blank, even though I do have information inside of it in my style sheet.}

So it's reading my rule, but only partially. It's not reading what's inside of my rule, only that the rule is there, if that makes any sense

nevets’s picture

nevets commented

I have had that happen, for me it always means a problem with the rule. A mistyped name or value or missing ':'/';'

Bahattee’s picture

Bahattee commented 
selector {
    color: #ffcc00 !important;
}
alex.ihlo’s picture

alex.ihlo commented

That did it, Thank you very much