Journal CSS: Mini-thumbs (CSS is broken!)

20 min read

Deviation Actions

update on Dec 2018 (wtf): don't ask why, but this seems to be working again? I didn't do anything, so maybe it was a browser bug... or who knows.
update on August 16, 2013: The CSS shown below stopped working a long time ago, but I have got it working again here. I haven't update the tutorial just yet, but you can steal the CSS from the test journal if you know how :)




So. A while back I shared a method for creating dropdown/hover menus, and taking inspiration from the menu wroth would have in his journals, I devised a way to include thumbs within the menus too.


...problem was though, you needed to have Firefox 3 for it to work right (should work in other modern browsers too), and now, here we are, in all our display: inline-block glory :D

inline-block is awesome because it lets us create elements that behave like blocks, and like inline elements. In other words, we can control their width/height and padding in all directions, and we can align them using the normal text-align values - pretty much how images act, so no more having to use awkward floats.

The next cool thing going on is that no extra HTML is required - aside from a wrapping div all you have to do is throw :thumbs###: at it. I wont go into too much detail, but in short, whenever you paste in a thumb code, deviantart will replace that with a bunch of HTML, and by hijacking some of this HTML, we can create the effect you see above without any extra HTML.

Das HTML:
<div class="minigal">
  :thumb####: :thumb####: :thumb####: :thumb####: ...etc
</div>


Das CSS:
.minigal{margin: 0 55px 55px 55px}
.minigal .shadow{background-image: none!important}
.minigal a{
  display: inline-block;
  width: 50px!important;
  height: 50px!important;
  overflow: hidden;
  border: solid #fff;
  background: #fff;
  border-width: 10px 5px 5px 5px;
  outline: 1px solid #ccc
}
.minigal img{margin:-20px -50px;max-width:none!important;}

.minigal a:hover{
  border-color: #000!important;
  outline: 1px solid transparent!important
}
.minigal a:hover img{
  z-index: 999;
  position: absolute;
  margin: 0 0 0 -30px;
  border: 10px solid #000
}


Das Customisation
The first line, .minigal{margin: 0 55px 55px 55px} gives the block of thumbs enough space around them so that the thumbs don't pop out of the journal. You might be able to get away with removing this line, just check first.

The colour values throughout the code can be changed to anything you like (so long as it's tasteful ;p) but just note that the last two blacks (#000) are the hover colour for the thumbs, normally these should be the same colour, but you could try playing around with different combinations.



Finally, margin: 0 0 0 -30px; in .minigal a:hover img{...} at the end there is to shift the big/normal thumb back to be flush with the left side of the small thumb. Make the value bigger to bring it back further if you like:



Hopefully by now you've noticed why there's that extra space above the mini-thumbs, making them look almost like upside-down polaroids - it's so that you can move to the next thumb! Without it, the next thumb would often be covered, and you'd only be able to move to the second next thumb.

Lately I've noticed a lot of people removing that little tab above the thumbs. While that's up to them to decide, and I'll admit it makes them look all pretty in a grid... as a visitor, as a user, it bugs the heck out of me.

This is actually how I originally designed the mini-thumbs to behave, but I found it annoying as hell to use. It was hard to move to the next thumb, and generally it felt unintuitive, almost like I had to fight with it.

Really it's up to you, I'm not going to force people to do it 'my' way, but before you go and annoy me, play around with the grid below and see how it feels. :)




One variant I've seen floating around, and I've forgotten where I first saw it (though I will update this when I remember it was ahedrick201! :)) adjusts the thumb size an the hovered position in such a way that it works just fine without the top tab. If you're going to drop the border and top tab, this would be the way to do it right:



