How to handle theming of modules in a web application?

Question

Hi,

I have made a CMS that allows users to choose which modules to show where on the website. I also have templates/themes that define how the site look. The problem I have goes like this:

Suppose I have placed a voting booth module on the site. When I press "View results", it will display the results with graphical bars like on this demo page: http://osc.template-help.com/joomla%5F25754/index.php?option=com%5Fpoll&id=14%3Ajoomla-is-used-for

My first question is: isn't theming of that graphical bar the responsibility of themes/templates rather than the modules'? If the modules can decide what to show, they might show some graphics that don't fit the templates/themes.

How should I handle all this? I'm not really sure how to explain the problem any better, but the issue is that in the current version some modules will display graphics/appearance that looks bad against some templates. All gfx and stuff like that should be the responsibility of the template system, right? But how would I achieve that... how would modules and templates work together to construct something like that or do you have other ideas?

Answer 1

Generally, you should try to use CSS class names that are standard for the CMS. Eg. Joomla has classes called sectiontableentry1 and sectiontableentry2 for alternating rows in a table. If you can hijack any of those classes, it will enable your extension to fit in with the colour scheme of the template. If none of the standard class names are appropriate, the best you can do is try to go for a neutral colour scheme - typically shades of grey.

There is a list of core CSS classes for Joomla here: http://docs.joomla.org/Template_reference_material

Answer 2

Images should be defined by theme's CSS

It is true that look and feel of graphical elements (in this case result bars) should be defined in theme's CSS file to fit other themed elements.

But there are two possibilities, depending on your themes

1. Graphic style doesn't change significantly (ie. icons will always be the same)
In case your themes don't change graphic style (ie. from grunge to strict business smart) but rather just colour scheme, I suggest you use PNGs with alpha channel, that will almost certainly fit into any colour scheme.

2. Graphic style changes significantly (ie. every visual element can/will change)
In this case I suggest you define all imagery inside theme's CSS files as background images. Your <IMG> elements should only display transparent images of correct sizes (may be defined by theme as well), but CSS file defined by a particular theme should define the actual image that will be displayed in the background of this transparent image. This way you will be able to use the same HTML but themed CSS files.

Answer 3

This is impossible to get perfectly right. Most open source cmsses/blogs that have some sort of theming don't support it on all extensions, simply because the extensions are not within the control of the author of the cms (and not within the control of the theme-creator either). So the theme will look good on the basic cms, and maybe on some common extensions, but after that it's just fingers crossed.

No matter how many items/types/classes you define upfront for the theme-makers to decide on, there will always be something that has not been thought of in the themes setup. The only way out of this is very rigid design-guidelines, and even that will never get you to 100% coverage, just closer than you would be without.

Example: a bar chart will be shown by some plugin. Your first attempt within the theming has been to always require a theme to list 10 colors to be used in a chart, of course this chart needs 11 :-) Now your next iteration of the theming engine requires theme authors to come up with a scheme for generating an endless amount of colors for usage in graphs (you've just made the job of a themer quite a bit harder...) Now of course the graph that needs to be shown needs 3 sets of each 2 related-looking colors ... you'll never win that race.

I'd say your best option is to make sure that theme creators have a good set of core css classes to define (along with a big series of reference pages from your base cms so they can test their designs). Now you should encourage your extension makers to use the standard-styles as often as possible, and stimulate them to do so by making it easy to check their extensions with numerous themes. As a last but much needed option you should make it possible for people who are setting up a site to easily override/correct the styling of an extension within a certain theme -- that should make issues with the theming system just a burden instead of a deal-breaker.

Answer 4

As an option, we was considered to allow theme redefine how basic module elements are rendered on html level.

With asp.net mvc this is quite simple to implement, and it would look like folder 'Elements' with specific file per each element such as header.ascx, button_confirm.ascx, button.cancel.ascx, votes.ascx, tags.ascx, etc.

All those files should have common Model parameter, which should allow access both to module properties and content item properties. (I hope that your content items has base class)

We stopped just beacuse this was out of scope.