Stylish
What is Stylish?
Stylish is a Firefox plugin: Stylish.
Stylish-Custom
This is an custom addition to the Stylish extension which brings back features from 0.5.9 and adds new features.
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 User:Frank_Ralf/Moodle forms2 and User: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:
I agree
Increasing components list on Moodle Tracker
- See Tracker 'components' list too small and MDLSITE-917 for a description of the problem.
select#components {
height: 20em;
}
Dynamic logo display in courses
This is just meant as a prove of concept.
TODO: document the CSS
See the following forum posts for the time being:
