Stylish

Jump to: navigation, search

Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: 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:

Database entry default.png

With the following CSS applied with Stylish:

div#header, div.navbar, div#footer, div.tabtree, div.paging {
  display: none !important;
}

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

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:

Forms3 background padding names borders.png

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:

AFD upsite-down marked.png

I agree AFD Temp 2.png

Increasing components list on Moodle Tracker

select#components {
 height: 20em;
}

Tracker Components select.png

Dynamic logo display in courses

This is just meant as a prove of concept.

External course image with Stylish.png

Fixed admin menue with CSS

TODO: document the CSS

See the following forum posts for the time being:


Fixed admin menue with CSS.png

See also