literature

CSS Tricks: Deviations in Journals

Deviation Actions

pica-ae's avatar
By
Published:
5K Views

Literature Text

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.

Do not just take the "easy way" and apply CSS to all images. If you use .img {} without a specified parent like at least .shadow-holder {} or a custom class you want to have thumbs displayed in, all images will receive that styling, including emoticons. This could result in a really hard to read journal.


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.

.shadow-holder
This is the main container for every thumb. Controlling this one, controls the whole outside appearance of the thumb.

.shadow-holder .shadow
Is responsible for the padding around the thumb. It creates room in .shadow-holder so the single thumbs don't bump into each other.

.shadow-holder .shadow a.thumb
This link class contains the information about the deviation, like the link (duh obviously), title and the image's original size.

.shadow-holder .shadow a.thumb img
Contains the image file of the thumb.

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.

.shadow-holder
The double border is not actually two borders, it is a combination of one border and a background color visible due to the applied padding inside the element.

margin: 10px creates space between the seperate thumbs. They would be touching each other otherwise.

padding: 5px makes the background visible for a width of 5px on each side.

vertical-align: middle is a simple trick, to achieve a better look for thumbs of various heights. By default they are aligned to the baseline of the text, as they are entered on lines just like words. This can easily look wonky and unbalanced and we don't want that, do we?

.shadow-holder .shadow & .shadow-holder .shadow a.thumb
Not styling them? You don't have to have them in the CSS file then!

.shadow-holder .shadow a.thumb img
vertical-align: middle is also necessary in this element, to actually have the image aligned properly inside its containing elements.

.shadow-holder:hover
This simply describes how the thumbs will appear on :hover, how this looks is totally up to you. It is recommended though to not change any margin, padding or alignment you have applied to the default state.


All of this styling also works with :bigthumb…:!


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.

.shadow-holder .shadow a.thumb.lit
This is the most important class, which describes the appearance of literature/journal thumbs; including background gradients, borders, box-shadow and font colors.

.shadow-holder .shadow a.thumb.lit img
The image in literature/journal thumbs is reduced to an accompanying element: either the author tag or the journal icon. It is limited to the left side of the thumb.
It is important to write it as a.thumb.lit, or elsewise, in art deviations, you will change the appearance of the artwork image, too.

.shadow-holder .shadow a.thumb.lit img.lit & .shadow-holder .shadow a.thumb.lit img.journal are classes another level deeper, that differ between literature and journal or author tag and journal icon.
You need to know these two classes if you want to style the images for them differently from one another, if you want to style them both the same way, you don't need to do it for these two.

.shadow-holder .shadow a.thumb.lit .wrap
This is the container for the content literature/journal deviation content and has no special styling.

.shadow-holder .shadow a.thumb.lit .wrap q
This element contains the (preview) content of the literature/journal deviation. It starts scrolling up on hover, so you can read more of the deviation.

.shadow-holder .shadow a.thumb.lit .wrap q strong
The title of the literature/journal deviation is emphasized by a bold font weight.

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;


}


.shadow-holder a.thumb.lit
This is the best place to change the width and height of these thumbs. I choose 150px height, to have them as high as portrait format image deviations.

The negative margin overwrites the padding we applied to .shadow-holder and enables the content of text deviations to "touch" the border of the container.

.shadow-holder a.thumb.lit img
If we don't want to see both author tag and journal icon, we simply set the class to display: none;.

.shadow-holder a.thumb.lit .wrap q
Font styling is best changed in this class, as well as the distance of the text to the outside of the box via padding.

We have to set the the position to of this element right: 0;, if we do not display a.thumb.lit img or else there would be an awkward empty space on the right side of the thumbs.

If you set top: 0; and bottom: 0; the thumbs will stop scrolling.

.shadow-holder a.thumb.lit .wrap q strong
Since this is set up as strong and not f.e. <h2> it is recommend to turn it into a block element.

Negative margin is only necessary if you do add background to this element and you want it to "touch" the outside border of the thumb. A positive margina the bottom helps creating space between the title and the content text of a text thumb.

.shadow-holder:hover .shadow a.thumb.lit .wrap q strong
For a hover effect over the title, you have to work with .shadow-holder:hover to make it work, properly, aka when hovering over any part of the thumb.


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.

Nr. 1 by pica-ae


a.embedded-deviation
For deviations added to a journal via the "Add Media" option and the resized in sta.sh writer or added in HTML as <da:deviation id="123456"> are styled with this class.

a.embedded-deviation img
Contains the image file of the thumb.


Nr. 1 by pica-ae


Nr. 1 by pica-ae


.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.

Emoticons added to a journal entry via the "Add Media" button will not be affected by styling a.embedded-deviation as they have a different class. So, don't worry about this.


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 :eyes:

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

How to style thumbs and embedded deviations in journal skins.
Get to know all the classes you need to know in order to style thumbs and embedded deviations. Learn a few hacks to have it easy peasy :XD: 



Previous CSS Tricks


:bulletgreen: Limiting .text width




Any questions? Just ask :eager: by darkmoon3636

I hope you like this and find it helpful Heart Peace
© 2014 - 2022 pica-ae
Comments22
Join the community to add your comment. Already a deviant? Log In
ttobserve's avatar
Wow!   :+fav:

Any idea on how to embed little audio snippets, like e.g. en.wikipedia.org/wiki/French_I… ?

E.g. I have this mp3 on my sta.sh: orig04.deviantart.net/f1e5/f/2…

Is there some way to bypass the automatic censorship and embed that in a journal?   :omg: