Quick tutorial based on what I did at www.biblesql.net First as with all learning – before you start make a backup of your site and database in case of any problems. Now go to Admin > Themes > Garland > Configure. Chose the standard colourset that most closely matches your desired end result. In this case I am choosing Greenbean. Turn off [Logo], [Site name], [Site Slogan] and [Mission statement] and click [Save configuration].
What you would (usually) now do is browse to your drupal site folder > files. > color > you will now find a new folder in color called [something like] garland-b3aeefcb > open this and find body.png.
If your site is online use ftp-filezilla (or whatever you use) to download this file to your hard disk. To save repeating myself at each stage when we work on this file locally IF your drupal site is online you will need to upload the new version via ftp to then browse the result. If working with a local server simply save and check in browser.
OK – open body.png in image editing program change its size from 1px by 280px to 1280px.by 280px or download and use the versions I have already created attached as color.zip below
Save this elongated version overwriting the original (tip I always make extra copies as I go in case I want to go back a stage). If you go back to your site in a browser and refresh you should see no difference because all we have done, to date, is replace a background.png that is one pixel wide (but that repeats across the background) with a similar one that is 1028 pixels wide. Now go back to your image program > turn body.png negative > save > and check in browser and the background image should now be negative. If so we know we are working with the correct background image.
Back to the image editing program and reverse the last step, turning it back to a positive image and save. The best way forward is to create a new layer and then bring in your new photos, graphics, fancy text onto this new layer. As a test just bring in a very small photo Say 150pixels wide aand put it in the top left corner. Save and publish. (but keep it open if your editing prigramme so you can continue working. When you check again in your browser you should see the new graphic.
Waita minute... it appears to have mostly disappeared into the left hand margin!. Now some code adapting I’m afraid.
Go to files. > color > garland-b3aeefcb > open style.css in notepad and alter the line
background: #fbfaf7 url(body.png) repeat-x 50% 0;
to
background: #fbfaf7 url(body.png) repeat-x 0% 0;Save file and and recheck in browser. However you have adapted the background in your editing programe should now be reflected in your site. If the new background elements crash into any site text or existing elements simply go back to the editing prog and resize or move them.
That should be enough for part one of this tutorial. - do give me your feedback
