New version of the Bootstrap theme

New version of the Bootstrap theme

by Bas Brands -
Number of replies: 10
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

Today I release a new version of the Bootstrap theme. The improvements to this version are:

- Now really resonsive on mobile devices
- Collapsed menu (only when jQuery is enabled)
- Improved Gradebook view
- Improved Quiz layout
- Tested on different browsers
- Improved Data mod layout
- Bootstrap tabs
- Restored default editor
- Tested for Moodle 2.4
- Options to use glyphicons for moodle 2.3 in the settings menu
- Option to add your Google analytics key. This theme enables improved Google analytics reporting:
for more info check: http://basbrands.nl/2012/04/18/google-analytics-with-moodle/

 

Screenshot of the moodle bootstrap theme

The theme is now in a pre-release state. I am waiting for some test results before the stable / production release is ready. If you want to contribute to the theme please contact me, I need some testers that can test the theme on different browser versions.

You can preview the theme here: http://theming.sonsbeekmedia.nl

This these was made with the help of Stuart Lamour, David Scotson and Maximino Ameneiro Gómez. There are more versions of the Bootstrap theme online. With this version I try to keep it simple and clean. If you have any suggestions for improvements or changes please report them on this thread or on github: https://github.com/bmbrands/theme_bootstrap

Average of ratings: Useful (1)
In reply to Bas Brands

Re: New version of the Bootstrap theme

by Mauno Korpelainen -

One suggestion:

Add a theme setting to Enable/Disable Google analytics - it can break some other custom javascripts and is now always enabled.

I had to remove line

    <?php include($CFG->dirroot . "/theme/bootstrap/layout/google_analytics.php"); ?>

from layout/general.php ... wink

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: New version of the Bootstrap theme

by Bas Brands -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

Hi Mauno,

Thanks for reporting that, the github version now only includes the google analytics part when you enter a google analytics key in the theme settings. big grin

 

Average of ratings: -
In reply to Bas Brands

Re: New version of the Bootstrap theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Bas,

The more I work with this Bootstrap idea, the more I wish Moodle was set up this way!

I have not Tested your new version yet, but will try to later today, time permitting.

Just a few pointers to some new features that have gone into Moodle 2.4 which you may not be aware of, as you don't appear to have included them in this Bootstrap theme.

If you take a look at Base theme layout files, you will notice there are some new additions to the php for course content, course header and course footer this is to help with styling course pages. See MDL-36048 and MDL-36339 for more details of what's been happening.

I'm not too sure how these changes will inpact on themes yet, as I have not had time to work on them.

Also the extra.css should be the last in the list of stylesheets in your bootstrap/config.php as this is the stylesheet that carries the Custom CSS which will override any other CSS. As it is now it will not override the quiz.css or moddata.css which someone may wish to change at some point.

Also, and this may interest you, I have been working with Amy Groshek on the bootstrap renderer of my version of the bootstrap theme I'v called 'Tiny Boodlestrap Project'. We have managed to get the custommenu to display the submenu items. We are now working on getting the ARIA code in place to make Moodle custom menu more accessible when using the navigation arrows on the keyboard.

https://github.com/lazydaisy/tiny-bootstrap-project

Cheers

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: New version of the Bootstrap theme

by Bas Brands -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

Hi Mary,

Thanks for all of your comments! I was not aware of the course header / footer additions. I took a look at some examples and have added them to the general.php file. Did some tests and I think they should be alright now:

course headers / footers

Also: you were right about the extra.css. I have moved it to the end of the array.

About the submenu items: did you manage to get the dropdowns in without using any jQuery?

Thanks for all your help!

Bas

Average of ratings: -
In reply to Bas Brands

Re: New version of the Bootstrap theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Not sure about the jQuery issue and the menu. Proabaly not. sad

Average of ratings: -
In reply to Bas Brands

Re: New version of the Bootstrap theme

by Danny Wahl -

there are some experimental YUI dropins for bootstrap that should work without jQuery:

http://jshirley.github.com/bootstrap/javascript.html

Although I think it's time to have the "can we please get rid of jQuery" discussion again.  Seeing as jQuery is now included in 2 Moodle core projects!  *ducks*

Average of ratings: -
In reply to Danny Wahl

Re: New version of the Bootstrap theme

by David Scotson -
I'm guessing you mean the "can we please get rid of YUI" discussion?

Is there some technical incompatibility that means we can't have both, or is it just the idea of focusing on one javascript library is agreed on by both sides, they just can't decide which one to standardize on? They've always struck me as fairly different beasts despite being vaguely in the same category and often pitted against each other.
Average of ratings: -
In reply to Bas Brands

Re: New version of the Bootstrap theme

by David Scotson -
Looks very nice. In fact, it looks so nice it makes the spinning loading gif look really out of place when you e.g. hide or show an activity.

I filed a bug about it, and it turns out it's really easy to fix, either in core Moodle or in a theme:

https://tracker.moodle.org/browse/MDL-37363

The reason I was checking out the hide and show icon was because I was checking all the various things that had caught me out when working with Bootstrap. Everything I tested seems to be working well in your theme though. I also tested in Firefox on Android (since that's what I use, and it's an often neglected combination) and that was all working as expected.

Three minor niggles:

1. The hover and active highlighting of the Navigation block isn't 100% (but works well in the settings block)

2. The forms can get a bit cramped at phone sizes (though I think this is just standard Moodle showing through, rather than a problem with your theme, it's just more noticeable since everything else works so well at phone sizes.

3. more a personal preference than a bug or problem but I've used the blue "primary button" where you've used green "success" button, and yellow "warning" for cancel buttons, where you've used red (and also use the yellow for editing). I generally don't like the fact that Moodle even has cancel buttons on forms, making them red just draws further attention to them, which I think is unnecessary and maybe even a bit alarming for new Moodle users.

Average of ratings: -
In reply to Bas Brands

Re: New version of the Bootstrap theme

by Mark Pearson -

Hey Bas, David et al,

Thanks so much for this theme. It is, as they say, 'well cool'. I am using this as the theme for a Spring pilot of Moodle 2.3.3 at Earlham College and I think that it'll be a major factor in faculty's acceptance of the move from 1.9 to 2.3.

Mark

Average of ratings: -