Having some trouble with the <body class> feature in wordpress

5 replies
Hey all

I'm playing around making a theme in wordpress and I have a small problem

I wish to display different <body> for the front page than for the rest of the site

Now I know there is a feature in wordpress for this

<body <?php body_class(); ?>>

I have added this to my header.php and this to my css

.page {
background-image:url(images/about_bg.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
}

.page-id-5 {
background-image:url(images/main_bg.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
}

here page-id-5 is my home-page. (static front page)

Now this is how Wordpress does this, and it does work (sort of)

The when I only have information in the .page-id-5 field it works like a charm showing background on the front page only, but when I put info in the .page field the two backgrounds gets mixed around on all pages.

Any ideas?

Kind regards
#&ltbody #<body #class&gt #class> #feature #trouble #wordpress
  • Profile picture of the author theIMgeek
    All pages will be affected by your .page class.

    Your home page will be affected by both .page and .page-id-5 classes, so the settings would have a cumulative effect. However, if they have different settings for the same value (background-image) then the last setting will be used.

    I'm not sure quite what you mean by the backgrounds "gets mixed around" but hopefully I've clarified things. If not, please explain the problem further.

    -Ryan
    Signature
    FREE WSO: Protect and Automatically Deliver Your Digital Products

    Ask the Internet Marketing Geek
    <-- Happy to help with technical challenges
    MiniSiteMaker.org <-- Free software to make your mini-sites fast and easy
    {{ DiscussionBoard.errors[2691631].message }}
    • Profile picture of the author HenrikPoulsen
      Originally Posted by RJP View Post

      All pages will be affected by your .page class.

      Your home page will be affected by both .page and .page-id-5 classes, so the settings would have a cumulative effect. However, if they have different settings for the same value (background-image) then the last setting will be used.

      I'm not sure quite what you mean by the backgrounds "gets mixed around" but hopefully I've clarified things. If not, please explain the problem further.

      -Ryan
      By mixed around I mean the cumulative effect you are referring to

      one background image goes on top of the other.

      I'll try to look around a bit more, but I'll probably just find someone who can transform my psd's into a usable theme I can use in stead of using up all my time trying to make things work for me...

      thank you for your reply though..
      {{ DiscussionBoard.errors[2691797].message }}
  • Profile picture of the author theIMgeek
    Hmm. A single page element cannot have more than one CSS background-image, so it must be placing the background into a DIV as well as BODY.

    In that case, you can get more specific with your CSS definitions:

    Code:
    body .page {
        background-image:url(images/about_bg.jpg);
        background-repeat:repeat-x;
        margin:0;
        padding:0;
            }
    
    body .page-id-5 {
        background-image:url(images/main_bg.jpg);
        background-repeat:repeat-x;
        margin:0;
        padding:0;
            }
    That way the class will only be applied to the BODY tag, and any DIVs with the class .page will not be affected.

    Hope that solves the problem.

    -Ryan
    Signature
    FREE WSO: Protect and Automatically Deliver Your Digital Products

    Ask the Internet Marketing Geek
    <-- Happy to help with technical challenges
    MiniSiteMaker.org <-- Free software to make your mini-sites fast and easy
    {{ DiscussionBoard.errors[2691839].message }}
    • Profile picture of the author espradley
      I've heard CSS3 supports dual body images...but not both.

      What may be best is not using CSS to mod it all up.

      If you create a template file called home.php it will load as the home page of your site everytime they visit the homepage. So it can look completely different from the rest of your site.

      Otherwise, you can set a conditional. Keep in mind that CSS loads the last style on the page.

      so try something like:
      (note it woldn't let me post it properly so remove the space between the $ and post

      Code:
       
       body{
          background-image:url(images/about_bg.jpg);
          background-repeat:repeat-x;
          margin:0;
          padding:0;
      }
       
       
      if( $ post->ID ==  '5'){
          body {
          background-image:url(images/main_bg.jpg);
          background-repeat:repeat-x;
          margin:0;
          padding:0;
          }
      }
      Signature

      Eddie Spradley

      {{ DiscussionBoard.errors[2691948].message }}
  • Profile picture of the author HenrikPoulsen
    That did the trick, thank you
    {{ DiscussionBoard.errors[2691943].message }}

Trending Topics