Garland Simple modification Tutorial | drupal.org

Garland Simple modification Tutorial

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 1920×37 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 491,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.

Now select from top,left > 50 wide x352 deep > copy and paste as new image and save

overwriting current bg-content-left.png.

back to bg-content.png > go to position 488,0 now select 50 wide x352 deep > copy and

paste as new image and save overwriting current bg-content-right.png.

back to the new bg-content.png and crop to 200 deep. Then go from 0,481 total depth and width 10px >edit > copy. Then select from 0,491 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.venturacottage.com/garlandmod2.htm

Garland Simple modification Tutorial | drupal.org

Blogged with the Flock Browser

Tags: , ,

1 commentaire

  1. Thanks for this tutorial.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :