|
|
| Line 1: |
Line 1: |
| == What is Stylish? ==
| | {{Moved_to_dev_docs}} |
| 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? ==
| |
| | |
| 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 ==
| |
| | |
| === Print style for Database records ===
| |
| | |
| See http://moodle.org/mod/forum/discuss.php?d=117982#p559593 and [[Print style]].
| |
| | |
| The default view:
| |
| | |
| [[Image:Database entry default.png]]
| |
| | |
| With the following CSS applied with Stylish:
| |
| | |
| <code php>
| |
| div#header, div.navbar, div#footer, div.tabtree, div.paging {
| |
| display: none !important;
| |
| }
| |
| </code>
| |
| | |
| [[Image:Database entry Stylish.png]]
| |
| | |
| === 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 ====
| |
| <code php>
| |
| 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;}
| |
| </code>
| |
| | |
| ==== Padding & margins ====
| |
| | |
| <code php>
| |
| fieldset#checkboxes * {margin: 5px; padding: 5px;}
| |
| </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 ==
| |
| * [[CSS FAQ]]
| |
| * [[Themes FAQ]]
| |
| | |
| [[Category:Developer tools]]
| |
| [[Category:Themes]]
| |
| [[Category:Firefox extensions]]
| |
