A moodle 2 theme, Université

3 12 2010

I’ve been looking at Moodle 2 again, at my day job, trying to make little enhancements and seeing what’s possible for our own Moodle installation. Part of my experimentation included making a theme design that the University might be able to use when they roll over to Moodle 2.

As a spin off, I decided to split the design in to two copies; one that I’ll continue to work on for my employer, and one available for community download right now, at the current state of the theme.

I hope you like it. It’s called Université.

** News: Just about to release an update on this theme for Moodle 2.1, see the Moodle Themes page for more details **

The general aim of the theme, is to have a nice slightly corporate looking theme, which is fairly easy to completely change the colour scheme of, so that the administrator can more easily make it fit with their own institution’s corp id.

A screenshot of the new theme design

So, how do you go about changing the colour scheme to match your own institution?  You’ll need to do two things, start by designing a new theme with JQuery’s Theme Roller application (mentioned below); then, use matching colours and the Université’s own settings area to customise the colours of the banner, headings, and hyperlinks (the stuff that the Theme Roller css and images won’t do).

JQuery Theme Roller.

Now, this lovely online tool will let you design awesome looking user interfaces, it’ll give you a stack of images and css all ready to go.  The cool thing is, the Université theme for Moodle 2 uses the theme-roller CSS and image directory in a way that lets the administrator:

  • Roll out their own UI design and paste it over the Université theme jquery-ui.css file and jquery-ui images directory.

Now, yes, it sounds easy. Well, it is easy, but there needs to be an extra step because of the way Moodle 2 handles images in CSS.  Basically here’s what to do once you replace the CSS.  Open your new one, and do a find and replace:

  1. search for ‘images/’
  2. replace all with ‘[[pix:theme|jquery-ui/’
  3. search for ‘.png’
  4. replace all with ‘]]’

Then, almost the entire interface will change appearance. Nice hey. But eh, there’s a couple of areas that the theme roller didn’t apply to, so, that leads me to the second enhancement in the theme;

Keep in mind though, that the colours should be as dark/light as they are in the default theme I’ve created, simply change the hue if you want to roll out a new theme-roller to avoid any issues with illegible text etc (dark text on a dark block header for example).

The theme design in Theme-Roller

The Université theme’s settings page.

On the settings page built in to the Moodle theme, you can change the colours of:

  • The links
  • The link roll over colour
  • Link colour in the header
  • The two colours that actually make the gradient in the header
  • and the colour of the buttons in your dock (dock titles), which I couldn’t get the theme to handle automatically.

So, there you have it.

If you’re wondering how the Moodle theme uses the JQuery theme roller files, then read on..

Javascript.

Basically, the theme javascript file does all the work. Yeah, I dunno if it’s the best approach, well okay it’s not, but it certainly works well enough. The javascript (YUI3) find all the elements that are relevant – such as block headers, forum headers, the calendars and so on), and simply ADD the JQuery UI theme classes to those elements once the DOM has loaded.

This is what allows the JQuery Theme Roller css to be almost drag and drop with the Moodle theme.

A little more customisation?

You can actually give some Blocks a slightly more important look.. for example, say you wanted your course list block, and some other block to have a slightly different coloured header, to make them stand out. You can do this by editing the javascript file in the theme’s javascript directory.

To do this, just go in to the JS file, and you’ll see I’ve got about 4 lines commented out as an example, lines 38 to 42, commented with “important blocks”.  Just uncomment a line, and use the html class name of the block you want to make different in appearance.  It simply applies a different class to those elements, and hence makes them look different.

Oops, almost forgot.

As with before, thanks to the JQuery theme roller, aaaaaand Mark Jame’s awesome icons called Silk.

Thanks also to Reuben and Tobias for mega help with testing and finding bugs for me to fix with my last theme, I used all the same fixes so far on this theme too!

And, like my last theme, just update the logo with your own institution’s logo, by replacing the logo.png file in the pix directory. Note the size of that area though, there’s not much space there! (and did you like how it fades in?)

One other thing; I didn’t really spend any time on the main menu feature, so if you use a main menu with your site I’m sorry in advance, it looks pretty crappy in my theme.. I’ll get to fixing it up at some point : D

Wanna download it?

Suss out the Moodle Themes page of this site to get the download link and any latest news on this theme.

Feedback?

Sure, leave a comment, I probably won’t have time to make any fixes until next year, but your comments are most welcome!

Advertisements

Actions

Information

51 responses

3 12 2010
Twitter Widget Pro WordPress Plugin - wpstyles.org - Wordpress 201

[…] A moodle 2 theme, Université « rolley […]

4 12 2010
appspoint

Hi,
I added your theme to Moodle and when I go
Appearance
Themes
Theme Selector, I don’t see any preview, if I apply the themes, it became blank

4 12 2010
Rolley

wooohhh, that’s strange, it works fine my end in all regards. What version of Moodle you got? I’m running the Stable Build; released 24th Nov..
Double check your zip download wasn’t corrupted or something, the fact that the preview doesn’t even come up sounds strange, very strange, as all the preview is is just the “screenshot.png” file in the pix directory, which Moodle should automatically sort out.
Let me know how ya go

18 12 2010
Elena

I have the same proble as appspoint!

6 01 2011
Rolley

Hey Elena, how’d you go now, get it working?
It really should just drop in and become available, so I’m not sure why it wouldn’t see the preview and apply the theme.
I haven’t had any problems on a few machines here, but all the computers I use are Macs….

6 12 2010
A new theme for Moodle 2 « The Weblog of (a) David Jones

[…] process and also checking out the work of a friend. What follows is an attempt to install the universite theme for Moodle 2 onto a local […]

7 12 2010
New Theme, “Université” by the designer of Créatif | Moodle News

[…] want to subscribe to the RSS feed. Or follow the Moodle News Twitter account. Thanks for visiting!Rolley Tickner, creator of the great Moodle 2.0 theme Créatif, has released a new theme in development for […]

23 12 2010
gerald

Hi!

The Universite theme don’t working, we have a problem with a UNIVERSITE, _MACOSX archive is already exist and I can’t install.

Thanks..

6 01 2011
Rolley

Hey Gerald,
Try deleting the directories, download the theme and try and set it up again, it shouldn’t have any probs like this.
: )

29 01 2011
Alex D

Hi, im trying to adapt your theme to the moodle platform of
the school where i work, but im struggling a little getting the
university logo on the top header, instead of the rolley one, any
advice on that?? thank you, amazing work

30 01 2011
Rolley

Hey Alex!!!
Thanks!! All you have to do, is just replace the image in the pix directory, the logo.png one. Open up the one thats already in there, which is my rolley one, to see the size of the image and use the same height as your logo so it fits in the area nicely.
You might want to rasterise your logo on to a dark background and then trim the background off if you find that the edges aren’t blending in nicely.
Lemmi know if you have any probs!
R

2 02 2011
Andrew

Hi Rolley,

I love the idea of Universite and the ThemeRoller process. Just having trouble making it all work. Can I confirm quickly that I’ve covered all the steps from your blog:
* create a new theme with ThemeRoller (and download and unzip it)
* overwrite the existing …theme/universite/pix/jquery-ui directory
* overwrite the existing …theme/universite/style/jquery-ui.css file
* in that CSS file, update the pathname from ‘images/’ to the pix:theme (+directories) path (along with omitting image extensions, etc)

Seems too easy … and yet I’m getting no change in theme at all. All the files seem to be present (including some garish test patterns), and the CSS file edited adequately (referring to those same tests). What have I missed?! Do files have to belong to a particular user group or have particular permissions? Have I used the wrong version of ThemeRoller (1.8.9 instead of 1.7.3)?

Cheers,
Andrew

3 02 2011
Rolley

haha it does seem too easy hey Andrew! It should be easy though. Lets think;

so what’s the total path of one of those images now, did you make sure you included the brackets and pipe correctly to make sure the syntax was exact? (replacing the ‘.png’ with ‘]]’ i think from memory?).

EVEN if the paths were wrong though you’d still see the colours change, and sounds like you haven’t seen the colours change is that right?

What that makes me wonder first is, have you enabled theme designer mode in the general moodle theme settings? Moodle likes to cache themes, so that could totally explain why nothing seems to be happening. Once you’ve enabled it and it clears the cache and so on, you should then be able to disable it again (as it does chew some extra performance off moodle having it enabled).

Lemmi know how you go.

R

4 02 2011
Andrew

Yep. Indeed a problem with caching. That seems to be solved now.

Two new problems, hopefully fairly minor:

(1) The texturing doesn’t appear to be executing, even though the CSS is calling the correct images files (via pix:theme). Instead of a glass button effect or diagonal maze, I just get the solid base colour. Any common problem and an easy solution?

(2) Some themes I’ve used would let HTML in places override other theme settings. Thus a title for a resource could could use to change the colour of some/all of the link to that resource. Is that possible in Universite and/or Moodle 2.0?

Cheers,
Andrew

8 02 2011
Rolley

Hey Andrew,
Sounds like the image paths are wrong (most likely); what you’ve described in point (1) happened to me when I had a directory named a little bit wrong or if I didn’t do the find and replace exactly right on the jquery css.
It’s finding the css, which is why you’ve got the background colour, but not the images.
And sorry, I haven’t tested or know the answer to your second question : ) ??
?
Cheers
R

8 02 2011
Andrew

Hmmm. I’m yet to find solutions to either issue. But I’ll just tweak what I’ve got to make things work. Thanks for the advice to date!

8 02 2011
LMS

Nice moodle theme. Thanks for sharing.

10 02 2011
Matt

After adding the theme to Moodle 2.0.1 I get duplicate entries under Appearance > Themes… Any ideas? Thanks

[[configtitle]]
universite

10 02 2011
Matt

Theme settings for the duplicate theme urls show up as-

…admin/settings.php?section=themesettinguniversite

and

…/admin/settings.php?section=theme_universite

which one is correct?

1 03 2011
Rolley

GDay Matt!

It’s possible that there’s a problem with the theme in Moodle 2.0.1, I haven’t tested the latest build yet, since 2.0. It’s also possible that because I’m on a Mac and you’re on a PC? the resource forks are screwing with what Moodle is seeing in the theme directory. Delete the resource forks and see if that helps, and as soon as I can I’ll start doing some testing in the latest Moodle build. It’s just my busy season now, so I’ll try and get to it soon, but not right away, sorry : )
r

24 02 2011
David

i im using your theme its nice and very complete .. im stack in one customization when you are in a course in topic mode the section o topic 0 have a gustomization hide and show i want to apply that customization in all topics you can xplain me how i you do it in section 0 thanks have a nice day…

1 03 2011
Rolley

Thanks David,

Oh man, that feature is just slapped together with some javascript in the scripts file (javascript/themeScripts.js). I wish I had time to make it better, to get it to work on every topic would require the functions to be rewritten from line 156 onwards.

It’d need to collect all of the elements instead of just the section 0 one, and append the toggle div in each one.

But that said, it’s probably better to go ALL out and write a proper accordion layout, which is something I might look at for another theme design later in the year; accordion or tabs, something useful and cool. Hmmmmm : )

R

8 03 2011
César Enrique

Hi, I just, hey, I have a doubt, that line of code I can´t change the color of the header block, It is dark green, and I want to change a background image, but I’ve moved on all sides and only offer fails to change even if not color, I put an image, it must be easy, but can not find it, hopefully someone can help me.

Thanks in advance.
Greetings.
César

24 03 2011
Rolley

Hey César!
To change the colour of the header, you should be able to pick that in the theme’s settings area; however to change the colour of the headers in the blocks then you’ll need to roll out a new theme with the jQuery theme roller, and follow the instructions I have on replacing the css and images ; )
It’s not too hard to do, you just need to over-write some files, do some find-and-replace fixes on the css and it should work – as long as you follow the steps fairly carefully ; )
Good luck!
R

24 03 2011
the sniper by liam o flaherty? » CMSMonkey - content management system made easy

[…] info on the theme here rolleys.wordpress.com/2010/12/03/a-moodle-2-theme-univers… Posted in Moodle – Tagged flaherty, liam, sniper SHARE THIS Twitter Facebook Delicious […]

29 03 2011
kvs

Hello, I got an error in my moodle saying: Invalid get_string() identifier: ‘configtitle’ or component ‘theme_universite’
And I get duplicate entries under Appearance > Themes
one is set universite and the other one [[configtitle]]

Any idea how I can fix this?

18 04 2011
Rolley

Hey there : ) I’m not sure without seeing the error in person, I’m thinking that if you have duplicate entries under the theme stuff, you might be having a problem with how my zip file unpacks. Because I’m on a mac, they store all their files in two parts, a data fork and a resource fork, and on a PC when you unzip mac stuff you often see a whole bunch of similar-named files.. are you running your moodle on a PC? The only idea I have is to make sure that the unpack of the zip is nice and clean and only made a single directory. I’m sure other people have had this problem, I’m not sure how they fixed it though. : )

2 05 2011
Eric

I really like this theme. However, blocks aren’t showing on the front page. I realize that it may not be related to your theme, but if it is, any idea how to fix it?

Thanks

13 05 2011
Rolley

Hey Eric, sorry, totally not sure why your blocks aren’t showing, doesn’t sound good at all! The theme should display the blocks fine : )

12 05 2011
martijn

Hi Rolley,

You’ve built some great Theme’s do you mind if I use either the creatif or unicersite design as a base for themes for other software (mahara & horde) to create a nice unified look throughout our webbased software?

Cheers

13 05 2011
Rolley

Go for it Martijn, thanks a ton hey : D
Send me a link actually, if you do do anything, so I can have a gawk.
Cheers

R

10 06 2011
César Enrique

Hi Rolley,

How can I remove the black border to the image that corresponds to the logo in the header?

Thanks in advance.
César.

10 06 2011
Rolley

Hey César!
There’s shouldn’t be a border at all I would have thought, since the logo image is defined in the css as a css background. Do you have firebug in firefox or use the dev tools in safari/chrome? If so you could inspect the element to find the css that’s causing it, if you wanna talk about it and send me a screenshot on email let me know and ill email you my address.
r

11 06 2011
César Enrique

Hello,

Thanks for the quick response, although it does not take away the border, the strange thing is that I see with firefox and there you do not get the border, but with Internet Explorer if it appears, I leave the link where you can see:
http://moodlewa3.ula.edu.mx/moodle_odontologia/

I check with firebug, but not enuentro where he applies that style, I hope I could help.

Advanced Thanks
César

20 06 2011
Making my moodle themes a little bit smarter « rolley

[…] I hope to achieve here, is to have the nice looking theme like Université, but also give it some pseudo intelligence so that it completely changes the layout for small […]

27 07 2011
Grzegorz Tokajuk

Hello,

I have problem with this theme. Here You can see what I mean (http://img836.imageshack.us/img836/8743/przechwytywanievsn.png). What can I do to appear scrollbar under table?

4 08 2011
Rolley

Hey Grzegorz!
That looks shocking, how do I get my moodle to duplicate that, is that in the grade book or some other area? I’ll need to get mine to do it, so I can see the HTML to write a CSS fix for it : s
Let me know more if you can and I’ll try n fix it up for ya ; )
Cheers
R

17 08 2011
Grzegorz Tokajuk

Hi,

That is in the overview of quiz. If there is a lot of questions this is happening as you can see the screenshot.

Cheers

22 08 2011
Rolley

Hey Grzegorz,
I’ll work on trying to figure it out for ya, I’ll re-post as soon as I can 🙂
Thanks!
R

12 08 2011
Diego Arévalo

Congratulations for the beautiful theme, we are testing and implementing a problem but we have to enter images into tables in html mode anywhere on the site, all the tables appear with white background and does not display background images. therefore we can not customize the labels of the courses in moodle.
Finally, thanks for sharing

22 08 2011
Rolley

Thanks Diego 😀
If you’d like the backgrounds to be gone from the tables, some edits on the javascript file might be needed; got an example of your html I can see? Basically the javascript on lines 89-97 applies some styles to a few types of tables, the styles all have background css.. You could always just use inline css too, that would override the styles in the css files.
: )
R

26 10 2011
Enrique

Hi, great theme but… i can´t download it!!
What can i do?
Thank you!

31 10 2011
Rolley

Hey mate,
you’ll be able to download the theme in the next couple of days from Moodle.org, I have no where to store the files anymore, and I’ve just put it in moodle.org for review then official release : )

http://moodle.org/plugins/browse.php?list=category&id=3

R

24 11 2011
Andres Doria

Hello there! I’ve been using this theme (Université) and I think is one of the cooles I’ve seen in Moodle installations. I have a question. Why in the question bank when choosing a different Category (default) is not changed automatically? Is there an AJAX problem and a way to fix this? Best regards! and Thanks Again!

24 01 2012
Rolley

Firstly, sorry for the delay, I’ve not been able to get to my blog here for around a month!

Secondly, I’m not sure how to fix this problem, it sounds like it could be a little mishap in the actual questions Mod, especially if its to do with events and scripts.. the theme really only does the look and feel and doesn’t (or shouldn’t) change the function / behaviour of moodle itself. Tried updating your moodle install?

10 07 2012
Andrés Doria

Hello Rolley! I followed your advice and I upgraded Moodle to 2.1.3 version and problem solved! The Question Bank works just fine. Thanks!

24 01 2012
Rolley

P.S. : ) thanks for your nice comment too hehe, glad you like it!

12 02 2012
Ivgalicia

HI there! I’ve been using this theme (Université) and I have a trouble, when I try to display a pdf, It don’t show anything, you now any way to fix it? one more thing, is any way to make wider the title space? Thanks.

16 03 2012
Rolley

GDay!
I reckon check your PDF plugins for your browser, try a different browser etc.. i doubt the viewing of PDFs is actually tied to the theme as it’s really a control of the OS or the browser or both. For the title space though, you’d have to edit the right area in the CSS most likely, I’m not sure which area specifically you want to change but if you use a dev tool like Firebug or the dev toolbar in Safari, you can easily identify which area in the css would need amendments : )
R!

23 01 2013
Dimitris Chatzipanagiotidis

Hello!!!
We use universite in our organization, it is one of the best available themes.

I have also one question. Where can I find and change favicon?
Also will you plan to update the theme in the future?

Thank you

15 08 2013
Rolley

GDay Dimitris, Thank you so much, that’s great : )
Unfortunately though I haven’t the time to maintain the themes at this point. I’m hoping that I will work on revised versions of them for Moodle in the coming year or two though, so do keep your eye out 🙂
The favicon should just be in the theme directory somewhere, like the pix directory? 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: