Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-43786

"More" - a new theme like Clean but with more customisation settings in the UI

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Blocker
    • Resolution: Fixed
    • Affects Version/s: 2.7
    • Fix Version/s: FRONTEND
    • Component/s: Themes
    • Labels:
    • Affected Branches:
      MOODLE_27_STABLE
    • Sprint:
      FRONTEND Sprint 11
    • Story Points (Obsolete):
      100
    • Sprint:
      FRONTEND Sprint 11

      Description

      User pain
      Not easy to quickly brand your site
      Target
      Organisation without the technical resources to customize a theme (any medium/small sites)
      Objective
      Being able to set the basics (background colour, text colour, link colour, logo) through the UI.
      Task
      compile LESS from PHP

      More thought about it:
      https://docs.google.com/document/d/1ktkigIsJrxcqPeHWcDdRANA1072JVZZ0azg0INo6v48/edit#heading=h.s3ovaozhzke0

        Gliffy Diagrams

          Issue Links

            Activity

            Hide
            nadavkav Nadav Kavalerchik added a comment -

            +1 for using a LESS compiler from PHP

            Show
            nadavkav Nadav Kavalerchik added a comment - +1 for using a LESS compiler from PHP
            Hide
            dougiamas Martin Dougiamas added a comment -

            Yes, this is required so that we can get rid of most of the old standard themes.

            Show
            dougiamas Martin Dougiamas added a comment - Yes, this is required so that we can get rid of most of the old standard themes.
            Hide
            fred Frédéric Massart added a comment -

            Sending for a first round of peer review. Any general feedback is welcome, and I'm also interested in having feedback about the file serving, caching and race conditions.

            Show
            fred Frédéric Massart added a comment - Sending for a first round of peer review. Any general feedback is welcome, and I'm also interested in having feedback about the file serving, caching and race conditions.
            Hide
            dougiamas Martin Dougiamas added a comment -

            Could you put a screen shot or two and maybe a quick bullet list to explain what's in it?

            Show
            dougiamas Martin Dougiamas added a comment - Could you put a screen shot or two and maybe a quick bullet list to explain what's in it?
            Hide
            cibot CiBoT added a comment -

            Results for MDL-43786

            • Remote repository: git://github.com/FMCorz/moodle.git
            Show
            cibot CiBoT added a comment - Results for MDL-43786 Remote repository: git://github.com/FMCorz/moodle.git Remote branch MDL-43786 -master to be integrated into upstream master Executed job http://integration.moodle.org/job/Precheck%20remote%20branch/1737 Details: http://integration.moodle.org/job/Precheck%20remote%20branch/1737/artifact/work/smurf.html
            Hide
            fred Frédéric Massart added a comment -

            As of today, the patch includes the ability to set:

            • Body background
            • Text colour
            • Link colour
            • Secondary background (for blocks, navbar, breadcrumb, etc...)

            We can potentially add others, but we have to be cautious because the more we add, the harder it is for users to theme it. The best we can probably do for now is derive colours from a few colours set by the user.

            Regarding the code:

            • Plugins can now define a styles.less file, which take precedence over their styles.css file.
            • The parent LESS is always ignored. This allows the theme LESS file to be compile directly without requiring PHP to do so. This also removes some magic which could confuse some themers.
            • The LESS file will compile everything in Moodle (plugins CSS/LESS, parents CSS, theme LESS/CSS) into one CSS file. That file is then returned as if it was a standard file.
            • Whenever the LESS compile fails, we fallback on the standard CSS files.
            • There is an API method that allows to inject LESS code, which means we could have textareas in the settings to drop some bootswatch code. Though, the downside of that is that we will probably never be able to support 100% of bootswatches so I preferred not including it yet.
            • There are some flaws in lessphp, hence the overwrite to make it work for us. But, we will have to change a bit the way we work with LESS. New rules should be:

            That's all I can think of for now.

            Show
            fred Frédéric Massart added a comment - As of today, the patch includes the ability to set: Body background Text colour Link colour Secondary background (for blocks, navbar, breadcrumb, etc...) We can potentially add others, but we have to be cautious because the more we add, the harder it is for users to theme it. The best we can probably do for now is derive colours from a few colours set by the user. Regarding the code: Plugins can now define a styles.less file, which take precedence over their styles.css file. The parent LESS is always ignored. This allows the theme LESS file to be compile directly without requiring PHP to do so. This also removes some magic which could confuse some themers. The LESS file will compile everything in Moodle (plugins CSS/LESS, parents CSS, theme LESS/CSS) into one CSS file. That file is then returned as if it was a standard file. Whenever the LESS compile fails, we fallback on the standard CSS files. There is an API method that allows to inject LESS code, which means we could have textareas in the settings to drop some bootswatch code. Though, the downside of that is that we will probably never be able to support 100% of bootswatches so I preferred not including it yet. There are some flaws in lessphp , hence the overwrite to make it work for us. But, we will have to change a bit the way we work with LESS. New rules should be: Variables always need to be defined at the top of a file, before the imports. If the variable is overwritten after an import, it should be in its own file. Bugs have been reported upstream: https://github.com/leafo/lessphp/pull/539 https://github.com/leafo/lessphp/issues/506 That's all I can think of for now.
            Hide
            dougiamas Martin Dougiamas added a comment -

            Looks like a good approach! Is the resulting css file is versioned/cached just like any other css file?

            Show
            dougiamas Martin Dougiamas added a comment - Looks like a good approach! Is the resulting css file is versioned/cached just like any other css file?
            Hide
            fred Frédéric Massart added a comment -

            For now (but I would really like some feedback on the caching mechanism, Sam Hemelryk and Petr Skoda surely know more about that than me) the CSS generated is cached in localcache, and then passed to the standard file serving mechanism which caches it again. This second caching has added logic for IE, etc... and I didn't want to mess with that part.

            Show
            fred Frédéric Massart added a comment - For now (but I would really like some feedback on the caching mechanism, Sam Hemelryk and Petr Skoda surely know more about that than me) the CSS generated is cached in localcache, and then passed to the standard file serving mechanism which caches it again. This second caching has added logic for IE, etc... and I didn't want to mess with that part.
            Hide
            skodak Petr Skoda added a comment -

            looking...

            Show
            skodak Petr Skoda added a comment - looking...
            Hide
            dougiamas Martin Dougiamas added a comment -

            Body vs second background could be explained clearer in the UI.

            Looking at Aardvark for inspiration I would suggest also adding:

            • background image
            • background image position (centered, centred fixed, repeat tiled)
            • menu colour (change the "navbar" name it currently has in Clean!)
            • menu text colour
            • menu hover colour
            • Apple Store URL (will show a button in footer if mobile web services is on)
            • Google Play Store URL (will show a button in footer if mobile web services is on)
            Show
            dougiamas Martin Dougiamas added a comment - Body vs second background could be explained clearer in the UI. Looking at Aardvark for inspiration I would suggest also adding: background image background image position (centered, centred fixed, repeat tiled) menu colour (change the "navbar" name it currently has in Clean!) menu text colour menu hover colour Apple Store URL (will show a button in footer if mobile web services is on) Google Play Store URL (will show a button in footer if mobile web services is on)
            Hide
            lazydaisy Mary Evans added a comment -

            I hope you are going to correct this line?

            Let's not forget to ignore the CSS file it in config.php.

            as it does not make much sense.

            Also if we are to be correct when adding a comment in Moodle code, then we should all be using correct English grammar and not common abbreviations. For example:

            Let's not forget... should in actual fact be written Let us not forget...

            Show
            lazydaisy Mary Evans added a comment - I hope you are going to correct this line? Let's not forget to ignore the CSS file it in config.php. as it does not make much sense. Also if we are to be correct when adding a comment in Moodle code, then we should all be using correct English grammar and not common abbreviations. For example: Let's not forget... should in actual fact be written Let us not forget...
            Hide
            dougiamas Martin Dougiamas added a comment -

            Let's -> let us .... that could be a little pedantic for code comments, Mary.

            Talked my previous comment over with Fred just now, decided to:

            • not add menu colours because we'd also have to do it for secondary backgrounds and that will cost a lot of new code throughout Clean for all the areas. Unfortunatly this restricts somewhat the types of themes you can do with Clean (all darkish or all light) but that's probably OK.
            • not add app links here even though I think app links are an important thing that admins should think about adding ... instead it would be better to have a mechanism that works independent of themes. In the meantime there is the Footer HTML field which can do it if needed.

            However, I do still really want the background image controls because they do let any novice admin create a completely unique look for their site using just a paint program or a camera.

            Show
            dougiamas Martin Dougiamas added a comment - Let's -> let us .... that could be a little pedantic for code comments, Mary. Talked my previous comment over with Fred just now, decided to: not add menu colours because we'd also have to do it for secondary backgrounds and that will cost a lot of new code throughout Clean for all the areas. Unfortunatly this restricts somewhat the types of themes you can do with Clean (all darkish or all light) but that's probably OK. not add app links here even though I think app links are an important thing that admins should think about adding ... instead it would be better to have a mechanism that works independent of themes. In the meantime there is the Footer HTML field which can do it if needed. However, I do still really want the background image controls because they do let any novice admin create a completely unique look for their site using just a paint program or a camera.
            Hide
            bawjaws David Scotson added a comment -

            Is this using leafo's php version of less?

            Did anyone evaluate https://github.com/oyejorge/less.php instead? They have a wrapper to make it a drop in replacement for the leafo one. General impression seems to be that it's slower than leafo but more compatible with the original javascript library. The leafo one seems a bit abandoned.

            There's also https://github.com/mishal/iless

            Show
            bawjaws David Scotson added a comment - Is this using leafo's php version of less? Did anyone evaluate https://github.com/oyejorge/less.php instead? They have a wrapper to make it a drop in replacement for the leafo one. General impression seems to be that it's slower than leafo but more compatible with the original javascript library. The leafo one seems a bit abandoned. There's also https://github.com/mishal/iless
            Hide
            fred Frédéric Massart added a comment -

            Hi David,

            my work here is based on leafo's, but as I discovered more and more incompatibilities, I am now trying out less.php. It seems more robust and well maintained. I will have a look at iLess if things are turning out bad again.

            Thanks!

            Show
            fred Frédéric Massart added a comment - Hi David, my work here is based on leafo's, but as I discovered more and more incompatibilities, I am now trying out less.php. It seems more robust and well maintained. I will have a look at iLess if things are turning out bad again. Thanks!
            Hide
            fred Frédéric Massart added a comment -

            I split the development of that issue into subtasks, and so no more peer review needed on this issue.

            Show
            fred Frédéric Massart added a comment - I split the development of that issue into subtasks, and so no more peer review needed on this issue.
            Hide
            bawjaws David Scotson added a comment -

            Once you have a less compiler a nice semi-pro feature is to let people supply some less in a text area, similar to the way many themes currently let you add CSS.

            A basic use would be to supply values for some of the more obscure variables, but it would also be a direct replacement for the additional CSS above and let you pick up colors, mixins etc from the theme.

            Many people of course wouldn't know where to start, but that's very similar to now where you see people asking for minor theme tweaks on the forum and being given a snippet of CSS to paste into their theme to achieve whatever effect they wanted.

            Show
            bawjaws David Scotson added a comment - Once you have a less compiler a nice semi-pro feature is to let people supply some less in a text area, similar to the way many themes currently let you add CSS. A basic use would be to supply values for some of the more obscure variables, but it would also be a direct replacement for the additional CSS above and let you pick up colors, mixins etc from the theme. Many people of course wouldn't know where to start, but that's very similar to now where you see people asking for minor theme tweaks on the forum and being given a snippet of CSS to paste into their theme to achieve whatever effect they wanted.
            Hide
            fred Frédéric Massart added a comment -

            Thanks David. I think we won't be providing such a feature just yet (though perhaps we will change our minds) to keep Clean as simple as possible, even though it is getting complex. But the API will be ready for it so it could be added any time.

            Show
            fred Frédéric Massart added a comment - Thanks David. I think we won't be providing such a feature just yet (though perhaps we will change our minds) to keep Clean as simple as possible, even though it is getting complex. But the API will be ready for it so it could be added any time.
            Hide
            dougiamas Martin Dougiamas added a comment -

            OK, so just documenting overall that we are doing this in Moodle 2.7:

            a) Leaving Clean as it is, and making it the new default. MDL-42964 MDL-41459
            b) Making a new theme called "More" with all the easy customisation stuff, including built-in LESS. MDL-43786 MDL-44357
            c) Deprecate many of the old "base-based" themes currently only there to make up for previous lack of b). This means removing them from 2.7 and moving them into moodle.org/plugins for those who still want them. MDL-43784

            Show
            dougiamas Martin Dougiamas added a comment - OK, so just documenting overall that we are doing this in Moodle 2.7: a) Leaving Clean as it is, and making it the new default. MDL-42964 MDL-41459 b) Making a new theme called "More" with all the easy customisation stuff, including built-in LESS. MDL-43786 MDL-44357 c) Deprecate many of the old "base-based" themes currently only there to make up for previous lack of b). This means removing them from 2.7 and moving them into moodle.org/plugins for those who still want them. MDL-43784
            Hide
            fred Frédéric Massart added a comment -

            Moved one of the subtasks that I added recently out of this META (it is minor compared to this), and now I am closing this issue because the work is done. \o/

            Show
            fred Frédéric Massart added a comment - Moved one of the subtasks that I added recently out of this META (it is minor compared to this), and now I am closing this issue because the work is done. \o/
            Hide
            marycooch Mary Cooch added a comment - - edited

            Added MDLQA-6680 to the master QA tests ready for manual QA 2.7 tests

            Show
            marycooch Mary Cooch added a comment - - edited Added MDLQA-6680 to the master QA tests ready for manual QA 2.7 tests
            Hide
            fred Frédéric Massart added a comment -

            Removing dev_doc_required tag as I wrote some doc here: http://docs.moodle.org/dev/Themes_overview#Compiling_LESS_on_the_fly

            Show
            fred Frédéric Massart added a comment - Removing dev_doc_required tag as I wrote some doc here: http://docs.moodle.org/dev/Themes_overview#Compiling_LESS_on_the_fly
            Hide
            marycooch Mary Cooch added a comment -

            Removing docs_required label as new themes set up for 2.7 is now documented here http://docs.moodle.org/27/en/Standard_themes

            Show
            marycooch Mary Cooch added a comment - Removing docs_required label as new themes set up for 2.7 is now documented here http://docs.moodle.org/27/en/Standard_themes

              People

              • Votes:
                3 Vote for this issue
                Watchers:
                12 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Agile