Okay, so that was a little over the top. Basically I wanted to find out whether I could do much with the appearance of my blog, given the fact that I am not hosting it. So my choice of skins is limited to what Geeks With Blogs provides. I have been putting it off for a while now, but today was an unusually slow day and I decided to take a peek under the hood.
The appearance of my blog now, is what used to be the LuxLight display skin. So what did I do? Well I shifted the sidebar to the left. I made my content area wider (at the expense of poor layout if you reduce the size of your browser window too much). I changed some colors here and there, and I added a category to the sidebar, which isn't “News”. :)
A few tricks that might help others like me, who just love mutiliating a perfectly good skin. This might be old old information to some people.
- I set my Display Skin to LuxLight, and then used http://jigsaw.w3.org/css-validator/ to extract the CSS part out. I know I know, this is a round about way, but I was too impatient to dig out the LuxLight CSS from the web.
- With this CSS in hand, I proceeded to override a whole lot of CSS Elements and Classes. These overrides, I put in the Custom CSS Selectors section.
- For the new category, Map Stats in this case, I wrote an Un-Numbered List and some List Items in HTML, into the Static News/Announcement section in the configuration page. This section takes JavaScript too, so use it wisely. Or better still, exploit it!
Here is a snippet of the Custom CSS that I wrote for this page. Ctrl+C and Ctrl+V were used generously, so the CSS purists will find a lot of redundant code. You can take the idea further and run with it.
#container
{
width
: auto;
width
: auto;
width
: auto;
margin
: 1em 10px auto 10px;
background-color
: #ffffff;
text-align
: left;
}
#content
{
padding
: 0.5em 1em;
margin
: 6px 0 0 0;
float
: right;
width
: 750px;
}
#sidebar-a
{
background-color
: #efefef;
width
: 200px;
float
: left;
padding
: 0.5em;
font-size
: 0.9em;
border-style
: solid;
border-width
: 1px;
border-color
: #0040FF;
margin : 6px 0 0 0;
}
Here's the HTML I used in the Static News configuration.
<H3>Map Stats</H3>
<UL>
<LI>
<script src="http://mapstats.blogflux.com/button.js.php?id=3312" language="JavaScript" type="text/javascript"></script>
<noscript>
<a href="http://mapstats.blogflux.com/3312.html"><img src="http://mapstats.blogflux.com/button.php?id=3312" alt="Blog Flux MapStats: Stats and Counter for Devdutt's Blog"
border="0" />
</a>
</noscript>
</LI>
</UL>
See...that was relatively painless, right? So go cutomize your .TEXT blog.