Shop Mobile More Submit  Join Login

:iconthespook: More from thespook

Featured in Collections

Resources - Helpful by ginkgografix

Memorable Journals by L4m3ness

More from DeviantArt


Submitted on
April 23, 2009


12 (who?)

Journal CSS: Feature blocks. (Oct 2012 update)

Journal Entry: Thu Apr 23, 2009, 8:08 AM
  • Mood: Content
Oct 11 2012
A while back dA updated their HTML parser to fix many long standing bugs. This was a good thing. Unfortunately because I had used a bit of a dirty shortcut to keep the HTML as simple as possible, one of the features of this CSS broke (the I-just-want-a-box-with-thumbs feature.)

Well. I finally fixed it.

As far as the code goes it's basically just the avatar handling that has changed, effecting the 'description' and 'simple' modes, and the scroll-box code - but I've also edited the wording of the entire tutorial.

So if you've been using this code in your journals all this time, please give the tutorial another read to get you updated.

First, if you'll indulge me, a little history.

Sharing thumbnails in journals can be quite chaotic. Either people just dump them all in a mess and hope for the best, or they spend a lot of time trying to match them up and arrange them neatly.

Neither seems ideal, and I saw an opportunity to use CSS to make things better for everyone. Early attempts [1, 2, 3, 4] had their limitations and drawbacks, and over time I found myself not using them in my own journals - a bad sign I think!

So I went back to the drawing board and tried to come up with a system that I would use. Over a course of weeks, maybe months, I slowly built up and tweaked a new thumb gallery system in my own journals. Eventually, I was satisfied enough to publish it for everyone to use.

There's a minimal amount of HTML to remember, and if you include thumb features often you'll quickly become accustomed to it.

So, on with the new feature box things!

If memory serves me right, I first met :iconpost-sanity: post-sanity when he was working on his entry for eCSSited. He likes typography, and I like his photography.
:thumb112981335: :thumb109758011: :thumb99402132: :thumb86199059: :thumb80870296:
:iconperfectnoseclub:Nadia for Nick The Spook by perfectnoseclubrecognise this one? It's Nadia! :) all pillowed up by perfectnoseclub Dream by perfectnoseclub

As you can see above, there are two main ways to use it: with a horizontal description, or without a description and their avatar on the side. The HTML is simple:


<dt>description goes in these DT tags. <em>:iconusername: :devusername:</em></dt>
<dd>:thumb#####: :thumb#####: :thumb#####: </dd>

<dd>:iconusername: :thumb#####: :thumb#####: :thumb#####: </dd>


So, first you'll notice that everything goes between <DL> and </DL> - if you've never seen these tags before, it's a definition list. I've used them here because I've never seen anyone use them in their journals, so they're 'free' to use, and that also means less HTML junk for you to type out when you use them.

Pretend it stands for 'Deviation List' :)

The DT tag creates the horizontal description, and within it you can write as much or as little as you like. It'll stretch to fit, I promise.

Anywhere within the description you can place the username and avatar codes. In the code example above you'll see that they're both together inside EM tags. This will 'connect' them on hover - so when you hover over one of them, the other will light up too. I think it's fancypants, but you don't actually have to use it, place the avatar anywhere (inside the DT) and it will be moved to the corner. This does mean though, that you can only have one avatar up there - more than one and I cannot be held responsible for the consequences!!!!1

Close the DT tag, and then open the DD tag to start showing thumbs. Go crazy, dump as many thumbs in there as you like. Six seems to be a nice number, but it wont break if you add more.

If you don't want to use a description block, go ahead and put thumb codes into DD tags. To make the avatar show, put their avatar code anyplace you like (inside the DD), and it'll be moved to the left. I like to write it first, before the thumbs, but it actually doesn't matter.

Now, for the CSS:
dl br{display:none}

