I’ve recently started to take a more organic approach to site design – I was getting hacked off with the ‘clean’ or ’3D’ look that web2.0 seems to be wallowing in. Previously connection speeds have been an issue but with browser and IP technology improvements this isn’t so relevant.
I tend to do basic layouts in Illustrator then ship it into Photoshop for refinement – not strictly necessary but it works for me. Then I get stuck in with my tablet using various airbrushes and paint-style brushes making sure to keep every element in layers and groups so any of your many inevitable mistakes (if you work like me) can be erased easily.
I usually make a ‘short page’ as below.
This contains all the artwork for the header, mid-page section and footer. This will then get ‘sliced’ in photoshop into the 3 sections and placed into the page design (I usually use a 10 pixel slice for the middle repeated section – this seems to be a fair compromise between loading speed and rendering speed for individual computers).
If gradual gradients are avoided and a more ‘paint’ or ‘pencil’ feel is achieved then a higher level of compression can be used without much visual loss enabling file sizes to be kept down.
At some point you may decide to take the leap from a pre-packaged online blogging platform such as Blogger or WordPress.com and set up your own WordPress installation. It may seem like a crazy notion but if you choose the right host they will do most of the work for you. Also these days the very nice people at WordPress have made the installation a fairly painless experience with excellent software and tutorials.
Then of course you need to install a new theme. There are thousands available – wordpress.org/extend is a good place to start. Then you will need to use an ftp client such as Filezilla (free, open-source and excellent) to upload your new theme (this will go into the following directory www.your_blog.com/wp-content/themes). Then activate from your WordPress dashboard by going to dashboard>design>themes then click on the theme you’ve uploaded.
At some point you may wish to start to edit your theme – changing fonts, colour schemes or even graphics. This can be done straight from WordPress by going to dashboard>design>theme editor and directly editing the stylesheet. This all works very well but the possibility of making a mistake is high and this will ‘go live’ as soon as you hit update.
The best way to deal with this is local editing on your computer. Open your themes files in your FTP client and drag the stylesheet and images folder into a new folder on your desktop. Then save a page from your blog as html only in the same folder – open that page in a text editor such as wordpad and change the address of the stylesheet from a URL (probably something like <link rel=”stylesheet” type=”text/css” href=”http://your_blog.co/wp-content/themes/your_theme/style.css” /> to a local address such as <link rel=”stylesheet” type=”text/css” href=”style.css” />.
This will then mean you can open your saved page in a browser and edit the style.css without touching your real website.
If you know nothing about CSS (cascading style sheets) then please ignore this article and go straight to the pub, drink several large fruity cocktails and talk rubbish to man named Nigel.
A recent problem found some interesting solutions – I wanted to show a feature on posts of a certain category only.
The feature was the excellent ratings widget from gdragon – the problem was that from their dashboard it was either all or nothing regarding which posts showed the widget.
So I included the following code in the loop (in my case on index.php and single.php) where I wanted the widget to appear
<?php if ( in_category('2') ) { include ('ratings_widget.php'); } ?>
…where ’2′ is the category ID for which posts I want it to show in.
I then created a file called ‘ratings_widget.php’ which included only the placement code for the widget. I then uploaded it with the theme’s php files (next to style.css) via ftp.
The result being that the code was only included in the page when the category was the one I wanted. Easy. Ish.
A similar process can be used to style a particular category of post by using this…
<?php if ( in_category('2') ) { echo ('class="style_for _category2"'); } ?>
(obviously change ‘style_for _category2′ to something better).
Or even include features on particular pages instead of categories with this…
<?php if ( is_home() ) { include ('feature.php'); } ?>
This will give huge flexibilty to layout and feature placement to your blog without having to place the code into every post or creating templates.
I was recently asked by JohnC from lifeonwards for some icon creation tips for Photoshop and links to tutorials about the same.
My first tip for icon creation is to steer away from Photoshop for this sort of image creation – all the tools are there if you need them but Adobe Illustrator is much better suited for creating small, clear graphics.
The clue being in the name – Photoshop is a bitmap editor working on individual pixels so is therefore perfect for manipulating photorealistic images. Illustrator is set up for creating clear, graphical type images and as it uses SVG (scaleable vector graphics) perfecting layout and general design is a lot easier.
The 2 programmes are very similar in use – the tool palette is similar and so is the layer/sub-layer system and can also be used together very easily. I quite often make up a basic layout with illustrator then drag it into Photoshop to tweak a few things with an airbrush or whatever…
As for tutorials – there are millions of sites out there and a good google around will certainly get some interesting results – I generally start at the Adobe design centre and if they don’t have what I’m looking for then head back out into google land…
For a loverly calendar style date for your posts please steal the following code…
First you need to place some code into your index.php file just after the start of the loop ie just after
<?php while ( have_posts() ) : the_post() ?>
as follows…
<div class="date_cal">
<div class="day"><?php the_time ('D'); ?></div>
<div class="date"><?php the_time ('j'); ?></div>
<div class="month"><?php the_time ('M'); ?></div>
<div class="year"><?php the_time ('Y'); ?></div>
</div>
Then add this to your stylesheet…
.date_cal {
float:right;
display:block;
width: 50px;
height: 80px;
margin: 0 10px 0 0;
background: url('images/datebutton.gif') no-repeat;
}
.date_cal .day {
color: #FFF;
font-size: 15px;
margin: 1px 0 0 6px;
}
.date_cal .date {
color: #333;
font-size: 16px;
margin: 1px 0 0 6px;
}
.date_cal .month {
color: #333;
font-size: 13px;
margin: 0 0 0 6px;
text-transform: uppercase;
}
.date_cal .year {
color: #333;
font-size: 9px;
margin: 0 0 0 6px;
}
Then add a calendar image called datebutton.gif 50px wide and 80px high to a directory named ‘images’ in the top level of your current themes directory (ie yourdomain.com/wp-content/themes/currenttheme/images).
You can steal one of these if you like (just drag them onto your desktop and rename)
(only good for light backgrounds)
PS you may have to tweak margin sizes depending on default lineheights etc.
- my first full theme for WordPress. You can download it here. Please get back to me if you find any glitches, bugs or hooning errors. Or actually – just keep them to yourself and let me live in blissful ignorance…
…the header for my new theme. I just have to cobble together the rest of the site and it’s all done (…?)
This depends on how far you want to go…
…if you just want to change the header graphic, and maybe the colour scheme you will find that K2 is fantastic in that respect (also take a look at Thematic). However if you want to completely butcher the layout – for example change sidebar configuration and maybe have dynamic page/post content then a more basic theme would be appropriate.
K2 and Themeshaper have made all configuration they have available accessable from the dashboard (which is extremely excellent) but the coding for this does tend to make major overhauls somewhat confusing – it is possible but will maybe take up more time than it’s worth.
If you want to build your own theme from scratch then a ‘back to basics’ framework such as Sandbox may well fill your needs.
I’ve sifted through many contact form plugins for wordpress. Luckily you don’t have to go through the nightmare of trying them all out as I have done it for you!
The best, most customisable I’ve found is available at delicious days (great recipes there too – in case you get peckish during installation). A huge menu will appear in your dashboard with a gazillion options for contact, subscription, ‘tell a friend’ and upload forms. It looks quite daunting at first but you can ignore all the parts that don’t concern you and the instructions are clear and concise.
You can see one of their forms in action here (please feel free to leave me a note…).
The usual procedure – ftp into your wp-content/plugins folder and activate on the plugins page of your dashboard…
If you want to change your archives in WordPress from full posts to excerpts go to design>theme editor>archive.php and change the following code from
<?php the_content(); ?>
to
<?php the_excerpt(); ?>
If archive.php doesn’t exist then best leave well alone…..
(PS this also works on your index page)