Make sure theme designer mode is enabled
Choose the new "Simple" theme from the Theme selector
Browse a couple of pages and verify that the theme looks just like the bootstrap theme
Visit the Simple theme's custom settings page and enable the setting for "Invert navbar"
Save the setting, visit a different page and verify that the navbar is now light grey on black (white when hovering menu items).
Visit the Simple theme's custom settings page and upload a logo file.
Save the settings, visit a different page and verify that the logo appears at the top of the page.
Visit the Simple theme's custom settings page and upload a different logo file.
Save the settings, visit a different page and verify that the new logo appears at the top of the page.
Visit the Simple theme's custom settings page and add some custom CSS:
body { background-color: red; }
Save the settings, visit a different page and verify that the page is now excruciatingly red.
Visit the Simple theme's custom settings page and set some text in the footnote field.
Save the settings, visit a different page and verify that the new footnote text appears at the bottom of the page.

Good idea. I think the power of .less can be used to do interesting things via the web interface in the 2.6 timeframe, and is basically the main reason this theme is possible at all, but at the moment it's really just an implementation detail that puts a lot of people off.

Who has experience of writing an existing color-changing theme? What do people normally do, swap between different CSS files or rewrite it with some kind of variable? I was intending to brute force it slightly and write a shell script that took a full Moodle Bootstrap generated CSS file and stripped out every line that wasn't setting a color or a background-gradient and use that as the CSS for the child theme.

If you had multiple color schemes you could use theme settings to switch between appropriately named CSS files. I was intending to leave the .less files and shell script in the theme so people could generate their own unique color schemes, but I think for this purpose just giving them the CSS output of 5 or 6 variations might be more in line with expectations (I'll put the code in github for the more adventurous to find).

Talking of which, I don't know if "plain" or "vanilla" are good names for something that provides a rainbow of color options, I like "simple" though.

David Scotson
added a comment - 08/Apr/13 9:35 AM Good idea. I think the power of .less can be used to do interesting things via the web interface in the 2.6 timeframe, and is basically the main reason this theme is possible at all, but at the moment it's really just an implementation detail that puts a lot of people off.
Who has experience of writing an existing color-changing theme? What do people normally do, swap between different CSS files or rewrite it with some kind of variable? I was intending to brute force it slightly and write a shell script that took a full Moodle Bootstrap generated CSS file and stripped out every line that wasn't setting a color or a background-gradient and use that as the CSS for the child theme.
If you had multiple color schemes you could use theme settings to switch between appropriately named CSS files. I was intending to leave the .less files and shell script in the theme so people could generate their own unique color schemes, but I think for this purpose just giving them the CSS output of 5 or 6 variations might be more in line with expectations (I'll put the code in github for the more adventurous to find).
Talking of which, I don't know if "plain" or "vanilla" are good names for something that provides a rainbow of color options, I like "simple" though.

Personally I would have said that a 'simple' or 'standardbs' theme should stick to a plain vanilla white/pale colour scheme with the basic settings - it is intended to be a replacement 'standard' for people to build on, isn't it? Other themes can then be built on it in the same way as Splash builds to provide colour swapping options - to put these into the basic 'simple' theme would (in my opinion) be overkill for the core foundation theme that people will use to build all sorts of other themes onto and will result in the first piece of work being done to create those themes having to be to remove all the extras that are not required.
To have a theme with those kind of colour swapping tools will be great - but surely not as the default 'simple' theme - by its very name and nature it should be exactly that - 'simple' or 'standard' shouldn't it?

Richard Oelmann
added a comment - 08/Apr/13 12:33 PM Personally I would have said that a 'simple' or 'standardbs' theme should stick to a plain vanilla white/pale colour scheme with the basic settings - it is intended to be a replacement 'standard' for people to build on, isn't it? Other themes can then be built on it in the same way as Splash builds to provide colour swapping options - to put these into the basic 'simple' theme would (in my opinion) be overkill for the core foundation theme that people will use to build all sorts of other themes onto and will result in the first piece of work being done to create those themes having to be to remove all the extras that are not required.
To have a theme with those kind of colour swapping tools will be great - but surely not as the default 'simple' theme - by its very name and nature it should be exactly that - 'simple' or 'standard' shouldn't it?
Richard

Let me explain what the majority of Admins need when it comes to Moodle themes. Most Admins don't have access to the Moodle server, so the easier it is for them to adapt a standard Moodle theme, from an Admin User Interface, the better it is all round.

So the bare minimum would need to accommodate:

uploading and adding a logo to the header

restyling a theme using custom CSS

@Richard:

We need to move away from the way we view themes. The current Standard theme would have been great had it had a settings' page, thus allowing Admins to adapt it. We could then have had variations on a theme. Let's face it the majority of themes in Moodle could have, indeed should have, been built using one layout design and then just styled differently, much like the Zen Garden project.

I'm not overly keen on the current Bootstrap layout. But that has come about because of the restrictions imposed on Bas and David from Moodle HQ to keep it in the 2, 1, 3 format for Accessibility reasons.

The RTL side swapping idea is fine, but is very hard to follow in Bootstrap. So it would have been easier to have created a RTL alternative theme where side-pre is output into the right-hand column and side-post output into the left-hand column.

Anyway, I don't want to spend time discussing abstract issues at the moment, until there is something concrete to discuss.

Mary Evans
added a comment - 08/Apr/13 3:02 PM @David:
Let me explain what the majority of Admins need when it comes to Moodle themes. Most Admins don't have access to the Moodle server, so the easier it is for them to adapt a standard Moodle theme, from an Admin User Interface, the better it is all round.
So the bare minimum would need to accommodate:
uploading and adding a logo to the header
restyling a theme using custom CSS
@Richard:
We need to move away from the way we view themes. The current Standard theme would have been great had it had a settings' page, thus allowing Admins to adapt it. We could then have had variations on a theme. Let's face it the majority of themes in Moodle could have, indeed should have, been built using one layout design and then just styled differently, much like the Zen Garden project.
I'm not overly keen on the current Bootstrap layout. But that has come about because of the restrictions imposed on Bas and David from Moodle HQ to keep it in the 2, 1, 3 format for Accessibility reasons.
The RTL side swapping idea is fine, but is very hard to follow in Bootstrap. So it would have been easier to have created a RTL alternative theme where side-pre is output into the right-hand column and side-post output into the left-hand column.
Anyway, I don't want to spend time discussing abstract issues at the moment, until there is something concrete to discuss.

I guess those people couldn't even install a 3rd party theme, which probably means they should be prioritized in the default theme. Because as you get more and more advanced in your customizations the more likely you are to be able to install themes that will give you options.

So, with that audience in mind:

1. a selection of standard color versions (i.e. black, white, blue, red, green headers). A color picker (or multiple) could be even better, but might be more complicated given Bootstrap's use of shades and highlights, needs some investigation/experimentation I think.
2. the ability to link to a logo image (I've been told banners are also important to many people)
3. a free entry textbox for small CSS customisations

anything else? What's the standard options in a Moodle theme?

Just looking through them now:

footer text

mobile only text (should probably do this with Bootstrap's .desktophidden and standard HTML entry instead, but should document that)

there's a few tweaks to sizing of fonts/blocks/padding etc. that are probably best avoided and left to variant themes.

David Scotson
added a comment - 08/Apr/13 3:59 PM Hi Mary,
I guess those people couldn't even install a 3rd party theme, which probably means they should be prioritized in the default theme. Because as you get more and more advanced in your customizations the more likely you are to be able to install themes that will give you options.
So, with that audience in mind:
1. a selection of standard color versions (i.e. black, white, blue, red, green headers). A color picker (or multiple) could be even better, but might be more complicated given Bootstrap's use of shades and highlights, needs some investigation/experimentation I think.
2. the ability to link to a logo image (I've been told banners are also important to many people)
3. a free entry textbox for small CSS customisations
anything else? What's the standard options in a Moodle theme?
Just looking through them now:
footer text
mobile only text (should probably do this with Bootstrap's .desktophidden and standard HTML entry instead, but should document that)
there's a few tweaks to sizing of fonts/blocks/padding etc. that are probably best avoided and left to variant themes.
That all seems fairly straightforward.

I'm working on a copy of Bootstrap that I have customised to add a login in the navebar and dropped the standard login "You are not loggedin (Login)", as most people want to hide that or change it. Alternatively I could add the login userid/password like I have in Tiny Bootstrap, which works OK.

I also adding settings to allow logo and Custom CSS box as minimum. You can do quite a bit with that even adding changes to logo position.

What I am having great dificulty with is the JS is not responding when clicking the menu items. So need to know how the YUI JS works. It is theme specific? Do I need to do any renaming in it. If so where and what?

Mary Evans
added a comment - 08/Apr/13 4:54 PM @David,
I'm working on a copy of Bootstrap that I have customised to add a login in the navebar and dropped the standard login "You are not loggedin (Login)", as most people want to hide that or change it. Alternatively I could add the login userid/password like I have in Tiny Bootstrap, which works OK.
I also adding settings to allow logo and Custom CSS box as minimum. You can do quite a bit with that even adding changes to logo position.
What I am having great dificulty with is the JS is not responding when clicking the menu items. So need to know how the YUI JS works. It is theme specific? Do I need to do any renaming in it. If so where and what?
Thanks

Just added a link to Vanguard which is my first attempt as cloning Bootstrap and customising it. The only problem is that the menu doesn't work. Not sure why not, but I suspect it's something I have either done or not done.

Mary Evans
added a comment - 09/Apr/13 1:39 AM Just added a link to Vanguard which is my first attempt as cloning Bootstrap and customising it. The only problem is that the menu doesn't work. Not sure why not, but I suspect it's something I have either done or not done.

Martin Dougiamas
added a comment - 09/Apr/13 5:30 AM I certainly hope that /theme/simple won't be a clone like this ... it's going to inherit all the css and renderers and not duplicate anything, right?
Also Fernando Acedo did some settings work in his branch here that might be useful https://github.com/3-bits/theme_bootstrap

Yeah, Simple (and probably Vanguard too, though that depends on Mary's plans for it) should inherit everything from Bootstrap then mostly be an empty theme with just a few settings, some small CSS overlays for color changing, and some PHP in lib to alter the overlays based on the users selected colors and add user supplied custom CSS to the rest of the CSS.

The only two possible issue are:

1. inheritance of renderers, which is an area of confusion for me, but I believe it's supposed to work.
2. Interaction with settings, e.g. if you want add HTML to the layout file based on settings then you might need to duplicate and then tweak the layout.php file to add the appropriate code. However, adding a logo and changing colors can and should both be done by simply adding some CSS, so no changes should be required for Simple as far as I can tell.

David Scotson
added a comment - 09/Apr/13 9:02 AM Yeah, Simple (and probably Vanguard too, though that depends on Mary's plans for it) should inherit everything from Bootstrap then mostly be an empty theme with just a few settings, some small CSS overlays for color changing, and some PHP in lib to alter the overlays based on the users selected colors and add user supplied custom CSS to the rest of the CSS.
The only two possible issue are:
1. inheritance of renderers, which is an area of confusion for me, but I believe it's supposed to work.
2. Interaction with settings, e.g. if you want add HTML to the layout file based on settings then you might need to duplicate and then tweak the layout.php file to add the appropriate code. However, adding a logo and changing colors can and should both be done by simply adding some CSS, so no changes should be required for Simple as far as I can tell.

Martin Dougiamas
added a comment - 09/Apr/13 9:11 AM Again, there is a problem with /theme/bootstrap docs which tell people to make a copy of it. I'll file an issue to fix that.
I just tested inheritance and everything does inherit nicely. config.php looks like this:
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Moodle's Simple theme, an example of how to make a Bootstrap theme
*
* DO NOT MODIFY THIS THEME!
* COPY IT FIRST, THEN RENAME THE COPY AND MODIFY IT INSTEAD.
*
* For full information about creating Moodle themes, see:
* http://docs.moodle.org/dev/Themes_2.0
*
* @package Moodle Simple theme
* @copyright 2013 Martin Dougiamas
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$THEME->doctype = 'html5';
$THEME->name = 'simple';
$THEME->parents = array('bootstrap');
$THEME->sheets = array('');
$THEME->supportscssoptimisation = false;
$THEME->editor_sheets = array('');
$THEME->plugins_exclude_sheets = array(
'block' => array(
'settings',
'navigation',
'html'
),
'gradereport' => array(
'grader',
),
);
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$useragent = '';
if (!empty($_SERVER['HTTP_USER_AGENT'])) {
$useragent = $_SERVER['HTTP_USER_AGENT'];
}
if (strpos($useragent, 'MSIE 8') || strpos($useragent, 'MSIE 7')) {
$THEME->javascripts[] = 'html5shiv';
}

I believe the best rationale for /theme/simple is to be the theme that we ask people to copy and use as a basis for their bootstrap-based themes, so let's make it well-documented and helpful and without any LESS or excess guff. They simply must not copy bootstrap itself or their themes will fail later when their themes are missing all the important CSS that Moodle developers are adding to bootstrap.

Martin Dougiamas
added a comment - 09/Apr/13 9:14 AM I believe the best rationale for /theme/simple is to be the theme that we ask people to copy and use as a basis for their bootstrap-based themes, so let's make it well-documented and helpful and without any LESS or excess guff. They simply must not copy bootstrap itself or their themes will fail later when their themes are missing all the important CSS that Moodle developers are adding to bootstrap.

Mary Evans
added a comment - 09/Apr/13 10:32 PM @Martin: I've got Simple working as requested. I have also added a Custom CSS box and a footnote area to add site contact address etc., which Admins can customise via Simple custom settings page.
Renderers inheritance works great, and was 'simple' to do.
But may need some reworking as it's not easy to extend the core_renderer should anyone want to.

1) Please remove the old README.txt and readme_moodle.txt from this and put in a new README.txt that explains to people exactly how to copy this theme to start a new one (copy directory to new one, edit config.php and change name to match, copy lang file and edit string in it, edit style/custom.css to add css, etc etc)

2) In config.php, put $THEME->name at the top and add comments separating it from the other settings, explaining that when copying this template to be another theme, then this is all they probably need to change in this file.

3) I don't think your rendererer.php file is required at all and could just be removed. The renderfactory bit does this for you I believe. It worked fine for me without it. But if I've missed something (like it's a stub for later) please explain and document the reasoning properly in that file.

4) Because it's a template theme, I think it would be better to have something more generic for the copyright info throughout Simple like "Moodle, moodle.org".

Martin Dougiamas
added a comment - 10/Apr/13 3:55 AM Thanks Mary! Just had a look, here's some quick feedback:
1) Please remove the old README.txt and readme_moodle.txt from this and put in a new README.txt that explains to people exactly how to copy this theme to start a new one (copy directory to new one, edit config.php and change name to match, copy lang file and edit string in it, edit style/custom.css to add css, etc etc)
2) In config.php, put $THEME->name at the top and add comments separating it from the other settings, explaining that when copying this template to be another theme, then this is all they probably need to change in this file.
3) I don't think your rendererer.php file is required at all and could just be removed. The renderfactory bit does this for you I believe. It worked fine for me without it. But if I've missed something (like it's a stub for later) please explain and document the reasoning properly in that file.
4) Because it's a template theme, I think it would be better to have something more generic for the copyright info throughout Simple like "Moodle, moodle.org".
5) Add standard boilerplates to new files like lib.php
6) Screenshot could also be more generic.
7) Will you add support for uploading a logo?

