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.

--Ethan McCutchen.....2014-06-23 20:27:52 +0000

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.

--Mir S......2014-06-29 17:04:28 +0000

That's just a single CSS rule. something like

 

.TYPE-mytype > .card-header { background: yellow }

--Ethan McCutchen.....2014-06-29 19:41:43 +0000

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"?

--Mir S......2014-07-07 09:33:45 +0000

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)

--Ethan McCutchen.....2014-07-07 18:22:19 +0000