Customizing Elgg Themes

Exclusive offer: get 50% off this eBook here
Elgg Social Networking

Elgg Social Networking — Save 50%

Create and manage your own social network site using this free open-source tool

£13.99    £7.00
by Mayank Sharma | March 2009 | MySQL Open Source PHP

Setting up Elgg is all about customizing. Along with the various features that Elgg provides,it is also very essential to customize the look and feel of our network. Elgg does offer us several options for this too. In this tutorial by Mayank Sharma, we'll see how simply by moving around components, individual Elgg users can customize their landing page.We'll also understand Elgg's theming system and create our own themes using Cascading Style Sheets (CSS).

 

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.

    Customizing Elgg Themes

    Customizing Elgg Themes

    • 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.

Customizing Elgg Themes

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.

Customizing Elgg Themes

Keywords are used to pull content from the database and display them on the page. Arranging these keywords are the <div> 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 xmlns="http://www.w3.org/1999/xhtml">
<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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{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.

Elgg Social Networking Create and manage your own social network site using this free open-source tool
Published: March 2008
eBook Price: £13.99
Book Price: £21.99
See more
Select your format and quantity:

Other Elements

Apart from the elements used in the pageshell of the default template, there are several others that are defined in the CSS file. Here are some of the most important ones.

For system messages:

div#system-message{
border:1px solid #D3322A;
background:#F7DAD8;
color:#000;
padding:3px 50px;
margin:20px 20px 0 20px;
}

For the blogging engine:

.weblog-post {
margin:20px 0 10px 0;
}
.user {
float:left;
margin:5px 10px 10px 0;
width:105px;
}
.user img {
border:1px solid #eee;
padding:2px;
}
.weblog-keywords p a {
margin:20px 0 0 0;
padding:0;
clear:both;
}
.weblog-title {
margin:10px 0 10px 115px;
}
.post {
margin:10px 0 10px 115px;
background:url({{url}}mod/template/templates/Default_Template/images/
infoholder_bg.gif) left repeat-y;
}
.info {
border:1px solid #ccc;
margin:10px 0 10px 115px;
clear:both;
}
.comment-owner {
border:1px solid #eee;
background:#f2f7fb;
padding:5px;
margin:20px 0 5px 0;
height:50px;
width:550px;
}
.comment-owner img {
margin:0px 5px 0px 0px;
text-align:left;
}

But that's not all. The CSS file is huge. In addition to these elements, the CSS file also defines several other custom tags including custom <p>, <h1>, <h2>, <ol>, <ul>, <td>, etc. But we won't list them here, because they are trivial.

The frontpage Files

In case you got lost in all the CSS code above, let's recap what we've done. We browsed through the pageshell file and learned about the various CSS tags controlling it.

In the next two sections, we'll list the relatively short frontpage files. After that, we'll take on the task to figure out what in the world do the random words in curly braces mean.

The frontpage_loggedout File

<h1>Welcome {{name}}</h1>
<p>
Thi s is {{sitename}}, a learning landscape. Why not check out <a
href="{{url}}_weblog/everyone.php">what people are saying</a> right
now?
</p>
<p>
<a href="{{url}}search/tags.php">Find others</a> with similar interests and goals.
</p>
<p>
Here are some example users: {{randomusers}}
</p>
<p>
If you like what you see, why not <a href="{{url}}_invite/register.php">register
for an account</a>?
</p>

The frontpage_loggedin File

<h1>Welcome {{name}}</h1>
<p>
This is {{sitename}}, a learning landscape. Why not check out <a
href="{{url}}_weblog/everyone.php">what people are saying</a> right now?
</p>
<p>
<a href="{{url}}search/tags.php">Find others</a> with similar
interests and
goals.
</p>
<p>
Here are some example users: {{randomusers}}
</p>
<p>
<a href="{{url}}{{username}}">View your profile</a>! Your portfolio is
the main way people find out about you. You can edit your details and
choose exactly what you want to share with whom.
</p>

Content Keywords

