Themes

 
 
Picture of David Scotson
Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi, I'd like to announce my Bootstrap for Moodle 2.3 project, and ask for some help getting it finished.

Bootstrap is a project from Twitter that provides "Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions." -- http://twitter.github.com/bootstrap/

I've started adapting their CSS to Moodle and created half a theme from it, which I've attached to this post

The idea is that if your current theme inherits from the base theme then you can try to inherit from this instead and the boring bits that no-one generally bothers to theme will get an upgrade, while still retaining the general look of your theme. It's easier to show than to desrcibe so I'll add a few screenshots in another post.

It's mostly ready for use but I'd love if other themers gave this a try and gave me some feedback on anything I've missed. Moodle's a pretty big bit of software and it's hard to check every page in every browser all by yourself.
 
Average of ratings:Useful (7)
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Some comparison shots in an album:

http://imgur.com/a/qrhbr

(note that some of the bigger images have been resized down, if it looks blurry click to see the actual size image).

 
Average of ratings: -
Julian Ridden
Re: Bootstrap for Moodle project
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Particularly helpful MoodlersGroup Translators

This is an awseom project David and one I am keen to help in.

I have just update my Rocket theme and added a new toggle in that theme to enable your additional bootstrap coding.

As I am finding bugs I am fixing them. You can see my changes in github.

P.S: I have included your CSS in my theme rather than an iherit as a parent theme becase I can see no way of doing this with a theme setting toggle.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Thanks for your interest. I've merged your changes (or at least the ones independant of your theme) and created a place on github for it:

https://github.com/ds125v/moodle-bootstrap

Currently all the changes are in theme/bootstrap and theme/simple (a sketch of an HTML5-ized base theme that inherits from bootstrap and which I inherit in turn for our institution's theme) but I've cloned the whole Moodle as I intend to start contributing fixes to core after we launch our new Moodle. There's simply not the time to do it now, but hopefully by the time we upgrade next year I can delete a bunch of the workarounds since they'll be fixed in the core code.

If there's anything that you feel is inappropriate for the bootstrap.css if you're building a theme on top, you can let me know (or just delete it and I'll pick up the changes again) and I'll move it into the Simple theme instead. I've not always been as careful as I should about which of the three themes items belong in. Bootstrap is intended to fit in under other people's themes so more major visual changes should be in Simple and I've got a few things in our Uni theme that can probably be generalised out to one of the others too.

The biggest change since the zip I uploaded is that I stopped inheriting core.css, as I was spending to much time overriding it. I included my own copy instead and started tidying it up by just deleting the lines that I was previously overriding. (I also deleted all the rtl stuff just so I get a better overview of what's left, I'll add that back in later, but I can't test it right now)
 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
FYI I've now merged in the changes from the latest version of Bootstrap, 2.10

http://blog.getbootstrap.com/2012/08/20/bootstrap-2-1-0-released/
 
Average of ratings: -
Picture of Danny Wahl
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

this is cool, but it just makes me wish that we could exclude the YUI CSS from a lot of the stuff, which is a problem with YUI/Moodle not bootstrap.

For now it just looks like way too much reset, re-reset, normalize, etc...

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Comparing the YUI reset and the Bootstrap reset and getting rid of any duplication is on the todo list, but rather far down it at the moment.

The Javascript parts of Bootstrap are using JQuery:

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

But there's a (work-in-progress) YUI port too:

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

So far, it's not really the YUI stuff that's been causing me any trouble to be honest.
 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I've just noticed, when looking at the new Bootstrap version announcement, that their reset.css is modular since they re-use a 3rd party project. This means it should be fairly easy to remove this duplication. Still low on the todo list though.
 
Average of ratings: -
Picture of Ben Bowler
Re: Bootstrap for Moodle project
 

Wow I'm super interested in this! I assume because of the requirements of bootstrap you need to edit the code of moodle as well as just creating a theme am I right?

What are your plans for this project. I'd love to help out. Starred you on Github.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Well, the long term plan is to use this theme to help the Moodle HTML be more consistent, and therefore easier to theme, preferably roughly in line with the common industry patterns used in Bootstrap. But so far, apart from filing some bugs against core Moodle (a few of which have been fixed already), it's mostly been the plan to keep all changes in the theme. This sometimes takes a bit more effort but it means that a) our institution isn't diverging from core Moodle code and b) other people can try it without having to diverge from core Moodle code too much.

I'm just about to start looking at renderers which is a way to override Moodle display code from within the theme. I'm hoping to use this to rewrite the way icons, pagers and tabs look to start with. I actually know exactly zero about how this works, but someone else has done some work in this regard already, using renderers to make the HTML a bit more Bootstrappy, so I'm going to build on that:

https://github.com/stuartlamour/moodle_bootstrap/blob/master/bootstrap/renderers.php#L74

e.g. that function intercepts calls to output icon images and (sometimes) writes out different HTML. It's very neat but I'm not sure yet how widely this system is used, I'm sure there's at least some icons that are hard-coded in some other way, so there will be need for another complementary solution anyway.

regards,

dave
 
Average of ratings: -
Picture of Danny Wahl
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

It's very neat but I'm not sure yet how widely this system is used, I'm sure there's at least some icons that are hard-coded in some other way, so there will be need for another complementary solution anyway.


You're probably correct in that, as I remember reading a while back that a lot of output is still being converted to use the renderers library.  Good luck with renderers they seem powerful but underused and underdocumented.

 
Average of ratings: -
Picture of Howard Miller
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I had the impression that renderers are - for most instances - not as complicated as the documentation implies. It's little more than a naming convention for your 'view' code. As long as output code is correctly named and put in the right place, the functions can be overidden in any theme. Simple and effective - assuming I have understood correctly.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

That is what we were trying to achieve when we designed that system. I am pleased that at least one other person things so smile

The problem with magic like "As long as output code is correctly named and put in the right place ..." is debugging the problem when it does not work. If your code is not in the right place, or does not have the right name, nothing happends, and you don't get any clues about what is wrong, but it is very nice when it works.

 
Average of ratings: -
Picture of Howard Miller
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Yep - I got bitten with 'events' the other day like that (spelling error). It would be nice if some thought was given to debugging these things although I'm struggling to see how with renderers.

 
Average of ratings: -
Picture of Bas Brands
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Hi Dave,


I just discovered this forum thread, It's nice to see some work being done for the bootstrap theme. Together with Stuart I have started that github project for bootstrap. (https://github.com/stuartlamour/moodle_bootstrap) I have created the renderer code in there that allows you to use the bootstrap menus and replace the icons using a sprite and some custom render code smile

Development on this project stopped because Stuart and I were very busy...

At the last Moodle research congress I met a developer that is willing to participate on this code and I hope Stuart has some time to work on more UX improvements (he is very very good at that).

It would be very nice to have more people involved and create a stunning theme that looks good, works well and can be used as a base theme for more customizable variations of the theme.

So if you are willing to work together on this, that would be great!

regards,

Bas

 

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I'd be happy to work together. In fact it seems we already have, since Stuart pointed me towards the renderer code in github a short while ago and it was that which gave me the start I needed to get going with renderers. Seeing the icon spriting example that you mention was a bit of a light-bulb moment for me actually, I didn't really 'get' renderers before that.

Doing something like this well is basically well beyond any single person, so it's always been part of the plan to get others on-board and co-ordinate everyone's effort as much as possible to get the best result. That's why I've been making life more difficult for myself (in the short term) by not messing directly with core code.
 
Average of ratings: -
Picture of Danny Wahl
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

Count me in - I think I'm starting to wrap my head around both renders and bootstrap.  Actually neither are as complicated as I initially thought, jsut a matter of the the right use.

no point in having 3 separate bootstrap projects!  I think it's essential though that we all have the same (more or less) vision for what bootstrap in moodle looks like...

Personally, I think it should NOT touch core code.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

"Personally, I think it should NOT touch core code."

This is, of course, the right attitude to take when developing a plugin.

However, it may be that you are trying to do something quite reasonable, and Moodle core seems to be making it unnecessarily difficult, and you can think of a simple improvement to Moodle core that would make it much easier to write your plugin, without causing problems for other people's plugins.

If you can think of a Moodle core improvelment like that, then you should change core, and try to get that change incorporated into the official Moodle release.

 
Average of ratings: -
Picture of Mark Andrews
Re: Bootstrap for Moodle project - Taking stock
 

Hi All,

This is a fantastic initative! and one that I think has the potential to really improve the UX of moodle. From reading all the posts (over the last month or so) I think we have the possiblity of have quite a few groups and inderviduals tackling this in differnt ways with slightly different objectives.

So I wonder if we might be able to galvanise and form a core group who will have common objectives and outcomes - or has this already happened and I've not noticed?

I would love to be involved in this work but at present don't know which fork to develop and build upon or a clear idea as to what we're trying to achive.

My hunch would be to use: https://github.com/stuartlamour/moodle_bootstrap (as outlined above) project as a base with the goals being:

  • To create a 'base' moodle theme that makes use of the Bootstrap framework (ie. it would look as pretty as the default bootstrap templates)
  • To aim not to modify moodle core code - but I take Tim's point that if some of these changes benifit the wider community we should try and get them included.

Finally if we do get a body of people working together on this we could list this project on docs.moodle.org and track it through.

What do people think?

Cheers

Mark

 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project - Taking stock
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I think this is an excellent idea so a +1 from me.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project - Taking stock
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I'm happy to work from Stuart's github as a base (I think me having the whole Moodle codebase in mine is confusing people)
 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Bootstrap for Moodle project - Taking stock
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

One trivial point. There is a convention for github repository names relating to Moodle, which would suggest that you should be using

https://github.com/.../moodle-theme_bootstrap

That is, you should use the entire plugin name, as it would appear in the plugins DB url eventually (e.g. http://moodle.org/plugins/view.php?plugin=theme_aardvark) with the moodle- prefix to let people know it is a Moodle plugin.

Not essential, but I just thoght I would point this out.

 
Average of ratings: -
Picture of Danny Wahl
Re: Bootstrap for Moodle project - Taking stock
Group DevelopersGroup Particularly helpful Moodlers

that all sounds great, but I think we should maybe fork stuart's and start a new project as Tim has suggested called moodle-theme_bootstrap

or start a new project called moodle-theme_bootstrap and bring in the elements we want from stuart's and leave out the stuff we don't (like jQuery)

 
Average of ratings: -
Picture of Danny Wahl
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

Hey,

Were you able to load the YUI modules into your theme?  I've started trying to integrate bootstrap on my own (no offense, I wanted to learn what it was) but I'm unable to load those scripts. P.S. I've made a some progress on the renderers if you want to use them

https://github.com/thedannywahl/JOT_4_MOODLE_2

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Not even had a chance to look at the javascript stuff yet. Been busy converting everything to use LESS, so that it's easier to keep up with Bootstrap changes and use alternate themes from places like Bootswatch (http://bootswatch.com/#gallery) and playing with renderers after getting some pointers from Stuart Lamour's work. After you get over the initial learning hump it's quite powerful, and allowed me to radically simplify my CSS and remove a bunch of workarounds, though sadly it's not used everywhere in Moodle, so there's still a few dodgy hacks remaining to cover everything.

My latest work is here https://github.com/ds125v/moodle-bootstrap/blob/gu23/theme/bootstrap/renderers.php so feel free to take anything useful and I'll happily add in your stuff too. I see you've done stuff that I didn't bother with since our institution doesn't use that feature, so working together makes sense to cover all the bases.

I've got some deadlines at work but I'm hoping to merge in all the things I've done for that and re-announce my progress later this week.

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi David,

I've been too busy to even start to get my head round BOOTSTRAP and LESS and all the other stuff connected to this project, but I really like the way you are going with this and passing on your knowledge.

I just wanted to say thank you.

Mary

 
Average of ratings:Useful (1)
St Petersburg, Russia
Re: Bootstrap for Moodle project
Group Particularly helpful Moodlers

David,

This is a double-plus brilliant project. But I'm really not quite sure what's on offer here. Are you basically working a new theme or does the project also involve hacks to the html framework (as seems to be implied above and on the git-hub site)? If it's a theme which incorporates Bootswatch how would you switch between the sub-themes? So, to test this out and assuming your testers have little affinity with git, what do you suggest downloading and where?

Cheers

Mark

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Basically all the changes are confined to the theme. The use of renderers.php in a theme allows you to change the HTML that core Moodle outputs in various circumstances e.g. I've rewritten the paging bar that lets you switch between pages of results when looking at logs or lists of participants.

For multiple themes with Bootswatch my latest code uses a system called LESS, which bootstrap and bootswatch both use to create their CSS. It's basically CSS but, like Moodle's CSS pre-processor it lets you set variables like @linkColor and then use that everywhere instead of specifying the same color again and again. If you download a Bootswatch theme it's just two files, the first of which is variables.less which replaces the file of the same name in Bootstrap and sets different colors and sizes for various things. The second file is for more elaborate changes that build on top of bootstrap. I'm guessing many people would be happy with changing a couple of colors for branding purposes.

To use .less files you have to turn them into CSS, I use the PHP Less implementation from http://leafo.net/lessphp/ (which also has a nice interactive web tool to explain what it does) which you point at one less file, which in turns points to all the other less files you want to use for that particular theme. At that point you've just got a single CSS file which you can point Moodle to. (A long term goal is to integrate that into Moodle to replace the current CSS pre-processor)

I'm not sure if that made any sense. I intend to bundle it up as one or more themes for people to try just by downloading a zip once I get to a sensible stopping point.
 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Something along these lines that's quite neat is this:

http://news.bootswatch.com/post/29555952123/a-bookmarklet-for-bootswatch

It's a bookmarklet, which lets you visit any page that uses Bootstrap and see what it would look like with some of the Bootswatch color schemes.

The more customised the theme, the less well it works, but on some pages in Moodle it's works well enough for you to get an idea and I'm using it to explore which parts of Moodle to try and convert next.

Doing it the hard way (i.e. recompiling the CSS with the LESS compiler) will work a fair bit better, but probably still isn't 100% yet and this is faster and easier to test.
 
Average of ratings: -
Not me
Re: Bootstrap for Moodle project
 

This sounds excellent and similar things are in place for Joomla and Wordpress.  http://960.gs/ is very popular as well.

Could you provide some more simple instructions for others to test...

I was going to say - have you approached the Moodle team because it would be great once this works to have this in the core to improve themes in the future.

 

Thanks.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I'm very keen to get more testers so some easy-to-follow instructions will be forthcoming, hopefully later this week.
 
Average of ratings: -
Picture of Design Studio
Re: Bootstrap for Moodle project
 

I feel you are on to something really good here. Thank you.

Testing - how do I sign up?

 

I have noticed I am unable to get an image as a background, in the body or within #page-header. I must be missing something?

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
If you want to help test then the best thing at the moment is to install this theme and visit sections of Moodle you know well, preferably with content you know well and report anything that is totally broken.

https://github.com/ds125v/moodle-theme_bootstrap_renderers

By totally broken I don't mean a checkbox being in slightly the wrong place, but rather a checkbox not being visible at all, or being unable to click it on and off, things of that magnitude. But if it occurs on the main page of the site or course then I'm probably already aware of it, things inside activities and resources are of most interest at the moment.
 
Average of ratings: -
Picture of Design Studio
Re: Bootstrap for Moodle project
 

David, sorry this version does not show up within theme selector.

I downloaded the files locally and then copied across to the Moodle 2.3 server. I did not use Git or additional software.

The version you attached to your post Tuesday, July 31 works fine.

Am I missing something really obvious?

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You will probebly need to rename the original theme folder for this theme to boostrap_renderer as the ZIP ball from GIT will have given it the long name that David has for the project.

GIT is a pain for doing this, that's one of the reasons I just upload my themes with the correct theme name and not a project name.

Example: https://github.com/lazydaisy/Moodle-Studio/tree/tiny

To check the actual theme name for Davids theme look in that themes config.php $THEME->name =

Cheers

Mary

 
Average of ratings:Useful (1)
Picture of Danny Wahl
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

Hey Mary, it's actually not that hard when you do an initial checkout:

git clone git://github.com/ds125v/moodle-theme_bootstrap_renderers.git bootstrap_renderers

and that's it!

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I know it is simplicity itself if you use GIT, but if you don't, all you can get is the ZIP ball. Not everyone out there is GIT savvy! LOL

 
Average of ratings: -
Lewis Carr
Re: Bootstrap for Moodle project
 

I can't seem to be able to use css background images either?

Not sure what else to try, I've tried the standard Moodle code

background: #fff url([[pix:theme|core/bground]]) repeat-x fixed;

And also hardcoded the actual URL, still won't display background images.
Any ideas, am I just being stupid?

Many Thanks,

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Are you adding that code in a .less file that comes with bootstrap or in a .css file? And what does the actually CSS you end up with look like, is the line just entirely missing or is it mangled in some strange way?

If it's in a .less file try:

background: #fff url(~"[[pix:theme|core/bground]]") repeat-x fixed;

The ~"abcdef" stuff tells the .less compiler to leave whatever is inside the quotes alone and simply output it. Moodle needs to deal with those square bracketed bits so you want to preserve them.

Also, does this not work on any part of Moodle or is it some specific div that you're trying to add a background to?
 
Average of ratings: -
Picture of Design Studio
Re: Bootstrap for Moodle project
 

I apologise for my last remark about about background imagery. I had not done my homework and also didn't realise quite how different moodle 2 and theme design is from 1.9. I really like the Bootswatch intergration (this works well) and I made my own from bootswatchr.

One bit of feedback if I may though having used a bit more, the navbar seems to be providing some trouble when viewed through MS Explorer 8 or 9 - grabs included. Is anyone else having similar difficulty? It looks fine in all other browsers (of course).

 


 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

We are currently trialing a new Bootstrap theme which does not have this problem. So maybe David has fixed that already in his bootstrap_renderers theme?

This is a link to the work currently being discussed MDL-38016

 
Average of ratings: -
Lewis Carr
Re: Bootstrap for Moodle project
 

David, this theme is awesome. All it needs is for the main content column to be at the top when reduced to single column. At present the left column is shown first. But awesome job!

 
Average of ratings: -
Picture of Christoph Hahn
Re: Bootstrap for Moodle project
 

Hi David,

I like this Bootstrap Theme and I think it has a nice modern look and feel. Next week I will upgrade our Moodle from the Version 2.2 to 2.4 and at this time I will change the theme from Aardvark Post-It to this Boostrap Theme. Sorry Mary wink but it´s time to change! 

At the moment I´m playing with this theme in a moodle version 2.5 dev master http://www.mz.jena.de/moodle20 . In the last days I have tried without success to modify the NavMenu to bring the SignIn and SignOut Button in the Menu. I have installed the bootstrap-renderers Theme and here are the buttons integrated perfectly. My question: can you give me a solution where I can integrate these buttons in the actual Bootstrap Theme?

Thanks from Jena Germany

Christoph Hahn

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Well Christoph,

What you don't know, you don't miss. I had no idea you were using Post-IT smile

Time for change indeed. We are trying to get bootstrap into Moodle core. So if you want to vote for this then please do so in MDL-38016 smile

Thanks

Mary

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Christoph,

Further to my last comment, which Bootstrap theme are you using/testing as there are a few. David has some projects mentioned in this discussion, but I don't think he has a finished theme as such. Bas Brands has a Bootstrap theme in the plugins directory HERE.And my Tiny Bootstrap Project is just a work in progress.

Cheers

Mary

 
Average of ratings: -
Picture of Christoph Hahn
Re: Bootstrap for Moodle project
 

Hi Mary,

thanks for your fast reply! I installed the Bootstrap Theme from the plugin directory. Furthermore I installed your Tiny Theme and the Project Theme Bootstrap_renderer. Your Tiny Theme has a Login Field, a Logout Button and the Profile Dropdown - very nice. The Project Bootstrap_Renderer has a Signin Signout Button from the Bootsnipp Repository, I think so. I played with editing the general.php files in the layout folder in the Bootstrap Theme and copy and paste code from your theme where I think it´s generated the navigation, but without success. Furthermore I try to edit the renderer.php but I can´t find the position in the Files from the Bootstrap Theme where the Navigation is generated! ;-(

It´s possible to copy files from your Tiny Project to the Bootstrap Theme and edit the layout Files and the renderer.php Files to become the Login Field, Logout Button and the Profile Dropdown?

Many Thanks!

Christoph

 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

The problem is that my Tiny theme is built differently then the other two themes, although you should be able mix and match, but it's not easy as none of them were built to do that. You can use renderers, but then again, these too need to be customised.

I'll see if there is something I can do to help with your theme.

Mary

 
Average of ratings: -
Picture of Hana Michálková
Re: Bootstrap for Moodle project
 

Hi,
I am quite new to moodle, so I hope this is right place to ask my question...

I am excited about Bootstrap Theme smile But in my project I need to make some minor changes in it, so I decided to make new theme as a clone and set Bootstrap theme as parent. Everything works fine except of navigation bar. There are some additional divs, that make it broken. They have common that their "id" that starts with "yui", so I think that there is some problem with rendering these elements. I was trying to copy some more settings in config.php and files from original bootstrap theme to my new theme, but nothing helped. Have you please any idea what can I do to make it work? Thank you all in advance!

Hana

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

We are still learning about Bootstrap, so I am sorry I cannot help you. sad

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

Just thinking about this. If you cloned the bootstrap theme then you need to change the renderers/core.php and change this line...

class theme_bootstrap_core_renderer extends core_renderer {

to the name of your theme

 
Average of ratings: -
Picture of Richard Bakos
Re: Bootstrap for Moodle project
 

Here is a video of a theme I built using Bas Brands bootstrap theme as a base: https://www.box.com/s/afq8wxzvqlwraoj9e85v

As you can see, the navigation bar works just fine... I had to do some tweaking for it to turn out right for me:

Snippet from the layout php files:

<!-- START OF CUSTOM MENU -->
<?php if (isloggedin()) { ?>
    <div id="custommenu">
        <?php echo $custommenu; ?>
        <?php if ($hasheading) { ?>
            <div class="headermenu">
                <?php
                if ($haslogininfo) {
                    echo $OUTPUT->login_info();
                }
                if (!empty($PAGE->layout_options['langmenu'])) {
                    echo $OUTPUT->lang_menu();
                }
                echo $PAGE->headingmenu
                ?>
            </div>
        <?php } ?>
    </div>
<?php } ?>
<!-- END OF CUSTOM MENU -->

 

The CSS rules:

 

.navbar {
    min-width: 348px;
    border: 0 none;
    height: 32px;
    margin-bottom: 43px;
}

 

.navbar .nav {
    margin: 0;
}

#custommenu {
    height: 38px;
    width: 100%;
    max-width: 1200px;
    position: relative;
    top: -1px;
    z-index: 1 !important;
}

 

#custommenu .yui3-menu .yui3-menuitem {
    border-style: solid;
    border-width: 0px 2px 0px 0px;
    -moz-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    -webkit-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    -o-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 fill stretch;
    border-color: transparent;
    padding-right: 15px;
}

 

#custommenu .yui3-menu .yui3-menuitem-active {
    background-color: transparent;
}

 

a.yui3-menuitem-content:hover {
    background: #ff0000;
}

 

.yui3-skin-sam .yui3-menu ul.first-of-type {
    margin-left: 1.4%;
}

 

.yui3-menu-content {
    height: 37px;
}

 

li.yui3-menuitem {
    border: none;
    margin: 4px 0 0 13px;
}

 

#custommenu .yui3-menu .yui3-menuitem-active a {
    color: rgba(0, 66, 115, 1);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

 

#custommenu .yui3-menu .yui3-menuitem-active a:hover {
    color: rgba(228, 108, 10, 1);
    cursor: pointer;
    background: transparent;
}

 

.yui3-skin-sam .yui3-menu-horizontal .yui3-menuitem-content {
    border-style: hidden;
    background: transparent;
}

 

That is pretty much a straight copy of my css rules I have in a custom.css file I'm using... 

HTH

 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You can't do that with the new Bootstrap, because the css does not get picked up. Its a whole new ball game.

 
Average of ratings: -
Picture of Richard Bakos
Re: Bootstrap for Moodle project
 

His theme upgraded to a newer version of Bootstrap? 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

That depends on the version you are using.

The latest one has now been integrated into Moodle.

https://github.com/bmbrands/theme_bootstrap/tree/moodle_25

 
Average of ratings: -
Picture of Richard Bakos
Re: Bootstrap for Moodle project
 

I see... Well then I will certainly keep using this for the time being as it works perfectly... Hope this new version gets the kinds worked out =)

 
Average of ratings: -
Picture of Eduardo Dennis
Re: Bootstrap for Moodle project
 

