Modifying the header in the HappyPixels theme

A user of the HappyPixels theme asked me how to modify the header image, and I thought I would share the response here.

If you download the HappyPixels theme, you might notice a folder named "svg". In this folder, you can find the original SVG document used to create the theme. This document can be edited with the open-source program Inkscape and others like Adobe Illustrator.

Open happypixels.svg in Inkscape, and press Ctrl+Shift+L to display the layers. The image is only in grayscale with some alpha transparency, but making the color layer visible will allow you to get an idea of what the theme looks like. Making the help layer visible will also show you some guides about the slices generated by the color module.

The header image is in a layer called overlay (because it's actually a semi-transparent shape that gets superposed to the gradient generated by the color module). You can hide this layer and create a new one with your custom image.

Once you are done with your changes, hide the color and help layers and press Ctrl+Shift+E and export your whole image, replacing base.png in the color folder inside the theme's folder. Now go to the theme settings page and resubmit the color selection form (make sure it's not set to default, or images won't get generated). You should now have your own image in the header!

Note that customizing a contributed theme will make it more difficult to update when a new version is available. Generally you want to use the existing theme as a base theme, but this doesn't work for themes which integrate with the color module.