Moodle
  1. Moodle
  2. MDL-6798

Bring back simple THEME->body and other theme colors/colours

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8
    • Fix Version/s: 1.8.3
    • Component/s: Themes
    • Labels:
      None
    • Database:
      Any
    • Affected Branches:
      MOODLE_18_STABLE
    • Fixed Branches:
      MOODLE_18_STABLE

      Description

      It would be okay if I were Urs, or even used Firefox with a css plugin doodah but I am just a teacher and CASCADING style sheets are a biatch.

      I look in standard styes colours for highlight and find that it is green not the orange I am seeing on my theme. They cascade, I am not sure in which of them is the colour that I need to change. I only ever wanted to change only the most basic of things - high-lighting & borders. It should be easy.

      Bring back
      $THEME->body = "#FFFFFF"; // Main page color
      $THEME->cellheading = "#FFFFFF"; // Standard headings of big tables
      $THEME->cellheading2 = "#EAFFF2"; // Highlight headings of tables
      $THEME->cellcontent = "#FFFFFF"; // For areas with text
      $THEME->cellcontent2 = "#22FF22"; // Alternate colour
      $THEME->borders = "#22FF22"; // Table borders
      $THEME->highlight = "#222222"; // Highlighted text (eg after a search)
      $THEME->hidden = "#22FF22"; // To color things that are hidden
      $THEME->autolink = "#22FF22"; // To color auto-generated links (eg glossary)
      for those of us that just want to change the basics with defaults of "null" meaning cascaded style sheets are used.

      Urs is wonderful, but we are not, so give us the opportunity to make the basic tweaks without CSS zen

      Tim

        Gliffy Diagrams

          Activity

          Hide
          Urs Hunkler added a comment -

          Andy, do you see a way to solve Thimothy's needs with the Chameleon Hotspots?

          Show
          Urs Hunkler added a comment - Andy, do you see a way to solve Thimothy's needs with the Chameleon Hotspots?
          Hide
          Andrew Walker added a comment -

          Hi Timothy/Urs,

          Yes, Chameleon hotspots may help a bit here. They can be enabled with a tiny modification in the file

          moodle/theme/[your_chameleon_theme]/ui/chameleon_js.php

          Search this file for the line

          // UI.HotSpots.init();

          it should be around line 3110. Remove the // from the start of it, then save the file.

          Now when you view a page using your chameleon theme, you should see an option at the top of the page to load hotspots. Clicking this will add a bunch of icons "hotspots" next to various sections of the page. Clicking an icon will give you a description of what elements in your site the hotspot will style (for example something like the "text in the block headings") You can then set colours, fonts, borders etc... and save your modified theme.

          Show
          Andrew Walker added a comment - Hi Timothy/Urs, Yes, Chameleon hotspots may help a bit here. They can be enabled with a tiny modification in the file moodle/theme/ [your_chameleon_theme] /ui/chameleon_js.php Search this file for the line // UI.HotSpots.init(); it should be around line 3110. Remove the // from the start of it, then save the file. Now when you view a page using your chameleon theme, you should see an option at the top of the page to load hotspots. Clicking this will add a bunch of icons "hotspots" next to various sections of the page. Clicking an icon will give you a description of what elements in your site the hotspot will style (for example something like the "text in the block headings") You can then set colours, fonts, borders etc... and save your modified theme.
          Hide
          Urs Hunkler added a comment -

          More flexible themes with CSS constants: An option for Moodle retro themes and easy colour palette variants.

          I adopted Shaun Inman's "CSS Server-side Constants" to Moodle: http://www.shauninman.com/post/heap/2005/08/09/css_constants

          With setting "cssconstants" to true in "config.php" you activate the CSS constants. If "cssconstants" is missing or set to "false" the replacement function is not used.

          $THEME->cssconstants = true;
          /// By setting this to true, you will be able to use CSS constants

          The constant definitions are written into a separate CSS file named like "constants.css" and loaded first in config.php. You can use constants for any CSS properties. The constant definition looks like:

          @server constants

          { fontColor: #3a2830; aLink: #116699; aVisited: #AA2200; aHover: #779911; pageBackground: #FFFFFF; backgroundColor: #EEEEEE; backgroundSideblockHeader: #a8a4e9; fontcolorSideblockHeader: #222222; color1: #98818b; color2: #bd807b; color3: #f9d1d7; color4: #e8d4d8; }

          The lines in the CSS files using CSS constants look like:

          body

          { font-size: 100%; background-color: pageBackground; color: fontColor; font-family: 'Bitstream Vera Serif', georgia, times, serif; margin: 0; padding: 0; }

          div#page

          { margin: 0 10px; padding-top: 5px; border-top-width: 10px; border-top-style: solid; border-top-color: color3; }

          div.clearer

          { clear: both; }

          a:link

          { color: aLink; }

          All CSS constants are replaced in weblib.php in the "function style_sheet_setup( )" after all CSS files are collected. The replacing function I took from Shaun Inman and pasted into "libdir/cssconstants.php".

          I'll commit "weblib.php" and "libdir/cssconstants.php" and add a test theme here. Petr or Martin can you please check if there are any problems. Thanks.

          Show
          Urs Hunkler added a comment - More flexible themes with CSS constants: An option for Moodle retro themes and easy colour palette variants. I adopted Shaun Inman's "CSS Server-side Constants" to Moodle: http://www.shauninman.com/post/heap/2005/08/09/css_constants With setting "cssconstants" to true in "config.php" you activate the CSS constants. If "cssconstants" is missing or set to "false" the replacement function is not used. $THEME->cssconstants = true; /// By setting this to true, you will be able to use CSS constants The constant definitions are written into a separate CSS file named like "constants.css" and loaded first in config.php. You can use constants for any CSS properties. The constant definition looks like: @server constants { fontColor: #3a2830; aLink: #116699; aVisited: #AA2200; aHover: #779911; pageBackground: #FFFFFF; backgroundColor: #EEEEEE; backgroundSideblockHeader: #a8a4e9; fontcolorSideblockHeader: #222222; color1: #98818b; color2: #bd807b; color3: #f9d1d7; color4: #e8d4d8; } The lines in the CSS files using CSS constants look like: body { font-size: 100%; background-color: pageBackground; color: fontColor; font-family: 'Bitstream Vera Serif', georgia, times, serif; margin: 0; padding: 0; } div#page { margin: 0 10px; padding-top: 5px; border-top-width: 10px; border-top-style: solid; border-top-color: color3; } div.clearer { clear: both; } a:link { color: aLink; } All CSS constants are replaced in weblib.php in the "function style_sheet_setup( )" after all CSS files are collected. The replacing function I took from Shaun Inman and pasted into "libdir/cssconstants.php". I'll commit "weblib.php" and "libdir/cssconstants.php" and add a test theme here. Petr or Martin can you please check if there are any problems. Thanks.
          Hide
          Urs Hunkler added a comment -

          Moodle test theme "css_constants" with CSS constants - two different CSS constant definitions are included. Works only when CSS constants are integrated into "weblib.php"

          Show
          Urs Hunkler added a comment - Moodle test theme "css_constants" with CSS constants - two different CSS constant definitions are included. Works only when CSS constants are integrated into "weblib.php"
          Hide
          Urs Hunkler added a comment -

          With CSS constants you can change themes very similar to the Moodle 1.4 themes. We need now a basic theme giving an example. But that is another story You might use the attached examples as a working base.

          Show
          Urs Hunkler added a comment - With CSS constants you can change themes very similar to the Moodle 1.4 themes. We need now a basic theme giving an example. But that is another story You might use the attached examples as a working base.
          Hide
          Timothy Takemoto added a comment -

          Thanks very much indeed. That will make my eventual upgrade so much easier.

          Show
          Timothy Takemoto added a comment - Thanks very much indeed. That will make my eventual upgrade so much easier.

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: