Examples

The Sandbox Wagn has this in it's *css card, which gives a turquoise color to the top menu bar, open/closed view cards' header bars, and 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

(As of Wagn 1.4:)

 

Wherever a card appears — as the main card or an inclusion (unless it's view is naked) — it will be in a div with several classes that correspond to the sets it belongs to:

• 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 it right is to look in the HTML of a card you want some CSS to apply to, and see what follows 'class="card slot'. (Note that a key is the same as a card's name, but all lower case, punctuation replaced with spaces, multiple spaces replaced with a single space, and spaces replaced with underscores. For example, a cardtype "Joe's Blog Entries" would have a key of "joe_s_blog_entries".)

Tips

• Firebug is a great Firefox extension for examining HTML and CSS.
• A few different looks via CSS can be seen at Skins.
• CSS snippet from Ariel Millennium Thornton that puts Pointer items (e.g., for tags) on Blog Entry cards inline, with semicolons between them (the semicolons use generated content, so Internet Explorer 8 will render it, but versions 7 and earlier won't):

  .TYPE-blog_entry .transcluded.TYPE-pointer[item="link"] > span > div.pointer-list { display: inline; }

  .TYPE-blog_entry .transcluded.TYPE-pointer[item="link"] > span > div.pointer-list div { display: inline; }

  .TYPE-blog_entry .transcluded.TYPE-pointer[item="link"] > span > div.pointer-list div:after { content: "; "; }

• If you like to have your sidebar on the left here's some css you could add:
  #primary { float: right; }
#secondary { float: left; }

 

Add +discussion