Has anyone else had issues with the calendar on this bootstrap theme refreshing when the month is changed?

I noticed it has to the with the way its handling url requests.. I.E. in moodle 2.1
 the calendar link is something like this

/v2.1/index.php?cal_m=6&cal_y=2013

and if you change the the month or year to whatever you want it just refreshes the calendar block

but in the bootstrap theme I am using for 2.4

/?cal_m=5&cal_y=2013

It leaves the index.php I guess causing the whole page to refresh..

Has anyone had this problem ? is it the theme or the version of moodle that makes the difference, and most importantly does anyone have any idea on how to fix it ?

 
Average of ratings: -
Picture of Alan Murphy
Re: Bootstrap for Moodle project
 

Is there a step by step guide anywhere on how to use the bootstrap theme in Moodle? I'm particularly interested in how to integrated bootswatches into a clone of the clean theme. 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

The easiest way is to add the unminified version of any Bootstrap swatch CSS, by copying and pasting that CSS into your cloned themes CSS box, found in the Custom setting page.  Site Administration > Appearance > Themes > choose the link to your clone theme which should show up in the list of theme names at this point. After adding the CSS, dont forget to save settings.

Then after seeing the result, you may need to adjust that CSS slightly.

I tried this with the Amelia theme swatch and works OK but not totally.  Perhaps we should be concentrating on making swatches rather than themes! smile

