Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

I recently re styled my blog. I wanted a new look and something unique. I played with the various themes that you can chose from when customizing your blog. I also saw that you can add custom CSS, so I knew that it was possible to get some unique looks.

AI started by adopting the naked skin which applies no style sheets. This gave me a blank slate to work with. It also looks very difficult to read:

So I now have a blank slate to work with.

I examined the source for the page to look at the structure. I discovered a few key ids. Container, navigation, header, content, and so on. I knew I had what I needed to make the blog look the way I wanted.

This would only require a little experimenting. Naturally, I would prefer to experiment in private. For me at least, style sheet voodoo is as much art as it is science. Experimenting will be a lot of trial and error. I would rather everyone not see all of the intermediate results.

So I view source and save the html locally. In order to make everything work right, I have to expand out the local references. An href like this: href="/skins/_System/commonstyle.css"> Becomes this: href="http://geekswithblogs.net/skins/_System/commonstyle.css">

 

So far so good.

Next I created an empty style sheet and linked in into my saved html file. The CSS that I place in this file will eventually go into the custom CSS in my blog configuration.

 

Now let the fun begin.

 

The first thing that I decided to do was to style the actual container:

#container

{

margin-top:40px;

    width :800px;

    background-color:#DCDCDC;

    margin-left :auto ;

    margin-right :auto;

}

 

Next, I styled the navigation area:

#navigation

{

width :200px;

padding-left :10px;

padding-right :10px;

border : solid 1px black;

border-right :solid 1px white;

display:block;

background-color:#6B7289;

}

 

And then the content area:

#content

{

width : 550px;

padding-left :10px;

padding-right :20px;

background-color:#8DA4C3;

}

 

At this point, the blog looks much more readable, but there are still many details. We begin to see the color scheme take shape as well as the structure of the document. Now we can move on to some more nitpicky details involved in getting just rights. Now let's turn our attention to the titles.

 

#navigation .title

{

font-weight :bold;

background-color :black;

color :White;

padding-left :-10px;

text-align:center;

 

}

 

#header .title

{

font-size :3em;

text-align:center;

font-family :Impact

padding-top:15px;

}

#header .title a

{

    color:#59718F;

}

#header .subtitle

{

    font-size :.8em;

    text-align :right;

    margin-right : 10px;

    margin-bottom :10px;

}

 

#content .title

{

    font-size :1.2em;

    line-height : 3em;

    text-align :center ;

    background-color :#59718F;

    margin : 3px;

    background-color:#ff7c11;

}

 

#content .title a

{

    color :White;

}

 

 

 

Now we are looking a lot like the final site, but there are still some details missing. Details that may be easily overlooked, but they are important details none the less. There is too much space between the items in the lists, and we would love to lose the bullet points. I also want to include my image to be included in the title. Part of my branding.

#container

{

background-image :url(http://tinyurl.com/2v6f5la);

background-position:top left;

background-repeat:no-repeat;

border : solid 1px black;

min-height:100px;

}

 

The fun is just beginning. Now to play with adding some jQuery magic

Posted on Sunday, August 15, 2010 9:16 PM Stylish musings | Back to top


Comments on this post: Newly Styled Blog

comments powered by Disqus

Copyright © Nick Harrison | Powered by: GeeksWithBlogs.net