Shop Mobile More Submit  Join Login

CSS Tricks: Deviations in Journals

Mon Jun 30, 2014, 3:51 AM
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
Add a Comment:
 
:icontaylortypo:
TaylorTypo Featured By Owner Mar 7, 2017
Is there a way to change scroll speed on literature thumbnails? :D
Reply
:iconmelmuff:
MelMuff Featured By Owner Oct 6, 2016  Hobbyist General Artist
Thanks for posting this. It helped me for a journal skin I'm making for someone.
Reply
:iconcraimutt:
craimutt Featured By Owner Jul 30, 2016  Hobbyist General Artist
I need to note a complete code for a custom box and I don't know how to send it, so it stays in the code form, not automatically complete the code, changing it to links etc. I need the <div stuff and links to stay visible.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 31, 2016  Professional Interface Designer
Ah yeah, that's a common problem. But in a note, it should usually stay as code in the box where you answer, but it may link the URLs.
What I would do is either save the code as a .txt file and upload it to sta.sh so that the other person can copy or download from there. Or, make a .zip of the .txt and upload that to sta.sh.

When I write code in journals, I usually use extra code around the brackets:
   <div> ... </div> = <i><</i>div> ... <i><</i>/div>
You only need to do that for each left bracket, but it is very exhausting. 

I hope that one of the solutions helps you :)
Reply
:iconcraimutt:
craimutt Featured By Owner Jul 31, 2016  Hobbyist General Artist
Alright, thank you so much! It helped a lot. ^^
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 3, 2016  Professional Interface Designer
Excellent :) 
Reply
:iconlupsiberg:
Lupsiberg Featured By Owner Mar 5, 2016  Hobbyist General Artist
Thank you very much for sharing :iconflowerthnxplz:
Reply
:iconfractalholic:
Fractalholic Featured By Owner Dec 30, 2015
How in the world do I get rid of all shadowing from a journal skin?
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 24, 2016  Professional Interface Designer
There is an universal selector for CSS *{} . It lets you change the look of all elements at once.

If you were to write * {box-shadow: none;} it should remove all box-shadows in the CSS.
It would be best to place it at the end of the CSS file.


You can read up on it here developer.mozilla.org/en-US/do…
Reply
:iconandorada:
Andorada Featured By Owner Jun 21, 2015
Wow, this is great! :la: I was confuzed for quite some time while dealing with this list of properties, mixing them up and making a mess out of it! Thank you for this, it really helped me! :huggle:
:heart:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2015  Professional Interface Designer
Thank you :) :hug: 
Reply
:iconrumokiga:
Rumokiga Featured By Owner Jun 30, 2014
OMG this is super helpful! Having it all in one place is a whole lot easier than having to inspect the elements each and every time =) Thanks a lot for taking the time to put all this together! ^^
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 30, 2014  Professional Interface Designer
Haha yeah, I always safe the classes in a .txt file which is the base for all my skins :nod:

Thank you :hug: :aww: 
Reply
:iconrumokiga:
Rumokiga Featured By Owner Jun 30, 2014
Makes sense! I'm just too lazy to do that most of the times =.='' =p
You're welcome ^^ :hug:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 1, 2014  Professional Interface Designer
:XD: I am lazy, too, that's why I have templates :giggle: I wouldn't wanna do it all again from scratch each time :P
Reply
:iconrumokiga:
Rumokiga Featured By Owner Jul 1, 2014
You're absolutely right =) It's decided, I'm using templates starting from my next skin! ^^

I've been working on a skin for a couple of days now and I'm styling the thumbnails, your tutorial came in the exactly right time! So I have two questions if you don't mind ^^:

1) In the css code of the small thumbs, the shadow-holder:
.shadow-holder:hover {
  background: 1px solid #1f7a99;
}
shouldn't it be border?

2) Also, I'm a bit confused about the use of padding in the styling of the small thumbs more exactly the shadow-holder, you said it's better not to use the padding for this class with foresight towards literature thumbs but you used the padding and added negative margin to the img, so should we use the padding?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 1, 2014  Professional Interface Designer
Glad to hear it is useful :XD: :huggle:

Shit that happens when you can't wait for someone to proofread :lol: 

1) Yes, that should definetely be border there :nod: 
2) I should have taken that sentence out, but it's easy to overlook things like that :slow: It is totally fine to apply padding to .shadow-holder, you just need to apply negative margin for the literature thumbs then.

Sorry for the confusion, I fixed both of those mistakes :) 
Reply
:iconrumokiga:
Rumokiga Featured By Owner Jul 14, 2014
Lol! ^^ Nobody loves waiting =p

Thank you so much for all the clarifications, it's very kind of you! ^^

Cheers :love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 15, 2014  Professional Interface Designer
:giggle: indeed!

No worries, thanks for pointing the things out :) :hug: 
Reply
(1 Reply)
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections

Customization " ---------- by help-resources


More from DeviantArt



Details

Submitted on
June 30, 2014
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
2,063
Favourites
93 (who?)
Comments
22
×