Modify your theme

This is a brief explanation of how to change your default theme colours. There is probably more that can be done, so feel free to add to this short how to.

Steps

File management

The first step is to copy and rename the theme you want to modify so you have something to work on. The example here uses the Xenea theme in the themes/xenea directory, but the principle involved should be similar for the others.

All the files you need to change are in the theme directory. They are header.html, toplinks.html, style.css and theme.php

Copy the xenea theme directory to another directory and give it a name that suits you, eg: xenea_grey, don't use any spaces in the name, use underscores _ instead. Servers do not like spaces in directory names. Besides renaming the themes folder name you will have to find it in theme.php and rename it in there too. If you open theme.php in your script/text editor you should see

$theme_name = "Xenea";		//-- the name of this theme 

on about line 23. Change this with find and replace to

$theme_name = "Xenea_Grey";

or the name of your choosing, check the file for any more instances of the theme name and replace them too, there is only one more in xenea, at about line 37.

Now copy the modified folder back into PhpGedView's theme folder, and in your browser go to your site's admin section, and select the modified theme for your site's default.

You are now viewing your modified theme live and can see the effects happen as you change things by refreshing your browser.

Theme changes

Now, run the ColorPix utility over the web page and find the hex code for the colours you want to change. Just place your cursor on the page where you want it, and read the six digit hex code from ColorPix, something like #FFFFFF, which is white, it will be a combination of numbers and letters.

Then search the four files named above for the corresponding hex codes. Most of them have names in the files that make sense so you should get a clue what style changes what part on your page. Use your text editor's find and replace feature for this, so you only need to type the codes in once. Don't change every single instance with replace all, do them one at a time, then save the file, refresh your browser and see the changes as you go. If you don't like the changes or make a mistake, you can just undo the change and save the file again, refresh your browser and it will be as it was before.

You can also change graphics or just comment them out in the script so they don't display, Pretzy recommends placing an underscore in front of the image's name so you can go back later if you change your mind or wish to enable the image again. There are default background colours set in the files mentioned and this is what you see now if you comment the images out.

You should now be well on the way to making your theme any colour you like, and if you don't like the end result or totally mess it up, don't worry, just delete the folder and start again. PhpGedView will use its default theme if it can't find another. If you kill that one too, just copy it back from the zip file you downloaded to install it.

Good luck and happy themeing :)

Menu Items

If you would like to remove menu items or only have them appear when a user is logged on please read here

External links

Customizing Your Theme