Themes

Zebra - 0.3

Created by Danny Wahl
Tianjin International School
天津市南开区华苑产业园区梅苑路1号 － 天津国际学校
danny.wahl@ldichina.com

Goal

• Take the design of Aardvark and make it accessible to non-technical admins
• Improve usability in customizing Aardvark
• Integrate theme more tightly with Moodle Core

Requirements

• Moodle 1.9.8+ (Tested - other versions untested)
• Firefox 3+, Safari 4+, Opera9+, Chrome, IE untested
• Standard Theme

Known Issues

• Menu not compatible with IE6 or earlier
• This theme has a fixed width. To remove the fixed width, delete "max-width: 1140px;" in zebra.css
• Use colors.php to set your colors and images

Zebra - Roadmap

(Beta) 0.3 - Released

• hdark.png base color is now #666 @ 01 alpha instead of #000 (still pretty dark)
• Changed lots of color orders:
  div#moodlebarcoursesearch: bordercolor;
  .generaltable .cell: border-color;
  .generaltable .cell: background;
  .forumpost .left: background;
  most notably
• Integrated more colors from "standard" theme:
  Quiz Module
  table.minicalendar, #calendar .nottoday, .minicalendar .nottoday: bordercolor;
  #calendar .maincalendar table.calendarmonth th: bordercolor;
  #calendar .today, .minicalendar .today: border-color;
  #calendar .maincalendar .filters table, #calendar .sidecalendar .filters table, .block_calendar_month .filters table: background;
• New CSS just for zebra:
  .author:a changed to match subject color and added an underline
  removed background image gradient from #footer
  .forumpost .left: border-color added
  .forumpost .picture: border-left added
  .forumpost .side: border-bottom added;
  now the left side posts on forums match the body background, with a 1px border of the page background so that emails still look correct and the header color extends to the user picture background
• eliminated one more image
• removed onfocus="this.blur()" from moodlebar (my bad!)
• #moodlebarcoursesearch z-index changed from 11000 to 104 to match moodlebar
• a.tooltip:hover span z-index moved to be in front of #moodlebarcoursesearch

(Beta) 0.2 - Released

• added $canviewmenu for easy menu access control: pseudo permissions (Menu 1 is hidden from students by default to serve as an example)
• Added isloggedin() check for Moodlebar access
• sm, md, lg, xl renamed to small, medium, large, xlarge
• colors.php added: your one stop setup file
• Fixed MoodleBar search position
• Added tons of forum core CSS
• More color fixes
• Add Geshi.css
• Fixed z-index for hover menu and moodlebar with lightbox gallery module

(Alpha) 0.1 - Unreleased

• CSS Rebuilt from scratch
• CSS organized into color schemes
• 5 default non-dithering color-schemes included: Eggplant, Cola, Night, Girly, and Grayscale
• MoodleBar added to theme, and CSS merged into color schemes
• Brand new images (/images/, not /pix/)
• Menu completely rewritten, now uses css colorschemes and pngs
• Menu available in sm, md, lg, xl for "3D" appearances
• Menu item drop down is now a DIV! unlimited items and it will grow to accomodate
• Light/Dark versions of all images available
• More lightweight: 3 jpgs replaced with 1 png (menu) 2jpgs replaced with 1 png (gradients), 2 jpegs replaced with straight css, replaced 1 large png with 3 small pngs (flyout)
• Validated CSS3 against W3C
• consistent naming of files for ease of editing

Aardvark - Created by Shaun Daubney
Newbury College
Monks Lane
Newbury, Berks.
RG14 7TD

moodle@newbury-college.ac.uk

Aardvark - Roadmap

Pro 1.2 (Robocop) - Released

• Rebuild from ground up
• All CSS combined into one handy file
• Re-organised folder structure
• More modern styling/design

Pro 1.1 (Bearhug) - Released

• PIX Folder - Additional filetype icons added
• aardvark_layout.css - Forum controls added to restrict posted images to fit on to page ".forumpost {width: auto;overflow:none;}" and ".forumpost img {max-width: 100%;}"
• aardvark_layout.css - Removed "position" and "left" elements from ".cal_popup_bg ", ".surround" and ".header-profileblock" to fix calendar pop-ups.
• aardvark_layout.css - Changed .surround to #surround
• aardvark_color.css - Changed .surround to #surround
• header.html - Changed <div class="surround"> to <div id="surround">
• header.html - Correctly closed link in <link rel="stylesheet" href="<?php echo $CFG->httpsthemewww .'/'. current_theme() ?>/aardvark_print.css" type="text/css" media="print" />
• aardvark_print.css - Added
• various css - Changed header-profile classes (.) to IDs (#)
• header.html - Changed header-profileblock class to ID
• aardvark_default.css - Removed #header-home and placed contents in #logo
• header.html - Made the header elements a little more PHP and removed redundant #header-home DIV. Now reads
  <?php print_container_start(true, '', 'header');
  echo '<div id="logo">';
  echo '<a href="'.$CFG->wwwroot.'" style="display: block; width: 247px; height: 96px;"> </a>';
  echo '</div>';
  echo '<div id="header-profileblock">';
  include('profileblock.php');
  echo '</div>';
  ?>
• header.html - Validated markup! Woop!!!
  

Pro 1.0 (Morlock) - Released

• Moved out of beta - A number of issues may still exist relating to appearance, however the theme has been extensively tested and is considered stable.
• profilepic.php - Removed as it was no longer required.
• footer.html - Added additional login and navigation controls to footer.
• aardvark_color.css - "h2 .headingblock, .header" image changed to 50px height version

Beta 0.5 (Termite) - Released

• Fixed some issues with header rendering in some browers
• Moved to BETA, maybe still a couple of bugs and improvements, but generally stable.

Alpha 0.4 (Yeti) - Released

• Hopefully fixed header login issues - untested except my build where it works
• Replaced some missing icons from PIX folder
• Themeswitch and JS Query files removed (for time being)

Alpha 0.3 (Critter) - Released

• Added IF variable to show "login" option in header when user not logged in
• New codename (based on default colour)
• Replaced 'fixed typed' options with language adjustable versions from LANG.

Alpha 0.2 (Juiced) - Released

• New colour scheme
• Topic areas styled
• Footer modified
• Changes to calendar styles
• Forums rough styled

Alpha 0.1 (Vertigo) - Released

• Started again from scratch
• New navigation menu (called Top Menu), now pure CSS
• Lighter colour scheme
• User profile details in header
• Calendar styled

This theme will continue to be developed. If you like this theme and use it yourself, please let me know what types of modifications you make on the Moodle forums, I'd love to see them and maybe pinch some ideas for mine. Also always grateful to receive credit where credit's due.

Discuss this project, with suggestions and fixes here

Thanks to...

• Moodle.org

Thanks for the support in the forums, the users and contributors around the world and my good friend Google.

Support Moodle and Open Source Software.