Cheers

Mary

 
Average of ratings: -
Picture of Alan Murphy
Re: Bootstrap for Moodle project
 

Thanks Mary, That's was I've been doing so far and it pretty much works but I was thinking about workflows and whether there was a more efficient way of doing it. I can see the value of editing the .less files directly. I just don't have the time at the moment to learn it. 

 

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
You can get pretty far with just CSS changes, but the 3rd party Bootswatches only provide CSS to work with only Bootstrap HTML. Many bits of Moodle currently require that CSS to be rewritten to match existing Moodle HTML, which is (one of the main reasons) why we use .less.

One simple way to explore this is to install this bookmarklet. It'll apply the bootswatch CSS over the top of any site e.g. Moodle with a Bootstrap theme. The bits with compatible HTML should work perfectly, while other areas will only partially work.

http://news.bootswatch.com/post/29555952123/a-bookmarklet-for-bootswatch

That highlights the bits you'd have to patch yourself if you want to stick with CSS.
 
Average of ratings: -
Picture of Alan Murphy
Re: Bootstrap for Moodle project
 

Thanks for that David. Its really helpful.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Eduardo,

I don't think this is a Bootstrap issue as changing to the standard theme in 2.4 I see the same thing happen.

And in 2.3, which has the same URL format as your first example, I still see the page refresh.

Sometimes it's hard to see the refresh if you've not scrolled down the page before you click, maybe that's what you're seeing?
 
Average of ratings: -
Picture of Leonard Houx
Re: Bootstrap for Moodle project
 

Hi. I changed the variables.less file in your 2.4 version and compiled it using the documentation at http://docs.moodle.org/dev/LESS. So I ran 

recess --compile --compress moodle.less > ../style/moodle.css

And the moodle.css file was updated. However, it didn't do anything. Having looked at the moodle.css file, variables.less is nowhere on it.

Any thoughts?

 
Average of ratings: -
Gareth J Barnard
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

Dear Leonard,

After compiling the moodle.css file you need to do a 'Purge all caches'.  The variables.less file is in the 'less/bootstrap' folder and just contains definitions that do go into 'moodle.css'.

Cheers,

Gareth

 
Average of ratings: -
Picture of Leonard Houx
Re: Bootstrap for Moodle project
 

Thanks for responding so quickly, Gareth! I did do a cache purge.

I didn't fully explain. In the moodle.less file, variables.less is not listed. Isn't that a problem insofar as the command is for the moodle.less file? This would explain why the file updated but didn't change anything.

 
Average of ratings: -
Gareth J Barnard
Re: Bootstrap for Moodle project
Group DevelopersGroup Particularly helpful Moodlers

