Stylish: Difference between revisions
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
(32 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
== What is Stylish? == | == What is Stylish? == | ||
Stylish is a Firefox plugin: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. | Stylish is a Firefox plugin: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. | ||
=== Stylish-Custom === | |||
This is an [https://addons.mozilla.org/en-US/firefox/addon/12105/ custom addition] to the Stylish extension which brings back features from 0.5.9 and adds new features. | |||
== 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. | ||
<p class="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 [[Themes_FAQ#Where_shall_I_put_my_custom_CSS_code.3F|Where shall I put my custom CSS code?]].</p> | |||
== Examples == | == Examples == | ||
=== Print style for Database records === | === Print style for Database records === | ||
See http://moodle.org/mod/forum/discuss.php?d=117982#p559593 and [[Print style]]. | |||
The default view: | The default view: | ||
Line 26: | Line 32: | ||
=== Helper scrips for form editing === | === Helper scrips for form editing === | ||
(See [[User:Frank_Ralf/Moodle | |||
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 ==== | ==== Coloring ==== | ||
Line 42: | Line 49: | ||
</code> | </code> | ||
==== Padding & | ==== Padding & margins ==== | ||
<code php> | <code php> | ||
fieldset#checkboxes * {margin: 5px; padding: 5px;} | fieldset#checkboxes * {margin: 5px; padding: 5px;} | ||
</code> | </code> | ||
==== Adding form element names ==== | |||
<code php> | |||
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";} | |||
</code> | |||
Screenshot: | |||
[[Image:Forms3 background padding names borders.png]] | |||
=== Rotating elements === | |||
For rare cases like the one described at MDL-22008, [http://moodle.org/mod/forum/discuss.php?d=147168 "Serious bug in Moodle's website"], and [http://moodle.org/mod/forum/discuss.php?d=147164 "Sites are not being properly transliterated today in the northern hemisphere"] (MDLSITE-895) use the following MD Anti-AFD code: | |||
<code php> | |||
div.posting { | |||
-webkit-transform: rotate(180deg); | |||
-moz-transform: rotate(180deg); | |||
} | |||
</code> | |||
The result is not perfect but better than nothing: | |||
[[Image:AFD upsite-down marked.png]] | |||
I agree | |||
[[Image:AFD_Temp_2.png]] | |||
=== Increasing components list on Moodle Tracker === | |||
* See [http://moodle.org/mod/forum/discuss.php?d=151370 Tracker 'components' list too small] and MDLSITE-917 for a description of the problem. | |||
<code php> | |||
select#components { | |||
height: 20em; | |||
} | |||
</code> | |||
[[Image:Tracker Components select.png]] | |||
=== Dynamic logo display in courses === | |||
This is just meant as a [http://moodle.org/mod/forum/discuss.php?d=158491 prove of concept]. | |||
[[Image:External course image with Stylish.png]] | |||
=== Fixed admin menue with CSS === | |||
TODO: document the CSS | |||
See the following forum posts for the time being: | |||
* [http://moodle.org/mod/forum/discuss.php?d=139464 Vertical Navigation Bar] | |||
* [http://moodle.org/mod/forum/discuss.php?d=128160 Re-arrange site admin block] | |||
[[Image:Fixed admin menue with CSS.png]] | |||
== See also == | == See also == |
Latest revision as of 14:37, 15 December 2010
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 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:
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: