An example of what will be achieved by the end of this tutorial can be seen at www.venturacottage.com
Fresh install of Drupal5 > Using [Windows explorer], Go to themes folder > make copy
of Garland folder and rename custom > open custom folder > > open style.css in
notepad and alter the lines
background: #f7f1de url(bg-navigation.png) repeat-x 50% 100%;
to
background: #f7f1de url(bg-navigation.png) repeat-x 0% 100%;
and
background: #fbf9f2 url(body.png) repeat-x 50% 0;
to
background: #fbf9f2 url(body.png) repeat-x 0% -37px;
and
background: #ffffff url(bg-content.png) repeat-x 50% 0;
to
background: #ffffff url(bg-content.png) repeat-x -10px 0;
and
max-width: 1270px;
to
max-width: 1920px;
- save and close
Using your browser go to your website > admin/build/themes > enable the custom theme
and set to default > [Save Configeration] Now > [configure] and choose the color set
that you want to base your custom theme on (in my case Belgium Chocolate). 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. I DO use them, but
have my own home_logo.gif that works well and is available within the download >
[Save configuration]
Using [Windows explorer], Go to files > color > new folder something like
[custom-1e27bf52] view this folder as thumbnails.
Download drupalcustom.pspimage, which is a PaintShopPro v8 file, a trial version of
which is available at
http://www.hensa.ac.uk/sites/ftp.simtel.net/pub/simtelnet/win95/grafedit...
Open file - drupalcustom.pspimage, on RLS 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. Now within [Group - main] > choose [mainimage] > Edit
> Cut and the car should have gone. File > open > bring in an
image of your own (anything will do for now) > edit > copy >
back to drupalcustom and paste > as new selection > position top
left to suit your wishes > selections >select none. To recap, we
can change the base colour to whatever we want and brining an image in
automatically blends it with the background. Now [File] > [Revert]
> and change colour the belgiumchocolate as above > and save as
drupalcustom.png > close this file
and open up drupalcustom.png again (this ensures it
is now a single layer flat image). Save it in the [custom-1e27bf52] folder as
body.png overwriting existing one > check home page in browser to view change - if
all ok continue
On RHS of PainShopPro window in Overview section click Info tab (if
not already showing) > this will show your cursor position
zoom to say 300% > use the selection tool to select 0,0 to
1920x37 copy/ paste as new image > save in the [custom-1e27bf52]
folder as bg-navigation.png
overwriting existing one > check home page in browser to view change
go to position 220,117 and select to the bottom right corner >
copy and paste to a new image > save overwriting current
bg-content.png.
Now select from top,left > 50 wide x352 deep > copy and paste
as new image and save overwriting current bg-content-left.png. >
check home page in browser to view change
(on bg-content.png) go to position 488,0 and select to depth 352 and
a width of 50 > copy and paste to a new image > save overwriting
current bg-content-right.png.
back to the new bg-content.png and crop to 200 deep. Then go from
0,478 total depth and width 10px >edit > copy. Then select from
0,488 to bottom right corner > Edit > paste > into selection
> file > save > check home page in browser.
That is pretty much it. Execept to say that you should backup your
[custom-1e27bf52] folder, because if you go into the theme settings for
whatever reason it helfully overwrites all your custom graphics with
new ones!
I hope this is useful to those like me who struggled initially to
adapt themes. Let us hope others with more knowledge take this further.
A version of this tutorial with extra screenshots is also at www.ventuacottage.com/garlandmod2.htm