Dear Leonard,

'moodle.less' includes 'bootstrap/bootstrap.less' which includes 'variables.less' so something else must be going on.

Cheers,

Gareth

 
Average of ratings: -
Picture of Leonard Houx
Re: Bootstrap for Moodle project
 

So I see! I reloaded the bootstrap file and tried again and it compiled fine. Not sure why it didn't work the first time. Thanks for the help yet again.

 
Average of ratings: -
Picture of Ed Przyzycki
Re: Bootstrap for Moodle project
 

Hi! I just upgraded to Moodle 2.5.1, as I have been using Moodle 2.5 with a custom-made theme using Clean/Bootstrapbase as a foundation. First, thank you for creating it. There is no doubt this will be a great foundation for Moodle moving forward. I performed the upgrade because of the https://tracker.moodle.org/browse/MDL-40065 issue, which now appears somewhat resolved, but I seem to have lost the 1-column view for mobile devices like iPhone - the page is too wide. (It happens in Clean Theme now as well)  Wondering if this is a bug, or by design. Also, I wasn't sure if I should post here or over on the tracker. Thanks in advance.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
You should still get one column on iPhones (or on desktops if you make the screen thin enough). There's been a lot of work done in this area so it's very possible that it's a bug so please file one and we'll look into it.

Actually, I'm seeing this myself, so I've filed a bug (which turned out to be a duplicate of a previously filed one).

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

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


Looks like some over-specific CSS that the responsive CSS can't overule.
 
Average of ratings: -
Picture of Ed Przyzycki
Re: Bootstrap for Moodle project
 

Thanks for the update and confirmation, and I appreciate all of your efforts on this.

 
Average of ratings: -
Picture of Andy Hakala
Re: Bootstrap for Moodle project
 

Thanks for posting this. I am not sure if this is a bug or not but since upgrading to 2.5.1 we are seeing some different behavior to the Bootstrap/Clean theme. It is now displaying "side-post" as whitespace when there are no blocks present. I also noticed that in this update the theme went from having a single 'general.php' layout file to column1.php, column2.php and column3.php. I am guessing that if I was looking to tweak one of these files it would probably be column3.php but I don't want to eliminate the possibility of a 3 column layout entirely. 

 

Sorry if I have posted this in the wrong place! 

Thanks for all of your work! 

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

This is a bug and we do know about it. We thought it was fixed but seems to have come back again. sad

 
Average of ratings: -
Picture of Colin Wheelhouse
Re: Bootstrap for Moodle project
 

I have noticed an issue with the Bootstrapbase theme which seems to affect themes which use this as a base theme (aardvark etc). The calendar block when using the 'standard' theme shows events which span multiple consecutive days by highlighting the first day in full and then subsequent days with a top and bottom border to show that they are part of the event. Bootstrap does not do this.

