Welcome to Elgg's documentation

This is the place to find documentation on all aspects of Elgg. If you would like to contribute your own documentation please do; we want this to be a real community effort!

Building themes

From Elgg Documentation

There are a few themes which have been built/customised for Elgg - however, we would love to create a large repository of cool themes for all to use.

Themes in Elgg are CSS driven. This means you only have to alter the CSS to completely change the look and feel of your Elgg environment. For a great example of the power of CSS check out css Zen Garden. This site will demonstrate just how much you can do with CSS.


Contents

[edit] Some helpful links

If you wish to design your own themes, you need to build and design your own stylesheet. It is essential that you know how to construct a proper stylesheet. Here are some useful resources:

  1. W3Schools CSS Tutorials
  2. W3C Official CSS spec
  3. CSS from the ground up
  4. CSS Vault
  5. Blue Robot CSS Layouts
  6. CSSLayouts
  7. Designing a CSS Template

[edit] General overview

There are four components that you can alter to theme your Elgg site; the CSS file, the pageshell, the front page for logged out users and the frontpage for logged in users.

Let's start with the pageshell.

Many of you will not want to mess with the pageshell as there is plenty that can be done by altering the CSS, however, if you would like to create a three column layout or rearrange where the various elements of an Elgg page display, here is some crucial information:

[edit] The basic pageshell

It is worth noting that you can edit this page as you wish but you must ensure all the essential components are present.

[edit] Essential components

  1. {{title}}
  2. {{metatags}}
  3. {{toolbar}}
  4. {{searchbox}}
  5. {{messageshell}}
  6. {{mainbody}}
  7. {{sidebar}}

[edit] Non essential:

  1. {{userfullname}}
  2. {{tagline}} - your sites tagline which is set in the config file
  3. {{url}} - the url of your site, handy if you don't want to hardcode this

[edit] Basic pageshell

The basic Elgg pageshell

[edit] CSS structure

The default CSS structure

[edit] Front page structure

To edit your site's front page you need to navigate to the following files:

  • '/mod/template/templates/Default_Template/frontpage_loggedout'
  • '/mod/template/templates/Default_Template/frontpage_loggedin'

Here are some keyword you can insert to pull content out from your Elgg install.

  • {{url}} The address of your site.
  • {{sitename}} The name of your site.
  • {{tagline}} Your site's tagline.
  • {{username}} The current user's username. (will only work on the 'frontpage_loggedin' page)
  • {{userfullname}} The current user's full name. (will only work on the 'frontpage_loggedin' page)
  • {{populartags}} A list of the most popular tags.
  • {{randomusers}} A list of random users who have filled in their profiles, if some exist.
  • {{people:interests:foo:5}} Lists five people interested in 'foo' in a horizontal table.
  • {{toptags:town}} Lists the top tags of type 'town' (or select weblog, file or the profile field of your choice).

[edit] Importing new themes

Once you grab a new theme from the Elgg theme repository, here is what you do to activate it:

  1. Unwrap the zip file
  2. Upload the contents to 'mod/template/templates/'
  3. That is it - Elgg will pick up the new theme and offer it to your users.

[edit] Making a different theme your site default

Elgg assumes that whichever theme is located in 'mod/template/templates/Default_Theme/' is the site default. To make a different theme the default just overwrite the contents of 'mod/template/templates/Default_Theme/' with your new CSS, pageshell, frontpage_loggedout, frontpage_loggedin and images.

[edit] Contributing themes to the theme repository

We encourage you to submit your theme designs for others to use. All accepted submissions will be released under the GPL license with full acknowledgement given to the original designer.

Here are the guidelines for CSS designs to be accepted:

  1. Must be validated using the WC3 CSS Validator
  2. Every effort should be made to make the theme crossbrowser compatible (hopefully validation will make sure of this) - if it is not, please clearly label this fact.
  3. Your theme should be housed in a folder named after your theme - this folder should contain a CSS file and Pageshell plus an images folder (if applicable). PLEASE MAKE SURE YOU DO NOT HARDCODE LINKS TO IMAGES IN THE CSS FILE - ALWAYS USE THE KEYWORD {{templatesroot}}/yourthemefolder/images/

We are hoping to build up a excellent library of themes for use by the whole Elgg community, so please get involved!

Retrieved from "http://classic.elgg.org/mod/mediawiki/wiki/index.php/Building_themes"
Navigation