theme

You are currently browsing articles tagged theme.

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.

Tags: , , ,

Here’s another Elgg 1.0 theme. It’s dark with glowing green accents. It goes a bit further than Blue Gneiss, my previous theme, which left the menu and content block color schemes largely untouched. Spotlight is configured to display on the top under the header when not logged in.

It installs as a plugin using the override, so it leaves the core intact. Any modifications should be done in the mod/dark_green_theme directory. Like Blue Gneiss, it has its own graphics folder and includes several views/default files that are likely to be edited further.

To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. The theme’s default spotlight has some customization hints.

There may be a few bugs and tweaks that I missed. I have not tested it with Internet Explorer. I would appreciate comments!

Download here.

Hints for hacking Elgg themes.

Explanation of theme overrides in Elgg.

Tags: ,

I put together an Elgg 1.0 theme. Blue Gneiss (pronounced nice) represents modest changes from the default core theme. The main differences are the color scheme, an image in the header, and the use of Spotlight. Spotlight has been moved to the login page and does not appear once logged in. This can serve as a site introduction.

Blue Gneiss installs as a plugin and uses the override system. Any edits to the theme, including Spotlight contents, should be done in mod/blue_gneiss_theme/ directories. While I didn’t include all the core default view files, I included several that I had edited and yet others that I suspect some may want to edit. It also includes a full set of graphics from the core, allowing you to make changes to the theme while leaving the core intact.

This theme includes edits to:

views/default.css.php (several changes)
views/default/pageshell/pageshell.php (moved spotlight and made it load not logged in)
views/default/page_elements/footer.php
views/default/spotlight/default.php

In the graphics I added:

graphics/header.jpg

I also altered:

footer_back.gif
spotlight_back.gif
owner_block_back.gif

To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. The theme’s default spotlight has some customization hints,

I’m sure there are a few bugs and tweaks that I missed. I have not tested it with Internet Explorer. I would appreciate comments!

Update September 1, 2008:

This is a new version that eliminates the ability to collapse Spotlight and an error that occurred while trying to log on with Spotlight collapsed.

You can preview here. Download here.

Hints for hacking Elgg Themes.

Explanation of theme overrides in Elgg.

Tags: ,