7 min read

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

and tags along with several others like

,
    , and so on that have been defined in the CSS file.

    What are
    and ?

    The

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

    does much the same thing as a paragraph tag

    , but it divides the page up into larger sections. With

    , 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 tag is similar to the

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

    Both

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

    br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    {{title}} {{metatags}}

    {{toolbar}}






      {{sidebar}}



    {{messageshell}}
    {{mainbody}}




    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.

    : 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;
    }

    : 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;
    }

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

    : This wraps the main content area.
    #content-holder {
    padding:0px;
    margin:0px;
    width:100%;
    min-height:500px;
    overflow:hidden;
    position:relative;
    }

    : 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;
    }

    : 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;
    }

    : Just like header-inner, is used only if you would like a full page layout but a defined width for the actual content.

    : 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%;
    }

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


Subscribe to the weekly Packt Hub newsletter. We'll send you the results of our AI Now Survey, featuring data and insights from across the tech landscape.

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here