Shop Mobile More Submit  Join Login
×

:iconthespook: More from thespook


Featured in Collections

Resources - Helpful by ginkgografix


More from DeviantArt



Details

Submitted on
April 23, 2009
Link
Thumb

Stats

Views
781
Favourites
13 (who?)
Comments
38
×

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:

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


:dance:


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:

<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? :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 - 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 :thumbsup:

Add a Comment:
 
:iconskye-sweet-author:
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!
Reply
:iconthespook:
thespook Featured By Owner Aug 24, 2013
Hope it still works :lol: - it's been a long time since I made it :thumbsup:
Reply
:iconskye-sweet-author:
Skye-Sweet-Author Featured By Owner Aug 26, 2013  Student General Artist
It does, it works very well!
Reply
:iconkjherstin:
Kjherstin Featured By Owner Oct 12, 2012
Oh awesomeness!
Reply
:icongeralsv:
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:
Reply
:iconthespook:
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:
Reply
:icongeralsv:
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!
Reply
:iconthespook:
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. :)
Reply
:icongeralsv:
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:
Reply
:iconmicdt:
micdt Featured By Owner May 6, 2009
thanks for sharing. combined it with a journal-css by mindfuckx here: [link]
Reply
:iconblacleria:
Blacleria Featured By Owner May 1, 2009  Student Traditional Artist
I have used this feature in my journal [link] hope that's ok:)
Reply
:iconpost-sanity:
post-sanity Featured By Owner Apr 24, 2009
I like them all... The neatness is worked in through the background gray, which makes thinks look neat.

I got a massive shock seeing my av on there :D

Thanks heaps, brother (you heard me!)
Reply
:iconfrozenpandaman:
frozenpandaman Featured By Owner Apr 23, 2009  Student General Artist
awesome!!
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Your mum is awe- err, sorry, wrong journal.
Reply
:iconeskimoblueboy:
eskimoblueboy Featured By Owner Apr 23, 2009  Hobbyist Photographer
Very cool. I may play with some of this if its ok?
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Of course! :)
Reply
:iconhelewidis:
Helewidis Featured By Owner Apr 23, 2009   Photographer
I :heart: U!

:drool:
Reply
:iconwroth:
wroth Featured By Owner Apr 23, 2009
Damnit I was using DL tags for a javascript+css ';pop down' menu recently on a wordpress theme I wrote, and I was going to re-write my journal thumb tables to use them - now if i do it, I'll look like I am copying you! :shakefist:

These are not vertically aligning to the center in Safari here which is a necessity for me, but I think the whole DL usage is a great step forward for bringing sanity and eloquence to the way people code feature blocks. :thumbsup:

Why the EM tag? Could you use the automatic class of "dev[name]" links to style it with less html? [Or does it have something to do with why the the hover for username and icon are linked so when you mouse over one they both go into hover behavior]
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Definition lists for drop downs? That sounds interesting - have you started coding it yet? The annoying thing is how the DT and DD elements are separate, makes styling tricky at times.

I think I still have Safari installed, I might look into it.

As for the EM tag, indeed, it's to have the text link activate the avatar hover and vice versa. Like I said though, you don't have to use it, the avatar will still be positioned properly without it.

Cheers.
Reply
:iconwroth:
wroth Featured By Owner Apr 23, 2009
Yah it's alive at [link] in the side bar. [It's a ';pop down' like I said, opens with a click rather than a hover] I based it mostly on some other scripts and code found around the net', more adaptation than creation but the changes involved the tie in of images which was tricky. [Though i am still perfecting the whole site cross browser cos it was rushed, might not be working 100% atm.]


Ah I missed you saying it was optional. :bucktooth:

:peace:
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 23, 2009  Professional Traditional Artist
I like the look of this, especially the second example. Still not as neat as I personally like it though. My favourite will always be the mini thumbs, although they don't work (I am told) on lower versions of FF.
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Yeah, anyone still using FF2 will suffer horrible horrible seizures. Luckily Firefox users tend to keep up to date.
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 23, 2009  Professional Traditional Artist
Some people still prefer FF2 though. I remember Eloisa ^Helewidis telling me some stuff don't work for her anymore in FF3... some... scripts... or some such. I can't remember :blushes:

I DO know that upon updating to FF3 that I can't get dAmn to work on my Mac.
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Meh. A few scripts are worth abandoning to upgrade versions. Chances are they've been updated/replaced by now anyhow.

So, no dAmn at all, or do you use Safari too?
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 23, 2009  Professional Traditional Artist
Nope, doesn't work on Safari either. And dA looks dreadful on IE for Mac (why do I even have it).
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
IE for Mac? How old is your computer? :faint:
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 23, 2009  Professional Traditional Artist
I got it June 2007 :P
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Oh, not so bad, but IE? Weird that you have that installed.

(No big deal, just a curiosity. :))
Reply
(1 Reply)
:iconemmejay-fwz:
emmejay-fwz Featured By Owner Apr 23, 2009
An :iconice-creamplz: in return !
Reply
:iconelandria:
Elandria Featured By Owner Apr 23, 2009  Professional General Artist
OM NOM NOM NOM NOM

whatcha gona eat?
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
Microwave burritos.

Yeehaw.
Reply
:iconelandria:
Elandria Featured By Owner Apr 23, 2009  Professional General Artist
Sounds.. yummy.. though I take your word on this having never experienced the phenomenon that is microwaved burritos... ^^
Reply
:iconthespook:
thespook Featured By Owner Apr 23, 2009
It's the kind of food that needs the tomato sauce antidote ;p
Reply
:iconelandria:
Elandria Featured By Owner Apr 27, 2009  Professional General Artist
... again.. I'm totally going to take your word for this lol
Reply
:iconandygassner:
AndyGassner Featured By Owner Apr 23, 2009   Photographer
Love the one with the scrollbar. :0
Reply
:iconvayde:
Vayde Featured By Owner Apr 23, 2009
Awesomeness =)
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 23, 2009  Professional Interface Designer
wow, that sure is nice :D
the first example is great :XD:
Reply
Add a Comment: