Stylish: Difference between revisions
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 4: | Line 4: | ||
== Why use 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: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code. | 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: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code. | ||
'''Note''':<br /> | |||
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 [[Themes_FAQ#Where_shall_I_put_my_custom_CSS_code.3F|Where shall I put my custom CSS code?]]. | |||
== Examples == | == Examples == |
Revision as of 11:49, 6 November 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.
Note:
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)
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: