Themes

 
 
Picture of David Scotson
Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
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.
 
Average of ratings:Useful (2)
Picture of Simon Bertoli
Re: Amelia and Cyborg Bootswatches for Moodle
 

Hi David

As someone who is having some trouble getting this up and running, would it be possible to get a how-to guide for this?

At the moment all I am doing is saving the css file from a bootswatch theme and copying it over to the theme 'style' folder (renaming it custom.css)

I feel this is not right but am having trouble working out how to do it

Thanks

 

 
Average of ratings: -
Picture of David Scotson
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
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
 
Average of ratings: -
It's only an avatar...
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

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.

 
Average of ratings: -
me
Re: Amelia and Cyborg Bootswatches for Moodle
 

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

 
Average of ratings: -
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

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

 
Average of ratings: -
Picture of Just H
Re: Amelia and Cyborg Bootswatches for Moodle
 

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.

 
Average of ratings: -
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

Dear Harry,

Bootstrap is still a freshly born entity with Moodle so watch this space smile

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

 
Average of ratings: -
Picture of David Scotson
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
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.
 
Average of ratings: -
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

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

 
Average of ratings: -
It's only an avatar...
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I'll not hold my breath then!

 
Average of ratings: -
me
Re: Amelia and Cyborg Bootswatches for Moodle
 

Thanks Gareth.  I installed WinLess on my machine to compile the CSS. I found it easier.

 
Average of ratings: -
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

Dear Sohail,

No problem.  Does WinLess have a compression option to reduce down as I think IE has a 4096 line limit?

Cheers,

Gareth

 
Average of ratings: -
Gareth J Barnard
Re: Amelia and Cyborg Bootswatches for Moodle
Group DevelopersGroup Particularly helpful Moodlers

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 smile

Cheers,

Gareth

 
Average of ratings: -