Stylish
What is Stylish?
Stylish is a Firefox plugin: Stylish.
Why use Stylish?
Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: Stylish. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.
These changes will only be visible on your local PC with Stylish installed. For making permanent changes to your Moodle installation's CSS (for all users) see the instructions at Where shall I put my custom CSS code?.
Examples
Print style for Database records
See http://moodle.org/mod/forum/discuss.php?d=117982#p559593 and Print style.
The default view:
With the following CSS applied with Stylish:
div#header, div.navbar, div#footer, div.tabtree, div.paging {
display: none !important;
}
Helper scrips for form editing
These scripts can be temporarily applied to your site while developing. They will show you what's going on under the hood of Moodle forms. (See Frank Ralf/Moodle forms2 and Frank Ralf/Moodle forms3 for an application of some of these scripts.)
Coloring
fieldset#checkboxes {background-color: yellow;}
legend {background-color: lime;}
div.fcontainer {background-color: blue;}
div.fitem {background-color: red;}
div.fitemtitle {background-color: silver;}
label {background-color: aqua;}
div.felement {background-color: teal;}
span {background-color: orange;}
input.pe_teacher {background-color: fuchsia; border: 3px dotted purple;}
Padding & margins
fieldset#checkboxes * {margin: 5px; padding: 5px;}
Adding form element names
form * {font-size: xx-small !important;}
fieldset:after {content: " fieldset";}
legend:after {content: " legend";}
div.fcontainer:after {content: " fcontainer";}
div.fitem:after {content: " fitem";}
div.fitemtitle:after {content: " fitemtitle";}
label:after {content: " label";}
div.felement:after {content: " felement";}
span:after {content: " span";}
input:after {content: " input";}
Screenshot:
Rotating elements
For rare cases like the one described at MDL-22008, "Serious bug in Moodle's website", and "Sites are not being properly transliterated today in the northern hemisphere" (MDLSITE-895) use the following MD Anti-AFD code:
div.posting {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
The result is not perfect but better than nothing: