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

#41 scoop

scoop

    Super Member

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

Posted 02 February 2013 - 09:40 AM

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

Please Login or Register to see this Hidden Content

Of course with totally different content!

#42 Danny

Danny

    Is Awesome!

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

Posted 03 February 2013 - 10:50 AM

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.

 

Please Login or Register to see this Hidden Content



#43 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 12:27 PM

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

#44 Danny

Danny

    Is Awesome!

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

Posted 03 February 2013 - 01:01 PM

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:

 

Please Login or Register to see this Hidden Content

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:

 

 

Please Login or Register to see this Hidden Content

 

Depending on your Customisation method, you may be required to use one of the PageLines overrides, see here for more information -

Please Login or Register to see this Hidden Content

 

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:

 

Please Login or Register to see this Hidden Content

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: 

Please Login or Register to see this Hidden Content



#45 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 01:22 PM

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

#46 Danny

Danny

    Is Awesome!

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

Posted 03 February 2013 - 01:32 PM

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.

 

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

I recommend you visit W3Schools for assistance with CSS, which will be able to assist you further - 

Please Login or Register to see this Hidden Content



#47 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 02:06 PM

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



#48 Danny

Danny

    Is Awesome!

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

Posted 03 February 2013 - 02:33 PM

No problem, happy to help.



#49 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 03:23 PM

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; }


 



#50 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 03:25 PM

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!



#51 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 03:34 PM

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



#52 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 06:09 PM

no joy with this either:

Thoughts please.....

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

 



#53 Danny

Danny

    Is Awesome!

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

Posted 03 February 2013 - 06:49 PM

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:

 

Please Login or Register to see this Hidden Content



#54 scoop

scoop

    Super Member

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

Posted 03 February 2013 - 10:43 PM

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;}



#55 Danny

Danny

    Is Awesome!

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

Posted 04 February 2013 - 07:00 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content



#56 scoop

scoop

    Super Member

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

Posted 12 February 2013 - 01:58 PM

Wanted to let others know that the solution to changing the text color to show-up was beyond simple (a real 'duh' moment)  - In the page I  highlighted all of my text and clicked black for the text color in the editor - was surprised that it worked and overrode the the default white - but it did....







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