Alright, we're here now. In addition to the pageshell, we've listed the two frontpage files. As you see, the pageshell, frontpage_loggedout, and frontpage_loggedin files have lots of keywords. Now, let's look at the various keywords used in them, and understand what kind of information they add to the page:

  • {{title}}: The title of the network is the same as the name of the site shows up in the title bar of the browser.
  • {{metatags}}: Gets the metatags information.
  • {{toolbar}}: Displays the user navigation toolbar.
  • {{url}}: The URL of the network.
  • {{sitename}}: The name of the network as defined while setting up Elgg.
  • {{tagline}}: The punch line that describes our network. Generally, this appears below the sitename. Again, this too, was defined while setting up Elgg.
  • {{searchbox}}: This displays the search box with the Go button and the Browse and Tag cloud links.
  • {{sidebar}}: The sidebar with the user's brief profile and links to his recent activity, friends, and so on.
  • {{messageshell}}: This is the area where the system messages appear.
  • {{mainbody}}: The main body of the page, where all sorts of information is displayed, depending upon what you are viewing, blog, community, and so on.
  • {{name}}: The user's name. If not signed in, this is set to Guest.
  • {{randomusers}}: A list of random users who have filled in their profiles, if they exist.

Other Keywords that Can be Used

Just like with the CSS file, there are several other keywords available in addition to the ones listed above. These can be used in either the pageshell or the frontpage files to give more information to logged in or logged out users.

  • {{populartags}}: Will list the most popular tags. Same display as in the Tag cloud.
  • {{sitemembericons}}: Requires the random site members plug-in. By default, displays 9 random members. You can also specify a number using {{sitemembericons:x}} where x is the number of users you want to display.
  • {{blogsummary:5}}: Displays the latest 5 blog posts within summary format (title, date of posting, and writer's name) with a link to read the detailed entry. Only posts that have been marked as viewable by members of the public are displayed.
  • {{blog:5:username}}: This displays the latest 5 posts from a particular user. If you don't include a user {{blog:5}}, this will pull out the 5 latest posts from the network. Posts are displayed in full with the poster's photograph. Again, only posts made available to the public are displayed.

These are some of the basic keywords that are bundled with a regular Elgg installation. Some plug-ins also add their own keywords. We'll mention them along with the respective plug-in.

Hints for Designing a Custom Template

So we've seen all the nuts and bolts that together constitute a theme. They are pretty easy to use. But still, let me show you what you can do with them.

In the following sections, I'll show you how modifying a CSS element or changing the position of a pageshell keyword, will radically change the appearance of your Elgg network.

Pageshell Hacks

A pageshell controls the position and layout of the theme. We can do plenty with it.

Add/Remove Elements

Just as we can move around elements and change their position, you can drop them as well. Also, remember that there are several elements which haven't yet been used in the pageshell or the frontpage files.

For example, let's remove the tagline and instead of the heading, let's display the name of the user. This is useful for designing themes for the community.

Pageshell with Tagline and Site Name

<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>
Pageshell without tagline and username as site name
<div id="header-inner">
<div id="logo"><!-- open div logo -->
<h1><a href="{{url}}{{username}}">{{name}}</a></h1>
</div><!-- close div logo -->
{{searchbox}}
</div>

Customizing Elgg Themes

In the first code section, the name of the site points to the location of the website.

When we replace the sitename with the name of the user, that text should now point to the user's or the community's homepage instead of the homepage of the network. That's why we use the {{url}}{username}} combination. This combination will produce a link to point to the user's landing page.

Add a Copyright Notice

Our footer already has links to our Terms and Conditions and Privacy Policy. But if you want you can also add some custom text in the footer as well. Several sites use that area to acknowledge the template on which their theme is based. Some use it to add a copyright notice.

Original 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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{url}}mod/template/icons/elgg_
powered.png" title="Elgg powered" border="0" alt="Elgg powered" /></a>
<br />
{{perf}}
</div>

 

Footer with Custom Text

<div id="footer-inner"><!-- start footer -->
<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></p>
<p>© Copyright 2007 - {{sitename}}, All Rights Reserved</p>
<p><a href="http://elgg.org/"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{url}}mod/template/icons/
elgg_powered.png" title="Elgg powered" border="0" alt="Elgg powered"
/></a></p>
<br />
{{perf}}
</div>

Customizing Elgg Themes

Elgg Social Networking Create and manage your own social network site using this free open-source tool
Published: March 2008
eBook Price: £13.99
Book Price: £21.99
See more
Select your format and quantity:

CSS Hacks

While pageshell and the frontpage files allow you several customizations, you can only do basic things like shuffling, adding, and removing items. If you want dramatic changes, you'll have to dive into the CSS file. It wouldn't be wrong to say that a theme is actually defined in the CSS file.

Let's explore some quick CSS hacks.

Change Position of Elements

To illustrate changing the position of elements in a theme, let's move over the right-side column to the other side of the page. In order to move the right-side column to the left side, you'll have to change two elements in the CSS file splitpane-content and splitpane-sidebar.

