Moodle
  1. Moodle
  2. MDL-38856 META: Issues around Bootstrapbase and Clean theme
  3. MDL-39021

Create a new /theme/simple theme based on bootstrap, for users, with settings.

    Details

    • Type: Sub-task Sub-task
    • Status: Closed
    • Priority: Blocker Blocker
    • Resolution: Fixed
    • Affects Version/s: 2.5
    • Fix Version/s: 2.5
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide
      1. Make sure theme designer mode is enabled
      2. Choose the new "Simple" theme from the Theme selector
      3. Browse a couple of pages and verify that the theme looks just like the bootstrap theme
      4. Visit the Simple theme's custom settings page and enable the setting for "Invert navbar"
      5. Save the setting, visit a different page and verify that the navbar is now light grey on black (white when hovering menu items).
      6. Visit the Simple theme's custom settings page and upload a logo file.
      7. Save the settings, visit a different page and verify that the logo appears at the top of the page.
      8. Visit the Simple theme's custom settings page and upload a different logo file.
      9. Save the settings, visit a different page and verify that the new logo appears at the top of the page.
      10. Visit the Simple theme's custom settings page and add some custom CSS:
         body { background-color: red; }
        
      11. Save the settings, visit a different page and verify that the page is now excruciatingly red.
      12. Visit the Simple theme's custom settings page and set some text in the footnote field.
      13. Save the settings, visit a different page and verify that the new footnote text appears at the bottom of the page.
      Show
      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.
    • Affected Branches:
      MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE
    • Pull Master Branch:
      master
    • Rank:
      49134

      Description

      Just like we had "standard" based on "base", we need a new standard theme based on "bootstrap".

      After some discussion "simple" emerged as a good name.

      This theme should:

      • use "bootstrap" as a parent.
      • not use less.
      • have settings for a header logo, basic color changes and possibly swatches.
      1. logo_moodle.png
        58 kB
      2. logo.png
        57 kB
      3. screenshot.jpg
        21 kB
      4. simple_button.png
        8 kB

        Issue Links

          Activity

          Hide
          Mary Evans added a comment -

          I see the Moodle Muse was at play as this is the name I created last night for this new theme, albeit I called it standard_bs

          Show
          Mary Evans added a comment - I see the Moodle Muse was at play as this is the name I created last night for this new theme, albeit I called it standard_bs
          Hide
          Martin Dougiamas added a comment -

          lol It's settled then I would just like to avoid underscores if possible for an important plugin like this.

          Show
          Martin Dougiamas added a comment - lol It's settled then I would just like to avoid underscores if possible for an important plugin like this.
          Hide
          Martin Dougiamas added a comment - - edited

          Otherwise perhaps "plain", "vanilla" or "simple" ?

          Show
          Martin Dougiamas added a comment - - edited Otherwise perhaps "plain", "vanilla" or "simple" ?
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Martin Dougiamas added a comment -

          +10 for 'simple' then.

          Show
          Martin Dougiamas added a comment - +10 for 'simple' then.
          Hide
          Richard Oelmann added a comment -

          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

          Show
          Richard Oelmann added a comment - 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
          Hide
          Mary Evans added a comment -

          @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:

          1. uploading and adding a logo to the header
          2. 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.

          Show
          Mary Evans added a comment - @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.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment -

          @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

          Show
          Mary Evans added a comment - @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
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Martin Dougiamas added a comment -

          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

          Show
          Martin Dougiamas added a comment - 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
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Martin Dougiamas added a comment -

          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';
          }
          
          
          Show
          Martin Dougiamas added a comment - 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'; }
          Hide
          Martin Dougiamas added a comment -

          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.

          Show
          Martin Dougiamas added a comment - 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.
          Hide
          Martin Dougiamas added a comment -

          Can either Mary or David commit to doing this by tomorrow? If not please say so I can re-assign.

          Show
          Martin Dougiamas added a comment - Can either Mary or David commit to doing this by tomorrow? If not please say so I can re-assign.
          Hide
          Mary Evans added a comment -

          OK...I can do this.

          Show
          Mary Evans added a comment - OK...I can do this.
          Hide
          Mary Evans added a comment -

          @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.

          Show
          Mary Evans added a comment - @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.
          Hide
          Martin Dougiamas added a comment -

          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?

          Show
          Martin Dougiamas added a comment - 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?
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment -

          Thanks Martin...will do.

          Show
          Mary Evans added a comment - Thanks Martin...will do.
          Hide
          David Scotson added a comment -

          I put in a pull request to Mary's github with some of Martin's suggestions.

          Show
          David Scotson added a comment - I put in a pull request to Mary's github with some of Martin's suggestions.
          Hide
          Mary Evans added a comment -

          @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.

          Show
          Mary Evans added a comment - @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.
          Hide
          Mary Evans added a comment - - 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?

          Show
          Mary Evans added a comment - - 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?
          Hide
          David Scotson added a comment -

          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?

          Show
          David Scotson added a comment - 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?
          Hide
          David Scotson added a comment -

          Removing the favicon seems to break it. I would have assumed it just inherited it like other things in pix. Do I need to clear caches or something?

          Show
          David Scotson added a comment - Removing the favicon seems to break it. I would have assumed it just inherited it like other things in pix. Do I need to clear caches or something?
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          David Scotson added a comment -

          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).

          Show
          David Scotson added a comment - 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).
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Mary Evans added a comment -

          Oh...forgot to say the favicon.ico needs to be in the theme. It's a strange animal, believe me.

          Show
          Mary Evans added a comment - Oh...forgot to say the favicon.ico needs to be in the theme. It's a strange animal, believe me.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment - - 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.

          Show
          Mary Evans added a comment - - 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.
          Hide
          Mary Evans added a comment - - 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.

          Show
          Mary Evans added a comment - - 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.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Mary Evans added a comment -

          Further to my last comment: Anyone who knows CSS well enough can add a logo using the Custom CSS setting.

          Show
          Mary Evans added a comment - Further to my last comment: Anyone who knows CSS well enough can add a logo using the Custom CSS setting.
          Hide
          Mary Evans added a comment -

          I'm pushing this for Integration Review and hoping I can finish writing README.txt before next pull.

          Show
          Mary Evans added a comment - I'm pushing this for Integration Review and hoping I can finish writing README.txt before next pull.
          Hide
          David Scotson added a comment -

          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).

          Show
          David Scotson added a comment - 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).
          Hide
          Mary Evans added a comment -

          Re: footnote div = Done!

          Show
          Mary Evans added a comment - Re: footnote div = Done!
          Hide
          Jean-Michel Vedrine added a comment -

          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

          Show
          Jean-Michel Vedrine added a comment - 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
          Hide
          Jean-Michel Vedrine added a comment -

          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

          Show
          Jean-Michel Vedrine added a comment - 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
          Hide
          Mary Evans added a comment -

          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

          Show
          Mary Evans added a comment - 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
          Hide
          Fernando Acedo added a comment -

          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.

          Show
          Fernando Acedo added a comment - 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.
          Hide
          Damyon Wiese added a comment -

          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.

          Show
          Damyon Wiese added a comment - 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.
          Hide
          CiBoT added a comment -

          Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

          Show
          CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Jean-Michel Vedrine added a comment -

          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.

          Show
          Jean-Michel Vedrine added a comment - 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.
          Hide
          Mary Evans added a comment -

          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?

          Show
          Mary Evans added a comment - 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?
          Hide
          Jean-Michel Vedrine added a comment -

          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 !

          Show
          Jean-Michel Vedrine added a comment - 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 !
          Hide
          Mary Evans added a comment -

          @Jean-Michel: Ah...now I understand, in that case I have to agree with you.

          Show
          Mary Evans added a comment - @Jean-Michel: Ah...now I understand, in that case I have to agree with you.
          Hide
          Mary Evans added a comment -

          NOTE TO INTEGRATOR:

          @Damyon:

          It is important that this theme follows MDL-35434 so that the custom logo works when selected via Simple theme's custom settings page.

          Cheers
          Mary

          Show
          Mary Evans added a comment - NOTE TO INTEGRATOR : @Damyon: It is important that this theme follows MDL-35434 so that the custom logo works when selected via Simple theme's custom settings page. Cheers Mary
          Hide
          Damyon Wiese added a comment -

          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).

          Show
          Damyon Wiese added a comment - 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).
          Hide
          Damyon Wiese added a comment -

          Thanks all, this has been integrated to master now. I added test instructions to this issue as well.

          Show
          Damyon Wiese added a comment - Thanks all, this has been integrated to master now. I added test instructions to this issue as well.
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          David Scotson added a comment -

          FYI I pushed a change to Bas's github to make the quiz info use the well styles.

          Show
          David Scotson added a comment - FYI I pushed a change to Bas's github to make the quiz info use the well styles.
          Hide
          Martin Dougiamas added a comment -

          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.

          Show
          Martin Dougiamas added a comment - 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.
          Hide
          Jean-Michel Vedrine added a comment -

          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 ?

          Show
          Jean-Michel Vedrine added a comment - 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 ?
          Hide
          David Scotson added a comment -

          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.

          Show
          David Scotson added a comment - 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.
          Hide
          Mary Evans added a comment -

          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'

          Show
          Mary Evans added a comment - 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'
          Hide
          Tim Hunt added a comment -

          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.

          Show
          Tim Hunt added a comment - 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.
          Hide
          Michael de Raadt added a comment -

          I just noted, as pointed out by David earlier, that there is no favicon.ico in the theme. I think this should be added.

          Show
          Michael de Raadt added a comment - I just noted, as pointed out by David earlier, that there is no favicon.ico in the theme. I think this should be added.
          Hide
          Rossiani Wijaya added a comment -

          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

          Show
          Rossiani Wijaya added a comment - 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
          Hide
          Damyon Wiese added a comment -

          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

          Show
          Damyon Wiese added a comment - 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
          Hide
          Mary Evans added a comment - - 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

          Show
          Mary Evans added a comment - - 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
          Hide
          Mary Evans added a comment -

          @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.

          Show
          Mary Evans added a comment - @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.
          Hide
          Mary Evans added a comment -

          @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

          Show
          Mary Evans added a comment - @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
          Hide
          Martin Dougiamas added a comment -

          Mary Evans: did that some weeks ago

          Show
          Martin Dougiamas added a comment - Mary Evans : did that some weeks ago
          Hide
          Martin Dougiamas added a comment -

          And YAY! for this landing - we are getting somewhere! Thanks all!

          Show
          Martin Dougiamas added a comment - And YAY! for this landing - we are getting somewhere! Thanks all!
          Hide
          David Scotson added a comment -

          @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

          Show
          David Scotson added a comment - @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
          Hide
          Rossiani Wijaya added a comment -

          Hi David,

          Thank you for explaining.

          This is working as expected and looks great.

          Test passed.

          Show
          Rossiani Wijaya added a comment - Hi David, Thank you for explaining. This is working as expected and looks great. Test passed.
          Hide
          Dan Poltawski added a comment -

          I'm sending this back to failed. As theme_simple is currently displaying as an add-on. It needs to be in standard list of components.

          Show
          Dan Poltawski added a comment - I'm sending this back to failed. As theme_simple is currently displaying as an add-on. It needs to be in standard list of components.
          Hide
          Dan Poltawski added a comment -

          Replication instructions for my issue:

          1. Go to Home ▶ Site administration ▶ Plugins ▶ Plugins overview
          2. Look at 'simple' in the list of themes
          3. VERIFY: the theme is listed as standard and not an add on
          Show
          Dan Poltawski added a comment - 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
          Hide
          Dan Poltawski added a comment -

          Integrated and tested my fix to that.

          Show
          Dan Poltawski added a comment - Integrated and tested my fix to that.
          Hide
          Mary Evans added a comment -

          How did you fix this Dan? Is there something I missed off doing in the theme or is it something done during integration?

          Show
          Mary Evans added a comment - How did you fix this Dan? Is there something I missed off doing in the theme or is it something done during integration?
          Hide
          Damyon Wiese added a comment -

          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)

          Show
          Damyon Wiese added a comment - 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)
          Hide
          Mary Evans added a comment -

          Well thanks everyone...

          Show
          Mary Evans added a comment - Well thanks everyone...
          Hide
          Dan Poltawski added a comment -

          Blooming Marvelous! It's time for a knees up - your changes are upstream!

          Thanks for making Moodle better!

          Toodle pip

          Show
          Dan Poltawski added a comment - Blooming Marvelous! It's time for a knees up - your changes are upstream! Thanks for making Moodle better! Toodle pip
          Hide
          Marina Glancy added a comment -

          What's going to happen with https://moodle.org/plugins/view.php?plugin=theme_simple now and especially AMOS integration?

          Show
          Marina Glancy added a comment - What's going to happen with https://moodle.org/plugins/view.php?plugin=theme_simple now and especially AMOS integration?
          Hide
          Martin Dougiamas added a comment -

          Argh, did no-one notice the existing theme before? I'll talk to the author.

          Show
          Martin Dougiamas added a comment - Argh, did no-one notice the existing theme before? I'll talk to the author.
          Hide
          Anthony Borrow added a comment -

          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

          Show
          Anthony Borrow added a comment - 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
          Hide
          Aparup Banerjee added a comment -

          , linked MDLSITE-2230 to prevent these clashes in future.

          Show
          Aparup Banerjee added a comment - , linked MDLSITE-2230 to prevent these clashes in future.
          Hide
          Aparup Banerjee added a comment -

          bootstrapy stuff is being renamed @ MDL-39276

          Show
          Aparup Banerjee added a comment - bootstrapy stuff is being renamed @ MDL-39276
          Hide
          Mary Cooch added a comment -

          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

          Show
          Mary Cooch added a comment - 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

            People

            • Votes:
              1 Vote for this issue
              Watchers:
              17 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: