Themes

 
 
Julian Ridden
Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Particularly helpful MoodlersGroup Translators

So, after months of work by the team at HQ the moodle.org site has today gotten it's facelift.

I love that moodle's official site now LOOKS mature and professional. Finally meeting the product.

I'm hoping the fact that the official site looks so spiffy, has a content driven homepage and cool design features will now only highlight to others what is possible and encourage users to push their own designs to new limits.

What do you guys think?

Julian

 
Average of ratings:Useful (13)
Picture of Steven A.
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

I guess docs, downloads, etc. will eventually get the new theme too?  And considering we are "community driven", how about adding a "community" link to the menu at the top with easy access to the forums?

So far so good, Moodle!  Looking good!  smile

 
Average of ratings:Useful (3)
Dan at desk in Moodle HQ, Perth
Re: Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

I guess docs, downloads, etc. will eventually get the new theme too?

Yup, I believe that is the plan Steven.

It's great to see so much positive feedback on this thread, I know for a fact the SITES team at Moodle HQ have been working really hard on this for long hours.. I'm sure these posts will encourage them for all that work.. smile Please treat them gently whilst they iron out the kinks.

 
Average of ratings: -
Picture of Urs Hunkler
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Huge gratulations for the new design - I like the new theme and the fact that moodle.org is now much easier to read on a tablet. I was wondering for some time when you are going to change the theme.

I have some remarks:

Opening the moodle.org site on a tablet it was difficult to find the link to the forums. The nav bar was no help - I found the link when I scrolled down the page searching for forums.

On a hires device the font is too small (for my expectations on reading quality). I would like to see Moodle follow the trend to set text in bigger font sizes or to offer a font size switch.

When I started to write this posting and the edit page opened I was surprised by the fact that I see the drag&drop file upload area, which is useless on a tablet.

 
Average of ratings: -
Picture of Urs Hunkler
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Answer to self - the "Join us" button opens the forums. Good to know wink

 
Average of ratings: -
MD shot of me from his iphone4
Re: Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

It will try to go direct to the course with your lang. more improvements are coming up but the feedback is great !

ps: i find myself going into forums via useful posts...

 
Average of ratings: -
Martin in black and white
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

The drag/drop attachments thing on tablets is a Moodle issue and something that'll be dealt with eventually.

And Urs, I wanted to say many thanks for the last design we had that lasted so long!

 
Average of ratings:Useful (1)
Picture of Urs Hunkler
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

You are welcome, Martin. The look seams to have been quite ok when it worked for a long time.

Now it's a pleasure to see Moodle's interface evolve with the work from the front-end team - congratulations on the decision to establish two teams with quite different skill sets wink

 
Average of ratings: -
Picture of Natalie Denmeade
Re: Loving the new theme on moodle.org
 

Moodle just got sexy! Congratulations everybody, proud to be part of this community.

 
Average of ratings: -
Picture of David Scotson
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Looks very nice, and the use of a grid on the front page is an exciting step forward.

One nitpick, I think the logo is 3 or 4 pixels too high in the top bar, it doesn't look centered like the rest of the content.
 
Average of ratings: -
MD shot of me from his iphone4
Re: Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Yep the idea was bottom align, perhaps it should be middle aligned.

ps: tried docking blocks? wink

 
Average of ratings:Useful (1)
Picture of Jona Turner
Re: Loving the new theme on moodle.org
 

Yes yes..... come on then, share your magic that got docking working in bootstrap!?

Did you use a cauldron and an eye of newt?

smile

 
Average of ratings:Useful (1)
Picture of David Scotson
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
The bar is 40px and the image is sized at 20px, so to center it like the other text you'd expect 10px padding above and below.

Currently it's only got 5px padding above, which I think makes it too high up, and leaves a weird 5px gap where you can't click on the logo at the bottom.

However, because the logo is a bit bottom heavy with only the "dl" poking up a bit, I think it looks more centered if you have say 8px padding above and 12px padding below (or 9/11px).

