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.
David Scotson
Posts made by David Scotson
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.
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.
I'm very keen to get more testers so some easy-to-follow instructions will be forthcoming, hopefully later this week.
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.
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.
Since there's been some renewed interest in this, rather than delay any further I thought I'd share the latest work on Bootstrap for Moodle instead of waiting until I get it all neat and tidy.
For those that speak github it's the bootstrap branch here:
https://github.com/ds125v/moodle-bootstrap
For those that don't there's a zip of the bootstrap theme here:
https://github.com/ds125v/moodle-bootstrap/downloads
Which should just work (well, to an extent) if you drop it into the theme directory as per usual.
There's quite a bit of explaining necessary as to how this all fits together, what I'm trying to achieve and plans for the future etc. but I didn't want to make anyone wait while I get around to writing that and finishing off various bits and bobs.
So, it's not (yet) ready for production use, it's currently evolving quickly but feel free to have a dig about in the code or try the theme to see what you think. There's various things that are broken, missing, unsupported at the moment e.g. it inherits the standard Bootstrap width, which is probably too thin for Moodle and though that's very easy to fix, I just haven't done it yet, but there's also plenty of good bits that can be easily lifted and re-used in your own themes if you kind of know what you're doing.
I'm not sure I'm ready for bug reports at the moment (though I'm hoping I will be soon), but an extra pair of eyes on the code and fixes and contributions are very welcome if anyone wants to build their theme on top.
For those that speak github it's the bootstrap branch here:
https://github.com/ds125v/moodle-bootstrap
For those that don't there's a zip of the bootstrap theme here:
https://github.com/ds125v/moodle-bootstrap/downloads
Which should just work (well, to an extent) if you drop it into the theme directory as per usual.
There's quite a bit of explaining necessary as to how this all fits together, what I'm trying to achieve and plans for the future etc. but I didn't want to make anyone wait while I get around to writing that and finishing off various bits and bobs.
So, it's not (yet) ready for production use, it's currently evolving quickly but feel free to have a dig about in the code or try the theme to see what you think. There's various things that are broken, missing, unsupported at the moment e.g. it inherits the standard Bootstrap width, which is probably too thin for Moodle and though that's very easy to fix, I just haven't done it yet, but there's also plenty of good bits that can be easily lifted and re-used in your own themes if you kind of know what you're doing.
I'm not sure I'm ready for bug reports at the moment (though I'm hoping I will be soon), but an extra pair of eyes on the code and fixes and contributions are very welcome if anyone wants to build their theme on top.