So I mentioned before that I'd rejigged my Bootstrap project to use LESS source files directly rather than just re-use the CSS they provide. One of the things this lets me do is re-use some of the things that people have built on top of Bootstrap like, for example, the "Font Awesome" icon font or the Bootswatch themes.
I just tried out a couple of these to see if it it would even work and am so pleased with the results of literally less than 60 seconds work that I thought I'd share some screencaptures of two of the themes, called Amelia and Cyborg on a Moodle:
http://imgur.com/a/dFAuK
http://bootswatch.com/cyborg/
http://bootswatch.com/amelia/
It's not perfect, but it's a lot better than I thought it would be to start with.
In reply to David Scotson
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Currently Moodle's Bootstrap theme requires you to use the original .less files, add the bootswatch ones to change some settings and add some extra css then compile to get the output CSS file.
I believe that Bas Brands did a talk about the best way to do this at the recent iMoot. Possibly there are slides available? Ah, here is a very comprehensive blog post about his talk:
http://basbrands.nl/blog/2013/05/21/building-with-bootstrap/
You can also refer to his Bootstrap theme for 2.4 which has the files already in place for this.
And see a public demo:
http://theming.sonsbeekmedia.nl/index.php?theme=amalia
http://theming.sonsbeekmedia.nl/index.php?theme=superhero
http://theming.sonsbeekmedia.nl/index.php?theme=united
I believe that Bas Brands did a talk about the best way to do this at the recent iMoot. Possibly there are slides available? Ah, here is a very comprehensive blog post about his talk:
http://basbrands.nl/blog/2013/05/21/building-with-bootstrap/
You can also refer to his Bootstrap theme for 2.4 which has the files already in place for this.
And see a public demo:
http://theming.sonsbeekmedia.nl/index.php?theme=amalia
http://theming.sonsbeekmedia.nl/index.php?theme=superhero
http://theming.sonsbeekmedia.nl/index.php?theme=united
It could be made a lot simpler if we had our own Moodle Bootstrap Templates styled using the same classes and ids taken from bootstrapbase. Adding a template that is styled for Bootstrap is crazy.
If you want to use a bootstrap swatch in Clean theme the quickest and easiest is drop all the bootstrap swatch css into the Clean's custom settings page provided, which is found by selecting...
Site Administration > Appearance > Themes ->> Click the link names Clean in the list you see at this point.
Add the CSS to the css box and save your settings. You should see the changes directly after you have save the settings. If not Go to Theme setting and enable Theme Designer Mode.
You can then decide whether or not it would be easier to style it yourself from scratch.
I can't get to the page that David linked to. So I am not familiar with whatever Bas wrote or indeed advises.
Hope the above helps anyway.
Cheers
Mary
Dear Mary,
Odd, the links for me are working. Looking at 'http://bootswatch.com/' they supply the 'less' files as well, so instead of using the compiled css files, use the 'less' files as replacements in the 'less/bootstrap' folder and recompile with 'recess' as per the instructions.
Cheers,
Gareth
(Edited by Mary Evans - original submission Monday, 17 June 2013, 1:17 PM) Removed SPAM like advert.
please can someone help me recess the .less file.
the command on basbrands blog doesnt make sense to me
Moodle.less = is not the new less file
/style/Moodle.css = does not exist
i am running the recess command on cyqwin on a wndows 64bit server.
thanks for your help
Dear Sohail,
The 'README' file in 'bootstrapbase/less' gives instructions and refers to http://docs.moodle.org/dev/LESS which shows you how to install and use 'recess' under 'Node.js'.
Cheers,
Gareth
Indeed there is information out there but IMHO Moodle has to make it much easier if it wants to head in the direction of bootstrap themes.
I'd say the vast majority of users (of small sites at least) are likely to struggle with modifying Clean for their site. A lot are still on shared servers therefore, may well not have shell access. Even if they do, they may be unable to install Recess.
Drupal is IMHO going in the right direction with the LESS CSS Preprocessor and Live CSS modules. Would be great to see similar plugins for Moodle.
Dear Harry,
Bootstrap is still a freshly born entity with Moodle so watch this space
Built in pre-processors currently being discussed.
I've created a couple of YouTube videos on changing the Clean theme and using 'Recess' on Windows - forum post to come. As 'recess' just produces the 'moodle.css' file etc. then you can even develop on a NetBook and then upload the file you your servers - so no shell access or need to install 'Recess' on them.
Cheers,
Gareth
I built a prototype that was the same as the first drupal link. It's relatively easy to do as Moodle Themes have a CSS pre-processor function that basically lets you do anything you want to the CSS, up to and including throwing it away and inserting the compiled output of some less files. However, it relied on the same PHP version of LESS that they use, and it had a few incompatabilities with the main implementation of LESS (which is written in javascript) and the project development seems to have slowed so it didn't seem wise to continue down that path.
The Live CSS module is interesting though. It runs the javascript less compiler in the admin user's browser in order to make changes and then saves the output CSS to the server. I'd intended to see if this was possible with Moodle but hadn't got around to it, having a look at what people are doing with Drupal will help with that. It's probably wacky enough that it would never be the preferred solution for Moodle core, but it could help create some very interesting alternative themes, with some very advanced customisation possible via a simple page in the browser.
The Live CSS module is interesting though. It runs the javascript less compiler in the admin user's browser in order to make changes and then saves the output CSS to the server. I'd intended to see if this was possible with Moodle but hadn't got around to it, having a look at what people are doing with Drupal will help with that. It's probably wacky enough that it would never be the preferred solution for Moodle core, but it could help create some very interesting alternative themes, with some very advanced customisation possible via a simple page in the browser.
Dear David,
Interesting and this has caused the thought that Moodle could do something similar but by using a hybrid of the new logo upload and css settings pre-processing facility. Such that the compiled css would be requested like the logo and if it was not there be compiled server side, sent to the client and cached. Then things like 'Purge all caches' / 'Purge theme cache' event in settings.php would cause it to be reset. This would also provide the capability to have a 'custom less' rather than 'custom css' settings box which would automatically trigger a theme cache purge when it changes - just like it can at the moment.
This would also mean that we would not have to store 'moodle.css' etc in GitHub and recompile it for tracker issues. You could then in theory have a 'file upload' for replacement 'variables.less' and 'bootswatch.less' files.
Cheers,
Gareth
I'll not hold my breath then!
Thanks Gareth. I installed WinLess on my machine to compile the CSS. I found it easier.
Dear Sohail,
No problem. Does WinLess have a compression option to reduce down as I think IE has a 4096 line limit?
Cheers,
Gareth
Dear Mary,
Spam!!! Me!! ?? It was not an advert, but a site that you can use to see if a website is actually down or it is just you / your ISP / firewall etc. that is blocking the site. And hence was for you to see if it was you who could not see the links
Cheers,
Gareth