|
#1
Sep 24, 2012, 02:42 PM
|
|
Hey all,
I'm having a weird problem. I'm working on a site with a lot of custom css in css inserts, but the default css for the theme keeps overriding it - especially margins / padding, etc. I've got more !important tags in my code than I ever have before. Any ideas what the problem might be? Here's a link to the site-in-progress if needed...
http://www.laurenacooper.com/ohprefresh
|
#2
Sep 24, 2012, 04:36 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
giving a specific example would be helpful.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Sep 24, 2012, 05:15 PM
|
|
Ok, here's a specific example...
The title on posts / pages...
div.post-headline h1, div.post-headline h2 {
margin: 0;
padding: 0;
}
I have
div.post-headline h1, div.post-headline h2 {display: none !important;} in css inserts, but it obviously isn't working.
|
#4
Sep 24, 2012, 05:36 PM
|
|
Just a quick update -
I did add display: none to the headline box field on style posts and pages and that worked. But it still leaves the question of why ata is overriding my css. That was not the only instance of the problem.
|
#5
Sep 24, 2012, 05:38 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Quote:
I have
div.post-headline h1, div.post-headline h2 {display: none !important;} in css inserts, but it obviously isn't working.
|
I don't see that in teh page coe that leads me to beleive you have a syntax error before that ode that is causing all the remaining code to be skipped. check your code again.
p.s. none of your page links are working.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#6
Sep 24, 2012, 06:58 PM
|
|
Yes, there was a syntax error before that particular statement, which I fixed. Thanks for that.
It still doesn't explain why I had to use this (which came before the syntax error in the code):
Code:
p.author-name {text-align: right; font-size: 14px; padding: 0 10px 3px 0 !important;}
p.author-pets {text-align: right; font-size: 12px; padding: 0 10px 10px 0 !important;}
The theme has, from the beginning of this project, ignored my statements about padding for some reason. I don't know if I'm doing something wrong, but I've used Ata many times, and this is the first time that it's happened like this.
Also, I know the links don't work :P They're not meant to yet. But thanks for the heads-up
|
#7
Sep 24, 2012, 07:16 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You need to understand how CSS works. A CSS statment is made up of two parts: the selector and the rules. The selectors are applied following a set of precedence, for example CSS that is part of the HTML element trumps css in a style sheet. if you have two style sheets with the same selector the second one overrides the first. a CSS rule that is more specific will override on that is more general. This last thisg is what is effecitng you. When you just coded
HTML Code:
p.author-pets {text-align: right; font-size: 12px; padding: 0 10px 10px 0;}
it says 'for any p that has a class of 'author-pets' apply these rules. However there is a more specific CSS selector
HTML Code:
div.post-bodycopy p {
display: block;
margin: 0;
padding: 0;
}
which says for any P that is a child of a DIV with a class of 'post-bodycopy' apply these rules. To get your CSS to work without the !important, you needed to use the selector
HTML Code:
div.post-bodycopy p.author-pets
You should take a CSS tutorial (htmldog.com has a good intro) and learn to use FireBug in FireFox so you can see what css selectors are in use.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#8
Sep 24, 2012, 07:43 PM
|
|
I'm going to preface my reply with an advance apology if I come across as excessively terse. For some reason, everyone I've spoken with today assumes I'm stupid, ignorant, or incompetent, or any combination thereof. I'm none of the above.
I have a relatively thorough understanding of CSS. I understand specificity, and know that, for example, div.foo ul.bar is more specific than ul or ul.bar.
I even know what a pseudo element is. And, I know it will come as a shock, but I've only been using Firebug for several years now.
So I'm not coming from a zero baseline of knowledge. I'm certainly not an expert, but I'm not an idiot. I have been operating under the assumption, however, that css in the css inserts overrules statements included in the theme's default css. If THAT was my incorrect assumption, then fine. Fair enough.
Is it a full moon or something? Is everyone just in a "I want to tell people they're idiots" mood?
Thanks for your help. I do appreciate it, despite the patronizing tone. I know you guys are busy and have a lot of people here who don't know a DAMN thing about css, wordpress, or anything else, but I'm not one of those people.
|
#9
Sep 24, 2012, 11:11 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
I am sorry if my explanation seemed patronizing. You asked why and I tried to give you - and anyone else reading the thread - a detailed explanation of what was happening. I admit I took your question as not understanding how CSS works.
The CSS inserts are just added to the end of the rest of the Atahualpa CSS and, as you must know, the rules of precedence take over. Realizing you needed the !important should have clued you in, but we all miss things now and then (if I only had a dollar for every misplaced period I used coding... I'd be a richer man today )
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|