How do I change the background color?

Community Forums Forums Design Tips and Tricks How do I change the background color?

This topic is: not resolved

This topic contains 13 replies, has 5 voices, and was last updated by  Ozzy 1 year, 3 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9247

    rick4him
    Participant
    Post count: 128

    I would like to change the background color of my site. (The area outside of the content area).

     

    Here’s a link to my test site.

    #9255

    Chris Cree
    Participant
    Post count: 147

    Have you tried the Appearance –> Background menu? That’s probably a good place to start.


    #9258

    marybaum
    Participant
    Post count: 119

    Line 155.

    body {
    background: #e9e9e9;
    }

    If you like your colors the clearest they can get – and want to be able to remember them – spec them in pairs: my absolute favorite, for instance, is #0099ff. Which we can shorten to #09f – much easier to remember.

    If you like your tones more muted, jumble up the numbers and letters: #2E9AE0

    My favorite color tool is http://kuler.adobe.com – which plugs in to all the Adobe creative Suite apps, so my palettes come with me to all my projects.


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #9264

    rick4him
    Participant
    Post count: 128

    For some reason the background tool in the options panel isn’t changing the background color on the magazine theme. Not sure why.

    #9266

    rick4him
    Participant
    Post count: 128

    Hmm..it seems to be changing the color of the area to the left and right of the posts, but not the area in between the content area and the the sidebar. That’s the part that really needs to change since right now it looks like one big area and not showing any separation.

    #9311

    Susan
    Moderator
    Post count: 7516

    Hmm..it seems to be changing the color of the area to the left and right of the posts, but not the area in between the content area and the the sidebar.

    Do you want to change the color of your background area, or your content area? It looks like you’ve got duplicate posts going:

    http://www.studiopress.com/forums/topic/is-this-posable/


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #9325

    rick4him
    Participant
    Post count: 128

    Just the background area (and the area between the side bar and the content area)

    #9358

    Susan
    Moderator
    Post count: 7516

    Rick – There is no separate area (in terms of background) between your sidebar and your content, so if you change the color of your content area, it will change the content and sidebar area.

    If you want more separation between your content and your sidebar, you might consider changing this:

    
    .sidebar .widget-wrap {
     border: 4px solid #f5f5f5;
    }
    
    

    That is the thin border around your sidebar. Change the #f5f5f5 for a more contrasting color if you wish, or change the border size by changing 4px to something also. Just keep in mind that if you change the border size, you may need to adjust the width of your sidebar and/or content area to accommodate this change.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #9402

    rick4him
    Participant
    Post count: 128

    Hmmm. I’m trying to make this look more like this (in terms of the separation between the content area and the sidebar.

    #9430

    Ozzy
    Participant
    Post count: 211

    you can do it, but it takes a bit of work. if you add this near the bottom or make these changes to your style.css, it should get you close:

    #inner {
    	background: #1a1a1a;
    }
    
    #inner .wrap {
    	background-color: #1a1a1a;
    	box-shadow: none; /* or delete this line fromt style.css */
    }
    
    .home #content {
    	padding: 0 20px 20px;
    }
    
    .featuredpage h4,
    .featuredpost h4, {
    	background: #fff;
    	margin: 0;
    	padding: 0 10px;
    }
    
    .featuredpage .page,
    .featuredpost .post {
    	background: #fff;
    	padding: 0 10px 15px;
    }

    i hope that helps!

    wonderful site, by the way! i wish your family nothing but the best!


    #9545

    rick4him
    Participant
    Post count: 128

    @Ozzy,

     

    Thanks so much, that seems to be very much what I’m trying to do. However you can see that I have changed my background to a light blue patterns I found. Is there a way to do this same thing using that blue pattern which you can see on the test site now?

     

    thanks!

    #9557

    Ozzy
    Participant
    Post count: 211

    sure… instead of the background-color: #1a1a1a; you see add:

    background-color: transparent;

    #9559

    rick4him
    Participant
    Post count: 128

    Hmm.. i did that and it tool my blue away.

     

    Here’s what I used.

     

    #inner {
    background: #1a1a1a;
    }

    #inner .wrap {
    background-color: transparent;
    box-shadow: none;
    /* or delete this line fromt style.css */
    }

    .home #content {
    padding: 0 20px 20px;
    }

    .featuredpage h4,
    .featuredpost h4, {
    background: #fff;
    margin: 0;
    padding: 0 10px;
    }

    .featuredpage .page,
    .featuredpost .post {
    background: #fff;
    padding: 0 10px 15px;
    }

    #10148

    Ozzy
    Participant
    Post count: 211

    you’d want to not do the #inner as #1a1a1a because that’s where your blue image is :)


Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.