dt{margin:0;position:relative;min-height:58px;padding:10px 20px 10px 90px;background:#eee;z-index:20}
dt br{display:inline}

dl em{font-style:normal}
dt em a{font-weight:bold}
dl em:hover a{color:red}
dt .avatar{float:left; margin:3px 0 0 -71px;border:2px solid transparent}
dd .avatar{float:left;margin:-35px 0 0 10px;border:4px solid #eee}
dl em:hover .avatar{border-color:#fff;background:#fff;outline:1px solid #ccc}

dl dd{margin:0 0 35px 0;padding:10px 0 15px 10px;text-align:center;position:relative;border:solid transparent;border-width:1px 0;background:#eee}

dd .shadow{
  display: inline-block;
  max-height: 160px;
  min-width: 100px;
  text-align: center !important;

dd .shadow img{
  vertical-align: middle !important;
  border:3px solid #ccc;background:#ccc;

dd .shadow img:hover{border-color:#fff;background:#D5E0D2;outline:1px solid #999}


Now, some notes about the CSS. In this journal (the one you're reading), there is a 58px padding on the left and right, and so to make the thumb boxes fill the full width I used negative margins: dl{margin:0 -58px}. Negative margins 'pull' boxes out, and so come in handy in situations like this.

I haven't included the negative margins in the default code block above because your journal will be different, but if you want the same effect, that's how you do it - negative margins.

If you want to change the alignment of the thumbs, change text-align:center in dd{...} and dl dd{...} to either left, right or justify - though I would suggest you don't use justify. Justify can be okay for text, but it makes thumbs looks jumbled up.

The rest, like changing padding values, or colours, should be obvious, though you're welcome to ask for help if you are having problems.

So with the boring vanilla stuff out of the way, here's the fun part: fancypants customisations.

You might have missed it earlier, so I'll show it again (hover the thumb!):

sandman by thespookOH SNA- err, SUP!

You can use it to give a short description, or even link to the critique/comment you left. I dunno, whatever you like. The HTML is:

<u>:thumb####:<sup>your message</sup></u>

And the additional CSS is:

dd u{position:relative;text-decoration:none;display:inline-block}
dd u sup{display:none}
dd u:hover sup{display:block;position:absolute;bottom:10px;left:50%;width:150px;background:#ffc;border:1px solid #D1D1A7;text-align:left;padding:4px}

(Just tack it on at the end of the vanilla stuff)

So far, the CSS has been all about featuring an artist at a time. But what if you just want a block of random thumbs? Well, you can have that too:

Aurora Over Paradox by wroth :thumb107649875: Vertebrae by Callipyginous Showdown by juuhanna Shelter by juice-teen crow III. by KeremOkay Once upon a time by NeuErotik freedom around my neck by N0ll

The awesome part about this CSS (if I may say so myself) is that the HTML for a random block of thumbs is no different to the HTML for the 'simple' one-artist block of thumbs at the top of the journal.

So if you have a DL already, with other artist feature blocks, you just add another DD, put your thumbs in it, and you've got yourself a box of random thumbs. Example:


<dt>description goes in these DT tags. <em>:iconusername: :devusername:</em></dt>
<dd>:thumb#####: :thumb#####: :thumb#####: </dd>

<dd>:iconusername: :thumb#####: :thumb#####: :thumb#####: </dd>

<dd>:iconusername: :thumb#####: :thumb#####: :thumb#####: </dd>

<dd> :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: :thumb#####: </dd>


(that last DD is the random thumbs box)

If you don't have a DL already, and you just want a box of random thumbs at the end of your journal or something, it's still crazy simple. Make a new DL and just put a single DD in it - like so:

<dl><dd> ...thumbs... </dd></dl>

How about some horizontal scrolling? :w00t:

:iconndikol: i hate police by ndikol mino by ndikol one of all by ndikol momo2 by ndikol my mother save me by ndikol monster face by ndikol sizuxo by ndikol
To make each DD scroll horizontally like above, add the following:

dl dd{white-space:pre;overflow:auto}
dd .avatar{margin:10px 0 0 10px}

Note that this will make all thumb boxes scroll! If you want to be able to mix it up with non-scrolling and scrolling boxes you'll have to isolate the scrolling CSS like so:

.horz_scroll dl dd{white-space:pre;overflow:auto}
.horz_scroll dd .avatar{margin:10px 0 0 10px}

And then wrap the DL you want to scroll with <div class="horz_scroll">

Cool thing is that the horizontal descriptions (DT tags) work just fine together with the scrolling thumb boxes:

:iconthespook: Yet again I'm using my melbourne collection for some quick example thumbs. Go me, right?
:thumb324825423: :thumb323089280: Busker on Bourke by chun11 ^ by biawak Stopping All Stations. by MrJuzz1992 On the Street by andrewj63 :thumb170781404: 11/11 by vitriolistruth :thumb153459122: Lertitzwensat by doctor-a

Finally, in one of my own journals I tried an effect where hovering the rows would change the background colour and highlight the avatar. It was useful because in that early version the blocks had transparent background.

The CSS to achieve something like that is:

dd{border:solid transparent;border-width:1px 0}
dd:hover {background:#ddd;border-color:#ccc}
dd:hover .avatar{background:#fff;border:2px solid #fff}

It might just be me, but it doesn't look quite right when used together with the horizontal description (DT tag) - because they're separate they don't hover together. So to address that, you can put your descriptions in <SUP> tags inside the DD tag, ie:

<dd>:iconUSERNAME: <sup>:devUSERNAME: is the greatest</sup> :thumbs###: :thumbs###:</dd>

And then you'll need to add the following to your CSS:

dd sup{display:block;margin-bottom:10px}

Doing this is better than just typing text into the DD because you can adjust the margins around it :)

I've already shared this CSS with some people, check out zachriel's journal -… and Vayde's journal -… for real world examples of this in action :)

...and that's it. I'm hungry now. Any questions, you know what to do :thumbsup:

Add a Comment:
Skye-Sweet-Author Featured By Owner Aug 22, 2013  Student General Artist
Thank you so much, I will be making the most of this in my journals now!
thespook Featured By Owner Aug 24, 2013
Hope it still works :lol: - it's been a long time since I made it :thumbsup:
Skye-Sweet-Author Featured By Owner Aug 26, 2013  Student General Artist
It does, it works very well!
Kjherstin Featured By Owner Oct 12, 2012
Oh awesomeness!
geralsv Featured By Owner Oct 6, 2012  Hobbyist General Artist
Oh well, I just noticed the note about the broken shortcut..
Have you fixed it already? Or I will just have to find another way to do that? :(

This is great, btw. :aww:
thespook Featured By Owner Oct 11, 2012
Thanks to you, I got off my lazy but and fixed it :)

I've updated and edited the original tutorial, check it out again and hopefully it's easy enough to follow :thumbsup:
geralsv Featured By Owner Oct 12, 2012  Hobbyist General Artist
Glad I helped on getting something done! :P

Before you answered, I had to ask for help from a friend. He made some changes to the previous "broken" CSS and this was the result [link].
Now, if you excuse me, I'll go update the CSS :aww:

Thanks a lot, and once again, great tutorial!
thespook Featured By Owner Oct 13, 2012
Your friend seems to have fixed it just fine - if you're happy with it there's no reason to change anything again. :)
geralsv Featured By Owner Oct 13, 2012  Hobbyist General Artist
Yes, I do like it that way but I want some of the other features, like the hover thingy and the avatars. They're excellent for featuring people. :aww:
micdt Featured By Owner May 6, 2009
thanks for sharing. combined it with a journal-css by mindfuckx here: [link]
Add a Comment: