Place of Stuff

As I said, oooh, yesterday, I had become dissatisfied with the look of this blog. The template I had settled on (Ocadia, by Beccary) was very usable and looked good, but because it was so busy any small changes could sometimes result in my having to do extra work. The design down the side, for example, didn’t continue all the way down the side on my Links page. I was also a wee bit unhappy with the fact that it didn’t fill the whole page – it looked a bit squashed.

But I could live with it. Until yesterday when I thought “I have 2 weeks off and it’s about time I did something about it.” So I went hunting for an alternative style. My criteria were pretty simple: it had to be 2 column and of clean design. I went over to the Wordpress Theme Browser site and decided upon Phenom v2 by DL2 Media.

A screenshot of the page (as you can see, it is quite different from the homepage as it now stands):

The look of the page was almost exactly what I wanted. It was sparse, clean, functional and filled the screen. However, I didn’t much like the colour scheme. The orange just wasn’t me. So I dug into the index.php files and the style.css files and even the comments.php file – you have to remember that I don’t know html and css and php and so I look everywhere – and then back to the stylesheet (style.css) because that’s where the font colour is set. When I started changing the colours, I was helped immensely by Doug’s Color Checker, a great site which I would recommend to anyone who needs to fiddle with the colour scheme on their site. Anyway, blue is a colour I like and it was what I wanted for the site.

The original link back to the main page was enclosed in the main text area. With the various blues and the font sizes, the title was lost in the posts. Back to the stylesheet I went. I fiddles with sizes and colours but was still unhappy. I wanted to have a small header image that set this site apart from other sites. I opened the Gimp, the excellent open source alternative to Adobe’s PhotoShop. But I am an art idiot and the whole thing is too complex for the likes of me! Since I use KDE as my desktop environment, I opened KolourPaint instead – a more functional alternative to MS Paint. I had already been to Google’s Image Search (GIS) and looked for a picture of a cardboard box. As an aside, I was surprised by the number of images of cardboard boxes which had been watermarked. Is there that much cardboard box picture theft? I created a new header image by pasting in the picture and adding text – simple and yet still functional and personal. Then I made the image clickable. Since the various boxes resize when the window resizes, I made the image relatively small and filled in the rest of the header box with white (in the stylesheet). That way, it resizes to an extent and doesn’t look odd.

So far so good. My next step was to go back to the various .php sheets and reenable the relevant plugins, like the browser identifier. That was the job of a few minutes. I had been reading Lorelle VanFossen’s pages on Wordpress and blogging in general and remembered that she had posted recently about the live preview function for the comments page. I recommend her site for any bloggers, by the way, she updates very often and very regularly and has a host of advice for bloggers. In fact, whenever I tweak the site, it’s usually because of a post I have read on her site. The bottom of Lorelle’s post had 3 links to live comment preview options, I chose Jeff Minard’s LiveCommentPreview plugin because it seemed easiest to install. Which it was. Further reading of Lorelle’s post made me start to think about the placement of the preview. I wanted it to be in it’s own box and I wanted it to be usable and functional. It places itself beneath the box you type in by default, but I thought that it could be hidden too easily if you don’t scroll all the way to the bottom of the page. I then placed it above the box you type in, but it didn’t look right. That left the right :) Which had it’s own problems. Enclosing the preview in it’s own box was a piece of cake. What wasn’t was getting to be positioned correctly. Back to the style sheet I went. After a comment from Alison, I investigated putting the live comment line in it’s own tags, but that didn’t seem to work. Below is the section of my style sheet that deals with the live preview:

style.css:
.commentpreview
{
position:absolute;
left:43%;
height:35%;
width:35%;
margin:0.4em;
overflow:auto;
font-size:0.8em;
line-height:1em;padding:0 0.5em;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color:#E5E5E5;
margin-bottom:0.8em;
}
Probably not elegant at all, but it works. Or at least seems to.What I find quite weird is that from the point I decided to make the changes to the point where I was pretty happy with it and started to write this post was only a few hours in total. Not bad for a non-coder :)

Anyway, enough navel gazing, back to your regularly scheduled programming.