Skip to end of metadata
Go to start of metadata

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 CSS

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

Remove inline javascript and add them to a javascript library within the installation.

Some js can be improved - e.g. the content menu.

  • No labels

3 Comments

  1. Joel and I were talking about making the adjustments needed to allow left menu placement, but we need to coordinate this work with the work you are talking about doing here, since the your work and ours will break backwards compatibility with older themes. Are you ready to take on the cleanup work?

    If so we will setup a branch in SVN for you to work from, and for us to do the menu work. Let us know. It would been nice to include this in the April release if we can get it completed by then.

  2. Time is becoming a huge issue for me. I am still eager to do both a new theme and the clean up, but as I will be absent for three weeks in March I will probably not be able to get it all done by April.

    I have started to create a new theme based on the default one, and working on that @ localhost - I haven't looked into the menu part yet, but it should be able to do this without changing anything but the theme? Basically you just want to include the whole menu it in a box (DIV), within the main content box, and then float it left or right in CSS, while no float is set on the main content box..

  3. FYI: I have started working on this again, and hope to post a new theme based on the default one in about a month (or hopfully a lot sooner). after that, clean-up of the rest of the code can start.