Jump to content
Sign in to follow this  
wedesignstudios

How to change post-nav background color?

Recommended Posts

wedesignstudios

I've been trying to change the post-nav background color by placing the following in the Framework child theme css: .post-nav, .current_posts_info { background: green; } However, no color change occurs. When I place the same code in the custom css section in the Pagelines settings area the color changes. I want to conform to professional coding standards and place this in the child theme css. Any idea why this won't work in the child theme css?

Share this post


Link to post
Share on other sites
mackenzie
I believe the correct syntax would be something like this: [code] background-color: #000000;[/code] Just change the # color to one that is green

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
wedesignstudios
I think my point was missed. The CSS code only works when it is placed in the "Custom Code" section of the PageLines global settings area. The same code fails to work when I place it in the child theme. This is not the professional way to make style changes. PageLines even points this out in the Custom Code section, "Note: The professional way to customize your site is using a child theme, or customization plugin". Any advice on why the CSS is not working when placed in the child theme?

Share this post


Link to post
Share on other sites
Jenny
Try to add !important after the color, like [code]background-color: #000000 !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
wedesignstudios
I added the !important and still nothing happens in the child theme. This isn't the only case where CSS has stopped functioning in the child theme for me. I have had two other stylings fail on me in the child theme but they work in the PageLines Custom Code section. I am completely baffled since all the other previous CSS I have placed in the child theme works.

Share this post


Link to post
Share on other sites
Rob
The confusion stems from order of precedence. While the child is important in the order, the final call comes from dynamic.css (the Custom Code > CSS Rules) and if anything creates a conflict, it's that which takes final call. In styling a child theme, yes, it's perfectly normal to style via the child. However, if what you've added actually conflicted with something in the basic style.css for the Framework itself, the browser doesn't know which one takes precedence. The final arbiter or last call is what the browser reads and acts upon. That's why it works in CSS Rules and not in the child's stylesheet. Imagine the browser.... reading the instructions. It sees the child saying "turn this green"... it reads the next line... "turn that same thing black". What should it do? Last one read is the best course (it thinks), so, that's what it gets. The dynamic.css is last on the list, so if the last instruction is "turn it green" then green it is. I agree this doesn't seem to be right, but in fact, I assure you, the system's working correctly by providing the CSS Rules as a final protection to ensure your code works as you want it. I'm sure you've also noticed that some of your CSS works perfectly in the child and if you check it, likely it's styling that's original and doesn't conflict with any other. Hope this helps explain it.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
wedesignstudios
Thanks for the explanation. So, are you saying that sometimes it will be necessary to insert CSS in the Custom Code section? And that child theme style sheets won't be able to implement all the CSS styles I would like to see? What is odd to me is that some of my CSS styles I previously inserted into my child theme suddenly stopped working when I inserting new CSS. The new CSS was unrelated to the older CSS items. Could something else besides hierarchy/order of precedence be causing the conflict?

Share this post


Link to post
Share on other sites
Rob
As you can see if you view source in any browser, lots of stylesheets are happening in the framework at any time. Plugins, sections, etc. So it's normal for conflicts to occur. If you add a snippet to your child theme's style and other things stop working it's the result of those conflicts. The penultimate resolution is the Custom Code which allows all the other conflicted CSS to be bypassed by the browser and read correctly. The instructions are correct to use the child first, but finding any conflict, the CSS Rules resolve the issue for you without having to dissect other stylesheets or re-write code.

Former PageLines Moderator, Food Expert and Raconteur

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  

×