Shop Mobile More Submit  Join Login

:iconneurotype: More from neurotype

Featured in Collections

Journal Skins and CSS by SingingFlames

CSS Tips by poserfan

News by WhiteKimahri

More from DeviantArt


Submitted on
March 29, 2013
Submitted with Writer


66 (who?)

Customize Your Literature Thumbnails

Fri Mar 29, 2013, 1:09 AM

This journal will break down the components of the various kind of Literature (and Journal) thumbnails now available, as well as discuss how to customize them in a journal CSS. I believe there's some overlap with gallery CSS, but these tips are specifically for the way things look in journals. :)

Anyway, this isn't a basic tutorial on coding but you can find great resources in groups like eCSSited.

If it's a PDF or something visual and has a PNG/JPG preview, it behaves the same as normal thumbnails, so it doesn't bear mentioning here.

The different types of thumbnails

First Day of School."Miss, miss!"
"Sit down Gerald.  Waving your hand and jumping around will not make me choose you quicker.  Everybody will get a turn.  Now, Natalie."
"Yes miss."
"Stand at the front then.  There.  Nice big voice."
"whatididonmyholidays by Natalie Marsh.  What I did on my holidays we went to the beach it was nice and su....sunny.  I had ice cream and I went on a boat.  The boat was nice.  The sea splashed up and we all got wet.  Then there was a shark and it ated us and we all got dead TheEnd."
"Very good Natalie.  Well done.  And you spoke nice and clearly too, but try to be a bit louder next time.  Now who's next?  No, Gerald, I will not tell you again.  Sit down.  Now, Kyle.  Your turn."
"What I did on my holidays by Kyle age six.  What I did, I went to the zoo.  I went... no, wait, I know,
 is the standard one. Anything that is either written in Writer or with the 'Enter Text' option in the Submit dialog will have this. Some include a preview image within the thumbnail itself, but I won't be discussing that here.

FotoFriday: The ReLaunch!Hello!
Many years ago, when the "old schoolers" still ruled the forums and PoeticWar was a gallery director, we used to have a regular ongoing challenge in the literature community known as "FotoFriday". Although the concept isn't entirely exclusive to deviantART, it was very popular and we have decided it is time to bring it back!
Fotofriday was originally run by secondmagpie, GeneratingHype and RetroZombie (to name a few!). We intend to honour the old school and introduce it to the new!
How does FotoFriday Work?
Every other Friday we will post a photograph from a deviants gallery that we find intriguing and interesting. Using this photograph as a prompt, you are encouraged to write something, anything based on it. It doesn't matter what form of writing, how much you write or even whether you end up with a complete piece- this is all about the prompt and what it spurs!
Are there any rules?
There is only one
is the thumbnail for journals.

Unfortunately, :bigthumb: doesn't do anything special. But with Writer, it's possible to import a really big thingy of text. I'm including this because it's cool, but from my testing, applying CSS to it isn't an option. (CODERS: If you want to try it please do, but I don't think it will work because it's an iframe and we don't have access to the site-level stylesheets.)

Now that we've seen what the thumbnails look like, let's look at their (editable) components!

The components of a literature thumbnail

Untitled-1 by neurotype

I left out a tag because of redundancy.

For journal images, just use img.lit.journal instead of img.lit. (Of course you can't do much to it, but if you want to remove it or change the size, now you know :P)

What can I do with this?

One of the cool things about CSS is there are a lot of ways to approach the same problem. So I'm just going to describe what I do with this code.

  • .shadow-holder and .shadow.mild - these are shared by all thumbnails (although .shadow.mild is not used for :bigthumb:). So I would recommend always coding these first until you're satisfied with how the image thumbnails look. The padding for literature thumbnails is, in my experience, kind of wonky and it's better not to be surprised by that later on. (Also FYI, .shadow works instead of .shadow.mild which is good to know if you're lazy!)

  • .thumb.lit - I hope it's pretty clear that this is lit-specific (the regular one is just .thumb ;p). Anyway, I use this to adjust the margins and padding of the overall structure within .shadow-holder and .shadow.mild—as I mentioned above, literature thumbnails do tend to be a bit off. This is also a good place to toss on the background color for your literature thumbnail, if you want to use something besides the default.

  • img.lit or img.lit.journal - what you can really do here is change the size or visibility of the image (most useful when you're making mini-thumbnails). However, what I most use it for is undoing global-level changes to the img tag. When you do stuff like add a border to img or change the margins/padding, it shows up here too!

  • q - yes, really, it's just a q. When you code with it, stuff should look like q{code goes here;}...nice and convenient for us slackers. Anyway, I wouldn't recommend modifying the background to this (as you can see above it literally only affects the text area). I use this level to make changes to the appearance of the scrolling text itself.

  • q strong - modifying this will affect just the title of the text inside the scrolling box (in the example above, First Day of School).

Got questions or your own techniques? Share away! :eager: 

Hey journal skin coders! Ever wonder how to make literature thumbnails look nice?

My apologies for being about two years late on this. If you'd like more basic tutorials, I can probably finish them before we become the United States of Canada.
Add a Comment:
EnsoDancer Featured By Owner Edited Dec 7, 2014
Great resource here. I've been able to change my lit thumbs to make them bigger, etc...

But I'm wondering, if a lit thumb has cover art, what's the code to effect that? img.lit only seems to refer to the author's literature tag which I've set to {display: none}. Specifically I'd like to make the cover art centered, right now it defaults to left-aligned. Any suggestions? Writer by EnsoDancer
neurotype Featured By Owner Dec 7, 2014  Hobbyist General Artist
Ooh, good question, I would try:

q img{

Or something along those lines. I vaguely recall modifying the image at some point, but it's been ages, so let me know what happens!
UszatyArbuz Featured By Owner Edited Nov 25, 2014  Hobbyist Digital Artist

I also noticed that setting img.lit or img.lit.journal invisible makes the deviations and images in the previewed journals invisible as well. :P
neurotype Featured By Owner Nov 25, 2014  Hobbyist General Artist
Oh interesting, thanks!
xxtiffiee Featured By Owner Oct 9, 2013  Hobbyist Artisan Crafter
How do you do a regular thumbnail for journals?
neurotype Featured By Owner Oct 10, 2013  Hobbyist General Artist
I assume you mean :thumbXXXXX: (there's a shortcut for it on the side of the piece)?
xxtiffiee Featured By Owner Oct 10, 2013  Hobbyist Artisan Crafter
I know how thumbnails work; it's just that when I use the journal thumbnail, it doesn't show the thumbnail. It just shows :thumbXXXXX: Am I doing something wrong?
neurotype Featured By Owner Oct 10, 2013  Hobbyist General Artist
Oh hmm... maybe it's sticking in extra tags instead of interpreting the code... can you note me the raw html?
miontre Featured By Owner Mar 31, 2013  Hobbyist Photographer
I have to admit, I always forget to customise these. Sorry :XD:
I think I've only got one skin with them customised. :O I need to remember to do it more often :lol:
neurotype Featured By Owner Mar 31, 2013  Hobbyist General Artist
:dance: If you're not modifying the thumbnails it's not an issue...the big problems I've seen are when people customize the img tag. (Of course changing the a tag has an effect but I've seen it look really bad once or twice.)
Add a Comment: