As promised in my previous tutorial CSS Tricks: Journal break-down comes the follow up tutorial about styling deviations in journals.

You'll see what classes deviations are built from and how to "hack" them in order to style them entirely to your preference. I will cover regular image thumbs, literature and other text deviation thumbs and embedded deviations.

Deviation Thumbs

Aaah, the traditional way of featuring art in your journal.

Generally, all thumbs consist of an image file, a link and one or more containers around both image and link. This tutorial will explain how those are built up exactly, and also explain the elements text thumbs are made up from and how to style embedded deviations.

Image deviation thumbs

An image deviation thumb consists of four classes, that have different jobs. Visually they don't do much, mostly their CSS applies to layout issues.


Two of these classes, .shadow-holder and .shadow-holder .shadow, are general classes you can find on all thumbs.

.shadow-holder .shadow a.thumb and .shadow-holder .shadow a.thumb img contain deviation specific information, like the link to the deviation page and the small thumbnail image of your deviation.


While of course you can style all four of these, it is recommended to only apply CSS styling to one of the classes with the addition of a little hack to make it all look nicer.

So when you put the thumbs in your journal without any styling, they will look like this:


After a few lines of CSS our thumbs could look like this: blue borders and shadows, more space between the thumbs and an improved alignment.


The CSS for this appearance is as follows:

.shadow-holder {

background: deepskyblue ;

border: 1px solid powderblue;

box-shadow: inset 0px 1px 4px #526166 ;

margin: 10px;

padding: 5px;

vertical-align: middle;

}

.shadow-holder .shadow {}

.shadow-holder .shadow a.thumb {}

.shadow-holder .shadow a.thumb img {

vertical-align: middle;

}

.shadow-holder:hover {

background: steelblue ;

border: 1px solid steelblue;

box-shadow: inset 0px 1px 8px #526166 ;

}

This styling gives us thumbs with what looks like a double-border and drop shadow, with accompanying hover effects. It is only necessary to style two classes to achieve this effect. For the :hover we simply change the colors and create a bigger shadow.

Text deviation thumbs

There are a few more classes to literarute and journal deviation thumbs, but the .shadow-holder and .shadow-holder .shadow classes are the same for all thumbs.


The image class is reused for either the author tag or journal icon, depending on what gallery the deviation is located in.

We gain two new classes for literature/journal thumbs, that are used to give a preview of the deviations written content. The title is displayed as bold text, and not as a headline.


So here are our default text deviation thumbs, one with author tag and the other one with journal icon. They have a border and a background gradient and generally have more visual styling than image thumbs.


The styled thumbs have the same border, background-color and box-shadow as all thumbs, since we applied styling to .shadow-holder.

New styling for text thumbs is the deletion of the author tag/journal icon, font styling change and we even changed the width of the thumbs.


The CSS for this appearance is as follows:

.shadow-holder a.thumb.lit {

height: 100px;

width: 200px;

margin: -5px;

}

.shadow-holder a.thumb.lit img {

display: none;

}

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

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

color: white;

font-family: Lato, sans-serif;

font-size: 13px;

line-height: 15px;

margin: 0;

padding: 5px;

position: absolute;

right: 0;

left: 0;

}

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

display: block;

background: powderblue;

color: white;

font-size: 16px;

line-height: 20px;

margin: -5px -5px 10px -5px;

padding: 5px;

}

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

background: steelblue;

}

Here's how a combination of image and text thumbs works:

Embedded Deviations: <da:deviation id="123456">

Aaah, the new way of featuring art in your journal. At any size you want, just drag 'em around in sta.sh writer.

.shadow-holder, a.embedded-deviation {

background: deepskyblue ;

border: 1px solid powderblue;

box-shadow: inset 0px 1px 4px #526166 ;

margin: 10px;

padding: 5px;

vertical-align: middle;

}

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

vertical-align: middle;

}

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

background: steelblue ;

border: 1px solid steelblue;

box-shadow: inset 0px 1px 8px #526166 ;

}

Since we already styled the thumbs, we can make our life a lot easier by applying the same effect to the embedded deviations. To do this, we simply add a comma behind the class and enter the second class this exact styling should be applied to after it.
That way, if we want to change the styling for both, we only have to do it once.

Of course, you can create a new styling for embedded deviations that deviates from thumbs. You may not want any margin around embedded deviations, because you prefer to use them full-width all the time aka do not resize them. It will also not be necessary to have vertical-align: middle; applied to embedded deviations that are used full width, but it does not harm them to have that setting when combined with .shadow-holder.

Conclusion

With knowledge of the right class names styling deviations is easy peasy. A few litle hacks and you are all ready to go and style deviations any which way you like.
By combining classes in the CSS you can save room and adjust settings quickly for more than just one element.

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

I don't bite