Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Default CSS (css.php) overriding CSS inserts?


  #1  
Old Sep 24, 2012, 02:42 PM
crashley1784
 
81 posts · May 2009
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  
Old Sep 24, 2012, 04:36 PM
juggledad's Avatar
juggledad
 
23,687 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  
Old Sep 24, 2012, 05:15 PM
crashley1784
 
81 posts · May 2009
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  
Old Sep 24, 2012, 05:36 PM
crashley1784
 
81 posts · May 2009
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  
Old Sep 24, 2012, 05:38 PM
juggledad's Avatar
juggledad
 
23,687 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  
Old Sep 24, 2012, 06:58 PM
crashley1784
 
81 posts · May 2009
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  
Old Sep 24, 2012, 07:16 PM
juggledad's Avatar
juggledad
 
23,687 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  
Old Sep 24, 2012, 07:43 PM
crashley1784
 
81 posts · May 2009
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  
Old Sep 24, 2012, 11:11 PM
juggledad's Avatar
juggledad
 
23,687 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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] 3.5.3 Default text in ATO>Add HTML/CSS Inserts>CSS Inserts boris_mcnorris New Versions, & Updating 4 Oct 16, 2010 04:57 PM
ADD HTML/CSS Inserts -- 3.5.1 --- Need to remove default CSS Inserts ortho New Versions, & Updating 0 Jun 23, 2010 04:17 PM
colour not visible theme overriding? Ddabrai Center area post/pages 4 Jan 29, 2010 12:29 PM


All times are GMT -6. The time now is 02:54 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.