The CSS for this version is as follows:
.minigal .shadow {
  background-image:none!important;
}
.minigal a {
  display:inline-block;
  width:63px!important;
  height:63px!important;
  line-height:63px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.minigal a img {
  position:absolute;
  top:-10px;
  left:-20px;
}
.minigal a:hover {
  overflow:visible;
  z-index:99;
  border:none;
}



Das caveats
Doesn't play nice with certain kinds of thumbs like some pixel art (emotes particularly), Lit (untested actually, but Lit would be ill-suited anyhow) and tall narrow thumbs like tutorials.

Enjoy - and if you have any questions or requests, drop a comment below, eh? :thumbsup:


Published:
© 2010 - 2021 nichtgraveyet
Comments198
Join the community to add your comment. Already a deviant? Log In
Goodnight-Melbourne's avatar
Not working :/ 
pasted the css in skin and typed the html in the journal. But the thumbs are showing as normal thumbs between visible < div class="minigal" > < /div > tag (excluding space). No effect nothing.
nichtgraveyet's avatar
Ah, an easy fix - to put HTML into the new rich editor you have to switch it over to HTML view first. It's in the Edit menu :thumbsup:
Goodnight-Melbourne's avatar
Okay that part is solved then. Thanks. But something is still not right. When hovered over, the images are getting larger at height only, not width. Looking weird.
nichtgraveyet's avatar
Oh man, I'm sorry - I didn't realise you were using the old CSS from this journal, it's been broken for years. I got it working again a while back, styled a little different - thespook.deviantart.com/journa… - so if you know how to view-source you can get it that way, but aside from that I can't give much more support.

:peace:
Goodnight-Melbourne's avatar
Sorry for the so late reply. I even forgot what the problem was.
Anyways, thank you for clearing it out.
live-inspired's avatar
Copied the text provided for the example by ahedrick... however, on hover, it allows the image to get larger vertically, but remains the same width. So if you hover the thumbnail gets taller, but not proportionately wider.
nichtgraveyet's avatar
You haven't given me enough information to help you. I tried looking up ~ahedrick, but their profile is empty. I checked your journals for a thumb gallery, but there's nothing. I'm flying blind without the CSS in question :)
Eraili's avatar
Aww I loved those mini thumbs ^^"
But sadly they also won't work on Google chrome :(
nichtgraveyet's avatar
As far as I can tell they haven't worked in any browser for a year or more. I'm going to get around to fixing them sometime, but I don't know when I'll get my mojo back :shrug:

:peace:
Eraili's avatar
Yeah sadly ^^"
Let's just see~
Forty-Fathoms's avatar
Every time I use the code, they automatically center themselves. I would like them how they appear when you gave the example of how the colors work, you know being next to each other, not centered. I tried using the div align left but it didn't work.
nikki-ns's avatar
Thank you so much for this!
nichtgraveyet's avatar
You're welcome, but, err, is it working correctly for you? It's been broken for a while and I've yet to fix it :confused:
nikki-ns's avatar
Yup! Just changed the CSS on my most recent journal entry. What's not working correctly for you? If it helps, I use float: left and I use :iconfirefoxplz:
nichtgraveyet's avatar
When you hover the thumbs they make the layout jiggle all over the place as the thumbs bump into each other. That's not how it's meant to look :lol: - when you hover a thumb it should overlap the surrounding content without bumping everything around.

Either Firefox changed how it handles some of the CSS I used, or deviantart updated their CSS and caused a conflict. I've been lazy and haven't investigated, but I'll get around to it.
nikki-ns's avatar
This was the best I could do, and the only reason I was able to do this was to modify the last block of code you provided: [link]
nikki-ns's avatar
Oooooooo, didn't know that. If I figure something out, I'll let you know.
moofestgirl's avatar
I used the script in my current journal as well. You're credited at the bottom of the left scroll column! Thanks for the great code!~ ^^
nichtgraveyet's avatar
You're welcome :)

Mind if I ask why you made your journal fixed height?
moofestgirl's avatar
Because I tend to write A LOT of stuff like updates, giveaways and my next project. This way I don't have to try and consolidate my journal, I can write as much as I want and it doesn't stretch my page to the ends of the earth. ...That's also why I made the font size relatively small xp
TheRedRidingHood's avatar
I used the last css in my journal: [link]


It seems it's giving some troubles in Explorer (not in Mozilla)
In my homepage I cannot see the minithumbs (I can clearly see them in the journal page)

What can this be owed to?

Thanks for sharing!
nichtgraveyet's avatar
The problem with IE is kinda complicated, but I'll try to explain it simply.

Old versions of IE only support CSS :hover on links, and nothing else. The latest versions support it properly (IE7+ I think), but deviantART forces all versions of IE to behave in the same (old, broken) way. They do this to simplify the maintenance of the site (easier to take care of 'one' IE, instead of IE5.5, IE6, IE7, IE8 all separate), but it means some advanced journal CSS tricks wont work, or will be buggy.
TheRedRidingHood's avatar
Thanks for giving a look. However I think the majority of people can see it properly!
Join the community to add your comment. Already a deviant? Log In