WordPress.org

Support

Support » Themes and Templates » [Resolved] How to change background only for "HOME"? [URGENT] [Autofocus Theme]

[Resolved] How to change background only for "HOME"? [URGENT] [Autofocus Theme]

  • 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
    CSShttp://pastebin.com/HigDpsvL (No idea why its triple-spaced)
    Home.phphttp://pastebin.com/ZKC9VdzZ

Viewing 10 replies - 1 through 10 (of 10 total)
  • Michael

    @alchymyth

    Forum Moderator

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

    add to style.css:

    body.home { background: different-lol; }

    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 }/*
    Michael

    @alchymyth

    Forum Moderator

    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.

    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!

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

    Hello Moid93.

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

    Thanks!

    Michael

    @alchymyth

    Forum Moderator

    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

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

    @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!!!

    anyone, please?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] How to change background only for "HOME"? [URGENT] [Autofocus Theme]’ is closed to new replies.
Skip to toolbar