I created my personal website using WordPress. I am styling it using the Genesis Framework, which is really a super, but complex application for creating and modifying your theme, or the overall look and functionality of the website.
As it came from Studiopress, it was pretty bland – black text on a white background, and no bells and whistles. I intend to gradually change its looks and discuss what I did.
Today, I’ve decided that I want to make the background black. Perhaps, someday I’ll put a graphic behind the content but for today, I’m just going to change the colors of the background.
NOTE: Today’s changes will all be done in the style.css file located in the public_html/personal/wp-content/themes/child folder of my newmediauses.com account. This will be done using a Macintosh FTP program called Transmit to access my website and a Macintosh text editor called TextMate to effect the required changes.
The framework (of Genesis Frameworks) looks like this. This diagram is the visual markup guide. By studying it and applying Genesis functions to it, you can build some pretty awesome themes (I’m told). I’m still struggling to do so.
So, to change the background (or body) to black, I opened the style.css file and searched for body and found it down at like 154, defined as:
body {
background-color: #fff;
}
I changed the background color from white (#fff) to black (#000) and ended up with a pretty stark sight. I had expected that the content of the website would reside on a white background with a black body background. Well, it can but not just from that one change.
Note that in the visual markup guide, there is an overall container named #wrap and it contains 5 other subcontainers named #header, #nav, #subnav, #inner, and #footer, respectively. And each of them contain other definitions but we will not be bothered by them in this post.
I will create a white background-color the colors for 2 of the remaining containers. They currently inherit the background color of the body. CSS stuff, you know. (I’m going to leave the #nav and #footer ids alone.)
Added background-color: #fff; to the #header id at the inserted line 172. and for #inner at inserted line 604
As I made these changes, the background showed through between the #nav and #inner ids. This is because of the margin definitions of these two ids. So, I changed margin: 20px auto 0; in the #inner id (line 605) to margin: 0 auto;
and
changed margin: 0 auto 10px; in the #nav id (line 396) to margin: 0 auto 10px;
But you fix one thing and another thing pops up – like whack-a-mole. When the body and all the ids had a white background, it was not so obvious that the text butted right up to the left of its container. So, what do we do?
For the time being, I will just add padding: 0 0 0 20px; to each of these containers: #inner, #nav and also for #title-area.
