Hey Guys,
The Connect Theme was developed at the Schools of Isolated and Distance Education to bring IE6 support to Moodle 2. Unfortunately, Internet Explorer 6 is still the supported browser of the Western Australian Department of Education, so making Moodle 2 compatible is critical. This is an early version and will almost certainly have bugs and un-themed components.
Today we’re releasing it to the community to use and build upon. It comes in two parts, the core theme and the colour scheme. The core (Connect Core) provides the style and layout changes for getting the base themes working correctly in IE6. The colour scheme theme (Connect Royal) provide the css post processing functionality for Connect Core. The Royal theme contains no stylesheets, (though it can, just set the config accordingly) just a set of PHP variables in the lib.php file that can be changed. The variables are things like text, border and background colours. The gradients used are just images, which can be changed accordingly. This is a somewhat complicated system, but as shown in the link below, we can build a bunch of different colour schemes that use the core functionality. Updates to the core are automatically used by the child themes.
We’re able to get around 95% of Moodle 2 working correctly and efficiently in IE6 with just style changes - nothing else is required. This theme is based on the first release Moodle 2.0.0. The browsers we tested on include IE6/7/9b, Safari 5, Webkit Nightly and Firefox 3/4. Chrome has a different 2D Graphics Engine to Safari so more testing may be needed with this browser.
Here are some of the basic changes required to get some of the more serious IE6 issues fixed:
Scrollbars in blocks - No matter what styling is applied, due to the number of html components inside some of the more complicated blocks, IE6 struggles and adds horizontal scrollbars. By setting the ‘.block ul’ selector overflow-x to ‘hidden’ fixes this issue.
Footer home button - The Home button located in the footer of most pages would have duplicate characters and layout issues. This is a known bug of IE6 where comments located within ‘floated’ html elements will cause the browser to paint duplicate characters of certain elements.
Tab bar - Even the single line tab bar breaks pretty badly in IE6. To get these working correctly requires a delicate hack using ‘absolute’ css properties, check the stylesheet for more details. This is a component that really needs cleaning up at the renderer level. The use of highly styled horizontal lists within lists is a performance drag even on modern browsers. Separate lists within the tab tree would be much cleaner.
Browsing the style sheets is the best way to see the changes we have made. As you can see, the theme design is very simple and engineered purely for cross-browser compatibility. We will be regularly evolving and updating the code. If you see any issues, post a comment here or I can be contacted at <span>alex.mills@det.wa.edu.au</span>.
Enjoy.
