Issue Details (XML | Word | Printable)

Key: MDL-6798
Type: Improvement Improvement
Status: Closed Closed
Resolution: Fixed
Priority: Major Major
Assignee: Urs Hunkler
Reporter: Timothy Takemoto
Votes: 0
Watchers: 5
Operations

Add/Edit UI Mockup to this issue
If you were logged in you would be able to see more operations.
Moodle

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

Created: 03/Oct/06 09:36 PM   Updated: 11/Jul/07 01:17 PM
Component/s: Themes
Affects Version/s: 1.8
Fix Version/s: 1.8.3

File Attachments: 1. GZip Archive css_constants.tar.gz (94 kB)


Database: Any
Participants: Andrew Walker, Timothy Takemoto and Urs Hunkler
Security Level: None
Affected Branches: MOODLE_18_STABLE
Fixed Branches: MOODLE_18_STABLE


 Description  « Hide
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

 All   Comments   Change History   Version Control      Sort Order: Ascending order - Click to sort in descending order
Urs Hunkler added a comment - 05/Oct/06 12:36 AM
Andy, do you see a way to solve Thimothy's needs with the Chameleon Hotspots?

Andrew Walker added a comment - 05/Oct/06 03:46 PM
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.


Urs Hunkler added a comment - 09/Jan/07 02:30 AM
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.


Urs Hunkler added a comment - 09/Jan/07 02:45 AM
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"

Urs Hunkler added a comment - 11/Jul/07 04:59 AM
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.

Timothy Takemoto added a comment - 11/Jul/07 01:17 PM
Thanks very much indeed. That will make my eventual upgrade so much easier.