Customise the header image in the default WordPress theme

July 21st, 2009

finished header image

The WordPress blogging script is supplied with two themes, Classic and Default. The Default theme is based on Kubrick by Michael Heilemann and comes with an image header graphic with a blue gradient in a white frame. This post explains how to put an image into the blue gradient area so that the white frame is kept visible, so that the rest of the theme looks consistent.

I use Ubuntu on my home computer, so I’ve used the Gnu Image Manipulation Program (GIMP) to edit the header. GIMP is available for Mac OS X and Windows as well and is free to download. There is even a version that you can run from a pen drive without installing the application on your hard drive.

A close look at the Kubrick theme in action on my own web site shows the white frame with curved corners.

detail of the kubrickheader image

There is actually a further grey frame around the white frame. The grey frame is matched to the background colour of the Web page, so you can’t see the join. Loading the header into the GIMP shows the white frame on the grey background.

detail of the unmodified kubrickheader image

We need to select the central blue image and then paste another image into the selection. The problem is that the central blue area has a gradient from dark to lighter blue, and this gradient makes it hard to select the central area directly. I’ve worked out how to select the white frame and the grey background and then invert the selection, so that the central area is selected.

To load the header into GIMP, you need to find the header file, called kubrickheader.jpg. The file is in the images folder, inside the Default theme folder, itself inside the wp-themes folder. The wp-themes folder is inside the wp-content folder in the top level of the WordPress application. I would suggest that you make a copy of the kubrickheader.jpg file to save having to download the WordPress zip file again.

  • Load the kubrickheader.jpg into GIMP.
  • Click on the Fuzzy Select Tool GIMP fuzzy select tool
  • Click on the grey outer background of the image
  • You should see the ‘ants’ moving around the image showing the region that has been selected.
  • If you zoom up to (say) 400% you will notice that the selection area does not quite reach to the end of the grey area, it ends as the gradient begins to move towards a darker grey thin line that sets off the white frame

detail of the fuzzy select boundary

  • Use the Select | Grow command to move the selection boundary inwards towards the white frame. We want the seection to cross into the white frame by enough pixels so that the corners are within the selection region, but not so far that the selection boundary impinges on the blue gradient. I used 9 pixels for the amount of ‘growth’.

fuzzy select tool window

  • You can see how the selection boundary now reaches into the white frame

detail showing the grown selection and how it impinges on the white frame

  • Now click the Fuzzy Select Tool and press and hold the shift key to extend the selection
  • Click on the white frame outside the selected region, and when you release the mouse, the selection boundary should reach the end of the white frame. As you can see, the selection boundary stops as soon as the boundary reaches the anti-aliased pixels that start the blue gradient area

detail showing the result of the second use of the fuzzy select tool

  • Next, you need to ‘invert’ the selection. Just go to the Select menu and choose the Invert command. You will notice that the ‘ants’ are marching around the outside of the blue gradient area.

Now all you have to do is to

  • open your background image in GIMP and select or scale the image to 760 by 200 pixels.
  • select all on your image and
  • switch to the kubrickheader image window
  • Chose Edit | Paste Into to copy the image into the central area
  • Save the image as an XCF file (GIMP format). Then you can change the image again, as the copied image has its own layer.
  • Then save a copy as a jpg file. This jpg will become your new header

Then upload the modified kubrickheader.jpg file to the appropriate folder on your WordPress installation using your favourite ftp program or the file manager on your Web site control panel.

Mr Baker is not well

July 19th, 2009

Chet Baker is the mascot for WordPress 2.8.1

Attempts to upgrade to WordPress 2.8.1 led to me not being able to log into the admin pages. The database tables updated OK, but my passwords were not recognised and attempts to reset the admin password using the MySQL database manager application failed. I’m not alone, although some people appear to be authenticating OK but having problems with the amount of memory that the script is using.

The post you are reading now is being added to my restored previous version of WordPress. I’ll have another go next week sometime so expect this site to disappear for a few hours.

Each major version of WordPress is associated with a specific jazz musician. Chet is not wanting to play for me right now.

Foreign currency

July 19th, 2009

leaving multiply returning divide

Download one side on foreign currency conversion. It explains converting from Sterling to foreign currency and back again, and has a few questions of each kind. The worksheet assumes that students will use calculators.

I was searching for Web pages with simple explanations of the topics in the Number unit of an access maths module so that I could make a ‘hyperlinked calendar’ of topics for each week. I couldn’t find anything sensible for foreign currency so I wrote this. Spatchcocking together examples and YouTubes and demonstrations and quizzes from lots of different sources on the Web sounds good in principle but there are drawbacks in practice.

Part of 20 Minutes, although it took about 40 minutes really.

Moondust

July 16th, 2009

The visor photo

Nice photos from NASA in the Boston Globe with captions.

Moondust by Andrew Smith is worth reading, despite the review, because its the only account of the thoughts and reflections of those who walked on the Moon that is easily available. The author felt a need to put Project Apollo into the context of his life (at some length, alas). I suspect all of us alive as children then will tend to associate the landing with childhood memories and culture. I think it is the result of this immense technological effort being experienced in child size pictures on black and white tellies.

twitter for essays

July 14th, 2009

140 characters

Twitter includes a 140 character limit on each twit. Sounds like an ideal constraint to me. Challenge to students: summarise today’s lesson in one twit. Provide a copy of the blank above to each student…

Paul Constant has written a review of twitter as a series of twitter posts (via daringfireball.net). Now, what I want to get going is a short story told by 5 to 7 twitterers taking turns…

...as anyone who has looked at my twitter page will have guessed, I’m using twitter simply as a way of saying where I am each day. I’ll try a bit of the location specific writing over the holiday. Photos on flickr.

An unusual application of fractions

July 14th, 2009

an unusual application of fractions

Image detail taken from a scan of a notebook opening on Kyle Gann’s Post Classic blog.

I’m just beginning to replan my teaching of fractions… I’ll have to get some simple music examples in there somewhere.

Mobile Broadband Coverage

July 13th, 2009

OFCOM have published comparative maps of mobile broadband coverage (Jan 2009) showing various providers for the UK.

ofcom t-mobile mobile web coverage

t-mobile 3G above…

3G mobile broadband coverage map Ofcom

3G coverage.

No brainer, if you live in Scotland, you need a wired connection. What surprised me was the fractal holes in the Birmingham conurbation area on t-mobile (my current web’n’walk modem) and the contrast with 3G, the best provider nationally.

The Register chronicles the difficult process by which these large scale maps were made public. I want a Web site I can pop a postcode in and get coverage maps down to antenna level. I want an efficient market.

I find it really quaint that I can use a modem dial script with a USB modem in a minimal linux install on a flea powered web book. AT Hayes codes in a terminal window… bosting.