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

Scoop, you need to use the PageLines overrides, I have already informed you we do not provide assistance in correcting a users custom code.

 

Our staff have already gone above and beyond with providing you with assistance and more than enough information on how to achieve your layout/style using custom CSS. There is nothing more we can do apart from design the site for you, which is service we do not provide.

 

I recommend you read our custom CSS documentation and start adding the PageLines overrides to your custom CSS. If the code still doesn't work, make sure it is correctly written using the validator.

 

I have resolved the topic, if you require further assistance with your custom CSS, I recommend you contact one of our pros.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

First...

 

when I select the content area as white in site options - your background is behind the content

I never said to select color options in Site Options > Color Control.

 

All I told you to do, in pretty good detail, was to use an image set to a specific height.  If you went further than my guidance, I can't help that.  I'd suggest you go through the docs and read how to use backgrounds, colors, etc.

 

The solution is not to add colors to Color Control... certainly not to Body.

 

See the attached image of Color Control, below, with the background image and a color set.

post-6-0-09601200-1358097393_thumb.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

What you suggested also means that I cannot set variable width/height ratios for the features or for content if I put the grey line in that one with white on top - correct?

Wrong.  It does not affect the width or height of any features or content.  Where did you get this idea from?

Share this post


Link to post
Share on other sites

Posted · Report post

Will this same method also get me a 10 or 20px (to be decided) grey line at the bottom of the content area when I am using black for features - or white for variable height text?

or

Will I have to align the grey line to the bottom of the content area - not sure what the css may be for aligning just the either grey line or a grey line with white above it it to the bottom

Scoop.... you asked for a background color in the header/branding area.  I gave you a solution for that.

 

Kindly when opening a topic, specify every requisite you're looking for so that our team can reply with all the solutions.  Else this will go on and on without solution.  We'd like you to be happy, but we can't achieve that without your kind cooperation and all the details.

 

If you've set an image of 140px (for example) as your background, it will appear only 140px high.  Below that, the page color will dominate since the page tag begins below the header. If you want a grey line of any specific height below the black you have two options:

1. Add it to the image

2. Add it to the header via a background color and padding or height in CSS.

 

If you're looking at the "Content Area" that's totally outside the scope of the header, which is where we were setting this up.

 

 

I need for the entire branding & footer sections to be black

That's what I was addressing. 

 

If you used Firefox (as recommended in all our docs and throughout this Forum) and inspected the CSS of my site, you'd see how to set a background image for the footer.  I actually have one set for Morefoot and one for the Footer, in addition to using Framework for a background which only handles the branding area.

Share this post


Link to post
Share on other sites

Posted · Report post

You should also consider trying the Pageless plugin from the Store.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Jenny - wil check it out.

On a deadline now for another site - have to put this one on hold for a week.

Share this post


Link to post
Share on other sites

Posted · Report post

Let us know if the plugin helps!

Share this post


Link to post
Share on other sites

Posted · Report post

Of course!

Share this post


Link to post
Share on other sites

Posted · Report post

Am not even close to being a coder - and I know that you aren't permitted to write this for me - but is this (which is not working) even close?

 

body{}

page-main, branding, nav, .content, .content-pad {background-color: black;
}

.alpha, page-main, branding, nav, dynamic-content, {background-color: white;
}

 

The Page{Less} looks like heavy coding as well - it will revert to my last correct code - but what if I never write any correct code - where do I get that from - but here!

Share this post


Link to post
Share on other sites

Posted · Report post

I may have misunderstood some of the terms... and so not been clear as I should have been - appologies....

The area I have to address is the branding and nav area's background that seem to fall within the content area.

I only use firefox - I have been fighting thru this with firebug which has givien me the name of the areas as .content and .content-pad.

I have a sitewide body background set in a gray.

When I use your image as a background it goes from side in the body background covering my body grey and not changing my #branding or #nav areas at all but appearing under them.

 

Starting over........

 

The area that I need to be black is in the content area - under the logo and menu bar with the balance of the content area (for text etc) to be white with black text. I cannot seem to find out how to do this. Firebug seems to only show me the main body area names. ... and ... my text is showing as white on the white content area as that had been set in site wide options as well.

 

How do I set separate text color and branding & nav colors for the content area and specify which template this information should be attached to - in the css.

 

Thank you

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I'm willing to take a look at the site, and check the code, but it's under construction at the moment. Please let us know when it's up for us to test.

 

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

perhaps it is in page that I have to separate them branding & nav from content-pad?

 

I still can't seem to see how to make this template specific as the home page and several others have to be all black pages with a body bg of grey with white text- (default)

but other templates like :

 

Template 1 - have to have a body bg of grey - with branding & nav on the page with black backgrounds and the content-pad as white - with black text.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, can you provide a screenshot of what you wish your site to look like, can this image be a full size image and not a cropped version please. Also, can you provide a link a to the site in question.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

Using a great plug-in that shows an under construction page - unless you are logged-in - have sent you an admin password in a private message.

 

