September 2008

You are currently browsing the monthly archive for September 2008.

Two Elgg plugins have been updated with new releases: Artfolio and Tinymce. Artfolio is a full featured image gallery with comments and ratings. Tinymce is Elgg’s wysiwyg editor which has been extended by a few parties.

Artfolio 0.7 was overviewed in an earlier post. Frederique Hermanns has just released version 0.8. The biggest change is that Elgg no longer has to be installed in the public_html folder for it to function allowing many more people to use the plugin. He also integrated Stefan Alber’s multiple file upload functionality. As mentioned in my earlier post, this is a full featured plugin allowing views of friends’ galleries plus a five star rating system, a feature unique to Artfolio.

Those who prefer something other than Artfolio appearing in the user interface can rename it in the mod/artfolio/languages/en.php file.

A version of Tinymce was released a few weeks back extending the functionality to a full featured wysiwyg editor including the ability to embed multimedia content in posts. Unfortunately, these multimedia elements did not appear in Internet Explorer. A new version has been released by Joey One Time that resolves this issue.

This leaves one function on people’s wish list: a file uploader. As I have mentioned in a reply to a comment to a post, TinyBrowser looked most promising. This morning, TinyBrowser developer Bryn Jones offered to help in any attempts to implement his Tinymce extension.

These two changes to existing plugins go a long way to extending the functionality of Elgg. The integration of TinyBrowser to Tinymce is something to look forward to in the near future.

Tags: ,

I thought most of what I have seen with Elgg 1.0 themes, including my own, seemed boxy. Not that this is bad, but I thought it was time for variation. This theme, Step Out of the Box, uses graphic elements as backgrounds introduce a rounded upper left hand corner. It returns Spotlight to the default configuration. Again, this is not a radical departure form the default theme, rather it represents another exploration of elements that can change the appearance of Elgg.

Customizing this theme requires a bit more work because much of what was done via hex codes in CSS has been done by changing the backgrounds to graphics. There are several posts that will help you alter this and any other theme:

Like all my other themes, it installs as a mod and overrides the default, leaving it intact. To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. It’s probably a good idea to disable any other theme you may have installed first.

Again, not tested in Internet Explorer. Let me know if you find any issues. As always, feedback is welcome! Download:

Step Out of the Box Theme

Tags: ,

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

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.

Tags: , ,

Another crop of Elgg 1.0 plugins has emerged adding to the list from my first and second posts about Elgg Plugins. Of note there is a new gallery plugin and a translation utility.

Artfolio, by Fredrique Hermans of ANN-Designs, is an image gallery or portfolio. At version 0.7, it is in beta, but sports many great features–yet there is a catch which I will get into later. Like blogs and many other elements of Elgg, you have options for viewing your own artfolio, those of friends, all site artfolios. It comes with a system for tagging as well. There is a file browser for uploads, and it automatically creates thumbs and intermediate resizes of the graphics. It is the first plugin that I have encountered with a five star rating system–an oft requested feature.

Here’s the catch. Although there was no caveat, it only works if you install elgg in your public_html folder. Eager to try it out, I carefully followed the installation procedure with the usual steps. The only additional step was to create an artfolio directory in the public_html folder with 777 (or 755) permissions. Unfortunately, my Elgg install is in a subdirectory, so although it installed fine, I was greeted by blank rectangle rather than the image. I checked the artfolio folder, and indeed, the image and its resized companions were there. It appears there is an issue with file paths if it is not installed in the root. The reason, I am reviewing it is that developers that I trust have had good experiences with it. The good news is that the developer has found the code necessary to allow it to work when Elgg is installed in a subdirectory. We should see it within a few days.

It is certainly an ambitious plugin with a clear development path. If you have Elgg installed in root, don’t hesitate to give it a shot. The rest of us will be able to use it soon.

Xlate is translation mod by ontimeguy (aka Joey One Time) that relies on Yahoo’s Babelfish technology. While web translation software is less than perfect, you generally can figure out what the author meant. Installation was a bit out of the ordinary. You unzip the file locally. Next you take the translation directory and upload it to your Elgg root. The remaining contents (without the translation directory) and the xlate directory that contains them go to the mod folder:


goes into elgg. While


remain in the xlate directory which is in turn uploaded to elgg/mod. Once activated, babelfish appears under the owner’s block navigation.

Click on the flag representing the language you want to view, and the page come up in the other language.

While the translations are not perfect, this mod is a must have for a site with a diverse international audience.

Stayed tuned for more overviews of Elgg 1.0 plugins. They appear to be arriving steadily. In addition, I will update this post with the fixed version of artfolio.

Tags: , ,

Here’s another Elgg 1.0 theme. It’s dark with glowing green accents. It goes a bit further than Blue Gneiss, my previous theme, which left the menu and content block color schemes largely untouched. Spotlight is configured to display on the top under the header when not logged in.

It installs as a plugin using the override, so it leaves the core intact. Any modifications should be done in the mod/dark_green_theme directory. Like Blue Gneiss, it has its own graphics folder and includes several views/default files that are likely to be edited further.

To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. The theme’s default spotlight has some customization hints.

There may be a few bugs and tweaks that I missed. I have not tested it with Internet Explorer. I would appreciate comments!

Download here.

Hints for hacking Elgg themes.

Explanation of theme overrides in Elgg.

Tags: ,

« Older entries