{"id":462,"date":"2011-01-24T13:15:56","date_gmt":"2011-01-24T13:15:56","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/elearningteam\/?p=462"},"modified":"2011-01-28T10:59:48","modified_gmt":"2011-01-28T10:59:48","slug":"things-we-love-about-moodle2-pt2-experimenting-with-themes","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/2011\/01\/24\/things-we-love-about-moodle2-pt2-experimenting-with-themes\/","title":{"rendered":"Things we love about moodle2 pt2 – experimenting with themes"},"content":{"rendered":"

One of the changes in moodle2 has been in the\u00a0implementation\u00a0of themes.<\/p>\n

We already talked in a previous blogpost <\/a>about the ability in moodle2 themes to include and exclude css & javascript from a themes parent. We appreciate this\u00a0inheritance\u00a0model which makes it simpler to have a base css, and vastly change the\u00a0appearance\u00a0of your whole site with \u00a0relatively\u00a0few, clear lines of css.<\/p>\n

It took us about 5mins to\u00a0implement\u00a0a ‘nude’ Sussex\u00a0style-sheet\u00a0in moodle2.<\/p>\n

The process<\/h2>\n

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

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

In the sussex theme folder we created 2 stylesheets – layout and text.<\/p>\n


\n\/*LAYOUT CSS *\/
\nhtml,body {
\nbackground-color:#E1E8EB;
\n}
\n#page-wrapper {
\nwidth:990px;
\nbackground-color:white;
\n-moz-border-radius: 1em;
\nborder-radius: 1em;
\nmargin:1em auto;
\npadding:1em;
\n}
\n<\/code><\/p>\n


\n\/* TEXT CSS *\/
\nhtml, body, select, input, textarea {
\nfont-family: Geneva,Verdana,Tahoma,sans-serif;
\ncolor:#555555;
\n}
\nbody, div, span, blockquote, p, li, pre,
\nabbr, address, cite, code,
\nfieldset, form, label, legend,
\ntable, caption, tbody, tfoot, thead, tr, th, td,
\narticle, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
\nfont-size:14px;
\nline-height:1.5em;
\n}
\nh1,h2,h3,h4,h5,h6 {
\nfont-family:Georgia,serif;
\nfont-weight:400;
\n}
\n\/*LINKS *\/
\na, a:link, a:visited {
\ncolor: #11718F;
\ntext-decoration: none;
\n}
\na:hover {
\ncolor:#224857;
\ntext-decoration:underline;
\n}
\n<\/code><\/p>\n

Here a screenshot of the results :<\/p>\n

\"\"<\/a><\/p>\n

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).<\/p>\n

Bonus fun<\/h2>\n

Again, limited CSS for a SWISS style ultra thin Helvetica theme, with bold underlines and lots of white space :
\n\"\"<\/a><\/p>\n

Using a almost the same CSS to try a quick Eric Gill<\/a> ‘nude’ theme using Gill Sans and Perpetua :<\/p>\n

\"\"<\/a><\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

One of the changes in moodle2 has been in the\u00a0implementation\u00a0of 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\u00a0inheritance\u00a0model which makes it simpler to have a base css, and vastly change the\u00a0appearance\u00a0of your whole site with […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72,67,73],"tags":[76,77],"_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/462"}],"collection":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/comments?post=462"}],"version-history":[{"count":16,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/462\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/462\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/media?parent=462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/categories?post=462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/tags?post=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}