Wagn's appearance, and even some of its behavior, is controlled by Cascading Style Sheets (CSS). You can override any aspect of Wagn's default CSS by editing the "*css" card on your Wagn.
Examples
The Sandbox Wagn has this in its *css card, which gives a turquoise (#067) color to the top menu bar, open/closed views cards' header bars, and the subtab links under the Edit, Changes, Options and Related tabs.
#menu {
background: #067;
}
.card-slot .card-header {
background: #067 none repeat scroll 0;
}
.card-slot .submenu a {
color: #067;
}
How To
HTML elements in Wagn have many id's and classes you can make use of. A few classes that are particularly useful correspond to Wagn sets, and class the outermost div of every card, whether it's the main card of the page, or an inclusion anywhere on it (unless its view is naked):
- All cards have the "ALL" class.
- Cards of a given cardtype have a class ".TYPE-|cardtype key|"
- Plus cards have a class: ".RIGHT-|key of right part|"
- In addition, plus cards have a class of the form ".TYPE_PLUS_RIGHT-|key of left part's cardtype|-|key of right part|"
- Individual cards have a class ".SELF-|card key|."
The way to be sure to get the key right is to look in the HTML of a card you want some CSS to apply to, and see what follows 'class="card-slot'. (If you're curious about it, read more about keys.)
Tips
- Firebug is a great Firefox extension for examining HTML and CSS.
- A few different looks via CSS can be seen at Skins.
- If you like to have your sidebar on the left here's some css you could add:
#primary { float: right; }
#secondary { float: left; }
- This puts tags inline and adds a background color to them (original idea from Ariel Millennium Thornton):
.RIGHT-tag[item="link"] .pointer-list,
.RIGHT-tag[item="link"] .pointer-list div {
display: inline;
}
.RIGHT-tag[item="link"] .pointer-item a {
background: #E7F8D6;
}
Some earlier (all closed now) tickets we tagged "graphic design":
...
