WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change background only for "HOME"? [URGENT] [Autofocus Theme] (11 posts)

  1. moid93
    Member
    Posted 3 years ago #

    How can I change the background for only my homepage. I want all pages/posts except for my homepage to have the background that they do now. What do I need to insert in the home.php or style.css?

    Thank you! Your help is much appreciated!

    NOTE: In order to enter the website, click the period (.) after "wallpapers" to get into the site.

    Website: http://www.peop1e.org
    CSS - http://pastebin.com/HigDpsvL (No idea why its triple-spaced)
    Home.php - http://pastebin.com/ZKC9VdzZ

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

    use the css class .home that got created by body_class()

    add to style.css:

    body.home { background: different-lol; }

  3. moid93
    Member
    Posted 3 years ago #

    Where would i add that? In the structure?

    body {background-color: #000000;
    background-image: url("http://i52.tinypic.com/2j3hbtd.jpg");
    background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}
    #wrapper{padding:0;margin:0 auto;width:800px;position:absolute;
    left:200px;
    right:200px;display: fixed }/*
  4. alchymyth
    Forum Moderator
    Posted 3 years ago #

    basically, anywhere, as this is a new style with a higher priority than exising ones.

    however, to add it in the structure is a good place, maybe just after the body style, before the #wrapper style.

  5. moid93
    Member
    Posted 3 years ago #

    For some reason, the new style is not taking a higher priority than the one previously there.

    Currently, the image found in:

    body {background-color: #000000;
    background-image: url("http://i52.tinypic.com/2j3hbtd.jpg");

    is still showing, and the picture or color in "body.home" is showing behind that. I know that because if I zoom out far enough, I can see the new color leaking on the sides. How can I change this so the body.home takes priority on the home page?

    This is what my structure looks like now:

    /*structure*/
    body.home { background-color: #676754; }
    body {background-color: #000000;
    background-image: url("http://i52.tinypic.com/2j3hbtd.jpg");
    background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}
    #wrapper{padding:0;margin:0 auto;width:800px;position:absolute;
    left:200px;
    right:200px;display: fixed }/*

    Thanks alchymyth! It truly helps and I appreciate it!

  6. moid93
    Member
    Posted 3 years ago #

    Nevermind, I figured it out. Thanks for your help!

  7. Paal Joachim Romdahl
    Member
    Posted 3 years ago #

    Hello Moid93.

    What was the solution you figured out. Please share so others can benefit from this as well.

    Thanks!

  8. alchymyth
    Forum Moderator
    Posted 3 years ago #

    the first change only changed the background color in body.home - and the background image from body was still showing and covering the color.
    see here:

    body.home { background-color: #676754; }
    body {background-color: #000000;
    background-image: url("http://i52.tinypic.com/2j3hbtd.jpg");
    background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}

    possible solution - to use the Background - Shorthand property:

    body.home { background: #676754; }
    body {background-color: #000000;
    background-image: url("http://i52.tinypic.com/2j3hbtd.jpg");
    background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}

    now, the body.home style is overwriting the full background style.

    http://www.w3schools.com/css/css_background.asp

  9. Paal Joachim Romdahl
    Member
    Posted 3 years ago #

    Thank you Alchymyth for sharing! I was thinking that perhaps this would work with the Twenty Ten theme but no it did not work.

  10. remgriff
    Member
    Posted 3 years ago #

    @alchymyth & moid93 - could you be more specific about the solution? i don't quite understand where should i operate this change (for example i do not have a /*structure*/ chapter in my style.css, the code is almost the default one from the original autofocus+ pro template).
    i would really really love to be able to change the default one-color background.

    the blog is http://remgriff.ro/

    Thank you very much!!!

  11. remgriff
    Member
    Posted 3 years ago #

    anyone, please?

Topic Closed

This topic has been closed to new replies.

About this Topic