Jump to content


Photo
- - - - -

Need to separate header background color from the content background color

header content background

Best Answer Danny , 04 February 2013 - 07:00 AM

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/

Go to the full post


  • Please log in to reply
55 replies to this topic

#1 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 12 January 2013 - 05:46 AM

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!!



#2 batman

batman

    Bat Learning

  • Members

  • 2217 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 12 January 2013 - 09:36 AM

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)

Please Login or Register to see this Hidden Content

This only an example.

 

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

Check out 

Please Login or Register to see this Hidden Content

 

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

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content



#3 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 12 January 2013 - 04:18 PM

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!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 January 2013 - 08:01 PM

You can also do this graphically.  See

Please Login or Register to see this Hidden Content

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.



#5 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 13 January 2013 - 01:24 AM

This sounds amazing - will try it!

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

 

Thank you!



#6 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 13 January 2013 - 02:04 AM

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?



#7 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 13 January 2013 - 03:56 AM

Sounded good - but can't get this to work - when I select the content area as white in site options - your background is behind the content - which contains the branding and thus my logo the entire area behind the branding (which i may not have been clear about - branding is what I need to have a black background spanning the entire area from left to right) Why is branding in content? May be that that is what I need to separate.

 

Attaching

 

1. what it actually looks like... when content is set to #ffffff in site options ... even tho overridden in page options... Also text is not showing up at all even tho it is in the page - what do I have to activate in the template to show text - i have content in between features and boxes.... but all i could find to add that looked like text in drag & drop was 'post/page pagination' what a mess- really need help!!

2. what I need for text pages assigned to Template 1 (about etc).

3. what is okay for home and other slide show pages (default template)



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 January 2013 - 05:19 PM

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.

Attached Files



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 January 2013 - 05:20 PM

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?



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 January 2013 - 05:31 PM

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.



#11 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 14 January 2013 - 12:40 AM

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



#12 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 14 January 2013 - 06:11 AM

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.



#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 January 2013 - 09:59 AM

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.



#14 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 14 January 2013 - 02:51 PM

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!



#15 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 14 January 2013 - 02:52 PM

 



#16 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 15 January 2013 - 12:58 AM

help.....



#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 January 2013 - 02:04 AM

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



#18 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 15 January 2013 - 02:18 AM

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!



#19 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 January 2013 - 02:27 AM

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.



#20 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 January 2013 - 02:31 AM

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.







Also tagged with one or more of these keywords: header, content, background