Customizing Elgg Themes

Why Customize?

Elgg ships with a professional looking and slick grayish-blue default theme. Depending on how you want to use Elgg, you'd like your network to have a personalized look. If you are using the network for your own personal use, you really don't care a lot about how it looks.

But if you are using the network as part of your existing online infrastructure, would you really want it to look like every other default Elgg installation on the planet? Of course not! Visitors to your network should easily identify your network and relate it to you.

But theming isn't just about glitter. If you thought themes were all about gloss, think again. A theme helps you brand your network. As the underlying technology is the same, a theme is what really separates your network from the others out there.

What Makes Up a Theme?

There are several components that define your network. Let's take a look at the main components and some practices to follow while using them.

• Colors: Colors are an important part of your website's identity. If you have an existing website, you'd want your Elgg network to have the same family of colors as your main website. If the two (your website and social network) are very different, the changeover from one to another could be jarring. While this isn't necessary, maintaining color consistency is a good practice.
• Graphics: Graphics help you brand the network to make it your own. Every institution has a logo. Using a logo in your Elgg theme is probably the most basic change you'd want to make. But make sure the logo blends in with the theme, that is, it has the same background color.
• Code: It takes a little bit of HTML, a sprinkle of PHP, and some CSS magic to Code: It takes a little bit of HTML, a sprinkle of PHP, and some CSS magic to manipulate and control a theme.
  
  
• A CSS file: As the name suggests, this file contains all the CSS decorations. You can choose to alter colors and fonts and other elements in this file.
• A Pageshell file: In this pageshell file, you define the structure of your Elgg network. If you want to change the position of the Search bar or instead of the standard two-column format, move to a three-column display, this is the file you need to modify.
• Front page files: Two files control how the landing page of your Elgg network appears to logged out or logged in users.
• Optional images folder: This folder houses all the logos and other artwork that'll be directly used by the theme. Please note that this folder does not include any other graphic elements we've covered in previous tutorials such as your picture, or icons to communities, and so on.

Controlling Themes

Rather than being single humongous files, themes in Elgg are a bunch of small manageable files. The CSS decoration is separated from the placement code. Before getting our hands dirty creating a theme, let's take a look at the files that control the look and feel of your network. All themes must have these files:

The Default Template

Elgg ships with a default template that you can find under your Elgg installation. This is the structure of the files and folders that make up the default template.

Before we look at the individual files and examine their contents in detail, let's first understand their content in general. All three files, pageshell, frontpage_logedin, and frontpage_loggedout are made up of two types of components.

Keywords are used to pull content from the database and display them on the page. Arranging these keywords are the div<.em> and span tags along with several others like h1, ul, and so on that have been defined in the CSS file.

What are <div> and <span>?

The <div> and <span> are two very important tags especially when it comes to handling CSS files. In a snap, these two tags are used to style arbitrary sections of HTML.

<div> does much the same thing as a paragraph tag <p>, but it divides the page up into larger sections. With <div>, you can also define the style of whole sections of HTML. This is especially useful when you want to give particular sections a different style from the surrounding text.

The <span> tag is similar to the <div> tag. It is also used to change the style of the text it encloses. The difference between <span> and <div> is that a span element is in-line and usually used for a small chunk of in-line HTML.

Both <div> and <span> work with two important attributes, class and id. The most common use of these containers together with the class or id attributes is when this is done with CSS to apply layout, color, and other presentation attributes to the page's content. In forthcoming sections, we'll see how the two container items use their two attributes to influence themes.

The pageshell

Now, let's dive into understanding the themes. Here's an exact replica of the pageshell of the Default template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html > 
<head><title>{{title}}</title> {{metatags}}</head> 
<body>
{{toolbar}} 
<div id="container"><!-- open container which wraps the header, 
maincontent and sidebar -->

<div id="header"><!-- open div header -->

<div id="header-inner"> 
<div id="logo"><!-- open div logo --> 
<h1><a href="{{url}}">{{sitename}}</a></h1> 
<h2>{{tagline}}</h2> </div>
<!-- close div logo --> 
{{searchbox}}

