WordPress.org

1. Caspar
   Member
   Posted 1 year ago #

   howdy!

   i would like turn my backgorund, which is white, into a dark grey. but i do not mean the background where text is.

   example:

   this is my site>>> http://www.iranicum.com

   and i want to have the white backgroundcolors changed into grey like this >>> http://demo.colorlabsproject.com/arthemia/

   what do i need to do step by step to turn the white backgrounds into grey as you can see it in the example?

   be aware that i am a beginner and still not so familiar with coding language and terms, so please be patient :)

   here my CSS stylesheet:

   [CSS moderated as per the Forum Rules. Please just post a link to your site.]

2. beingzoe
   Member
   Posted 1 year ago #

   Line 20 style.css
   

   body {
       background: none repeat scroll 0 0 #333333;
       color: #333333;
       font: 110% Droid Serif,Vollkorn,Arial,Helvetica;
   }

   Line 78 style.css
   

   #head {
       background: none repeat scroll 0 0 #FFFFFF;
       border-left: 5px solid #FFFFFF;
       border-right: 5px solid #FFFFFF;
       font-size: 0.7em;
       margin: 0 auto;
       padding: 18px 0 0;
       width: 960px;
   }

   Line 87 style.css

   #page {
       background: none repeat scroll 0 0 #ECECEC;
       border-left: 5px solid #FFFFFF;
       border-right: 5px solid #FFFFFF;
       font-size: 0.7em;
       margin: 0 auto;
       padding: 10px;
       width: 940px;
   }

   Line 744 style.css
   

   #front-popular {
       /*background: url("images/bottombar.png") no-repeat scroll center bottom #2C2C2C;*/
       border-left: 5px solid #FFFFFF;
       border-right: 5px solid #FFFFFF;
       color: #FFFFFF;
       font-size: 0.7em;
       margin: 0 auto;
       padding: 10px;
       width: 940px;
   }

   Line 796 style.css
   

   #footer {
       background: none repeat scroll 0 0 #DEDEDE;
       border-left: 5px solid #FFFFFF;
       border-right: 5px solid #FFFFFF;
       font-size: 0.6em;
       margin: 0 auto;
       padding-bottom: 10px;
       padding-top: 10px;
       width: 960px;
   }

   That will be exactly what you want. Though there will be some spacing issues in the header and other stuff that you are still going to need to figure out. I highly recommend that you read up on basic html/css if you seriously want to edit your site yourself. Best of luck.

   Oh and install the firebug plugin for firefox. Like magic you can point at the thing you need to change and it will show the markup and css that is doing it.

3. Caspar
   Member
   Posted 1 year ago #

   thank you VERY much for this detailed description!

   but your advice not to start editing myself before having basic knowledge makes me a little shaky.

   i am pretty sure that i wont be able to fix spacing issue and "other stuff" on my own.

   hmmmm....

   let me tell you what i already "know", so you can say if its worth it for me to take the risk of having an unrendered website for at least some while:

   as you can see on the webpage, i already able to change the header, the bodytext fonts, some title-jpgs and the footer :)

   do you think that tiny knwoledge is enough? and anyway, what do you expect needs to be fixed after goint thorugh the steps of your introduction?

   to be sure again: i only want the backgorund colour on the side spaces to become gray, not the spaces where text is written or the widgetsboxes are. that should remain white.

   best regards from germany

4. beingzoe
   Member
   Posted 1 year ago #

   I only meant that in the future for OTHER things.

   The code above can be used verbatim and was done live using firebug (a web developer plugin) on your actual website.

   If you copy and paste my bits of code over the nearly identical blocks of code at those line numbers I provided you will be able to have what you want (you can compare my snippets to the actual stylesheet to see the few lines added/changed - mostly adding borders). To be safe you should save a copy of the style.css (e.g. style.css.bak) first in case something goes wrong.

   If you don't have software that will let you see the line numbers of a file then you can still search for the css selectors in your stylesheet...

   #footer { or #head { and one by one make the changes. Those are unique but be sure to edit only the css declaration blocks that match exactly

   If you do it using a program where you can see the line numbers then I would start at the bottom or last entry (i.e. line 796) so that the line numbers do not change on you as you work your way down/up the file.

   As for the "look" you want I use the link you provided as the reference for the changes to yours. Indeed it looks like your theme is that theme and someone actually removed what I was really just putting back in the snippets I provided above.

   Best of luck.

5. Caspar
   Member
   Posted 1 year ago #

   i did what you told me. but nothing changed on my website. nothing. how comes?

   best regards

6. Caspar
   Member
   Posted 1 year ago #

   beingzoe,

   now it is working after a little while.

   THANK YOU SO MUCH!!!

   the site looks exactly like i wanted it to look.

   Best regards from germany

Topic Closed

This topic has been closed to new replies.