Thank you so much for offering to help!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi

 

Do you want this heading to be full-width background or just within the page content area?

Share this post


Link to post
Share on other sites

Posted · Report post

On the default template: I want all page backgrounds to be black with the body background as the selected grey.. Menu itself as existing (classic in existing greys) - body with white text.

On template 1: I want the branding and menu sections bgs to be black menu bar itself as is in the greys - body bg grey - page-main (?) .content and .content-pad (area under features to be white ) with black text.

On template 2: as on template 1 the same but probably w/o features.

Please see the 'desired' full page screenshots posted earlier. Client wants the site to look just like http://www.amanresorts.com/. Of course with totally different content!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rockstar, Danny...

 

Thank you....

Attaching - desired homepage (want as default-template) & desired text / video pages (want as Template 1/ Template 2)

Also attaching exising Pagelines home and text when I make the content area white (which changes the home as well).

Please notice the black stripe in the existing header - can't seem to find where I put Smart Egg's bg image I put it in several different places trying to get it to work. Have removed most but obviously not all...

 

The site is behind a construction page as my client doesn't want it found until it is ready. To get past that you will have to login to WP

 

EDITED:  We do not allow logins, even subscriber level here for security purposes.

 

Thanks!

Have implemented base - tho some code still remains in Pagelines Customize

 

Not sure where my files went - did get to upload them - will try again but all says it is too large now!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Scoop,

 

I have read through all the posts for this topic and our team have provided you with the instructions to achieve your layout. If you're still unable to achieve your clients layout, I recommend you contact one of our Pros for assistance.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

 

Share this post


Link to post
Share on other sites

Posted · Report post

Danny

If a normal web designer can't use PageLines to create a simple second page template - then why have I been using it all of these years?

Being able to have a white content-pad and black text on a second template that doesn't alter the rest of the page should really not be a big deal - and someone there - especially while I am paying for plus - should be able to help... Without paying for even more help...

There are many features that I do love - such as Features - that have kept me coming back.

Am meeting with another client,while in NY and had really hoped to be able to use this for her as well - her specs will require different backgrounds for different planned 'sections' of her site as well - something easily achieved in DreamWeaver - but I haved chosen WP / PageLines as a CMS instead - you are telling me that it is not possible to change a background page content without changing the background of my menu container and my branding container without additional paid help?

..... Help...

Share this post


Link to post
Share on other sites

Posted · Report post

This isn't a big deal and can be achieved with some simple CSS, our staff have already provided you with the required information on how to achieve this.

 

However, you seem to be confused over the containers, classes and how to correctly write the CSS. You shouldn't use content-pad for altering the background color for a section, this container is for padding control and nothing else. If you wish to add a background image/color to a container of a section etc.. you should use the content container.

 

Also sections have a similar div/container structure for example:

 

<section ID="X" class="X X X">
<div class="texture">
<dv class="content">
<div class="content-pad">

and so on...

 

If you wish to style a section on a specific page, then you will need to use the unique class for that page/post that is added to the body class.

 

For example, lets imagine that you have a page with an ID of 2 and wish to have the branding section with a red background. You would add the following code to your custom CSS:

 

 

.page-id-2 .section-branding .content {
background-color: red;
} 

 

Depending on your Customisation method, you may be required to use one of the PageLines overrides, see here for more information - http://support.pagelines.me/docs/customization/custom-css/

 

If you wish to add a background color or image to the Branding section globally, then you remove the page-id-2 from the custom CSS and use the following:

 

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

Note that I have added a PageLines override in the CSS (#site).

 

The following code can be used as a template for nearly all sections including the content section. Simply replace the .section-branding with the correct class for that section. You can find the correct class by using either FireBug or your browsers built-in tools, inspect the section and look for the class, the class is located in the

 

<section ID="" class="">

 

See the image below, which is for the Branding section: http://d.pr/i/8QBH

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you - will try in the next week or so - and hopefully you will be able to correct my code when I post it!

Share this post


Link to post
Share on other sites

Posted · Report post

We are unable to correct a users custom code. However, we can point you in the right direction and to resources that will assist you.

 

For example, here is some code you provided on page two of this topic, the code is incorrect and will not work.

 

#defaulttemplate, .section-branding, .content, .content-pad {background: #000000; }
#template1, .section-branding, .content, .content-pad {background: #ffffff; }
In the First line of code, you're using an ID for the default template, this is not correct, these are classes and not IDs. You have also adding a , (comma) between the Branding class and the content class, as well as adding the content-pad after the content class, this will not work either.
 
The way the code should look is like this:
.page-template-default .section-branding .content { background: #000000; } 

I recommend you visit W3Schools for assistance with CSS, which will be able to assist you further - http://www.w3schools.com/css/

Share this post


Link to post
Share on other sites

Posted · Report post

Will still not get to try these solutions  until some time next week - had two sites to make live.... just writing to make sure that this topic doesn't get closed...

Share this post


Link to post
Share on other sites

Posted · Report post

Still open.

Share this post


Link to post
Share on other sites