Jump to content
Sign in to follow this  
ryanvarley

CSS troubles - browsers and child themes

Recommended Posts

ryanvarley

I've always used custom css in the admin panel on pagelines because using a child theme has very different effects when using exactly the same code. The main changes is some rules no longer work. Why is this? Im also having a huge hassle over getting browsers other than chrome to accept some changes. for example in chrome this works. #content .content-pad {padding: 0;} #sidebar-wrap { background-color:#EBEBEB;} but it has no effect in firefox or IE. i am trying to remove the padding on the main body (content-pad) so the sidebar and content extend to the edges without effecting content-pad in the brandnav.

Share this post


Link to post
Share on other sites
cfimortgage
I would check the page but I am pretty sure those got turned into classes instead of ids. [code] .content .content-pad {padding: 0;} .sidebar-wrap { background-color:#EBEBEB;} [/code]

Share this post


Link to post
Share on other sites
ryanvarley
They do seem to be id's. The layout stylesheet contains this code (from firebug) [code]#content .content-pad { padding-top: 10px; .content-pad { padding: 15px; }[/code] and i want to overwrite the content pad for just the #content because .content-pad is used all over the place. making these changes in firebug works fine but once added to the custom css or child theme it has no effect except in chrome.

Share this post


Link to post
Share on other sites
Jenny
Some of the CSS selectors have changed, however, it is good practice to get in the habit of adding !important after every CSS element you add to the stylesheet. Just add it like this: [code] #sidebar-wrap { background-color: #EBEBEB !important; } [/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
ryanvarley
I thought it was bad practise to add !important as not all older browsers support it and it can have unintended effects? I've used it elsewhere as a last resort in someplaces. Also i have tried this and it dosnt work! im having massive problems with 2.0 in this respect, chrome seems to be the only browser that will accept changes.

Share this post


Link to post
Share on other sites
Simon
There was a IE6 bug with important, but it is a CSS1 spec, been around since the last ice age.

Share this post


Link to post
Share on other sites
ryanvarley
ah ok, It still doesn't work though. take a look at http://ryanvarley.co.uk/ The code that dosnt seem to be working is this [code]/*sidebar*/ #sidebar-wrap { background-color:#EBEBEB !important; /*border:2px solid black; border-top:0;*/ } /*extras*/ .textwidget p, .post-excerpt p { text-align:justify;}[/code] note the !important after background-color isnt necessary for chrome but has no effect either way in firefox or ie. is the dynamic css overwriting some of this or is there some other behind the scenes framework problem here? I am building this site from scratch on 2.0 but never had any of these sorts of problems on 1.5 which suggests some sort of issue in the framework to me? firebug confirms these should be the correct selectors.

Share this post


Link to post
Share on other sites
Simon
i put this at the top of your style.css in firebug: [code]#sidebar1 { background-color:#EBEBEB; }[/code] And it changed the color fine, i think you have some broken comments code or unclosed code braces.

Share this post


Link to post
Share on other sites
ryanvarley
I had thought about that (broken comments code) but dreamweaver wasnt flagging anything up. Anyway i used the The W3C CSS Validation Service and i found this. [code]h2.entry-title { font-size:25px;" }[/code] That quotation mark has caused me hours of hassle and i have no idea how it go there. Thanks for the help, and new top tip for everyone, if nothing seems to be working run your code through the validator here. [url="http://validator.w3.org/"]http://validator.w3.org/[/url]

Share this post


Link to post
Share on other sites
Rob
Ryan, CSS isn't really my particular skill so please take this information with that in mind. I looked at your sidebar in Firefox using Firebug. I did not find the sidebar-wrap element (which surprised me) but I did find this: [code].widget-pad { padding: 10px; }[/code] I'm wondering if you need to add the background color there in order to achieve your goal. I also noted that in Chrome, the sidebar joins up nicely to the branding area. However, in Firefox, there appears to be extra padding, so I'm thinking there may be need for some sort of modification to remove padding or, simply move the sidebar up. Perhaps a combination of both. Now the odd thing here is that on one of my sites migrated into PageLines Framework I have the line below in my Custom CSS, which helps to bring the sidebar up, along side the feature slider. So I'm totally confused myself. [code].home #sidebar-wrap{margin-top:-412px;}[/code] I hope this helps. As Jenny mentioned, some of the selectors have changed, so it's a whole new world for me to learn.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
I will flag that to the developers, and I'm glad that you found it.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ryanvarley
I should add that the mistake was in [b]my code[/b] so it was my mistake, the framework itself is fine. The #sidebar-wrap selector does exist but its quite high up - enclosing the entire sidebar area (and anything you put in it). Thanks for your responses.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×