</div> </div><!-- close div header --> 
<div id="content-holder"><!-- open content-holder div -->

<div id="content-holder-inner"> <div id="splitpane-sidebar">
<!-- open splitpane-sidebar div --> <ul><!-- open sidebar lists --> {{sidebar}} 
</ul><!-- close sidebar lists -->

</div><!-- close splitpane-sidebar div --> <div id="splitpane-content">
<!-- open splitpane-content div --> {{messageshell}} 
{{mainbody}}

</div><!-- close open splitpane-content div -->

</div> </div><!-- close content-holder div --> <div id="footer"><!-- start footer -->

<div id="footer-inner">

<span style="color:#FF934B">{{sitename}}</span> 
<a href="{{url}}content/terms.php">Terms and conditions</a> | 
<a href="{{url}}content/privacy.php">Privacy Policy</a><br />

<a href="http://elgg.org/">
<img src="{{url}}mod/template/ icons/elgg_powered.png" title="Elgg powered" border="0"
 alt="Elgg powered"/></a>

<br /> {{perf}}

</div> </div><!-- end footer --> </div><!-- close container div --> </body> </html>

CSS Elements in the pageshell

Phew! That's a lot of mumbo-jumbo. But wait a second! Don't jump to a conclusion! Browse through this section, where we disassemble the file into easy-to-understand chunks. First, we'll go over the elements that control the layout of the pageshell. <div id="container">: This container wraps the complete page and all its elements, including the header, main content, and sidebar. In the CSS file, this is defined as:

div#container {
width:940px;
margin:0 auto;
padding:0;
background:#fff;
border-top:1px solid #fff;
}

<div id="header">: This houses all the header content including the logo and search box.

The CSS definition for the header element:

div#header {
margin:0;
padding:0;
text-align:left;
background:url({{url}}mod/template/templates/Default_Template/images/
header-bg.gif) repeat-x;
position:relative;
width:100%;
height:120px;
}

The CSS definition for the logo:

div#header #logo{
margin: 0px;
padding:10px;
float:left;
}

The search box is controlled by the search-header element:

div#header #search-header {
float:right;
background:url({{url}}mod/template/templates/Default_Template/images/
search_icon.gif) no-repeat left top;
width:330px;
margin:0;
padding:0;
position:absolute;
top:10px;
right:0;
}

<div id="header-inner">: While the CSS file of the default template doesn't define the header-inner element, you can use it to control the area allowed to the elements in the header. When this element isn't defined, the logo and search box take up the full area of the header. But if you want padding in the header around all the elements it houses, specify that using this element.

<div id="content-holder">: This wraps the main content area.

#content-holder {
padding:0px;
margin:0px;
width:100%;
min-height:500px;
overflow:hidden;
position:relative;
}

<div id="splitpane-sidebar">: In the default theme, the main content area has a two-column layout, split between the content and the sidebar area.

div#splitpane-sidebar {
width: 220px;
margin:0;
padding:0;
background:#fff url({{url}}mod/template/templates/Default_Template/
images/side-back.gif) repeat-y;
margin:0;
float: right;
}
div#splitpane-content {
margin: 0;
padding: 0 0 0 10px;
width:690px;
text-align: left;
color:#000;
overflow:hidden;
min-height:500px;
}

<div id="single-page">: While not used in the Default template, the content area can also have a simple single page layout, without the sidebar.

div#single-page {
margin: 0;
padding: 0 15px 0 0;
width:900px;
text-align: left;
border:1px solid #eee;
}

<div id="content-holder-inner">: Just like header-inner, is used only if you would like a full page layout but a defined width for the actual content.

<div id="footer">: Wraps the footer of the page including the links to the terms and conditions and the privacy policy, along with the Elgg powered icon.

div#footer {
clear: both;
position: relative;
background:url({{url}}mod/template/templates/Default_Template/images/
footer.gif) repeat-x top;
text-align: center;
padding:10px 0 0 0;
font-size:1em;
height:80px;
margin:0;
color:#fff;
width:100%;
}

<div id="footer-inner">: Like the other inner elements, this is only used if you would like a full page layout but restrict the width for the actual footer content.