Changing background color of certain pages
-
Hello!
I’ve recently read the CSS tutorial and I’m beyond stumped. I’m mortified. I have already had some help with my site concerning CSS, but now that I’m trying to do it on my own, I have a few questions in regards to my pages and posts backgrounds. I don’t have a lot of time to sit down and give myself lessons on this :(
How would I be able to change the background colors of some of my pages but keep other “static” pages white?
Thanks guys.The blog I need help with is: (visible only to logged in users)
-
Hello there!
I think you can do it! To get it to work, you’ll need to know the id of the page you want to manipulate. Not the page name, but the id that WordPress automatically gives the page, like an index number in a database.You can find the id of a page by going to your Administrator panel and then click on All Pages. Hover your mouse over the page you want to edit and in the status bar on the bottom, you should see the id number. It will be something like:
http://laurakathrynphotography.com/wp-admin/post.php?post=2&action-edit
The number 2 (bolded above) is the page id.Here’s what it looks like on one of my test pages:
ScreenshotNow in your CSS, try the following. Notice the 2 in the page-id-7.
body.page-id-7 {
background: #ff0000 !important;
}That should change the background of whatever page you want. #ff0000 is red so you should notice it pretty easily if it works. There are a lot of other elements you can manipulate on each page if you want to–so much that you can customize every page if you so desired.
Note:
Regular pages are called page-id-###.
Posts are identified as postid-###.I hope that helps! Let me know if you have any other questions.
-
Ahem:
Now in your CSS, try the following. Notice the 2 in the page-id-7.
I meant to say:
Notice the 7 in the page-id-7.Sorry about that!
-
Hey there thanks so much! I’m going to give this a go right now and I’ll get back with you in a few and let you know how I did ;)
Appreciate it! -
Well, it sort of worked, but I guess I wasn’t clear on what background I meant (totally my fault)
Is there a way to change the background of a page or post, and by “background” I mean the area where the text is written?? -
Probably. Could you let me know a page and area on your blog you want to change? I’ll take a look at it and see if I can figure it out.
-
Sure thing! Try this page.
http://laurakathrynphotography.com/say-hello/
The color behind the text and photos right now is white. I’m interested in changing it to another color (possibly a gray – if you need a Hex#, try #bababa)
There are few other pages I’d like to do this with for sure.
http://laurakathrynphotography.com/children-collections/
http://laurakathrynphotography.com/family-collections/If it’s not possible it’s not a huge deal, but figured I’d ask :) Thanks for your help!
-
Can you try this? I think it will work.
/*say-hello*/
.page-id-210 .site-main {background-color:#bababa !important}/*children-collections*/
.page-id-661 .site-main {background-color:#bababa !important}/*family-collections*/
.page-id-664 .site-main {background-color:#bababa !important}I think that restricts the background-color change to just the main content area (site-main) on the specific pages.
I hope that works for you. Please let me know if it does!
-
Hi again!
Well, the say hello page SORT OF worked. it grayed out a large portion of the back ground but it’s almost as if the margins are set to wide on the sides, because I still had a large amount of white on either side of the text that was NOT grayed out. (I don’t know how to send you a screen shot otherwise I would)the other two formulas didn’t work at all I’m afraid. They did nothing when I placed them in the CSS.
Like I said, no big deal :) If it doesn’t work it out I can live with it :)
-
Are you wanting it to be gray from far left to far right? Basically no teal(ish) color at all on the sides in the middle of the page? If so, that might be a bit trickier.
-
Nope, see the part that is white? Just any section that is white I would like to be gray. The green color on the sides isn’t the problem. but when I entered that code you gave me in CSS, It only changed part of the page gray, leaving two large strips of white on either side, and then the teal was at the outer edges.
If you want, I can re-enter that code just so you see what I mean if that doesn’t make sense.
-
OK. I think I know what’s going on.
Can you try this?/*say-hello*/
.page-id-210 .site-content {background-color:#bababa !important}I think I grabbed the wrong element from your source code when I was looking at it.
-
Well we’re ALMOST there :) Now I’ve got two skinny white lines surrounding the text.
I’ve changed the page id we’re trying this on. Check out the link below to see what happens when I added both the content and main codes together. I’ll leave it like that until I hear back from you.
http://laurakathrynphotography.com/faq/ -
Hello again. I’m sorry about the delay. I went to a Super Bowl party last night.
How about this? I hope this is it!
.page-id-919 .content-wrapper {background-color:#bababa !important;}
.page-id-919 .site-content {background-color:#bababa !important;}Out of curiosity, what browser do you use when you Admin your WordPress site? I use Chrome and there is a handy element inspector built in so you can identify the different elements/tags on your web pages.
-
You got it! Thanks so much! It looks perfect :)
And I use Firefox mainly. Would you suggest Chrome??
thanks ever so much ;)
-
Hooray!
I’ve used Firebug (http://getfirebug.com/html) in the past, but it was a few years ago. It was a pretty good way to see all of the different tags and elements buried in a web page. You might want to check it out if you’re going to customize your WordPress site. It’s definitely handy.I’m glad I was able to help out! Have a great evening!
-
-
Hey! You were so helpful last time, I wondered if you could help me out with a specific question.
I have one main sidebar I use for specific widgets I want on the blog area of my site. Is there a way to change background colors for specific widgets? Or at least change the background color to the entire sidebar?
Here’s link to what I’m talking about. You can see the side bar and the widgets I”m using here:
http://laurakathrynphotography.com/category/blog/laura-kate/If this question is confusing, let me know and I’ll try to re-arrange the way I asked it :)
thanks in advance ;)
-
Hello again, Laura!
I think you may be in luck! Try these out!/*whole sidebar */
.widget-area {background-color:#fababa !important}
/*archives*/
.widget_archive {background-color:#bafaba !important}
/*image area*/
.widget_image {background-color:#babafa !important}
/*blog subscript area*/
.widget_blog_subscription {background-color:#fabafa !important}Let me know if that works for you, please!
Have a great day! -
- The topic ‘Changing background color of certain pages’ is closed to new replies.
WordPress.com Forums 
