Problem to be solved
Note: pure CSS themes available in 1.6 default theme and Atutor redux theme
(I would be willing to coordinate and do the bulk of this work)
Some XHTML and CSS are a bit sloppy, and tables are present for layout reasons throughout Atutor. This code can be optimised, and layout can be strictly based on CSS. Also there is quite extensive use of inline CSS which makes styling hard. CSS can be optimised / rewritten quite a bit.
If done right Atutor could be much easier to style exclusively by modifying CSS. New themes could for most cases in the future only consist of a few CSS files.
One small example today is that you can not easily change which siden the content menu is displayed at (now to the right, if you wish to display it to the left this is not easy: http://www.atutor.ca/view/12/8691/1.html
(The problem with the side menu isn't CSS, it is the fact that the template engine doesn't support sub-templates. There is a solution for this already planned out, but it would break backwards compatability with previous themes.)
The goal should be a new / refined default theme, not a new theme on the side of the default that needs to be maintained for each new release. The new theme should not differ much from the look and feel of the default theme today, but the markup and CSS in the background should be optimized and further styling should be easier. A goal should be the ability to change or modify the look and feel of Atutor only with use of CSS.
Not only should CSS be cleaned up, but templates should be broken down into independant and reusable elements.
XHTML and CSS should validate, code should (still) follow the WAI and WCAG guidelines.
Using additional XHTML 2 features would help in cleaning up the code as well.
Components of solution
Establish some CSS and XHTML guidelines
This to make sure that H1, H2, DL, UL, OL, TABLEs and all other tags are used consistently through the system. This is to a large extent done today, but some general rules could be good to have established in a document / style guide.
Some CSS guidelines should also be written. Today CSS is split intp print.css, styles.css and forms.css - problem is that styles.css includes many forms, and forms.css includes many styles that are not related to forms. There might be a more optimal way to split up stylesheets.
Easier styling can be ensured by identifying more elements with classes and / or id-s, and establishing some rules for this. One solution could be to name "all" code components of a module with the module name, e.g.:
forums-author, forums-postheader, forum-posttext etc. A different way could be to start each module with a div class="modulename", so e.g. forums could be styled with div.forums .posts h1 a ...
Create a new theme
Write a new theme using boxes for layout. Write new CSS to this theme. Make sure the new CSS is more capable of styling.
Rewrite the CSS and quality check it in IE 6 & 7, Firefox 1.5 & 2.0, Opera 8& 9 and latest version of Safari. Make sure it degrades gracefully for older browsers.
Also establish a system of CSS files, and an order within them, so styles are easy to find and modify. E.g.
- design.css (e.g. colors, links, font family, font size etc.)
- main.css (e.g. how boxes and framework float and relate to each other. The mail part of the CSS)
- modules.css (CSS that belongs exlusively to the modules)
Remove inline CSS, and modify code inside of each file that is used to display XHTML if neccessary
This part goes further than just creating a new theme.
Remove inline CSS and incorporate the styles in the CSS file(s).
XHTML would need to be modifies for a number of files, both to remove the inline CSS and to make sure the code follows the rules established in a style guide / XHTML guide.
Also, longer term
Some js can be improved - e.g. the content menu.