Archived

This topic is now archived and is closed to further replies.

  • 0

Need to separate header background color from the content background color


Question

Posted · Report post

When I set the background color as white it is white behind the brand section as well - but I need for the entire branding & footer sections to be black and the content for text on some templates to be white in between them.

Client loves this site and wants to get as close to it as possible.

 

Thank you!!

Share this post


Link to post
Share on other sites

55 answers to this question

Posted · Report post

Thanks - this and what you sent earlier should certainly point me in the right direction.

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help.

Share this post


Link to post
Share on other sites

Posted · Report post

Almost there - sorry tho - text on Template 1 is still white on white....

Assuming I have to change some settings in the dashboard fonts to allow the css to override:

 

Currently working - except for the font color - which i tried with page id's as well to no avail  have checked your links and googled css fonts:

Thank you!!!!

 

body{}

#site .section-branding .content {
background-color: black;
}

#site .section-nav .content {
background-color: black;
}
 
#site .section-features .content {
background-color: black;
}
 
#site .section-boxes .content {
background-color: black;
}

#site .section-page-main .container-group {
background-color: black;
}

.page-template-default .content { background: #000000; }

.page-template-alpha .section-page-main .content { background: #ffffff; }

.page-template-alpha .section-page-main .container-group { font-color: #000000; }


 

Share this post


Link to post
Share on other sites

Posted · Report post

As always you have saved me -

 

just the font-color bit per template needed - and i should be able to begin work on this site for my client!

Share this post


Link to post
Share on other sites

Posted · Report post

Clarifying:

Need the text on all of the black sections to stay white as it currently is on all templates.

Need the content sections that now have a white background to have all text color black....

Share this post


Link to post
Share on other sites

Posted · Report post

no joy with this either:

Thoughts please.....

.page-template-alpha .section-content { h1, h2, h3, h4, h5, h6, p, blockquote { font-color: #000000;}

 

Share this post


Link to post
Share on other sites

Posted · Report post

no joy with this either:

Thoughts please.....

.page-template-alpha .section-content { h1, h2, h3, h4, h5, h6, p, blockquote { font-color: #000000;}

 

 

The CSS code is incorrect, you have too many { brackets, make sure your code is correct. Please bear in mind that we do not provide assistance with user custom code, you can make sure your code is correct by adding it here:

 

http://jigsaw.w3.org/css-validator/#validate_by_input

Share this post


Link to post
Share on other sites

Posted · Report post

Very cool - but - now the boxes are not showing up even tho sitewide is set to black bg for the boxes... with the first line of code alone it works for the ALL text on the white bg - or the black which isn't good. Have tried several names for the text on white only container but none seem to make a difference in separating the box section's fonts from it.

 

Sorry!! Getting so close.....

 

.page-template-alpha .section-content  .entry_content h1, h2, h3, h4, h5, h6, p, blockquote { color: #000000;}

.page-template-alpha .section-boxes  h1, h2, h3, h4, h5, h6, p, blockquote { color: #ffffff;}

Share this post


Link to post
Share on other sites

Posted · Report post

help.....

Share this post


Link to post
Share on other sites

Posted · Report post

Hi scoop

You can go to

Pagelines > Site Option > Control Color

and change as you like the Basic Layout Color and Page Text Color

 

Also

 

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

.content .content-pad {background-color: black;}

This only an example.

 

It is advisable to learn how to do this on your own too.  

Check out 

http://support.pagel...ion/custom-css/

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

http://www.w3schools.com/

Share this post


Link to post
Share on other sites

Posted · Report post

Please use the file upload as you did earlier to include the image by clicking  "More Reply Options" below when replying. 

Share this post


Link to post
Share on other sites

Posted · Report post

All requested images were uploaded at 10:52pm they are just above my this morning's call for help - thanks for checking....

looked at your epicurian site - you did seem to get the header in front of the space but your's goes 100% and mine has to have a gray body background - as illustrated in the last full sized screen shots posted above.

 

thank you again!

Share this post


Link to post
Share on other sites

Posted · Report post

Mine goes 100% because I use a 2300px wide image. If your layout calls for 1000px width, for example, then make your image 1000px wide and upload it as previously instructed to your site. 

 

The images you posted in reply to Danny used shortcode in the edit field, and were not uploaded via this forum's image upload process. When clicked, they do not open. Please use the internal upload so that we can see the images.

 

Also, please do not post Admin or even Subscriber level logins here.  This is a public forum. Doing so is an open invitation to your site being hacked.  We are not responsible if you openly invite damage to your site.  I've edited and removed the login but provided access to it privately to my colleagues.

Share this post


Link to post
Share on other sites

Posted · Report post

When using css inside the framework you'll notice most sections will have a container inside them called .content-pad this isn't the same as the main content-pad for the page.

 

So when looking to apply css to a section, like branding/highlight/more foot, you'll see this appear inside the section code. If you scroll up slightly in the html list you'll see the main class for the section, which will appear in the css in the form of .section-branding you can use this to make your css more specific to the area you're editing.

Share this post


Link to post
Share on other sites

Posted · Report post

Already did that - but the header is in the content section....

 

This is what I currently have in the pagelies-customize/style.css

}
#.content .content-pad {
    padding: 1px; background-color: #ffffff;
}

#branding{
    background: #000000;
}

 

Thank you!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

you are right of course - about the wp-access - had just been assured by wp e-commerce that all was secure there - and forgot which help I was in.

... regular attach wasn't working told me all was too large at 20kb - so took them from the my media folder.

 

Hi James

Sounds as if that will work - will try it - but - how do I make that template specific?

not sure what specific css to use for: Default - Template 1 etc. - i am assuming in front of the specific content/content-pad.

 

Am not great with css can you write one out for me for me to adapt....

 

Thank you!!

Share this post


Link to post
Share on other sites

Posted · Report post

Instead of pasting shortcode for your images, why not type a title for each, then link the title to the image URL. Not a shortcode, but the actual http....

 

Or, you could resize the images so they're under 20k.

Share this post


Link to post
Share on other sites

Posted · Report post

Here it is - full screenshot of desire look

Share this post


Link to post
Share on other sites

Posted · Report post

and here is what I have.... have not tried James' solution yet

Share this post


Link to post
Share on other sites

Posted · Report post

the allowed file size keeps going down depending on what was already uploaded - can you see the the ones I just uploaded 4 images - 2 posts

Share this post


Link to post
Share on other sites

Posted · Report post

To create page specific css you need to add the page id before the main css. In the format

 

.page-id-x

We're unable to provide css code directly for customizations, we can only advise that you source the code directly from firebug or chrome dev tools and let us know if you encounter a problem. If you need to look into css further we'd advise the following site which is a great free resource for learning css. http://www.w3schools.com/css/

Share this post


Link to post
Share on other sites

Posted · Report post

but how do i make that template specific? is there a code like:

#defaulttemplate, .section-branding, .content, .content-pad {background: #000000; }

#template1, .section-branding, .content, .content-pad {background: #ffffff; }

Share this post


Link to post
Share on other sites

Posted · Report post

Just saw the .page-id-x

 

is there something template specific like this so that I won't have to adjust for each page?

Share this post


Link to post
Share on other sites

Posted · Report post

You can also do this graphically.  See www.epicurus.com for an example.

 

Just create a 1px wide image in black, the exact height you want it to be. Then, in Dashboard > PageLines > Site Options > Color Control, upload and set the background to tile horizontally, with the height at 0 and width at 50. Do not supersize. 

 

The background image would then spread from the center to both edges behind the branding section (if you've made the image that high), covering the entire branding section background.

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately the way that the css registers each page isn't the same as the names you see in the admin area. I've not used the classes for these previously but there's no reason they shouldn't work

 

 

Template 

1- .alpha

2- .beta

3- .gamma

4- .delta

5- .epsilon

Share this post


Link to post
Share on other sites