Journal CSS: Feature blocks. (Oct 2012 update)

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 post-sanity when he was working on his entry for eCSSited. He likes typography, and I like his photography.

:thumb112981335: :thumb109758011: :thumb99402132: :thumb86199059: :thumb80870296:

^{recognise this one? It's Nadia!}

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:

<dl>

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

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

</dl>

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}

dd{text-align:center;margin:0}
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{
  background:none!important;
  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!):

^{OH 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:

:thumb107649875:

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:

<dl>

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

</dl>

(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?

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:




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 - zachriel.deviantart.com/journa… and Vayde's journal - vayde.deviantart.com/journal/2… for real world examples of this in action

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