Menu Column in the Right-Side

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

Customizing Elgg Themes

Menu Column in the Left-Side

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

Customizing Elgg Themes

We've changed a couple of things here, but most importantly we've switched the float directions as well as the text alignment.

Fun with Images

The default Elgg theme uses a single color in the body as well as the title background. With a little tweak, you can use an image in the background. Wherever you want to replace the colors with an image, use the background-image option in the CSS.

The Old Logo Definition with Color

#logo {
width:220px;
he ight:100px;
margin:0 10px 0 0;
color:#ccfb86;
float:left;
}

The New Logo Definition with an Image called rain.gif

#logo {
width:220px;
height:100px;
margin:0 10px 0 0;
background-image:url({{url}}mod/template/templates/Custom_theme/
images/rain.gif);
float:left;
}

You can also use a pattern in the background. For that, you don't need to make a huge image. Just make a small image (say 30 pixels by 120 pixels). Now, you can use the repeat-x option.

The New Header Background Definition

#header {
width:100%;
height:122px;
background:url({{url}}mod/template/templates/Custom_theme/images/
n1.gif) repeat-x;
}

The repeat-x option duplicates vertical images, on the X-axis, moving from left to right. If you want to repeat horizontal images (for side-columns) from top to bottom, use the repeat-y option.

To add a logo, next to the title of the site, make sure the logo is:

  • the size of the site name
  • the same color as the background of the header

When you've made a logo that matches this specification, you can use it with the background-image option without the repeat-x option.

#header h1 {
color: White;
letter-spacing: 3px;
font-size: 2.4em;
font-weight: normal;
margin: 10px 0 0 0px;
background: url({{url}}mod/template/templates/Custom_theme/images/
logo.jpg) no-repeat;
padding:0 0 0 30px;
}

I have used it with the <h1> tag because I'll use my logo next to my site name, which I define with the <h1> tag.

Make Body Use More Space

This is a very simple trick. The main content area, including the body and the sidebar are housed within the container <div> tag. The default Elgg theme uses a limited space of the container to display the body. You can increase this space by inputting a higher value.

Existing Container Division

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

You can also specify width in percentage instead of pixels. So, if you want the container to occupy the page fully, specify the width as width:100%.

Hacking Other Themes

There are dozens and dozens of CSS elements we can modify. The best way to understand them is to modify them by hand and see what effect the modifications have on the template.

I'd suggest you to create a folder called Custom template under mod/template/ templates/ directory. Then copy the contents of the Default template folder into the Custom template. Once you have all the files there, open the CSS file and start modifying.

One thing about CSS elements, is that they are interconnected with each other. One element can have a profound effect on its neighboring elements. Therefore, sometimes to achieve a particular customization, you have to modify several elements.To find out about these connections, try changing the colors and images of the template. Remember to make sure all the colors belong to the same family of colors;else the final result will look like a first grader's art book.

Another trick when playing with colors is to use gradients instead of plain colors. When using gradients, remember to blend the color towards the background color of the template.

Adding Public Templates

Adding templates to your Elgg installation is very simple. Navigate to Elgg's theme repository (http://elgg.org/themes/files/). Themes are available as compressed ZIP files:

  1. Uncompress the ZIP file. You'll get a folder which contains the pageshell, the CSS files, and all the images used in the theme.
  2. Upload this folder to the mod/template/templates/ directory under your Elgg installation.
  3. After the folder has been copied, navigate to the Change theme section (under Account settings). You'll notice the new theme listed along with the default theme.

Changing Templates

Now that you have a new template in the folder, you can easily use it instead of the Default template.

  1. Navigate to the Change theme section (under Account settings).
  2. You'll notice all the themes listed under the Public Themes section. Click on the Preview button opposite a theme to preview it.
  3. When you've previewed a theme, to switch over to it, click on the radio button next to it, scroll down, and click the Select new theme button.

Different Themes for Different Areas

The theming system in Elgg is very flexible. Instead of applying a template all over your network, you can choose to use multiple templates to decorate individual parts of Elgg. So, you can use one template for your blog, another one for one of your communities, and another one for some other community.

Customizing Elgg Themes

To do this, follow the instructions in the previous section and upload templates to your Elgg installation:

  1. Navigate to the Change the section (under Account settings).
  2. You'll notice all the themes listed under the Public Themes section. Click on the Preview button opposite a theme to preview it.
  3. When you've previewed a theme, to switch over to it, click on the radio button next to it.
  4. Now scroll down to the Change templates section. Under this section, Elgg will list all the areas of Elgg you have control over. Select the section or sections you want to apply this template to, by clicking the checkbox next to them.
  5. Finally, click the Select new theme button to apply the template.
  6. Repeat the process to apply another template to another section of your network.

Creating Themes Based on Templates

What we've been creating up until now were templates. These are broad specifications on which themes are based. In a template, we define all the possible elements in the CSS and pageshell. As in the case of the default template, many of the CSS elements were never used. Based on these broad templates, users can design their own custom themes, which they can apply in their blogs, or communities.

Creating Themes

To create a theme, log in to your account and go into the Account settings section, by clicking on that link in the top navigation bar. From inside here:

  1. Click the Change theme link.
  2. Scroll down to the Create theme section, and enter a theme name in the space provided.
  3. From the pull down menu, under the Based on section, select the template you want to base your theme on.
  4. Click the Create Theme button and Elgg will copy over the template into your custom theme.

Customizing Elgg Themes

Once you have created a custom template, follow the suggestions from the Hints for designing a custom template section and tweak the template.

Validating Themes

According to the World Wide Web Consortium (W3C) (http://www.w3c.org/), validation is a process of checking your documents against a formal Standard, such as those published by W3C for HTML and XML-derived Web document types, or by the WapForum for WML, and so on.It's important for themes to be validated, because you want any browser to understand and display them properly. As per W3C, non-validated themes will not only display improperly, but can also confuse the browser enough to cause it to crash.

W3C has a couple of free online validating services for checking your HTML (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/) code. The service can check pages that are already online or HTML and CSS files residing on your computer. If you have trouble using the validators, refer to their manual (http://validator.w3.org/docs/help.html#manual)

Replacing the Default Template

Once you have a custom theme, it's only natural that you'd want all your visitors and members to see that, rather than Elgg's Default template.To replace Elgg's default template, you'll have to move your custom theme inside the mod/template/templates/Default_Theme/ folder. This is because Elgg is programmed to use whatever theme's under the Default_Theme folder as the network default.Initially, prepare your custom theme under a folder of its own. Once it's completed, simply overwrite the contents of the Default_Theme folder with your new CSS, pageshell, frontpage_loggedout, frontpage_loggedin, and images folder.

Contributing Themes

As a free and open source project, Elgg is powered by your contributions. The area that receives most public contributions for web-based projects is themes. You too can contribute your custom themes to Elgg's repository for others to customize and use.According to the Elgg documentation, before submitting a theme, make sure you follow these guidelines, for the theme to be accepted:

  • Must be validated using the WC3 CSS Validator (http://jigsaw.w3.org/css-validator/).
  • Every effort should be made to make the theme cross-browser compatible. If the theme is designed for a particular browser or doesn't render well on another, please clearly label and or mention this while submitting the theme.
  • The theme should be housed in a folder named after the theme. This folder should contain a CSS file and pageshell plus an images folder (if applicable). Do not hardcode links to images in the CSS file. Use the {{URL}} keyword to point to images used in your theme. For example: {{URL}}mod/template/templates/Custom_theme/images/searchbox.gif

Summary

In this tutorial, we've looked at Elgg's theming engine. We've understood and studied its nuts and bolts by examining in detail the four files that give it structure and influence its design the pageshell, the CSS file, and the two frontpage files.

I've also shared some tips and tricks you can use to start playing around with the existing themes. We've also discussed a few general tips one needs to keep in mind while designing a theme. A theme isn't a random splash of colors! You need to spend decent time designing your theme, because it creates recall, gives it an identity, and associates your network with you.

To complement the default theme, you can also get themes from Elgg's website. You can also use these themes to base your custom theme on from inside Elgg. If one theme isn't enough for your network, you can give users the freedom to apply whichever theme they please to different areas of the network.

 

If you have read this article you may be interested to view :

 

About the Author :


Mayank Sharma

Mayank Sharma is a contributing editor at SourceForge, Inc's Linux.com. He also writes a monthly column for Packt Publishing. Mayank has contributed several technical articles to IBM developerWorks where he hosts a Linux Security blog. When not writing, he occasionally teaches courses on Open Source topics at the Indian Institute of Technology, Delhi, as an Industry Expert.

Contact Mayank Sharma

Books From Packt

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide
Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Django 1.0 Website Development
Django 1.0 Website Development

Learning FreeNAS
Learning FreeNAS

Blender 3D Architecture, Buildings, and Scenery
Blender 3D Architecture, Buildings, and Scenery

 

 

 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software