Is it possible to define a skin for each card type?
Support Ticket
+issues
Thinking that "everything is a card" I was wondering if it's possible to define some CSS or Style or Skin per CardType basis so you can control the look of each variation "deck" of cards (that have the same type).
For example:
One should have a "super"(parent) CSS or Style or Skin from which all cards inherit their look. This is probably the look of the card all cards inherit from.
Each CardType then has a it's own CSS or Style or Skin that if defined overrides the "super" CSS or Style or Skin.
This way one can define unique looks per CardType and still have main look to relate to with all other cards.
Yes, this is possible. Are you thinking more about the style of the content within a card or the page around it? (Either way it's possible, but the approach might be different)
You can either create separate *style rules (in Wagn) or separate CSS rules. (Both Wagn and CSS use the term "rules" in similar ways).
Learn more about Skin and CSS.
In general I don't recommend creating entire separate style *sheets* for separate cards, because you can do most of what you need to do within sheets. Every card slot has CSS classes that allow you to specify the card's type.
For example, I want to define a new CardType and all instances of this CardType should have the title bar yellow, while all other cards retain the default skin.
That's just a single CSS rule. something like
.TYPE-mytype > .card-header { background: yellow }
Hmm... Using the Simple skin here for testing purposes. Went into that and opened up "style: common" edited it and added this at the end
.TYPE-SCSS > .card-header { background: yellow }
Clicked Submit and then went ahead refreshed the page... In my mind this would make all SCSS card on that page have a yellow header.
Also there is this problem with CardTypes that have spaces in them, will this work with names like "Report on daily activity"?
The short answer is that the classes will need to look something like .TYPE-scss and .TYPE-report_on_daily_activity. Note that CSS is case sensitive (and the dashes and underscores are significant, too).
As for process, I usually don't end up actually editing CSS / SCSS cards until I've tested the CSS in a browser, because modern browsers are so good at this stuff -- you get the feedback about whether it works right away. In Firefox I use Firebug. In Chrome most of the developer tools you need are built in
So I would:
1. add ?debug=style to the url in the browser to produce separate, readable sheets
2. use the browser's DOM navigator to find the elements you want to style and look at the class tags. You should see "TYPE-scss" in there.
3. use the browser's CSS editing tools to try out your CSS rules
4. once you get them working, add them to a CSS or SCSS card. (I generally recommend creating your own rather than editing the existing ones so it's easier to see all your own modifications in one place. CSS makes this a very workable solution)