← blogs.sussex.ac.uk

Things we love about moodle2 pt2 – experimenting with themes

One of the changes in moodle2 has been in the implementation of themes.

We already talked in a previous blogpost about the ability in moodle2 themes to include and exclude css & javascript from a themes parent. We appreciate this inheritance model which makes it simpler to have a base css, and vastly change the appearance of your whole site with  relatively few, clear lines of css.

It took us about 5mins to implement a ‘nude’ Sussex style-sheet in moodle2.

The process

Following the guidlines for moodle2 themes we created a sussex theme folder, edited the config file, imported the layout files from base, and set our parent theme to base.

Like many of the themes already created we included Paul Irish‘s html5boilerplate css – which includes Eric Meyer‘s reset realoded and a gives us a nice basic usability baseline.

In the sussex theme folder we created 2 stylesheets – layout and text.


/*LAYOUT CSS */
html,body {
background-color:#E1E8EB;
}
#page-wrapper {
width:990px;
background-color:white;
-moz-border-radius: 1em;
border-radius: 1em;
margin:1em auto;
padding:1em;
}


/* TEXT CSS */
html, body, select, input, textarea {
font-family: Geneva,Verdana,Tahoma,sans-serif;
color:#555555;
}
body, div, span, blockquote, p, li, pre,
abbr, address, cite, code,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
font-size:14px;
line-height:1.5em;
}
h1,h2,h3,h4,h5,h6 {
font-family:Georgia,serif;
font-weight:400;
}
/*LINKS */
a, a:link, a:visited {
color: #11718F;
text-decoration: none;
}
a:hover {
color:#224857;
text-decoration:underline;
}

Here a screenshot of the results :

As you can see, it’s a ridiculously small amount of css to produce something remarkably similar to our current moodle style (which uses far more css).

Bonus fun

Again, limited CSS for a SWISS style ultra thin Helvetica theme, with bold underlines and lots of white space :

Using a almost the same CSS to try a quick Eric Gill ‘nude’ theme using Gill Sans and Perpetua :

Obviously, the sussex style sheet isn’t yet complete – but from an initial perspective moodle2’s new ways of creating themes seem a big win.

5 Comments

  1. Posted April 27, 2011 at 9:46 am | Permalink

    Stuart, the Open University is going through a Moodle 2 upgrade. I think it’s lacking a good CSS design. Perhaps you would be happy to share your stuff? The guy in charge over there is called Sam Marshall.

  2. Stuart Lamour
    Posted May 12, 2011 at 7:10 am | Permalink

    Hi Gillies,

    OU has a really nice online style guide by http://www.edmerritt.com/ they launched in Jan 2011. You can view the guide here http://www.open.ac.uk/webstandards/v3.0/index.php.

    It includes mobile / media queries which i guess they will be applying to their moodle2 gradually. Looking forward to seeing the results!

    If you’d like to pass Sam any details we would be happy to talk to him.

    Thanks for reading
    Stuart Lamour

  3. Posted June 29, 2011 at 7:19 am | Permalink

    Great themes, do you have any moodle themes that use css framework like blueprint?

  4. Posted July 7, 2011 at 4:21 pm | Permalink

    Hi Andaru,

    the current themes we are working on are based on 320 and up (http://stuffandnonsense.co.uk/projects/320andup/) and the less+ css frameworks (http://www.angrycreative.se/projekt/less-framework/). Responsive design is very important to us with the rising number of different size devices people are using to access the learning environment, so developing themes based on html5 & css3 frameworks which support cross platform content delivery is something we are really pushing for in our moodle.

    thanks for the comment, and glad to see others are interested in using grids in moodle.

    Cheers
    Stuart Lamour

  5. Posted February 19, 2014 at 9:03 am | Permalink

    Hi Stuart,

    I the above post you mention that your working with 320 and up the awesome less framework on Moodle sites. I was wondering if you faced any big challenges with moodle code.  I have been working with 320andup for a while now on other sites but I’m planning to start on a Moodle site. i would love to hear about your process/challanges.

    Many thanks
    David    

Post a Comment

Your email is never shared. Required fields are marked *

*
*