Define Chrome Style Sheets

From Miro User Documentation

1. Find active profile directory (depending on type of platform, see notes below).
2. In <activeProfileDir>/chrome, copy userContent-example.css to userContent.css. This file can be used to define and/or override presentation style sheets for all elements of the Miro GUI.
3. To set desired Miro GUI visual style, find out what to put in userContent.css by reading http://www.w3.org/TR/REC-CSS2/, http://www.mozilla.org/unix/customizing.html and by analyzing existing style sheet files in Miro distribution (subdirectory <MiroInstallationDir>\resources\css or alternatively at https://develop.participatoryculture.org/trac/democracy/browser/trunk/tv/resources/css ).
4. Restart Miro to see the effect of new style sheets.

For example, to adapt the Miro GUI looks to high contrast inverse desktop theme append the following lines to end of the userContent.css:

* { color: #b0b0b0 !important; background-color: transparent !important; }
body { background: #000000 !important; }
.main-channelbar { background-color: #808080 !important; }
body.gray-background { background-color: #808080 !important; } 
.main-video { background: #303030 !important; }

.select-box-menu { background: #202020 !important; }
#feed-settings { background: #202020 !important; }

a:link { color: #00a0e0 !important }
a:visited { color: #b060c0 !important } 
a:hover { color: gold !important }
a:active { color: red !important }

input[type=button], input[type=submit], input[type=reset] {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight !important;
}
input[type=text], input[type=password], input[type=file] {
    background-color: Window !important; color: WindowText !important;
    border: 1px solid #b0b0b0 !important;
} 

Note that all attributes are marked with !important keyword. This overrides style class properties which are used/set later.

Additional notes

Described technique should work on all supported platforms, only the path to important files is different. Display engine skin/chrome configuration directory on Windows (XP) is usually something like:

C:\Documents and Settings\<UserName>\Application Data\Participatory Culture Foundation\Miro\Profiles\<profileSubdirName>\chrome

. On Linux, it is most probably:

~/.miro/...<something>.../chrome