A lick of paint

I’m a big fan of the Revolution range of themes by Brian Gardner and as you may have noticed if you’re reading this at upyourego.com - I’ve implemented a new one.

[Read more]

Share/Save

Time for change

The baby has yet to arrive so I’ve had a little bit of free time to work on the new look for Up Your Ego - this blog. I’ve designed to create my own custom theme from scratch - it’s the only way I’m going to get exactly what I’m looking for.

That and it will give me a chance to brush up on some long since rusty design and developing skills - things I used to do on a daily basis before making the leap from design to journalism.

So I’ve create the look - I’ve been playing with Photoshop and I’ve create a couple of PSD files that show what I want the homepage of the blog and an article page to look like.

Here is the main homepage of the blog - the first page you’ll come to when you type upyourego.com into a browser or follow a link from someone elses sidebar.

As I explained in the last post - big orange box at the top will be a promo space - somewhere I can show off other things I’m doing or posts I want to make sticky.

Underneath you have the most recent post in a promo space on the left and on the right hand side the most popular post (based on the popularity plugin for wordpress).

Underneath that you have the bulk of the page - two or three stories (or at least the first few paras of the story) on the left hand side and on the right - at the top links to the next five stories (just headline and date) and underneath that the usual sidebar stuff like tags and links.

I haven’t included space for ads yet on this page but Google ads are making me so little at the moment that it wasn’t worth the stress trying to fit them in - they’re not exactly asthetically pleasing.

Now the actual story page. This is what you go to when you click on one of the homepage headlines, get to a story directly from Digg, Google or the like - or even through some link love in somebody elses blog feature.

One thing I’ve always looked for in a blog template is that the story page is different to the homepage - not so fundamentally different the whole look and feel is changed but enough that you know you’re somewhere else on the site.

I also like to have the right hand menus of story pages used to show content related to that story - this template does that at the moment but I think it could be improved on.

So I’ve kept the green menu bar, logo and search box as standard navigation features but I’ve removed the big orange promo space, the second green bar and the two promo spaces underneath that.

I’ve kept the basic layout structure as well - you have the full blog post on the left hand side, the Story Tags and share this links next to the story and then on the right you have links and information related to this particular blog post.

The example shows related links, related articles etc… but it could also include Flickr images, video clips or even snippets of information from Wikipedia.

The Comment box is a darker colour with the form on the right and the comments on the left (similar to the one used for the template I’m currently using).

I’m either going to have the comments shown as standard - just a list of all comments or use Ajax to show one comment at a time and a small circle bound arrow to scroll through them.

CLICK THE IMAGES ABOVE FOR FULL SIZE VERSIONS

Development

Now I’m VERY excited about all this and I’ve done the bit I enjoy - the easy bit - the design bit. Now I have to get on with the side of development that normally causes me to give up - the actual development bit.

I’ve built dozens of websites over the years - for everything from bands to government departments, I’ve even customised Wordpress templates and built Blogger templates from scratch - but any hardcore development has always fallen to a dev team.

So now I’m faced with a steep learning curve. The way I see it I need to:

1) Brush up on my CSS to create the gradients and layout
Until now I’ve only really ever used CSS for create basic styles for text and table headers. I’ve never used it for layout or creating gradient based header bars - I normally use images for that.

2) Brush up on my Javascript
I know a little Javascript, I can code simple things like form validation - but I need to learn a lot more (or at the very least learn how to integrate libraries) before I can do some of the things I want for the blog. Fortunately it will work without the AJAX stuff.

3) Get to grips with Wordpress
As I’ve decided not to customise an existing template but create my own - and some of the things I want to do (like having posts shown in four different ways in four different areas on the homepage) aren’t things that comes as standard. So I need to get reading wordpress.org and work out how to put it all together.

4) Brush up on my PHP
I know a little PHP but by a little I mean a very little - I can code a fair bit in VBScript but who the hell wants that? So I need to get myself a PHP book and start reading as I need to work out a way of getting the ‘RELATED’ content shown on the side of the Story template generated or at least inputted at the same time as creating a story in Wordpress - I’m guessing this is going to require a plugin of some kind.

So if anybody knows of any existing plugins that will do what I need or can recommend a good PHP or Wordpress information source then please do.

I’m also thinking about releasing the finished product as a Creative Commons theme for other people to use and adapt as they like. If I do - should I work out a way of changing the colour scheme and image through a Wordpress Admin page?

Anyone want to help with development of the theme?

Anyway - whatever way I decide to go about it I’m going to post updates on here as and when I do them or get time. If I write a piece of code I think might be useful - I’ll publish it.

You should be able to watch the evolution of a theme.

Share/Save

Can you get too flash?

The headline doesn’t refer to flash in the Adobe sense but more - flash as in the over the top sense, the concept of doing something that looks striking and even works, something that looks potentially professional and slick.

The reason I ask is that I’ve been playing inside Photoshop to try and create a new look for Up Your Ego - the site as it is right now is basically an adapted off the shelf, free theme (U5) and it looks a bit haphazard - but it also looks like a blog.

Here is the design I’ve been working towards so far:

In the orange box you’d have a promos to key features or even adverts - it could even possibly have video clips or images.

Then underneath that you’d have another area (probably defined by a light grey line) that would have the top two stories with an associated image (side by side) with a headline, summary and (more…) link.

Then underneath the grey line you’d have the next five stories on the left - a calendar on the right and underneath the calendar all the usual blog sidebar objects.

Clicking on the story would offer a slightly different page - you’d get the green bar across the top and then a different body and sidebar to the one seen on the index page.

But is this all too complicated or professional for a blog? Do expectations increase with a complicated theme? Would I be better going for a more simple approach?

Share/Save