I've forked the github but the changes are so small it's probably easier just to note them here.

I agree with 3) above, renderers.php can be deleted.

I notice people have been talking about "uploading" a logo, but all the other themes seem to just allow pointing to a URL. Has the file picker issue in themes settled down? I seem to still be getting a whole load of emails about it.

I'm a bit torn on the issue on whether to include the layout/general.php in this theme. It's a duplication from the parent, but on the other hand it makes some settings stuff (e.g. a logo) a bit easier. And if people are building on this theme they probably want to change this as well. So overall I think it should stay.

David Scotson
added a comment - 10/Apr/13 8:32 AM The config.php needs this line added:
$THEME->yuicssmodules = array();
otherwise it'll pull in some unwanted/uneccessary YUI CSS that'll put black borders on table cells.
I've forked the github but the changes are so small it's probably easier just to note them here.
I agree with 3) above, renderers.php can be deleted.
I notice people have been talking about "uploading" a logo, but all the other themes seem to just allow pointing to a URL. Has the file picker issue in themes settled down? I seem to still be getting a whole load of emails about it.
I'm a bit torn on the issue on whether to include the layout/general.php in this theme. It's a duplication from the parent, but on the other hand it makes some settings stuff (e.g. a logo) a bit easier. And if people are building on this theme they probably want to change this as well. So overall I think it should stay.

David Scotson
added a comment - 10/Apr/13 8:59 AM I got an error about [ [footnotetxt] ] when I installed it and that exact string with square brackets included was set as the default string for this setting.

I removed the PHP and the footnotetxt $string before I added a link in this issue. If you are following my GITHUB then you will have the old version as I changed it late lastnight or should I say in the early hours of this morning.

Mary Evans
added a comment - 10/Apr/13 9:25 AM @David:
I removed the PHP and the footnotetxt $string before I added a link in this issue. If you are following my GITHUB then you will have the old version as I changed it late lastnight or should I say in the early hours of this morning.