Frustratingly also, days on which there is an event which follow the first day do not benefit from a pop up box on mouseover to inform you of what the event is, although this appears to be a Moodle issue overall and not necessarily a theming point.

There are some screen shots below. I have found that these elements are seemingly controlled by the following css but pasting them into the custom css area of aardvark for example makes no difference.

.block .minicalendar .duration {
border-width: 1px 0;
}
.calendartable .duration.duration_global {
border-bottom-color: #66D14D;
border-top-color: #66D14D;

Any ideas are gratefully received, as the calendar block is pretty useless without this functionality.


 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I take it that the calendar works as normal in Afterburner theme on your server?

Just had a thought...

It may be related to the fact that 'block' plugin css is excluded from 'bootstrapbase' so it may be that the CSS you need for the mini calendar is missing.

This is the CSS I have in Afterburner for the events. You could try adding that?

/*
Colors for Calendar Events
-----------------------*/
#calendar .event_global,
.minicalendar .event_global,
.block_calendar_month .event_global,
.calendar_event_global {
    border-color:#def2ba !important;
    background-color:#def2ba;
}
#calendar .event_course,
.minicalendar .event_course,
.block_calendar_month .event_course,
.calendar_event_course {
    border-color:#c6dfeb !important;
    background-color:#c6dfeb;
}
#calendar .event_group,
.minicalendar .event_group,
.block_calendar_month .event_group,
.calendar_event_group {
    border-color:#feffc2 !important;
    background-color:#feffc2;
}
#calendar .event_user,
.minicalendar .event_user,
.block_calendar_month .event_user,
.calendar_event_user {
    border-color:#d9c6e2 !important;
    background-color:#d9c6e2;
}

I'll go test it and see what's missing

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap for Moodle project
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

The styles for Aardvark probably come from Canvas theme...which is this...

.minicalendar {
    border-collapse: separate;
}

.minicalendar td,
.minicalendar th {
    font-size: 0.85em;
    padding: 0 2px;
    border-width: 2px 0;
    border-color: #fff;
}

.minicalendar .calendar_event_user,
.minicalendar .duration_user {
    border-color: #dce7ec;
}

.minicalendar .calendar_event_course,
.minicalendar .duration_course {
    border-color: #ffd3bd;
}

.minicalendar .calendar_event_global,
.minicalendar .duration_global {
    border-color: #d6f8cd;
}

.minicalendar .calendar_event_group,
.minicalendar .duration_group {
    border-color: #fee7ae;
}

Which does appear to be missing from Bootstrapbase. Can you create a Moodle Tracker so we can add it to Bootstrapbase?

Cheers

Mary

 
Average of ratings: -
Picture of Colin Wheelhouse
Re: Bootstrap for Moodle project
 

Thanks Mary.

Tracker created https://tracker.moodle.org/browse/MDL-41263. I tried copying the css into the custom css that you suggested and it made no difference. I did purge caches etc.

Bit of a weird one this, the lack of pop up after day 1 of a consecutive day event is a real pain for things like school summer holidays,  where the whole of August say has the event 'summer holiday' in but no info on mouseover, so it appears that there is no calendar entry.

 
Average of ratings: -