WordPress.org

Ready to get started?Download WordPress

Forums

using wp to change classes (15 posts)

  1. pdxDaniela
    Member
    Posted 1 year ago #

    <?php if($pagename == "engSub"){
      $class = "#engBody";
    } else {
      $class="index";
    } ?>
    
    <body class="<?php echo $class; ?>">

    I am using the code above in the header.php to change the background image I set for the <body> tag.
    In the stylesheet I have the settings for it...#body{background:.....}
    however it isn't working.
    can anyone advise please?
    thx
    D

  2. catacaustic
    Member
    Posted 1 year ago #

    Becuase <body> is a HTML tag, you don't use anything in front of it to reference it in CSS. You'd just use:

    body {
        background: url('myfile.jpg');
    }
  3. pdxDaniela
    Member
    Posted 1 year ago #

    apreciate that, but that is not the issue.
    wp pages use the same header.
    the body tag is in the header. but i want page "b" let's say to have a diff body background than page "a"

  4. catacaustic
    Member
    Posted 1 year ago #

    Then set it up to use a class on the <body> tag.

    body {
       background: url('image1.jpg');
    }
    body.index {
       background: url('image2.jpg');
    }

    Oh... a tip for you too. don't use #engBody as a class name. The # is a reserved CSS selector, so adding it to a class name is invalid and won't work. Just use 'engBody' instead.

  5. pdxDaniela
    Member
    Posted 1 year ago #

    cataustic that looks really interesting.
    but still not sure if it would work.
    right now i have

    page 1
    <body id="mainBody">
    in the css.
    #mainBody{bacground:url('etc...');
    page2
    <body id="engBody">
    in the css.
    #engBod{bacground:url('etc...');

    unless I put the <style>info</style> css directly in the head of the header...how can i change the backgrounds...seem like my ids or the classes you mentioned are the same thing.
    and appreciate you mentining the # info.

  6. catacaustic
    Member
    Posted 1 year ago #

    Classes and ID's are similar, but not quite the same. The differences aren't that important for this example so I won't go to far into that.

    What you have looks fine (but remember that you should post all your code inside the code tags so that it's formatted properly). BUT - you've spelt 'background' wrong. If you're not seeing the background change, that's why. The style definition doesn't need to be in the header, it can be in the stylesheet as that still brings in the styles when everything's rendered.

    body {
       background: url('image1.jpg');
    }
    body#mainBody {
       background: url('image2.jpg');
    }
    body#engBody {
       background: url('image3.jpg');
    }
  7. pdxDaniela
    Member
    Posted 1 year ago #

    ok...that was not my stylesheet css. that was me typing on the fly.
    & i know the diff between classes & ids.
    but the point I am trying to make...
    my <body> tag is in the header.php
    it doesn't change as the pages change. hence page b has the same header and same background image as page a.
    That i what I am trying to change.

  8. catacaustic
    Member
    Posted 1 year ago #

    Are you using FireBug or some other console to inspect the elements? If not, you should be. It makes life a whole lot easier when you're trying to debug CSS issues like this.

    What you've given so far should work. There's no reason hwy it won't if you've done it the right way. Without a URL or something to check it's going to be impossible to say anything more about it.

  9. pdxDaniela
    Member
    Posted 1 year ago #

    well. thank you for trying to help...but you are really not reading my post.
    the css is fine. works fine on a static site where each page has its own header section.
    in wp several pages share the same header.php.
    the header.php only has ONE body tag.
    hence it only displays the background set for that tag on ALL the pages.
    D

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Body tags typically contain page-specific classes - for example here's one from a test site:

    <body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support ">

    So then you can use the class to target CSS to that page:

    body.page-id-2 {
     ...... ;
    }

    If your body tags are not outputting those, see:

    http://codex.wordpress.org/Function_Reference/body_class

  11. pdxDaniela
    Member
    Posted 1 year ago #

    Thank you WPyogi I went and checked it out.
    and I changed the stylesheet accordingly

    .body.page-id-9{
    margin:0px;
    padding:0px;
    background: #7db9e8; /* VERY Old browsers */
    background:url('imgs/engineeringLgBGround.png') no-repeat #7db9e8; /* Old browsers */
    background:	url('imgs/engineeringLgBGround.png')

    that still did not over ride background image, I tried changing the body tag in the header to <body> only, w/no styling and that did not bring about the new background for the specific page.

    & i have to had I am fairly new to wp. Can you help me tweak this code or have any other suggestions that could help please?

    <body <?php body_class(); ?>  id="mainBody"> <!-- start body-->
    <?php if($pagename == "engineering"){
      $class = "engBody";
    } else {
      $class="index";
    } ?>
    
    <body class="<?php echo $class; ?>">
  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's very hard to help with CSS without seeing the site. For starters, try using an absolute file path in that CSS.

    What does Firebug show?

  13. pdxDaniela
    Member
    Posted 1 year ago #

    this is the site...
    http://thebigmeow.us/home/
    when you go
    http://thebigmeow.us/engineering/
    the main background image is supposed to change.

    actually i use chrome/inspect elements.

    the prob is that the header itself is static. the pages change. but the header that has the <body>tag calling in the background doesn't

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just noticed - your CSS above is invalid - body is a tag - not a class - so no period goes before that.

    .body.page-id-9{

    I don't see that CSS on your site either.

  15. catacaustic
    Member
    Posted 1 year ago #

    If you're setting the class on the <body> tag with the standard WordPress functions like you should be, you'd be able to use this:

    <?php
    if ($pagename == "engineering") {
       $class = "engBody";
    }
    else {
        $class = "index";
    }
    ...
    
    ?>
    
    <body class="<?php body_class ($class); ?>">

    That will add your custom class name onto the other classes that WordPress adds by default.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.