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

Allow themes to alter the core css url's

XMLWordPrintable

    • MOODLE_37_STABLE
    • MOODLE_38_STABLE
    • MDL-65438-master
    • Hide

      Install the change_css_urls branch of theme_picture plugin into your moodle instance:

      • cd theme/
      • git clone -b change_css_urls git@github.com:bmbrands/theme_picture.git picture
      • cd ..
      • php admin/cli/upgrade
      • enter yes to upgrade

      Select theme picture:

      Login as Admin

      Show
      Install the change_css_urls branch of theme_picture plugin into your moodle instance: cd theme/ git clone -b change_css_urls git@github.com:bmbrands/theme_picture.git picture cd .. php admin/cli/upgrade enter yes to upgrade Select theme picture: Login as Admin Navigate to Site Administrations > Appearance > Theme selector Select theme Picture to be your default theme Navigate to "Site home" Change the url in your browser from http://yourmoodle.local/?redirect=0 to http://yourmoodle.local/?redirect=0&preset=dark Verify the theme now shows a dark preset.  

      Core css url's are used to server css files to the end user. In Moodle core they look something like this: 

      href="http://localhost/stable_master/theme/styles.php/boost/1556192528_1555320661/all"

      The styles.php file checks if a URL exists and if the cached version of the css file can be served or if a new css file needs to be generated. For the boost theme this results in recompiling scss to css, caching the new version and serving it back to a client.

      This means a theme can only ever generate one CSS file which is identical to all clients.

      In a use-case where a smart theme needs to serve a different css file for different pages or context the only option now is to copy the theme to a theme with another name and have the new theme serve a different css file.

      This is not very flexible and a lot of work especially when all we need is some different sass variables like the $primary colour that is referenced a lot in bootstrap scss and Moodle core scss files.

      The suggested change is just one line, thanks to marina and does not affect existing themes. It has been used on the Moodle for workplace and the Moodle.org themes. 

        1. preset-light.png
          preset-light.png
          1.12 MB
        2. preset-dark.png
          preset-dark.png
          1.09 MB
        3. Confirmed fixed.PNG
          Confirmed fixed.PNG
          46 kB

            basbrands Bas Brands
            basbrands Bas Brands
            Marina Glancy Marina Glancy
            Adrian Greeve Adrian Greeve
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 22 minutes
                1h 22m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.