Jump to content
scoop

Need to separate header background color from the content background color

Recommended Posts

James B    436
James B

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/


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

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

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
James B    436
James B

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

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

Thank you!

Out at a meeting now - will try it later.

: )

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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

Still open.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

Hi

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

No problem, happy to help.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
scoop    0
scoop

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

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

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
×