Jump to content
Sign in to follow this  
jtaylor872

Platform Pro: Changing Very Top Header Footer Color from Black to other

Recommended Posts

jtaylor872

How do I change the color black on platform pro at the very top and bottom (footer) of the page to another color, let's say a nice calming blue (003366)? Would I do that somewhere with custom CSS or Platform Pro settings? Like the product and looking forward to the response.

Share this post


Link to post
Share on other sites
localspiral

That is something you can accomplish with custom css, either at custom code -Platform Pro settings- or editing style.css or even better base.css if you use the base child theme. This is what I use, as an example (note at the top I use a background image, so you would have to adjust the top to your liking): ` /* Background continuation */ #page { background-image:url('/wp-content/uploads/2010/11/topbg.jpg'); background-repeat:repeat-x; } /* No padding at the top */ #branding .content-pad {padding-top: 0px;} /* Footer colors modifications */ #footer { background: #99ddee; color: #555; } #footer li a {color: #224455} #footer li a:hover {text-decoration: underline;} #footer li h5 a {color:#000;font-size: 1em;} #footer a{color: #000;} #footer .widget-title{color: #000;} #footer .latest_posts li .list-excerpt {font-size: .9em;color: #777;line-height: 1.5em;} ` Hope it helps.

Share this post


Link to post
Share on other sites
Kate

@Jeff What @Santi posted sounds like it's what you need. If not, please feel free to post back and we can go from there. @Santi Thanks for sharing that with Jeff.

Share this post


Link to post
Share on other sites
jtaylor872

Santi I appreciate the fast response. A couple of additional questions. Before I make the changes using the Custom Code section of the Platform Pro Settings, how would I go back and "un-do" without resetting all the fine work I've accomplished this far. Since I'm not that familiar with code (other than using html/css cheat sheets) I want to make sure I can sufficiently find and delete the code. My goal is to change the top and bottom to the following hex color = 003e7e. I appreciate your help.

Share this post


Link to post
Share on other sites
Kate

@Jeff Jumping in again here... Just add the code @Santi provided to your custom CSS. If you don't like the way it looks, or if something seems wrong, simply delete it... no harm done. ;) If you already have custom CSS in the box, then put this code at the bottom of the page, as it will overwrite what's above it. Hope that helps.

Share this post


Link to post
Share on other sites
jtaylor872

I'd like to thank Santi for jumping in right away and also Kate for the follow-up. This shows the heart to help and follow-up. The colors were a bit off, so I'm back at the beginning. Plus, the top black line at the top of the header did not change.

Share this post


Link to post
Share on other sites
jtaylor872

The code for changing footer color works so I'd like to give Santi karma for this portion.

Share this post


Link to post
Share on other sites
giulioregosa
Plus, the top black line at the top of the header did not change.
what is the code to put in custom css to change the color of the line at the top? J

Share this post


Link to post
Share on other sites
jiznakefoo

The top line is actually a border, so to change the top line simply add this to your custom CSS code: body{ border-top: 5px solid #FFFFFF; } Change the #FFFFFF to whatever color you want. You can also remove the border all together but that will change your spacing.

Share this post


Link to post
Share on other sites
graceepc

Jake, when I put your bit of code in all it did was add a white border on top of the black. Does anyone know how to change the border altogether?

Share this post


Link to post
Share on other sites
graceepc

OK, so the colored bar at the top is tied to the color in the footer. It can be changed in Settings->Design Control->Basic Layout Colors->Body Background Color. But, it does not appear that the footer color can be changed independently of the "bar" at the top as they tied to the background.

Share this post


Link to post
Share on other sites
jiznakefoo

Hi Daniel, I forgot there is ALSO a background color that is separate from the border and footer color. The custom CSS I used to make it white was: body{ background-color: #FFFFFF; }

Share this post


Link to post
Share on other sites
graceepc

What I ended up doing was removing the padding from the css, that slid all the content up and covered the background at the top. Thanks for the help! Cheers...

Share this post


Link to post
Share on other sites
ralphborland

Hi Daniel, how did you remove the padding from the css? And is it possible to do this by adding code into base.css? Thanks!

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  

×