CSS Theme Switcher

Warning: This plugin has't been updated in over 54 years. It may no longer be maintained.

What you can do to help:

Enables users to switch css-only themes

by Cash
Last updated

Notice: this is a proof of concept plugin and should not be run on a production site. I've tested on Elgg 1.2 and a recent svn revision. It should be stable, but the css-based themes are not complete.


Description: This plugin enables a user to select a theme from a dropdown list in the toolbar. At this point the themes are demonstrating the concept and will have missing markup (especially for plugins). I ported the default Elgg theme as well as two Pete Harris themes to my theme structure. I also quickly created two other themes to demonstrate the flexibility of css-only themes. The reason I had to port the themes is that this is a css-only based theming plugin. The plugin overrides some views to make them div based. All the screenshots were done with the same html, just different css files. You will not be able to use current themes with this plugin. I've found that I can port a current theme in a few hours - more to get everything just right ;). Brett Profitt is working on a plugin that uses currently available themes.

Screenshots: Elgg Default ThemeSimple Neutral ThemeBlack Tech ThemeWide Screen ThemeVertical Toolbar Theme

Other possible theme ideas: 2 column profile/dashboard, 3 column with 1 narrow column and 2 wide columns


Installation: Unzip and place in mod directory like any other plugin. Deactivate any other themes. Activate this plugin and then do a refresh of the page. You should the dropdown menu for themes. You will have to do a refresh after selecting each theme due to the way Elgg sets the caching for css. The next version will handle this in a better way. For now if you want to quickly change between themes you could add this line to your .htaccess to replace the previous one:

RewriteRule ^\_css\/css\.css$ mod/themeswitcher/css/css.php


Feedback: General feedback is always appreciated. If you find css markup that is missing or incorrect, feel free to mention that. If you can think of a theme design that will stretch the boundaries, please describe it. During the early stages of this plugin, I will be adjusting the html structure to allow for maximum flexibility.

Browsers: IE7, Firefox 3, Opera 9.5, Safari 3 (not IE6 right now)

Developers: I overrode a few views to create an html structure that gave me more flexibility. It is easy to view using a tool like Firebug. For now I also replaced the toolbar with my own. There is a new one coming out with Elgg 1.5 that I'll take a look at later. 

There is a themes directory under the plugin directory. On each page load, that directory is processed to create a list of available themes. Each directory is assumed to be a theme. The themes are then presented in a drop down list. After the user chooses a theme it is stored as metadata for the user. Currently, there is some php code in the css generation that includes the appropriate theme css. This will move to the html head generation code so that there won't be a hard refresh required.

Following the general concept of what I did here provides a lot of options like themes applied to just a user's profile page, selection of a background image, and so on.



  • Category: Themes
  • License: GNU General Public License (GPL) version 2
  • Updated: 1970-1-1
  • Downloads: 2234
  • Recommendations: 1

Other Projects

View Cash's plugins