I'm fairly new to Drupal. I uploaded my style sheet to my theme folder, and modified the .info file to include my style sheet. I'm having issues with properties from my sheet being overwritten by other properties from other style sheets. When I inspect the element in question with Firebug I see that two of my properties are being overwritten by the #page-wrapper property. How do I get my properties to display and not be over-written?
#page-wrapper a {
color: red;
font-family: 'Georgia','Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
font-style: italic;
}
#page-wrapper * {
-moz-box-sizing: border-box;
}
.featured-rollover a {
color: blue;
font-family: Verdana,Geneva,sans-serif;
font-size: 18px;
line-height: 30px;
}
My color and font are being over-written by #page-wrapper but I don't see page-wrapper anywhere in the html:
<div class="views-row views-row-3 views-row-odd clearfix">
<div>
<span class="featured-rollover">
<a href="/history-language/village">Village</a>
</span>
</div>
</div>Thank you!
Comments
Are you sure your css is
Are you sure your css is picked up and applied, then overwritten by another file? Just to avoid a misunderstanding. If your css isn't used at all, there are other things to check.
page-wrapper is a div that surrounds the entire page. You'll find it in page.tpl.php, I think.
You can try and place you own css file in the .info file below the others so that your own properties, that might contradict the with existing properties, are read and applied last.
If nothing helps, you can always use
!importantafter each property.There are a few things to
There are a few things to consider here:
1) CSS with a higher specificity will always take precedence. Compare the following two pieces of code:
body .page-wrapper:background:#000;.page-wrapper:background:#FF0000;The first piece of code has a higher specificity due to the 'body' selector, therefore the background color will be #000 no matter where in the code these two piece of code lie.
2) If two items have the same specificity, the one that comes last will take precedence:
.page-wrapper:background:#000;.page-wrapper:background:#FF0000;Both items have the same specificity, therefore the second piece of code will take precedence and the background color will be #FF0000.
Regarding point 2, in Drupal CSS is loaded in the following order: System -> Module -> Theme. So if you want to override system CSS, then you can use the same selector as the system, and put it in any module or theme. Or if you want to override a contributed module's CSS, you can use the same selector and put it in your theme.
Hopefully this helps you to figure out the answer to your problem on your own.
Contact me to contract me for D7 -> D10/11 migrations.
thanks
Thank you for the clear explanation about css specificity- I didn't know that. I will try using the system selector in my css file and see if that does the trick.
specificity and Views. How to override ID's??
Thank you for the replies. I have a followup question, related to specificity and Views. Views allows me to add class names (not ID's) to fields for styling purposes. However, I need my style to override an ID, but I can't do that with only classes (because of specificity).
So how do I override #page-wrapper if I'm limited to classes? Do I have to use the !important tag in my css definition to force override of the #page-wrapper id? What is the best practice here? Thanks.
Specificity works a little
Specificity works a little different than that. You don't have to override the exact selector. Rather, the specificity works on a sort of points system. This means you don't need an ID specifically for overriding purposes.
Read this article to get a better understanding of how it works, as it explains it in much better depth than I can: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you...
Contact me to contract me for D7 -> D10/11 migrations.
Yes, I understand specificity
Yes, I understand specificity works on a point scale. So how do I add more 'points' ie more specificity to my View fields if I can only add class tags? In Views I'm limited to classes. The way I understand the issue I could add a dozen class tags to my element and it still would not over-ride the id tag. Is there a way around this apparent dilemma?
You can add a class to your
You can add a class to your view in Views, for example .specific-class.
Then in your CSS, if you want to target the element in the view, and only that element, you can use something like:
html body #page-wrapper .specific-classThis is a random example, but as you can see, I've been very specific with my selectors, which should give it a pretty strong specificity.
If this doesn't answer your question, then please give a little more information about the specific problem you are facing - give us the class name you are using, and the CSS that you are having troubles overriding.
Contact me to contract me for D7 -> D10/11 migrations.
You can give a class in
You can give a class in Views, such as .specific-class.
Then in your CSS, you can be very specific with that class:
html body #page-wrapper #some-div .specific-classPlease note the above is an entirely arbitrary example and likely won't work for your situation since it's doubtful that you have a div named #some-div, and very possibly do not have #page-wrapper either, but I'm just showing how you can be specific with the class name you use in views.
Contact me to contract me for D7 -> D10/11 migrations.
Jaypan,Thank you for all
Jaypan,
Thank you for all your help. I think I'm following you. I see how I can be as specific as I like in my class definition (in the css file). I'll look at the structure of my html and come up with a css rule that fits the bill. Thanks again! I think this info will be invaluable for me as I build and tweak css in the future.