Image elements in Elgg 1.0 themes

In addition to CSS, Elgg 1.0 themes use images to enhance their appearance. The default Elgg theme contains several graphic elements. Sometimes it can be a little tricky finding and changing these images. As usual,the FireFox Web Developer is a great tool. You’ll also need an html text editor, an ftp client, and image editing software. You work with the files and structures outlined here. It is best not to work directly with the views/default/. You might also want to read my post on hacking elgg themes.

Let’s start with a generic blog view in the default theme:

Click to enlarge

The orange text represents the name of the file creating the background for each part of the theme. If you are working from the core default theme, these files reside in /_graphics. Otherwise, they would be in the graphics folder in your mod/whatevertheme. Again, the latter route is the best way to go as it leaves your core installation intact. These graphics are called to the page by the css.php file residing in views/default in the core or in your mod/whatevertheme/views/default.

Starting with the footer_back.gif, we open up css.php and go to line 353 and find:

#layout_footer {
354 background: url(<?php echo $vars['url']; ?>_graphics/footer_back.gif) repeat-x left top;
355 height:80px;

The text in blue refers to the image file for the footer background. The text in red tells us that the image keeps repeating horizontally. If we look at the actual image file we find that it is 75x90px. If we want to change the appearance, we need to make another such graphic file to replace the existing. You can simply give it the same name and overwrite the original file, or you could give the file another name and change the blue test above to reflect the name of the new file. Alternatively, you could delete:

url(<?php echo $vars['url']; ?>_graphics/footer_back.gif) repeat-x left top

and replace it with a color:

background: #f3f3f3;

Next we will look at the background for the whole page: page_back_linen.gif around line 79:

79 body {
80 text-align:left;
81 margin:0 auto;
82 padding:0;
83 background: #4690d6;
84 font: 80%/1.4 “Lucida Grande”, Verdana, sans-serif;
85 color: #333333;
86 background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen.gif) repeat left 1px;
87 }

The file page_back_linen.gif is a 97x1624px image that repeats horizontally. Again you replace it with another image as specified above, change it to a color, or use the technique described with Spotlight and Owner’s block. There’s one more element to that body background: the drop shadows to the left and right of the layout canvas. It is a 1013 x 184 px image that repeats vertically:

143 #page_container {
144 margin:0;
145 padding:0;
146 background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen_shadow.gif) repeat-y center top;

If you want to retain this effect, you need to edit to match your background color or pattern. It can also be deleted if you’d rather not bother with it.

Finally, both spotlight_back,gif and onwers_block_back.gif are applied to elements with variable heights, so they need a slightly different approach if you are changing colors. This technique can also be applied to the page background. Let’s look at the code for Spotlight:

336 #wrapper_spotlight .collapsable_box_content {
337 margin:0;
338 padding:20px 20px 10px 20px;
339 background: #ffffff url(<?php echo $vars['url']; ?>_graphics/spotlight_back.gif) repeat-x left top;
340 min-height:60px;
341 border:none;

Note that line 339 has both a color and a graphic for a background. Spotlight is set up to expand as more text is added, yet the graphic header is finite. In order to keep the background from dropping off suddenly, the color of the bottom of the graphic is added to the background.

The graphic for owner_block_back.gif does not need to do this with the default template because the inherited background is white matching the bottom of the graphic. However, if you change the bottom of the graphic to anything else you will need to use this technique (The CSS pertaining to the owner_block_back.gif is found around line 1287). It also could be used if one wanted to use a gradient for the page background.

Graphic elements can assigned to more elements of the layout to further customize the appearance of the site. The header area is an excellent example. Whatever element you want to spice up with an image element, simply look for the backgound attribute, and replace a color with the file path to the image.

Related Posts

• Pete Harris’s Elgg plugin theming
• A Step Out of the Box Theme
• Great Elgg 1.0 Plugins Trickling In
• Creating Elgg 1.0 Themes
• Hacking an Elgg 1.0 Theme
• WPMu & BuddyPress updates