Jump to content
svabodesign

different background colors on different pages

Recommended Posts

svabodesign    0
svabodesign

On my home page I want to have a different background color than the other pages on the website.

I added this

body.home {background:#01293D;}

But when I did the image stopped showing. Is there anyway I can still apply background color and keep the image?

http://www.sailubju.com/

Share this post


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

Hi there,

Try this


.page-id-13 body, body.fixed_width {

    background-color: #0B0B0B;

}


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

Hi,

I applied the code you gave me but the other pages got the same background color as home

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

You need to identify all the page ID's that you wish to have different background colors on. For example:


.page-id-1 body, .page-id-1 body.fixed_width { background-color: black; }
.page-id-2 body, .page-id-2 body.fixed_width { background-color: red; }
.page-id-3 body, .page-id-3 body.fixed_width { background-color: blue; }
.page-id-4 body, .page-id-4 body.fixed_width { background-color: green; }
[/code]

You can identify the page id by viewing the body class using Firefox or Google Chrome web dev tool.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
svabodesign    0
svabodesign

ok, I tried this

.page-id-13 body, .page-id-13 body.fixed_width {

background-color: #01293D;

}

.page-id-blog body, .page-id-blog body.fixed_width {

background-color: #ffffff;

}

.page-id-shop body, .page-id-shop body.fixed_width {

background-color: #02847e;

}

But somehow it is the blogs background color on all pages

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Can you provide a link to these pages so I can take a closer look.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

Add this to your custom CSS:

//Shop
body.page.page-id-24 { background: red; }

//Blog
body.blog { background: green; }

//Home
body.home { background: blue; }[/code]

However, this may over write your background image.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
svabodesign    0
svabodesign

Yeah it did write over the background image. This was a tricky one..

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Do you require any further assistance or can I mark this topic resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
svabodesign    0
svabodesign

My client want both background color and a background image on the site. If it's possible I would appreciate more assistance

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Well you could use basic CSS and add the image to another element on the site, for example:


#header {
background-image: url(http://www.sailubju.com/wp-content/uploads/2012/09/headerblog.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
}
[/CODE]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

The topic was marked as resolved.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

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

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

    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


    • lutz
      By lutz
      Hi everybody,
      I use Pagelines for some years now, but for the first time I have to split up posts into several pages.
      Unfortunately, <!-- nextpage --> doesn't work.
      Can please someone help me, making that work?
      I don't have the time to change the theme and need the post split up because it would be way too long, espcially on mobile displays ...
      Thanks in anticipation!!!
    • eusebius
      By eusebius+
      Hello,
      I recently added a function that allowed me to use the same tag taxonomy for both posts and pages. Thank God, it is working well.
      Now, I want to modify the standard post loop in the WP Loop section to show both of those post types whenever I navigate to the archive of one of those tags. After researching a bit, I found what I believe is the right code from the Codex and have tried to include it in section.php of my overridden section, but it doesn't seem to work. Here is what I have beginning from about Line 156:
      /* * Standard loop. */ // The Query function standard_loop() { $args = array('post_type' => array( 'post', 'page' )); $query = new WP_Query( $args ); if( $query->have_posts() ) while ( $query->have_posts() ) : the_post(); the_content(); endwhile; } function loop(){ $count = 0; global $plpg; if( have_posts() ) while ( have_posts() ) : the_post(); $count++; $format = get_post_format(); What am I doing wrong?
      Thanks in advance.
    • JudithKlinger
      By JudithKlinger+
      All of my pages have been overwritten to be a contact page. My entire site converted to a contact page. Is this a bug?? Perhaps associated with the upgrade (which I have't done yet?)
      Trying very hard not to panic...
      The editor had been behaving strangely, sluggish, slow to respond, unpredictable actions. 
      url: world-eats.org
      DMS2, Chrome Version 38.0.2125.122
      Single site install on WP 4.0
    • kulmetehan
      By kulmetehan
      Hi guys,
       
      So I don't know what exactly is going on. But I get a "Error occurred: 404 - not found" whenever I try to visit any page on my website, except for the Homepage. Even though the pages are set up and published, I get this error.
       
      Any idea where it's coming from and how to fix it? Thanks!
       
      Please check out for yourself at: http://rijschoolacademie.nl/
       
×