Stylish: Difference between revisions
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 66: | Line 66: | ||
Screenshot: | Screenshot: | ||
[[Image:Forms3 background padding names borders.png]] | [[Image:Forms3 background padding names borders.png]] | ||
Revision as of 14:10, 14 October 2009
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.
Examples
Print style for Database records
(see http://moodle.org/mod/forum/discuss.php?d=117982#p559593)
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: