Pete Harris’s Elgg plugin theming

Pete Harris recently released a number of themes, some of them with css overrides controlling the appearance of  plugins that modification of the views/default/css.php did not touch. This is because many plugins have their own css.php files. Let’s look at the directory structure of one of his themes:

Looking at the third panel containing the hiles of the theme’s views/default/ directory, there are several folders for plugins that you do not see in the core views/default. Each of these contains a css.php file governing the appearance of the plugin when the theme is activated. In this case we are looking at the css.php file for the blog plugin.

Let’s look at the original blog plugin’s directory structure:

As you can see, there are parallels between the directory pathways to the governing css.php files. For the original blog mod:

views/default/blog/css.php

This is the same as the pathway within the theme folder:

views/default/blog/css.php

In order to create an override impacting plugins, you simply need to make a directory in your theme:

mytheme/views/default/pluginname/

Create a copy of the plugin’s original css.php, and edit it to change the appearance. Once you are done, save it and and put it in the apporpriate folder as css.php:

mytheme/views/default/pluginname/css.php

This will now override:

pluginname/views/default/pluginname/css.php

Examining Pete’s modification gave me a deeper understanding of how the appearance of Elgg is controlled. It certainly opens up many more avenues of customization than I previously realized.

Related Posts

Tags: , , ,

  1. Mark Pearson’s avatar

    Nice. Especially since in Elgg 0.9 plugin css is squirreled away in each plugin folder making themed plugins an impossibility. Why are the css files named with a ‘.php’ extension rather than ‘.css’ extension? It makes editing with Jedit a pain because the wrong language colour mapping gets used (I always end up renaming to .css and then forgetting to move the name back).

    Reply

  2. helmy’s avatar

    I am about to modify my elgg theme. Thanks for the short explanation. very useful for me

    Reply

Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>