• 0
Sign in to follow this  
Followers 0

different content colors on different pages?

Question

Posted · Report post

Hi. I would like to have a content color blue on the homepage and another color on another page. Where can i find the selectors CSS that i need to use? Only the content-area... Now when i call the content on a specific page, it colors also the header... thx Corina

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

Corina, if you use #page-id-(number) where (number) is replaced by the digital id of the page like #page-id-2341 you can apply a CSS snippet to the particular page, including the background color. Just make sure you know the area you wish to recolor, first. So, something like #page-id-2341 .content-pad {background-color: #C00000;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rangelone. Thx for your quick response! It seems to me that this is not working.... Here my Css Code: #page-id-613.content-pad { background-color:#BDCCD4; } Nothing happens...either with the !important tag ....any suggestions? Corina

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @helvetika Try with [code].page-id-613 .content-pad { background-color:#BDCCD4; }[/code] It function me

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Corina, You code is slightly off, use my code below instead. [code].page-id-613 .content-pad { background-color: #bdccd4; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

:( It does not working. Now the branding section and the content section are colored with same blue...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

http://wp.tanzprojekte.ch/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Then your branding must be in the content area not in the header. Check your settings in Drag & Drop.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No sorry, The branding ist in the header. Look: [img]http://i.imgur.com/R7xw6.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I think we may be confused when you said content pad. Therefore, can you create a quick concept image, so we can see how want it to look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It has to be something like this. The content area is colored and on some pages there has to be a different tone. [img]http://i.imgur.com/fyT9S.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, It's difficult to test at the moment as your site doesn't have the layout that is displayed in the concept image but can you try the code below, replacing the id to the one that matches your page please. [code].page-id-644 #page-main { background: red; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny. I'm sorry the site ist changing because i am working on it... it seems to me as the header and the content are linked together... This happens with your code: [img]http://i.imgur.com/MMmr0.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The header and content share a container so that container's color is going to be the same in both parts of the site. You want to leave the header white, yes?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yuppie! I figured all out. I left the color options in global settings blank. Now with only the Css code everything is working fine. I suppose that this Css selector works also with a background-image...? Thx so much.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

With background-image you need a different CSS attribute. This one is for background color: [code]background-color: #xxxxxx;[/code] This one, however, is for background image: [code]background-image: url('http://directimageurl');[/code]

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
Sign in to follow this  
Followers 0