A skin determines a page's look and feel. Scroll down for more about how skins work, and how to edit and install them.
Skins currently available on wagn.org:
Note: before the Wagn 1.12 release, styling was done with a combination of (a) hard-coded styles and (b) the *css card. None of the following applies to older releases.
choose a skin
As of Wagn 1.12, every card has a *style rule that determines the skin for its page. Editing it is like editing any other rule. After editing a *style rule you will need to reload a page (and thereby reload the CSS) to see the skin take effect.
- CSS - CSS is the ultimate product of the skinning sytem; it's the way browsers understand styling rules. Those wishing to edit CSS directly may do so by editing CSS cards (cards with the CSS type). When viewing a CSS card's normal (HTML) page, you will see syntax highlighting. When rendered as CSS (eg, by going to /my_css_card.css), you will see a comment above the css outlining the card's name
- SCSS - SCSS (a variant of sass), empowers CSS developers with capabilities like variables, mixins, and syntactic shortcuts. In edit mode, SCSS shows just raw syntax. When viewing it in HTML or CSS format, it compiles to CSS and renders just like CSS cards.
- Skin - Skin cards are just a list of other cards that produce CSS. This makes it easy for different skins to re-use chunks of CSS. In Wagn terms, they're really just glorified pointers. In the future, we expect to hone the Skin editor to better fit the need of Skin developers; at present it merely offers a simple pointer interface.
- *style rules -style rules are simple pointers to skins and/or style cards (CSS / SCSS). By default they are configured to show only Skin cards as options (and not, for example, low-level CSS cards). But CSS geeks may change this at will :)
- style files - these temporary files get generated automatically whenever you save a *style rule. They compile, concatenate, and compress the CSS. And, like all wagn files, they are fingerprinted so that browsers can permanently cache them. All of this means that they make Wagn stylesheets FAST.
edit a skin
Editing a skin can involve editing any of the Skin, CSS, or SCSS cards involved.
Important: you will likely need to do a hard refresh (ctl-shift-R or command-shift-R in many web browsers) to get changes to Skin, CSS, or SCSS cards to take effect.
You can use the following tricks when editing these cards
- ?debug=style -- adding this to your url will deliver the CSS in separate sheets, so that you can easily navigate them with browser-based CSS tools. This technique removes all the optimizations of "style files" (see above), so it can be quite a bit slower that normal rendering, but it's very useful when you're tweaking your styles and skins.
- ?style=[skin or stylesheet cardname] -- another good trick, add this to your url to specify which skin or stylesheet (CSS/SCSS) to use. It can be used in combination with the debug trick if you want the stylesheets rendered separately.
Note: we will soon prompt for immediate update when editing skin-related cards to simplify this process.
install a new skin
At present, installing a new skin requires a bit of cut and paste. In the near future we plan to automate sharing cards between Wagns, which will dramatically simplify the process.
To copy a skin from another site, you will need to copy:
- the Skin card itself, and
- any items referred to by the Skin card, including CSS, SCSS, Images, and others Skins.
- you can load the stylesheet cards individually via @import statements by adding import_styles=true. This slows things down considerably.
todo: document image best practices.
So, does *css apply to all styles, even if it isn't explicitly in the *style rule? I made http://johnabbe.wagn.org/layout_test use the simple skin but it's still showing all of the custom colors and some other customizations that are only in my *css card. I hard-reloaded my browser on that page, so I should be getting the new CSS, right?
Is there someplace with screenshots of each of these, to ease the process of choosing one?
If not, would it be a plus to create a set and if so, anything I should know before going about doing so? (I'm imagining a +screenshot Image card for each one, and then would want your help setting up the CSS to show a set of labeled, clickable thumbnails to see them full size.)
Haven't gone through all of them, but they're not very different, mostly minor color changes. So screenshots may not be that useful.