As for the docking blocks, I know it's a popular feature (at least amongst administrators of Moodle sites), and technically impressive, but I actually think it actively harms the usability of Moodle, and doesn't really make any sense on mobile devices so would love to see it getting phased out entirely. (It's never been turned on our Moodle site for those reasons).

edit: while I'm here, it looks like you're bringing in the whole theme CSS twice, if you examine most elements in a browser you'll see the same declarations twice, with only occasional minor differences. I think I did this before and it was because I was regenerating the whole CSS for the child theme from the LESS, and forgetting to exclude the near identical CSS from the parent theme.
 
Average of ratings:Useful (4)
Picture of Steven A.
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

As for the docking blocks... I actually think it actively harms the usability of Moodle

This.  smile

 
Average of ratings:Useful (2)
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Some people like docking, others do not -> https://moodle.org/mod/forum/discuss.php?d=234336.

 
Average of ratings:Useful (3)
Picture of Steven A.
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

Really interesting discussion there, Gareth.  Thanks for the link!

 
Average of ratings: -
Picture of Richard Oelmann
Re: Loving the new theme on moodle.org
Group Particularly helpful MoodlersGroup Testers

While others find that not having it in bootstrap themes harms the usability for them smile One of the many advantages of moodle - change it the way you want.

If it works it can be turned off easily (or not used), it's one line in the theme config.php file to disable it. If it doesn't work, then it removes a choice for those who prefer to have it there.

 
Average of ratings:Useful (1)
Picture of David Mudrák
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Moodle HQGroup Particularly helpful MoodlersGroup Translators

forgetting to exclude the near identical CSS from the parent theme

Thanks David. Yup, this was our case too. Should be fixed now.

 
Average of ratings: -
Picture of Mitja Decman
Odg: Loving the new theme on moodle.org
 

CONGRATS!!!! GREAT!!! Love it. Keep the good work.

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Ohh crumbs!

Lots of thoughts!....

  • Very modern.
  • Very slick.
  • Forums not prominent.
  • User icons still need to be transparent PNG's - MDLSITE-2483.
  • Docking with a 'Bootstrapbase' based theme appears to work in advance of MDL-38923!
  • Something similar should definitely be the style for 'Clean' in M2.7 - MDL-42964.
  • Hopefully nesting of forum posts will work on iPod Touch and not crash Safari.
  • Buttons need to be a shade of orange.
  • Icons need to be a shade of orange.
  • Possibly change the black on white text background for people who have difficulty reading black on white.  Perhaps something subtle which works for all.

So far....

Not being negative, being a software engineer = "Its finished, what have I missed?" smile

Cheers,

Gareth

 
Average of ratings: -
MD shot of me from his iphone4
Re: Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Thanks Gareth,

Yup, credits for docking are in fact evidenced within MDL-38923 (its still evolving there) !

The black on white text is an interesting one to think about. ( i mumbled it aloud and up came Barbara's voice beside me mentioning 'accessibility' big grin)

We had a look at nested posts, i enjoyed browsing and posting on my phone. The idea was to stop nesting infinitely.

 
Average of ratings:Useful (2)
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

No worries Aparup,

The 'black on white' text comes from my teaching days with using white boards.  Some students have difficulty reading black on white text, so I switched to using blue / green pens.  This works on so many levels as it means its a 'one size' fits all solution so no need to differentiate and potentially alienate a group of students from the others fuelling bullying issues.  It therefore brings in more inclusion for all so that everybody is a part of the same group, therefore helping with Maslow's hierarchy of needs (http://en.wikipedia.org/wiki/Maslow's_hierarchy_of_needs) towards self actualisation.

And as long as the text colour is not changed to 'red' as this is an 'angry' colour, then no problem.

Thank you so much for solving the nesting problem, the forums display a treat on my iPod Touch.

 
Average of ratings: -
Pieter van der Hijden
Re: Loving the new theme on moodle.org
 

Beautiful! How is it called?

Is the theme available for ordinary Moodle sites as well? If not, which standard theme equals it more or less?

 
Average of ratings: -
Picture of Danny Wahl
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

view source -> "theme":"moodleorgcleaned"

hehe.

Also, I think they don't release the theme by design for 1) branding and 2) to stop people from getting confused thinking this is their school's moodle instance....

I guess any bootstrap theme is going to be a good place to start if you like this look.

 
Average of ratings: -
Art Lader
Re: Loving the new theme on moodle.org
Group Documentation writers

Looks great, Julian. Really a wonderful facelift.

 
Average of ratings: -
Julian Ridden
Re: Loving the new theme on moodle.org
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Particularly helpful MoodlersGroup Translators

Hey Art,

Just to be clear, I had no part in this awesome project. This was the crew at Moodle HQ. I was just keen to get conversation going and to (hopefully) get some validation for those who worked so hard on it.

See just some of the work that was involved in this new site design by checking out MDLSITE-2394

Julian

 
Average of ratings: -
Picture of Stuart Lamour
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

front page display of latest news is so much better.

is the renderer for that available anywhere?

 
Average of ratings: -
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

The theme was available on https://github.com/moodlehq as stated on the MDLSITE-1874 issue but seems to have gone.  Strangely the issue is still 'Development in progress'.

 
Average of ratings:Useful (1)
Picture of David Scotson
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Related to that, the front page seems to have a couple of accessibility issues since the main content area (as pointed to by two different accessibility aids, contains just a br tag:

<div role="main"><span id="maincontent"></span><br></div>

Don't know if that's fixable though if blocks are being used for the main content.
 
Average of ratings: -
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Hi David,

That surrounding 'div' is outputted by 'main_content()' method of the 'core_renderer' class in '/lib/outputrenderers.php' which could be the starting point of an investigation as it does not match the protected class attribute 'unique_main_content_token' set in the constructor.

Edit: That is then used in the method 'header()' and joined to the result of '$this->skip_link_target('maincontent')', which in distributed core is:

    public function skip_link_target($id = null) {
        return html_writer::tag('span', '', array('id' => $id));
    }

So perhaps the site installation overrides this or is somewhere in the 'Git' history of this method.

Cheers,

Gareth

 
Average of ratings: -
Picture of David Scotson
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

We should look at replacing that with:

<main id="maincontent" role="main">Actual content goes here</main>
 

Looks like it would be easy, just have to worry about it breaking fragile overspecified javascript.

 
Average of ratings: -
Picture of Kimber Warden
Re: Loving the new theme on moodle.org
 

Fabulous! Well done!

 
Average of ratings: -
Picture of Thelma Polanco-Perez
Re: Loving the new theme on moodle.org
 

Great job! Congratulations HQ team!!

 
Average of ratings: -
Picture of Kimber Warden
Re: Loving the new theme on moodle.org
 

Is this bootstrap-based? If so, what's the secret that allows the dock to work? 

 
Average of ratings: -
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Yes it is bootstrap-based Kimber and I suspect MDL-38923 for the docking.

 
Average of ratings:Useful (1)
Lindy anime style
Re: Loving the new theme on moodle.org
 

Thank you Moodle HQ - it looks lovely, you've really done Moodle proud!

 

On a related note, I also like that the "Moodle is unavailable" page now has links to other areas of Moodle that may still be available while fixes are being applied to the main site - although I do miss the Space Invaders link sad

 

Great work!

 
Average of ratings:Useful (2)
Frankie's the name, Moodle's my game!
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

Hi julian

the new look is great. Classy, swanky and very 3d-ish with the nice shadow and shade effect just below the menubar. Just two things from me. It was mildly frustrating to find the forums link. It took me a while, then it gave up and resorted to google to get to the forums indirectly. Only now do I know that the join us link is the forums link. Also, when I reply to a thread on my ipad air, the subject edit box is way too short It should extend more to the right. Other than these two minor hiccups, I really like the new noodle.org's look. Kudos to the HQ team. 

cheers

Frankie Kam, malaysia

 

 
Average of ratings:Useful (1)
Picture of Bas Brands
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Wow, This is great. I am real glad Moodle.org now looks sleek and clean. I really like the different colours in the navbar and having green icons in the menu. 

Since Moodle is driven by a global community it would be cool to have a nice profile page and messaging interface too. Something like: http://198.74.61.72/themes/preview/ace/profile.html

 

 
Average of ratings:Useful (2)
Picture of Hartmut Scherer
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

Hi Julian,

I like the new look of Moodle.org. Somehow I got interested in the fixed header and want to share a helpful website for Bootstrap based themes.

With kind regards,

Hartmut

 
Average of ratings: -
Gareth J Barnard
Re: Loving the new theme on moodle.org
Group DevelopersGroup Particularly helpful Moodlers

Hi Hartmut,

That's the Bootstrap V3 version of the site and although the class 'navbar-fixed-top' is the same, Moodle currently uses 2.3.2 so you need to refer to that version of the site: http://getbootstrap.com/2.3.2/components.html#navbar as other things are different.

Cheers,

Gareth

 
Average of ratings: -
Picture of Hartmut Scherer
Re: Loving the new theme on moodle.org
Group Particularly helpful Moodlers

Hi Gareth,

Thanks for correcting the link and the Bootstrap version. 

With kind regards,

Hartmut

 
Average of ratings: -
My dog, Dixon
Re: Loving the new theme on moodle.org
 

The new theme looks great. I appreciate the fact that block docking is there. While I personally am not a fan of it, we have some very vocal adherents for it at my institution. We haven't moved to Bootstrap yet, but in the summer when we do, it looks like we will be able to include it (perhaps with some work).

But there is one thing about the new design I don't like..... there is no "Log in" or "Logged in as" link/info at the top of the page. I see it at the bottom, but that's the bottom (it might as well not be there at all) and not useful there. It looks like I can only log in from the home page (or the footer). If I get taken to a forum post from a Google search, I have to scroll to the bottom to log in. I'm missing the clear indication in the header that I'm actually logged in, and can log out.

Is this me? Am I missing something? Or was the choice made in the new design to remove the login info at the header?

Good job all around!  Thanks.... Brian

 
Average of ratings:Useful (1)
Picture of Helen Foster
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Thanks Brian for your comments. It was indeed a choice we made in the new design to move the log in to the bottom of the page to save space for mobile users. However, it seems from feedback received that this was a mistake and so I created MDLSITE-2743 for moving it back.

 
Average of ratings:Useful (1)
Picture of Sal Kaceli
Re: Loving the new theme on moodle.org
 

Excellent work!. It looks very professional. Is there a possibility of having this theme posted and available at least in a color variation or as an option for download

Very nice work. 

Moodle is an excellent LMS on the backend and features, but it could be better for the users themewise. So having an option for a theme like this would greatly improve the product. 

 
Average of ratings:Useful (1)
Picture of Richard Oelmann
Re: Loving the new theme on moodle.org
Group Particularly helpful MoodlersGroup Testers

Well, the decision for the previous theme was always that HQ didn't really want a collection of spin-off look-alikes on other sites out there and wanted to stay distinctive. I guess we'll have to see what they decide to do with this one.

 
Average of ratings: -
Picture of Howard Miller
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Very nice theme but I think the support forums are now too well hidden. It doesn't say anything about 'Support' or 'Forums' or 'Community' or any such thing on the main menu (where I would expect it) or anywhere else without lots of scrolling. It threw me...

I had it pointed out the the link is 'Join us' but I would never have guessed. 

Being miserable I opened a bug - https://tracker.moodle.org/browse/MDLSITE-2747

 
Average of ratings:Useful (1)
Picture of David Scotson
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
It's not strictly theme related, but many of the images on the homepage could be further losslessly compressed, and get even smaller with the use of lossy PNG compression (particularly the grayscale with transparency ones).

There's various tools for each platform but tinypng.com lets you do it online.
 
Average of ratings: -
Picture of Howard Miller
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I wonder if anybody noticed this little bug-ette...

 
Average of ratings: -
Mary Cooch
Re: Loving the new theme on moodle.org
Group Documentation writersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup TestersGroup Translators

I think it is in this one MDLSITE-2726

 
Average of ratings: -
Picture of Howard Miller
Re: Loving the new theme on moodle.org
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Ahh... and I could just have gone down to the dungeons and asked Mr Scotson big grin

 
Average of ratings: -