WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help learning how to go about making this background (19 posts)

  1. Brad Thrashin
    Member
    Posted 1 year ago #

    Hello Im a noob coder and needing some help here.

    http://outforaction.com

    The following link is an image of what I want the background for my site to look like.

    https://skitch.com/chrisgrover/8942b/background-1"

    With all the content living in that red area and the grey being what expands with the browser size(dunno lingo).

    Essentially I am not sure how to do this and what would be the smartest way to go about doing it. Can I get some help? Thanks in advance.

  2. Brad Thrashin
    Member
    Posted 1 year ago #

    I better get more specific. I dont know where to code this up other than in the style sheet. I made a 1px x 1280px slice of the red area and tried to repeat that as the body background by replacing the color with background image but I wasnt sure if that was the right thing to do and it wasnt working.

    Thanks in advance peeps.

  3. Anthony Hortin
    Member
    Posted 1 year ago #

    It looks like you're using the Twenty Eleven theme, so within the Appearance > Background option in the Dashboard, change the background color to #d8d8d8 and save your changes. This will provide the grey area outside the content.

    You'll then need to add "background-color: #F83B4F;" (without the quotes) to the #page id within your themes style.css file. This will provide the reddish background colour to the main content area.

    Since you want plain flat colours, there's no need to use an image, you can simply specify the appropriate html colours as mentioned above.

  4. Brad Thrashin
    Member
    Posted 1 year ago #

    Thanks Anthony. It may be hard to see but the grey and the red both have textures involved. Would I just need to follow your advice but use background-image ... (something or other)?

  5. Brad Thrashin
    Member
    Posted 1 year ago #

    If you look at the website I currently have the texture set as the background image with a bk color of a red variance. And then I set the body background to none. this would be fine with me except I want that grey on the outsides. And thats where im confused. I tried making the slice and a bk image on the body to preserve the texture and then I was going to change the page bk in the editor to the grey stone. But I cant get the image I sliced to show up in the body background. Hope that made sense.

  6. Anthony Hortin
    Member
    Posted 1 year ago #

    Ahhh ok. In that case, the eaisest thing to do would be to simply center that background image on the body tag using something similar to this....
    background:url(insert/img/url/here.jpg) repeat-x top center

    This would work as long as the red section is already wide enough to cover your content area. Also, since the img does have a texture, I'd suggest extending the grey area so it's a lot wider otherwise it wont fill the screen for people with wide monitors. You'd also need to remove any background color on your #page ID as well.

  7. Brad Thrashin
    Member
    Posted 1 year ago #

    Thanks Anthony. I went another direction now. All this is learning as I go.

    Can you help me figure out how to align the top nav left with the logo and content? Ive been stuck on that and cant figure out how to anchor and full browser the footer. Im about to post a question in the forum on that.

    Thanks for the help.

  8. Brad Thrashin
    Member
    Posted 1 year ago #

  9. Anthony Hortin
    Member
    Posted 1 year ago #

    Hi brad,

    If you change the ID #access to the following the menu should move across to the left, in line with the logo


    #access div {
    margin: 0;
    }

  10. Brad Thrashin
    Member
    Posted 1 year ago #

    Thanks Im learning so much.

    Since we're here can you help me with one more thing?

    I tried for hours to get the bottom nav to span the width of the browser as well as "stick/anchor" to the browser and never move. I tried a lot of tutorials I found online but doing what they said alone wasnt working and after troubleshooting for a while I had to give up.

    Any help would be appreciated. Thanks again.

  11. Brad Thrashin
    Member
    Posted 1 year ago #

    Ok I got the footer out of the page div but I cant figure out how to keep the footer widgets inside the page. Working on that.

  12. Anthony Hortin
    Member
    Posted 1 year ago #

    That's a little bit trickier.

    Currently the <footer> is sitting within <div id="page" class="hfeed">. This is restricting it's width so it needs to be moved outside of this. ie. Just below its closing tag.

    Also, you'll need to add the following styles on to #supplementary

    margin: 0 auto;
    width: 900px;

    You'll then need to remove the background image from #supplementary and add it to #colophon

    background: url("images/redcheck.png") repeat scroll 0 0 transparent;

  13. Brad Thrashin
    Member
    Posted 1 year ago #

    Cool thank you.

  14. Brad Thrashin
    Member
    Posted 1 year ago #

    Where can I find "the <footer> is sitting within <div id="page" class="hfeed">." that you are referring to?

  15. Anthony Hortin
    Member
    Posted 1 year ago #

    Ahhh sorry. Should've mentioned that. That'll most likely be in the footer.php file.

    Before you make all these changes, please make sure you take a backup of all your theme files just in case something goes wrong.

  16. Brad Thrashin
    Member
    Posted 1 year ago #

    "One more thing" I would like the footer to "stick" to the page and never leave so the main content scrolls below and doesn't push the footer off page. Is this easy too? Thanks again man.

  17. dolakhthapa
    Member
    Posted 1 year ago #

    Mountain Mart Treks and Expedition: One of the Best trekking and Adventure Company in Nepal specialized for trekking in Nepal, Nepal tour, hiking, peak climbing, Expedition and adventure holidays.
    http://www.mountainmarttreks.com

  18. Anthony Hortin
    Member
    Posted 1 year ago #

    Making things "stick" vertically can be a bit of a challenge. Have a look at this Post. It provides a link that will show you how to create a "sticky" footer. It's not one that sticks there permanently though. Only when the content isn't long enough to fill the page.

    http://css-tricks.com/sticky-footer/

  19. Brad Thrashin
    Member
    Posted 1 year ago #

    Thanks Anthony. Couldnt get the results I was hoping. I'm going to keep trying.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.