Jump to content
scoop

Need to separate header background color from the content background color

Recommended Posts

scoop    0
scoop

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
batman    389
batman

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/


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
scoop    0
scoop

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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?

Share this post


Link to post
Share on other sites
scoop    0
scoop

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)

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob
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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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
scoop    0
scoop

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the 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.

James B

Share this post


Link to post
Share on other sites
scoop    0
scoop

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

Here it is - full screenshot of desire look

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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


  • Similar Content

    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • Barnaby Skinner
      By Barnaby Skinner+
      Hey team,
      Really simple question: where would I add code to a specific page header? I can see in the settings I can add code to the global header, but can't see how to do it for a single specific page. It's related to facebook pixel tracking
      Cheers
×