Regarding the layout/general.php - This is needed to add the $hasfootnote = (empty $PAGE whatever...and corresponding PHP in the footer.

It's harder getting a logo into the header, as it needs a lot of css to make it look nice, so wondering can we move navebar/breadcrumb out of the header container, to either above it or below it? This then would leave the header area a better place for Admins to add a logo or a full width banner as a background image with minimal fuss? Also there are new changes with getting the filepicker to work in themes settings MDL-35434 which is exciting.

If everyone is in agreement I can make these small changes in theme/simple/layout/general.php?

Mary Evans
added a comment - 10/Apr/13 10:10 AM - edited David:
Regarding the layout/general.php - This is needed to add the $hasfootnote = (empty $PAGE whatever...and corresponding PHP in the footer.
It's harder getting a logo into the header, as it needs a lot of css to make it look nice, so wondering can we move navebar/breadcrumb out of the header container, to either above it or below it? This then would leave the header area a better place for Admins to add a logo or a full width banner as a background image with minimal fuss? Also there are new changes with getting the filepicker to work in themes settings MDL-35434 which is exciting.
If everyone is in agreement I can make these small changes in theme/simple/layout/general.php?

I think overall I'm happy for layout/general.php to stay where it is but for completness...

The $hasfootnote could be added to the parent Bootstrap's layout. If the setting is empty, it simply outputs nothing, but if a subtheme (Simple or others) fills that setting then it can appear in the appropriate place.

For the logo the issues I see are matching a logo with a solid coloured background against a gradiented navbar, and altering the size of the header to fit the logo's size. But those are both based on the logo being set as the background image of the clickable a tag "brand" and hiding the text which it currently contains, which is the site shortname.

Where are you suggesting the logo should go? Can you mock it up in an image editor or similar?

David Scotson
added a comment - 10/Apr/13 10:32 AM I think overall I'm happy for layout/general.php to stay where it is but for completness...
The $hasfootnote could be added to the parent Bootstrap's layout. If the setting is empty, it simply outputs nothing, but if a subtheme (Simple or others) fills that setting then it can appear in the appropriate place.
For the logo the issues I see are matching a logo with a solid coloured background against a gradiented navbar, and altering the size of the header to fit the logo's size. But those are both based on the logo being set as the background image of the clickable a tag "brand" and hiding the text which it currently contains, which is the site shortname.
Where are you suggesting the logo should go? Can you mock it up in an image editor or similar?

Attached screenshot of my institution's current logo.gif (unchanged) added as a background image to the .brand a tag.

The existing text has been hidden in a standard accessible way. The changes necessary were to set the height and width on the .brand and increase the padding on the top of the body to compensate for the larger navbar.

I also added the the inverse-navbar class as the original logo was on a dark navy blue background.

David Scotson
added a comment - 10/Apr/13 11:05 AM Attached screenshot of my institution's current logo.gif (unchanged) added as a background image to the .brand a tag.
The existing text has been hidden in a standard accessible way. The changes necessary were to set the height and width on the .brand and increase the padding on the top of the body to compensate for the larger navbar.
I also added the the inverse-navbar class as the original logo was on a dark navy blue background.

David Scotson
added a comment - 10/Apr/13 11:09 AM Attached screenshot of using a Moodle logo as an example.
Mostly the same this time but a pure white background logo is used on the default light gray gradient of Bootstrap.
You can just about see the background. I'm assuming that if you're fussy enough to care about the difference then you have access to someone who can make the background match (or transparent).

Thanks ... I'll be working on this after lunch, but here are some thoughts.

It's all well and good adding unused settings to the parent layout. However, I strongly disagree about losing layout/general.php from theme/simple/layout as it is more important that people understand how the settings work. Same too for the renderers.php at least they can see it picking up bootstrap. What if they want to add to the renderers?

Those with real programming skills, and there are thousands out there, will customise bootstrap and Moodle too, but those armatures, like I was when I first came across Moodle, find it fun to learn new stuff. So your idea of, what I see as, 'removing the markers', is going to make the journey more difficult not less, for those people.

Mary Evans
added a comment - 10/Apr/13 11:46 AM Thanks ... I'll be working on this after lunch, but here are some thoughts.
It's all well and good adding unused settings to the parent layout. However, I strongly disagree about losing layout/general.php from theme/simple/layout as it is more important that people understand how the settings work. Same too for the renderers.php at least they can see it picking up bootstrap. What if they want to add to the renderers?
Those with real programming skills, and there are thousands out there, will customise bootstrap and Moodle too, but those armatures, like I was when I first came across Moodle, find it fun to learn new stuff. So your idea of, what I see as, 'removing the markers', is going to make the journey more difficult not less, for those people.

I agree about keeping the layout, it's just unfortunate that because we're telling people to copy (literally!) that theme then we can no longer update anything in it. Well we can update it, but anyone who's made a copy to start their own theme won't see those updates. So it's a tradeoff like everything else. Similarly the main reason to keep it there (for me) is I imagine people will want to actually change that layout file as it's one of the easiest ways to customize Moodle, even if you've never heard of Moodle or Bootstrap or even PHP before.

For the renderers.php though, it was actually pointing to a renderer in Bootstrap which I don't think was necessary for the them to work:

So I can see an argument for including the file as a starter for working with renderers (though to be honest, I'm not sure renderers are really at that level of ease of use and functionality yet) but in that case wouldn't commented out links to empty renderers in the simple theme which would give you head start on editing make more sense? At the moment I think it's more misleading than helpful and getting started with renderers is hard enough. Given the complexity of renderers (at the moment) I'd still vote to just delete the file and address the issue with some documentation.

David Scotson
added a comment - 10/Apr/13 12:26 PM I agree about keeping the layout, it's just unfortunate that because we're telling people to copy (literally!) that theme then we can no longer update anything in it. Well we can update it, but anyone who's made a copy to start their own theme won't see those updates. So it's a tradeoff like everything else. Similarly the main reason to keep it there (for me) is I imagine people will want to actually change that layout file as it's one of the easiest ways to customize Moodle, even if you've never heard of Moodle or Bootstrap or even PHP before.
For the renderers.php though, it was actually pointing to a renderer in Bootstrap which I don't think was necessary for the them to work:
https://github.com/lazydaisy/theme_simple/blob/master/renderers.php#L25
So I can see an argument for including the file as a starter for working with renderers (though to be honest, I'm not sure renderers are really at that level of ease of use and functionality yet) but in that case wouldn't commented out links to empty renderers in the simple theme which would give you head start on editing make more sense? At the moment I think it's more misleading than helpful and getting started with renderers is hard enough. Given the complexity of renderers (at the moment) I'd still vote to just delete the file and address the issue with some documentation.

Yes I see what you mean about the emply renderers.php. I concede defeat on that then just as long as the simple/layout/general.php stays, then that's OK.

I'm about to upload an image of a background logo that I have added to, what I call, the 'page-header'. As you will also see in the screen-shot, I have moved the breadcrumb out of that header to sit below it instead, and as it is styled quite nicely by bootstrap there was nothing to change in that quarter.

This is how I would love the frontpage to look. The large 'hero-unit' lends itself nicely to being style via custom settings. Also the three section at the bottom of hero.html could go into the footer and allow customisation there too by making them into individual custom block regions.

Mary Evans
added a comment - 10/Apr/13 3:53 PM - edited Yes I see what you mean about the emply renderers.php. I concede defeat on that then just as long as the simple/layout/general.php stays, then that's OK.
I'm about to upload an image of a background logo that I have added to, what I call, the 'page-header'. As you will also see in the screen-shot, I have moved the breadcrumb out of that header to sit below it instead, and as it is styled quite nicely by bootstrap there was nothing to change in that quarter.
I like the banner logo, which is similar to what I did in Tiny Bootstrap. However that had the added extra of the Hero styled page http://twitter.github.io/bootstrap/examples/hero.html
This is how I would love the frontpage to look. The large 'hero-unit' lends itself nicely to being style via custom settings. Also the three section at the bottom of hero.html could go into the footer and allow customisation there too by making them into individual custom block regions.

I think for simplicity's sake I will go for the logo in the banner, as you have displayed, this way it's less fussy, especially with the changes you have made to accommodate a logo there. So thanks for that.

Mary Evans
added a comment - 10/Apr/13 4:01 PM - edited I think for simplicity's sake I will go for the logo in the banner, as you have displayed, this way it's less fussy, especially with the changes you have made to accommodate a logo there. So thanks for that.

Your way seems both better and simpler. Maybe in future there can be options for "logo" (replacing .brand) and "banner" etc. but it seems best to start with your idea for now. It avoids lots of issues with sizing the navbar and gradient colors, and large banners butting up against menus etc.

I think you can keep it within the header though? Just output the image (if one is set) before the breadcrumb instead of the text after. Though, if you're inside a course then that's the course title, isn't it? So maybe we need both the banner before and the text after, at least within a course?

Does the banner image shrink automatically as you reduce the window size by any chance? Sometimes that "just works" in Bootstrap. I'd test it myself but I tried to install the integration Moodle and appear to have totally trashed things. It wont let me upgrade to the integration, nor to downgrade back to where I was before. I'll sort it out in the morning but it means I can't really do anything with Moodle at the mo.

David Scotson
added a comment - 10/Apr/13 4:15 PM Your way seems both better and simpler. Maybe in future there can be options for "logo" (replacing .brand) and "banner" etc. but it seems best to start with your idea for now. It avoids lots of issues with sizing the navbar and gradient colors, and large banners butting up against menus etc.
I think you can keep it within the header though? Just output the image (if one is set) before the breadcrumb instead of the text after. Though, if you're inside a course then that's the course title, isn't it? So maybe we need both the banner before and the text after, at least within a course?
Does the banner image shrink automatically as you reduce the window size by any chance? Sometimes that "just works" in Bootstrap. I'd test it myself but I tried to install the integration Moodle and appear to have totally trashed things. It wont let me upgrade to the integration, nor to downgrade back to where I was before. I'll sort it out in the morning but it means I can't really do anything with Moodle at the mo.

Oh...no! I hate it when that happens. Can you not manually change the Moodle version back to what it was in your DB and then clone Moodle master direct from github.com/moodle/moodle.git into a new location on your server but use the same config.php?

As for adding a Logo, it may be easier to leave this off now and wait until the filepicker thing has been added and proved to work correctly. Then we can be first to add this new setting it to a "Bootstrap" theme.

Mary Evans
added a comment - 10/Apr/13 5:09 PM Oh...no! I hate it when that happens. Can you not manually change the Moodle version back to what it was in your DB and then clone Moodle master direct from github.com/moodle/moodle.git into a new location on your server but use the same config.php?
As for adding a Logo, it may be easier to leave this off now and wait until the filepicker thing has been added and proved to work correctly. Then we can be first to add this new setting it to a "Bootstrap" theme.

I'd output the footnote as simply as possible, i.e. a simple p tag without any styles at all and point people towards some documentation that shows them how to add Bootstrap classes like well, label, text-center etc. if they want to change the look. Or you could include those classes in the default text maybe, as at least then they can remove them?

Also, currently that outer div seems to be getting outputted even if you don't specify a footnote, if they stay they should probably be inside the "if ($hasfootnote)"

(I've partially recovered my VM, it partly just ran out of disk space. It's still warning me about having mixed versions, which is a nice feature, I just need to fix that without using up the last of my disk space).

David Scotson
added a comment - 11/Apr/13 9:54 AM I'd output the footnote as simply as possible, i.e. a simple p tag without any styles at all and point people towards some documentation that shows them how to add Bootstrap classes like well, label, text-center etc. if they want to change the look. Or you could include those classes in the default text maybe, as at least then they can remove them?
Also, currently that outer div seems to be getting outputted even if you don't specify a footnote, if they stay they should probably be inside the "if ($hasfootnote)"
(I've partially recovered my VM, it partly just ran out of disk space. It's still warning me about having mixed versions, which is a nice feature, I just need to fix that without using up the last of my disk space).

Jean-Michel Vedrine
added a comment - 11/Apr/13 6:30 PM Hello Mary,
Looking at the github branch you submitted to integration, there is a missing lang string footnotetxt and also a php end tag without the matching begin tag line 175 of layout/general.php

I forgot to thank you, David, Bas and all the people working on bootstrap and its derived themes I really enjoy it
If only I was able to clone simple and give it a bootswatch superhero look ! But unfortunately my CSS knowledge is not up to that task

Jean-Michel Vedrine
added a comment - 11/Apr/13 6:36 PM I forgot to thank you, David, Bas and all the people working on bootstrap and its derived themes I really enjoy it
If only I was able to clone simple and give it a bootswatch superhero look ! But unfortunately my CSS knowledge is not up to that task

Hi Jean I just found that missing <?php at line 175, but thanks for the report.
The $footertxt was removed a while back. Perhaps you are using the older version? Either that or there's been a regression!

Mary Evans
added a comment - 11/Apr/13 8:14 PM Hi Jean I just found that missing <?php at line 175, but thanks for the report.
The $footertxt was removed a while back. Perhaps you are using the older version? Either that or there's been a regression!
I'm working on the theme now, so will check.
Thanks
Mary

Fernando Acedo
added a comment - 11/Apr/13 9:40 PM I just forked the theme and installed in my test server. It looks very well, so congratulations to eveybody involved.
I will continue testing the theme but if I can help you just let me know.
From my side I will try to update my bootstrap theme for version 2.5 and get another theme based in bootstrap.

Thanks for this patch - I only found some minor issues - but they need addressing before we integrate this.

1. layout/general.php is missing the docblock after the GPL copyright statement as per: http://docs.moodle.org/dev/Coding_style#Files
2. README is just a placeholder - it needs full instructions on how to copy and customise the theme.

Damyon Wiese
added a comment - 12/Apr/13 2:48 AM Thanks for this patch - I only found some minor issues - but they need addressing before we integrate this.
1. layout/general.php is missing the docblock after the GPL copyright statement as per:
http://docs.moodle.org/dev/Coding_style#Files
2. README is just a placeholder - it needs full instructions on how to copy and customise the theme.
Please resubmit when these issues have been fixed.

I'm hoping to have a big push to get more people involved in creating new themes once the pressure of integration is past. I find applying existing 3rd party styles (like Superhero) to be a great way to learn CSS since you've got a predetermined target in mind, you just have to navigate some of Moodle's quirks to get there.

David Scotson
added a comment - 12/Apr/13 8:10 AM Hi Jean-Michel,
Bas already has a Superhero bootswatch started if that's something you'd like to help with.
http://theming.sonsbeekmedia.nl/index.php?theme=superhero
I'm hoping to have a big push to get more people involved in creating new themes once the pressure of integration is past. I find applying existing 3rd party styles (like Superhero) to be a great way to learn CSS since you've got a predetermined target in mind, you just have to navigate some of Moodle's quirks to get there.

Mary Evans
added a comment - 13/Apr/13 1:48 AM Sorry Damyon, I could not work on this until this evening (Friday) and here you are Integrating already. I've made more changes...but not sure what you mean about the general.php.

replaced generated.css and editor.css in theme/superhero/style with the new compiled files (I had to rename the generated moodle.css to generated.css as I don't know how to set the name of output in winless)

In fact that was a lot more easy than I anticipated
But of course the result is not perfect ( for instance quiz questions with white characters on light blue background are really hard to get right )
Editing files and compiling something is not a problem for me, but I don't really know what to do now because, in fact I know absolutely nothing about Moodle's styles so I don't know what to change and where.

Jean-Michel Vedrine
added a comment - 13/Apr/13 8:18 PM Hello David,
Thanks a lot, yes I know Bas website and it's in fact what gave me the idea to have a Superhero theme
Here is what I did (just in case it interest some moodle users):
copied theme/bootstrap to theme/superhero
replaced bootstrap with superhero in theme/superhero/config.php ($THEME->name = = 'superhero'; ) also in theme/superhero/renderers/core.php (class theme_superhero_core_renderer extends core_renderer) and in version.php ($plugin->component = 'theme_superhero'; )
changed the name of the file /theme/superhero/lang/en/theme_bootstrap.php to /theme/superhero/lang/en/theme_superhero.php and in that file changed the theme's name and the path to screenshot image
downloaded the 2 files bootswatch.less and variables.less from http://bootswatch.com/ and put them in theme/superhero/less/bootstrap (I had to replace the existing variables.less)
add a line
@import "bootswatch.less" ;
near the end of theme/less/bootstrap/bootstrap.less just before Utility classes because as I understand this one has to be last.
installed winless and compiled theme/superhero/less/moodle.less and theme/superhero/less/editor.less
replaced generated.css and editor.css in theme/superhero/style with the new compiled files (I had to rename the generated moodle.css to generated.css as I don't know how to set the name of output in winless)
In fact that was a lot more easy than I anticipated
But of course the result is not perfect ( for instance quiz questions with white characters on light blue background are really hard to get right )
Editing files and compiling something is not a problem for me, but I don't really know what to do now because, in fact I know absolutely nothing about Moodle's styles so I don't know what to change and where.

I don't particularly like the look of the original Bootstrap Superhero theme, so I am not sure what all you guys are raving about. However with a good colour scheme it could be made to look better. I found it too dark and dingy and a little bit jumpy when clicking the dropdown menu, or is that a feature?

Mary Evans
added a comment - 13/Apr/13 9:14 PM I don't particularly like the look of the original Bootstrap Superhero theme, so I am not sure what all you guys are raving about. However with a good colour scheme it could be made to look better. I found it too dark and dingy and a little bit jumpy when clicking the dropdown menu, or is that a feature?

Update: how to set output for compiled files in Winless: right click on the file and choose "Select output file". Once that is done it's really easy to make modifications to the theme because each time you modify a less file, it is automatically recompiled. All of this is mentioned in the docs: http://docs.moodle.org/dev/LESS#WinLess
To Mary: I love Superhero because, if I find original Bootstrap wonderful from a technical point of view I find it too whitish and a little tasteless but I really understand other opinions may differ !

Jean-Michel Vedrine
added a comment - 14/Apr/13 9:49 AM Update: how to set output for compiled files in Winless: right click on the file and choose "Select output file". Once that is done it's really easy to make modifications to the theme because each time you modify a less file, it is automatically recompiled. All of this is mentioned in the docs: http://docs.moodle.org/dev/LESS#WinLess
To Mary: I love Superhero because, if I find original Bootstrap wonderful from a technical point of view I find it too whitish and a little tasteless but I really understand other opinions may differ !

Damyon Wiese
added a comment - 15/Apr/13 1:53 AM Hi Mary - if an issue depends on another issue being integrated first - set the other issue as a blocker - it is easy to miss this if it is only in the comments.
(I'll do it now for this issue).

I went through and switched a lot of hard-coded colors to use variables (@infoBackground in this case) so mostly it should just work in bootswatch themes that radically change the color scheme. Where it doesn't work so well is the many places in Moodle that use various shades of gray. They take a bit more time and effort to convert as it's not always as obvious what the semantic reason for that color is e.g. in the quiz the info is on a hard-coded pale gray which makes it unreadable if the text color is changed from black. This should probably be redone as a .well (or at least using @wellBackground). Another example is the hover color on the nav and settings menu.

This is one of the best reasons for having very dark themes, it stops you assuming things like that.

David Scotson
added a comment - 15/Apr/13 9:13 AM Hi Jean-Michel,
In Superhero the Quiz questions should be as readable as the "info alert" that's right at the bottom-right of this page:
http://bootswatch.com/superhero/
I went through and switched a lot of hard-coded colors to use variables (@infoBackground in this case) so mostly it should just work in bootswatch themes that radically change the color scheme. Where it doesn't work so well is the many places in Moodle that use various shades of gray. They take a bit more time and effort to convert as it's not always as obvious what the semantic reason for that color is e.g. in the quiz the info is on a hard-coded pale gray which makes it unreadable if the text color is changed from black. This should probably be redone as a .well (or at least using @wellBackground). Another example is the hover color on the nav and settings menu.
This is one of the best reasons for having very dark themes, it stops you assuming things like that.

Note that "Where it doesn't work so well is the many places in Moodle that use various shades of gray." that is exactly the kind of thing I'm looking forward to our new Frontend team attacking vigorously in 2.6, so please file bugs when you think of them.

Martin Dougiamas
added a comment - 15/Apr/13 9:54 AM Note that "Where it doesn't work so well is the many places in Moodle that use various shades of gray." that is exactly the kind of thing I'm looking forward to our new Frontend team attacking vigorously in 2.6, so please file bugs when you think of them.

Thanks David, well style works quite well for question's info.
Most probably I had something wrong for question's text as it is now as it should be (white on blue background) and quite readable without doing anything.
I just discovered another problem in questions see MDL-39130 for details.
Another problem is that in the question bank the list of questions is only half-readable as even lines are on a light background (odd lines are quite readable because they are on a dark background)
Side note: on a project I have been part of many years ago, we had 2 templates: a light one and a dark one, this helped is to catch a lot of issues with hardcoded colors, styles, ... maybe that would be an idea to help Moodle to be compatible with dark themes ?

Jean-Michel Vedrine
added a comment - 15/Apr/13 1:17 PM Thanks David, well style works quite well for question's info.
Most probably I had something wrong for question's text as it is now as it should be (white on blue background) and quite readable without doing anything.
I just discovered another problem in questions see MDL-39130 for details.
Another problem is that in the question bank the list of questions is only half-readable as even lines are on a light background (odd lines are quite readable because they are on a dark background)
Side note: on a project I have been part of many years ago, we had 2 templates: a light one and a dark one, this helped is to catch a lot of issues with hardcoded colors, styles, ... maybe that would be an idea to help Moodle to be compatible with dark themes ?

the coloring for the question bank is specified in the mod_quiz styles, so it's not directly changeable by a theme. You need to override it specifically on a case by case basis. I'm hopeful that in future those kind of styles (all the various ways Moodle has of specifying things as .odd, .even, (or as in this particular case .r1 vs .r0) will simply be deleted and use CSS styles like :nthchild(odd) instead, which are easier to change.

David Scotson
added a comment - 15/Apr/13 3:37 PM Hi Jean-Michel,
the coloring for the question bank is specified in the mod_quiz styles, so it's not directly changeable by a theme. You need to override it specifically on a case by case basis. I'm hopeful that in future those kind of styles (all the various ways Moodle has of specifying things as .odd, .even, (or as in this particular case .r1 vs .r0) will simply be deleted and use CSS styles like :nthchild(odd) instead, which are easier to change.
And yes, one of the reasons I'm keen on the Bootswatch based themes is exactly for testing purposes. I generally use Cyborg ( http://bootswatch.com/cyborg/ ) and Amelia ( http://bootswatch.com/amelia/ ) since between them (and the default) they cover many different variations.

Mary Evans
added a comment - 15/Apr/13 5:56 PM I don't consider the fact Quiz uses a specific color scheme a 'bug'.
Adding Tim Hunt as a watcher as I think he is the best person to help with the Bootstrap/Quiz 'BUG'

Well, it might be a bug to set specific colours in base, but I was more concernted about making the quiz work nicely out-of-the box than I was about making base really plain.

The different colours do convey useful hints to the students, so some sort of distinction between question, feedback, metadata etc. is probably worth preserving. How exactly you do that, I leave to your graphic design inspiration.

Tim Hunt
added a comment - 15/Apr/13 6:21 PM Well, it might be a bug to set specific colours in base, but I was more concernted about making the quiz work nicely out-of-the box than I was about making base really plain.
The different colours do convey useful hints to the students, so some sort of distinction between question, feedback, metadata etc. is probably worth preserving. How exactly you do that, I leave to your graphic design inspiration.

Rossiani Wijaya
added a comment - 16/Apr/13 5:22 AM Hi Mary,
Thank you for working on this.
Just need a confirmation regarding the background color for the buttons on setting page (eg:course editing page).
Does the background-color and border-top styling are intentionally used for this theme (#fgroup_id_buttonar)? *screenshot attach.
I also noticed the missing language menu and it has been reported through MDL-38979 .
Other than that, this looks great.
Rosie

Damyon Wiese
added a comment - 16/Apr/13 5:36 AM Hi David, please do not push patches to Bas's old bootstrap branch in github it is no longer in sync with the theme in core.
Please follow this process for all fixes/changes to the theme now that it is Moodle.
http://docs.moodle.org/dev/Process#Fixing_a_bug

@Rossiani, Thanks for testing this. In answer to your questions, the styling of the pages, buttons etc., in fact almost everything that goes on in this theme is really out of my hands as it is all inherited from the parent theme, in this case 'Bootstrap'.

Also Rossi, lots of changes David has been working on Bootstrap, since it was integrated into Moodle (5 April 2013) looks like they have not been integrated yet.

With regards to the Lang menu. Have you added any custom menu items via Appearance/Themes/Theme settings? Because these need to be in place before you see the Lang menu item.

Mary Evans
added a comment - 16/Apr/13 8:32 AM - edited @Rossiani, Thanks for testing this. In answer to your questions, the styling of the pages, buttons etc., in fact almost everything that goes on in this theme is really out of my hands as it is all inherited from the parent theme, in this case 'Bootstrap'.
Also Rossi, lots of changes David has been working on Bootstrap, since it was integrated into Moodle (5 April 2013) looks like they have not been integrated yet.
With regards to the Lang menu. Have you added any custom menu items via Appearance/Themes/Theme settings? Because these need to be in place before you see the Lang menu item.
Cheers
Mary

@Michael, It was added originally, as I had remade the favicon.ico myself, but David removed it early on in the design of this theme. Thanks for clarifying this. I'll creat new tracker and add it back.

Mary Evans
added a comment - 16/Apr/13 8:39 AM @Michael, It was added originally, as I had remade the favicon.ico myself, but David removed it early on in the design of this theme. Thanks for clarifying this. I'll creat new tracker and add it back.

Mary Evans
added a comment - 16/Apr/13 8:45 AM @Martin: Can you give David the necessary permissions so he can assign himself the Bug trackers that he needs to work on, and set them for Peer Review/Integration Review etc?
Cheers

@Jean-Michel: I tried to overwrite the striping on that question bank table but the mod_quiz styles color every second row starting from the second, and Bootstrap colors every second row starting from the first, so they don't interact well. It is possible to work around this by adding more and more CSS, but I'd rather fix such issues once in core Moodle than work around them in multiple different themes.

@Mary, I don't think anyone suggested that Quiz having a different color scheme was a bug. In fact the mostly functional coloring of Quiz (green for success, red for failure etc.) made it mostly very easy to translate into the standard Bootstrap variables.

The problems were areas that simply hadn't been transformed in this way yet, often background shades of light gray, since they looked fine in a standard black text on white background theme. As Jean-Michel was testing a radically different theme (Superhero, with white text on a dark grey background) these unfinished areas become obvious very quickly.

@Rossiani, yes that's how it should look. It should the same as what you see if you search for "form-actions" at the following link:

David Scotson
added a comment - 16/Apr/13 2:06 PM @Jean-Michel: I tried to overwrite the striping on that question bank table but the mod_quiz styles color every second row starting from the second, and Bootstrap colors every second row starting from the first, so they don't interact well. It is possible to work around this by adding more and more CSS, but I'd rather fix such issues once in core Moodle than work around them in multiple different themes.
@Mary, I don't think anyone suggested that Quiz having a different color scheme was a bug. In fact the mostly functional coloring of Quiz (green for success, red for failure etc.) made it mostly very easy to translate into the standard Bootstrap variables.
The problems were areas that simply hadn't been transformed in this way yet, often background shades of light gray, since they looked fine in a standard black text on white background theme. As Jean-Michel was testing a radically different theme (Superhero, with white text on a dark grey background) these unfinished areas become obvious very quickly.
@Rossiani, yes that's how it should look. It should the same as what you see if you search for "form-actions" at the following link:
http://twitter.github.io/bootstrap/base-css.html#forms

Dan Poltawski
added a comment - 17/Apr/13 11:26 AM Replication instructions for my issue:
Go to Home ▶ Site administration ▶ Plugins ▶ Plugins overview
Look at 'simple' in the list of themes
VERIFY: the theme is listed as standard and not an add on

Damyon Wiese
added a comment - 17/Apr/13 2:52 PM Hi Mary,
I missed adding it when I pulled in the branch (the function that needs changing is standard_plugins_list() in lib/pluginlib.php).
(Thanks Dan)

Anthony Borrow
added a comment - 22/Apr/13 5:31 AM I've sent an email and Moodle message to the contributor - https://moodle.org/user/profile.php?id=1434809 - and requested that they work with me on renaming it. Peace - Anthony

Mary Cooch
added a comment - 07/May/13 10:00 AM Removing docs_required because the Clean theme has been added to http://docs.moodle.org/25/en/Standard_themes in and developer information added to http://docs.moodle.org/dev/Clean_theme