Notes On The Site Changes

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):

Unchanged Phenom v2

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.

Advertisements

Posted on 22 May, 2006, in Blogging/WordPress, Computer Stuff, Site News. Bookmark the permalink. 15 Comments.

  1. Thanks for the kind words and I’m glad I could help. The Preview is nice and works well, staying really visible.

    However, you might think about changing your base font to a tad larger. With the blue color of the text, the small font size is hard to read. If it were black against white, this might not be so much of an issue, but it is when it is light blue against white. Not enough contrast.

    Other than that, keep up the great work and tweaking with the website’s design. It’s addictive! You are warned. Hee hee.

  2. Thanks Lorelle. Yes, the font could do with being a touch larger, more tweaking needed I think. And again, it’s all your fault 🙂

  3. How’s that?

  4. Nice design Ray! 😀

    It’s still a little difficult to read though… As Lorelle said, there isn’t enough contrast between the light blue text and the white background. Not that that’s an issue for me – I tend to highlight everything I read 😉

    So, I suggest either darkening the background slightly (maybe a light shade of grey like #efefef would work), or making the text a deeper shade of blue. I like the new layout though 🙂

  5. I’m a bit wary of darkening the background as that would end up blending it in with the main background.

    I’ll have a look at darker light blues and see what I can come up with.

  6. Hmm, grey works quite well with the blues. My tweaking sense is tingling!

  7. How’s that? Does it look alright?

  8. There is a great colour picker for KDE called (not surprisingly KColourChooser. It also comes with a picker tool to pick any colour from the desktop.

  9. So what you’re saying is that instead of hitting Google to find the scheme, I could have looked right under my own nose?

    D’oh!

  10. hey! back to grey! it’s ok…

  11. Yep, back to grey. It may not be overly flashy, but it’s readable and easy on my eyes – and I read this thing more than anyone!

    Glad you like it.

  12. I really like the grey – it’s much easier to read now. Good job Ray 🙂

  13. The favicon now manages the header. Woo-hoo! I have a theme of sorts.

  14. Just have to get it to go on every page.

  15. I think I’m done: the favicon is now on all pages, the theme carries across all pages, “witty” changes have been made to all links, the footer is in place and change, I have uploaded the screenshot to my admin panel (WP users will know what that means), plugins are activated and working.

    I’m done. Boo-ya!

%d bloggers like this: