How to: Modify the Garland theme to include a custom image in the background

This is an update to the post "Simple but effective mod of Garland theme". This document clarifies some points and notes the differences to get it to work for Drupal 6.1.

Prepare
Backup your site files and database in case of any problems and try this on a test site.

The style.css Changes

Go to themes folder. Make copy of Garland folder and rename it garland_custom (or whatever name you like). Open custom folder and open style.css in notepad (or your favorite editor) and alter the lines:

(line 308)

and (line 351)

and (line 465)

and (line 357)

Save and close style.css

For Drupal 6.1: The info file Changes
Rename garland.info file to match new theme name, garland_custom.info in my case. Edit garland_custom.info line 2. Change "name = " to something that makes sense. I changed it to:

Save and close garland_custom.info

It is best to put your new folder (garland_custom) in sites/all/themes or if it is specific to one site in a multi-site setup put the garland_custom folder in sites/example.com/themes.

Configure your site via the Administer section

Using your browser go to your the Themes configuration page on you website (Administer > Site building > Themes). Enable the custom theme and set to default, then save the settings with the "Save Configuration" button at the bottom of the page. Now configure your new custom theme using the "configure" link and choose the color set that you want to base your custom theme on (for example Belgium Chocolate, or if you are using a custom color set, enter your colors, it will make things easier later if you use a custom Base color, then picked a second color and used it as the same color for both Header top and Header bottom). Decide if you wish to use the [Logo] and [Site name] options, or if you are incorporating them directly into your background graphic and tick/untick accordingly. There is a home_logo.gif that works well that you can download. Save your settings with the "Save configuration" button.

Your site will look a bit strange now as the top of the shaded boxed don't really line up.

Make the graphical changes (using PaintShopPro)

1. Change the color set.

Using Windows explorer, go to files > color > new folder something like "garland_custom-1e27bf52" view this folder as thumbnails. (This might be in sites/example.com/files/color; it depends on your set up.)

Download drupalcustom.pspimage (and some other files if you want), which is a PaintShopPro v8 file, a trial version of PaintShopPro v8 is available for download. (This is a windows version, so either do this on a windows machine, or use an emulator on a Mac or *nix.)

Open file - drupalcustom.pspimage in PaintShopPro, on right hand side of window you will see the layer box. In the group called GarlandColour most are inactive. Turn off pinkplastic (by clicking on the eye) and turn on say belgiumchocolate. You will see that the background has changed.

(Or if you used a custom color set above then you have to create your own new background color layer! Make a copy of one of the colorset layers (aquamarine for example) by right clicking on aquamarine, then choose "duplicate". Then right click on "Copy of aquamarine" and choose "rename". Call the new layer "mycustomcolorset" or something. If you didn't use the gradient and used the same color for Header top and Header bottom when configuring your custom theme above, you can change the colors in your mycustomcolorset layer. Hide (by clicking on the eye icon), the layers for "shading" and "Group - mainimage". Make sure in the "GarlandColours" layer group your "mycustomcolorset" layer is visible, and the other colorsets are hidden. Then set your foreground color that you want for example by: opening a file that has the colors you want, and use the "dropper tool" of the left hand side to set the foreground color. Switch tools on the left hand side to the "flood fill tool" then do a "fill" in the gradient area almost at the top. You might have to click a very narrow strip that didn't fill the first time. Then use the "dropper tool" again to choose your other color and do a fill in the area at the very top and fill the large area at the bottom. Turn the "shading" and "Group -mainimage" layers back on by clicking on the eye next to them.)

2. Remove the "car" custom image and bring in your own custom image.

Now in the layer dialog on the right hand side, within "Group - mainimage", choose "mainimage". The layer name in the Layer dialog should turn grey. Using the regular menus at the top of Paint Shop Pro, select Edit > Cut and the car should have gone away. Open a new file with: File > Open and bring in an image of your own (anything will do for now). Use the menu: Edit > Copy. And then go back to drupalcustom.pspimage and use the menu: Edit > Paste > Past As New Selection. Position it in the top left to suit your wishes. [Optional: right click on the "Floating Selection" layer in the Layer dialog box and "Promote Selection To Layer". Then right click on "Promoted Selection" and choose "rename" to rename your image. This is useful if you have several images to drop in and want to be able to work with them separately to fine tune things.] Then unselect it using the menu: Selections > Select None.

To recap, you can change the base color to whatever you want and brining an image in automatically blends it with the background.

3. Create new body.png

Now revert in the menu: File > Revert and change color to belgiumchocolate as above. Save as drupalcustom.png. [Optional: Do not do the revert. Not sure what effect not Reverting makes.] Close this file and open up drupalcustom.png again (this ensures it is now a single layer flat image). Save it in the [garland_custom-1e27bf52] folder as body.png overwriting existing one. Check home page in browser to view change. (You may need to force it to reload images by holding down the shift key while clicking the reload button in your browser.) You are still not done yet, so while you should see your new image in the top left, it is still not quite right. You need to make the navigation, left and right slices.

4. Create new bg-navigation.png

On right hand side of PaintShopPro window (you may need to reopen drupalcustom.pspimage) in Overview dialog, in the Preview tab, zoom to say 300%. Click Info tab. This will show your cursor position. Use the selection tool to select (x,y) 0,0 to 1920,37. Use menu: Edit > Copy, then Edit > Paste > Paste As New Image. Save in the [garland_custom-1e27bf52] folder as bg-navigation.png, overwriting existing one. Check home page in browser to view change (should see the change at the very top of the page).

5. Create a "working version" of bg-content.png

Back in PaintShopPro drupalcustom.pspimage, go to position 220,117 and select to the bottom right corner 1920,524 (size of select is 1700x407). Use menu: Edit > copy and then menu: Edit > Paste > Paste As New Image. Save overwriting current bg-content.png. Check home page in browser to view change. (Things look worse temporarily if your window is wide, we will fix that in a little bit.)

6. Create new bg-content-left.png

Now in PaintShopPro bg-content.png, select from top,left (0,0) to 50 wide x 352 deep (50x352). From menu: Edit > copy and then from menu: Edit > Paste > Paste As New Image. Save overwriting current bg-content-left.png. Check home page in browser to view change. (Now your custom image should be current in the upper left corner of the content area.)

7. Create new bg-content-right.png

Now back in PaintShopPro bg-content.png go to position 488,0 and select to depth 352 and a width of 50 (cursor to position 538,352 this selects the right edge of the content area). From menu: Edit > Copy and then Edit > Paste > Paste As New Image. Save overwriting current bg-content-right.png. Check home page in browser to view change. (Depending on your changes you might not notice any.)

8. Fix new bg-content.png

Back to PaintShopPro in the new bg-content.png (Maybe save a copy called bg-content-precrop200.png) and crop to 200 deep. (The bg-content.png before the crop is 1699x406. Crop it to 1699x200 keeping the top part.) Then go from 478,0 (grabbing a piece of the "middle" of the content area) to total depth and width 10px (so select from 478,0 to 488,200). From menu: Edit > Copy. Then select from 488,0 to bottom right corner (1699,200). From menu: Edit > Paste > Paste Into Selection. From menu: File > Save As bg-content.png. Check home page in browser. (This should fix the temporary problem from the end of the previous bg-content step.)

Back up your new files

That is pretty much it. Except to say that you should backup your [garland_custom-1e27bf52] folder, because if you go into the theme settings for whatever reason it helpfully overwrites all your custom graphics with new ones! (The files you will need to recopy to the folder would be: bg-content.png, bg-content-left.png, bg-content-right.png, bg-navigation.png, body.png.