Creating Elgg 1.0 Themes

August 25, 2008 in Social Networking, Technology, open source | 18 comments

Elgg developer Ben Werdmuller gave a very quick overview on how to create an Elgg 1.0 theme as a plugin. This approach has the advantage of leaving the core code intact. It is also handy because using the plugin system makes it easy to enable and disable themes within the Tool Administration interface.

The first step is to create a folder for your theme plugin:

/mynewtheme/

Within that folder create a blank text document entitled start.php. While not necessary, it is best to create a manifest.xml file in the same directory. This file gives a little information about your theme. Here is an example:

<?xml version=”1.0″ encoding=”UTF-8″?>
<plugin_manifest>
<field key=”author” value=”Steve O’Connor” />
<field key=”version” value=”1.0″ />
<field key=”description” value=”This is an alternative theme for elgg 1.0.” />
<field key=”website” value=”http://www.openedweb.com/” />
<field key=”copyright” value=”(C) Steve O’Connor 2008″ />
<field key=”licence” value=”GNU Public License version 2″ />
</plugin_manifest>

Now you should have:

/mynewtheme/
/mynewtheme/start.php
/mynewtheme/manifest.xml

The next step is to add a views directory and within that a default folder:

/mynewtheme/views/default/

You changes will all reside within that directory and any needed subdirectories.

If all you have done is taken the original css.php from elgg/views/default/ folder and hacked it as suggested in the previous post, you just pop your hacked css.php into your new theme:

/mynewtheme/views/default/css.php

Your changes can go beyond just altering the css.php. Let’s go back to the elgg core:

elgg/views/default/

Besides the css,php, there are other places one can edit. One such directory of particular interest is:

elgg/views/default/page_elements

It contains the following:

elgg_topbar.php
footer.php
header.php
owner_block.php
spotlight.php
title.php

Obvious places to edit include: elgg_topbar.php, footer.php, and header.php.

Once you are done editing any of these files, you need to place copies in your theme in a way that reflects the core view folder:

/mynewtheme/views/default/page_elements

Editing the elgg/views/default/pageshells/pageshells.php file would allow you to delete elements  (or add if you know how) to be displayed on the page. Again, save the edited file to your theme:

/mynewtheme/views/default/pageshells/pageshells.php

When you are done, you may have something like this:

/mynewtheme/
/mynewtheme/start.php
/mynewtheme/manifest.xml
/mynewtheme/views/default/css.php
/mynewtheme/views/default/page_elements/elgg_topbar.php
/mynewtheme/views/default/page_elements/header.php
/mynewtheme/views/default/page_elements/footer.php
/mynewtheme/views/default/pageshells/pageshells.php

Obviously, there are more modifications that can be made, but this gives everyone a starting point.

All that remains is to upload and activate the new theme. Use an ftp client to upload your new theme into the elgg/mods directory. Log in to Elgg as an administrator, Go to the Administration section and select Tools Administration. Click to enable your new theme. Now your changed files will override the core Elgg files.

That should get users started. You can do quite a bit by simply working with the css.php and packaging it as a plugin. I will continue to explore other options for customizing new themes.

Related Posts

Tags: ,

  2. michael’s avatar

    michael on August 26, 2008 at 6:48 pm

    Great write-up, now I can load the new 1.0 package without fear of losing all my mods..

    Reply

  3. Steve’s avatar

    Steve on August 27, 2008 at 9:02 am

    Glad it worked well for you. I’m looking forward to theme packages coming through soon!

    Reply

  4. Arturo Servin’s avatar

    Arturo Servin on September 1, 2008 at 4:06 am

    May be this is a silly question, but /mynewtheme/ is under mod/mynewtheme/ isn’t it?

    Thanks
    -as

    Reply

  5. Steve’s avatar

    Steve on September 1, 2008 at 6:44 am

    That’s where it goes, but I assume that it is being built on a local machine–not necessarily in an elgg install.

    Reply

  7. Don’s avatar

    Don on September 2, 2008 at 3:37 am

    it seems you can create new page elements, add the entire /view/default hierarchy and add a mod//view/default to your theme – and really go wild :-)

    Reply

  8. Steve’s avatar

    Steve on September 3, 2008 at 8:43 am

    Elgg 1.0 is truly what they claimed it would be–a very powerful engine that can be customized to do what you need to do. It will be exciting to see the variety of themes and plugins extending the Elgg Engine.

    Really, the only limit is your imagination and ability.

    Reply

  9. David’s avatar

    David on September 5, 2008 at 11:38 am

    Steve

    Thanks for the additional material on Elgg. Helps a lot to better understand the process.

    Reply

  10. Lieni’s avatar

    Lieni on September 14, 2008 at 5:21 am

    is there a solution for a theme plugin where the usere can select the them by him self?

    Reply

  12. Steve’s avatar

    Steve on September 15, 2008 at 1:44 pm

    I’m sure there is, but that is beyond me at the moment. I know there is talk about it on the Elgg Dev Google Group.

    Reply

  13. Mark Pearson’s avatar

    Mark Pearson on September 18, 2008 at 3:18 pm

    This is brilliant Steve. At present I have had to hack my elgg 0.92 to accomplish all of the things that can be done much more easily with 1.0. Great guide. Thanks for all the effort you put in to writing this up.

    Reply

  16. Christopher’s avatar

    Christopher on September 29, 2008 at 8:08 am

    Thanks for the link to this page. I have a question, where do I edit and manipulate the index page? I wish to add more to it, and not just showing of login and last actions..

    Thanks again

    Reply

  17. Steve’s avatar

    Steve on September 29, 2008 at 8:17 am

    That would be index.php in your elgg root. Ideally, you would not edit the core and use “hooks” to make the changes.

    Unfortunately, I do not currently understand how to do so.

    There is a theme by another another developer that appears to have used these hooks. Once I see the code, it will probably fall into place for me.

    You can also make some changes in views/default/pageshells/pageshell.php

    Reply

  18. Chirag’s avatar

    Chirag on July 15, 2009 at 3:48 am

    can you please tell me from where to chnge the background colour on my. I mean which file to edit. Thanx

    Reply