Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do I change the background color?
- This topic has 13 replies, 5 voices, and was last updated 12 years, 1 month ago by
Ozzy.
-
AuthorPosts
-
January 3, 2013 at 2:18 pm #9247
rick4him
MemberI 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.
January 3, 2013 at 2:26 pm #9255Chris Cree
ParticipantHave you tried the Appearance --> Background menu? That's probably a good place to start.
January 3, 2013 at 2:31 pm #9258marybaum
ParticipantLine 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.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
January 3, 2013 at 2:42 pm #9264rick4him
MemberFor some reason the background tool in the options panel isn't changing the background color on the magazine theme. Not sure why.
January 3, 2013 at 2:45 pm #9266rick4him
MemberHmm..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.
January 3, 2013 at 5:23 pm #9311Susan
ModeratorHmm..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:
January 3, 2013 at 6:56 pm #9325rick4him
MemberJust the background area (and the area between the side bar and the content area)
January 3, 2013 at 8:32 pm #9358Susan
ModeratorRick - 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.
January 3, 2013 at 11:22 pm #9402rick4him
MemberJanuary 4, 2013 at 1:31 am #9430Ozzy
Memberyou 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!
January 4, 2013 at 12:50 pm #9545rick4him
MemberThanks 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!
January 4, 2013 at 2:17 pm #9557Ozzy
Membersure... instead of the background-color: #1a1a1a; you see add:
background-color: transparent;
January 4, 2013 at 2:32 pm #9559rick4him
MemberHmm.. 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;
}January 7, 2013 at 12:24 pm #10148Ozzy
Memberyou'd want to not do the #inner as #1a1a1a because that's where your blue image is 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.