Easy Theme tutorial
How to change “Easy Theme” (for Elgg 1.8) to make it your own.
Change the image.
*] Find your image. A direct replacement would be 990px wide and 350px high. (At the end of this tutorial I’ll show you what to do if your image isn’t as high as this.)
*] Now you need to add a coloured bar to the bottom of the image to become the background to the menu tabs in Elgg. This should be 55px high.
Note: It can work really well if you make the coloured bar a little transparent, so you can see a hint of the picture below.
*] Then, name your image ‘headimg.jpg’, and save it here: mod/easytheme/img/headimg.jpg (replacing the current headimg.jpg). Your image should now be at the top of your web page.
Change the background.
*] Change the background image, ‘mod/easytheme/img/bkgr.gif’. Start by opening this image in your graphics software. (It is a *very* small image, so zoom in until it is big enough to work with).
You can either change the whole image to one colour – for a solid-colour background. Or change just one, or both, of the colours in the image as I’ve done here.
*] Then save your image, and it will become your new background.
Now – to complete your ‘look’ – change the sidebar and footer colours.
*] Open the css file “easy.php”. (There are instructions about how to do this in the readme file)
Sidebar:
- The sidebar css starts at line 63.
- Where it says: “background:#cccccc;”, change the colour. Here, I’ve chosen #e3dcd6.
Footer:
- The footer css starts at line 75.
- Where it says: “background:#181a2f;”, change the colour. I’ve chosen to make the footer green.
There you are! A unique look to your website.
So… Your image needs to be 990px wide, but what if you don’t want it to be so high? An image that isn’t 350px high would look like this on the page:
Which isn’t what you want.
*] Open the ‘easy.php’ css file again…
- line 30 (#mmtop) – change ‘height:330px;’ (you will need to experiment a little until you get the height you need – start with the height of your image).
…and open the ‘layout.php’ css file.
- line 25. change ‘height:330px;’ to match your chosen height.
Finally. What if you don’t want an image there at all?
*] Go back to the ‘easy.php’ css file again. #mmtop. Comment out the background image – and add a colour – like this:
————————————————————————————————-
/*background:url(‘<?php echo $vars['url']; ?>mod/easytheme/img/headimg.jpg’);*/
background:#cccccc;
————————————————————————————————-
I think that’s it. Let me know if you have any problems.