Skin Template

* {

background: transparent;

border: none;

margin: 0;

padding: 0;

}

/* ----------------------------- General ----------------------------- */

.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {

display: none;

}

a {}

a:hover {}

/* ----------------------------- Journal ----------------------------- */

.negate-box-margin {}

.gr-box {}

/* ----------------------------- Top ----------------------------- */

.gr-top {}

.gr-top .gr {

padding-left: 0!important;

}

.gr-top .gr h2 {}

.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-top .gr h2 a:hover {}

.gr-top .gr span {}

/* ----------------------------- Body ----------------------------- */

.gr-body {}

.gr-body .gr {

overflow: visible!important;

position: static!important;

}

.gr-body .gr .grf-indent {}

.gr-body .gr .grf-indent .text {

max-width: 500px;

}

/* ----------------------------- Comments Link ----------------------------- */

.gr-body .gr .grf-indent .bottom {}

.gr-body .gr .grf-indent .bottom a {}
.gr-body .gr .grf-indent .bottom a:hover {}

/* ----------------------------- Deviations ----------------------------- */

.shadow-holder, a.embedded-deviation:hover {

margin: 5px;

vertical-align: middle;

}

.shadow-holder .shadow {}

.shadow-holder .shadow a.thumb {}

.shadow-holder .shadow a.thumb img, a.embedded-deviation img {

vertical-align: middle;

}

.shadow-holder a.thumb.lit {

box-shadow: none;

}

.shadow-holder a.thumb.lit img {

display: none;

}

.shadow-holder a.thumb.lit .wrap {}

.shadow-holder a.thumb.lit .wrap q {

position: absolute;

right: 0;

left: 0;

}

.shadow-holder a.thumb.lit .wrap q strong {}

.shadow-holder:hover, a.embedded-deviation:hover {}

.shadow-holder:hover .shadow a.thumb.lit .wrap q strong {}

/* ----------------------------- Text ----------------------------- */

.text p {}

.text blockquote {}

.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {}

.text h1 {}
.text h2 {}
.text h3 {}
.text h4 {}
.text h5 {}
.text h6 {}

.text ul {}

.text ol {}

.text li {}

.text hr {}

.gr-top .gr h2 {}
Use this selector alone to define placement, surroundings and backgrounds of the journal title.

.gr-top .gr h2, .gr-top .gr h2 a {}
Use both selectors to define anything that is related to the appearance of the journal title's text, like color, font and text properties.

a & a:hover
You want to add custom styling to all links in your skin, cos the default DA colors may clash with your new CSS styling.

/* comments */
You can and should enter comments into your skins. Just put /* and  */ at the start and end of the comment. I do so, to keep a better structure in my CSS and make it easier to find bits. You can also do so to give people who use your skin instructions on how to use it or what a certain class is doing.
I also add a shitload of dashes just to make the seperation more visible

p - paragraphs
Styling a paragraph is a great and simple way to style an element that sticks out of the regular text part. I usually create highlighted boxes with this.
Also it is easier to remember for users, when they have only need to write <p>…</p> to create this element.

blockquote
Much as the paragraph, blockquotes can be styled to highlight parts of a journal. They can be styled any which way you like.
Additionally to being quickly written as <blockquote>…</blockquote>, they can also be applied to parts of the text in Sta.sh Writer's Rich Editing Mode via a button.

.text h1, .text h2, .text h3 etc. – headlines
Headlines can be created Sta.sh Writer's Rich Editing Mode via a button, too. I recomment adding .text before them, as to not reach confusion between .gr-top .gr h2 in the layout.
I usually have them all in one line to define the font-family and use the default sizes provided by DA.
But you can also have each headline in its own line and style them seperately. I usually keep both ways in my skins.

ul & ol – lists
I keep unordered and ordered lists in my templates as well, there is always a chance I forget to style them and things will look ugly in the end.

li – list item
The single items inside a list, you can style them any way you want.

hr – horizontal rule / divider
You can also style these, to any which way you like. A default <hr> is defined by its borders, but you can change it to fills or images.

Install the blank canvas skin template

You can install this skin and edit it as you like. Please share it by linking to this tutorial to help people understand it better.
Please do not redistribute as it is, but you can share any skin you create based on this every which way you like, no restrictions.

Feel lost? Don't worry!

Do not hesitate to ask me questions if you don't understand anything or want clarification!