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 4 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. use the css class .home that got created by body_class()

    add to style.css:

    body.home { background: different-lol; }

  3. moid93
    Member
    Posted 4 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. 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 4 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 4 years ago #

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

  7. Paal Joachim Romdahl
    Member
    Posted 4 years ago #

    Hello Moid93.

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

    Thanks!

  8. 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 4 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