Shop Mobile More Submit  Join Login

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

Journal Entry: Thu May 27, 2010, 6:06 PM
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 :)


DELETED SCENES 6 - Hal 9000 by graffd02 Hellboy by GabeFarber Leadenhall Street Market by Jez92 Girona II by Jez92 Snowdon I by Jez92 Free Your Mind by Fenderbabe16 Change by the Time by hilmanfajar octopus 2 by automaticsourpopcorn "FREE"REWORKED by bmessina :thumb78711461: my CITY by nichangell Balance by quasilucid galaxy quest 1,01 by iliaskrzs Okami-Wallpaper size by ashiong Floralcosm III - tone by wroth :thumb79984382: Beach mecha by agnidevi Bird Shit, Rust and Paint by tExTuReMaTtIc the doctor is in by NickTassone Cheap Labor by avotius Entanglement. by jack22 Tony The Astronaut by Karelias PF Blanka by UdonCrew Remake Propaganda by Alcove Spectacle by s9 pepper pilot by spx


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.

Heartbreaking Normalcy. by jack22 Hellboy by GabeFarber Leadenhall Street Market by Jez92 Girona II by Jez92


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:

Tony The Astronaut by Karelias PF Blanka by UdonCrew Remake Propaganda by Alcove Spectacle by s9


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. :)


Heartbreaking Normalcy. by jack22 Hellboy by GabeFarber
Leadenhall Street Market by Jez92 Girona II by Jez92 Snowdon I by Jez92
Free Your Mind by Fenderbabe16 Change by the Time by hilmanfajar octopus 2 by automaticsourpopcorn


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:

18216 by The-Definition Temptation by akyra
Fence in snow by Jez92 Heart Wire by VexingArt From Beneath You by kuschelirmel
5278 by shesaghost chainsaw maid fanart by liuyangart The Ocean I Know by lisawang
:thumb90041750: :thumb90041778:


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:


  • Mood: Happy
Add a Comment:
 
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Edited Jun 17, 2014   Traditional Artist
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.
Reply
:iconthespook:
thespook Featured By Owner Jun 17, 2014
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:
Reply
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Jun 18, 2014   Traditional Artist
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.
Reply
:iconthespook:
thespook Featured By Owner Jun 19, 2014
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:
Reply
:iconlive-inspired:
live-inspired Featured By Owner Nov 28, 2013  Student Digital Artist
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.
Reply
:iconthespook:
thespook Featured By Owner Nov 29, 2013
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 :)
Reply
:iconeraili:
Eraili Featured By Owner May 11, 2012  Hobbyist Digital Artist
Aww I loved those mini thumbs ^^"
But sadly they also won't work on Google chrome :(
Reply
:iconthespook:
thespook Featured By Owner May 11, 2012
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:
Reply
:iconeraili:
Eraili Featured By Owner May 15, 2012  Hobbyist Digital Artist
Yeah sadly ^^"
Let's just see~
Reply
:iconforty-fathoms:
Forty-Fathoms Featured By Owner Feb 28, 2012  Professional General Artist
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.
Reply
:iconnikki-ns:
nikki-ns Featured By Owner Jul 6, 2011  Hobbyist Digital Artist
Thank you so much for this!
Reply
:iconthespook:
thespook Featured By Owner Jul 7, 2011
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:
Reply
:iconnikki-ns:
nikki-ns Featured By Owner Jul 7, 2011  Hobbyist Digital Artist
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:
Reply
:iconthespook:
thespook Featured By Owner Jul 7, 2011
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.
Reply
:iconnikki-ns:
nikki-ns Featured By Owner Jul 7, 2011  Hobbyist Digital Artist
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]
Reply
:iconnikki-ns:
nikki-ns Featured By Owner Jul 7, 2011  Hobbyist Digital Artist
Oooooooo, didn't know that. If I figure something out, I'll let you know.
Reply
:iconmoofestgirl:
moofestgirl Featured By Owner Feb 18, 2011  Hobbyist Artisan Crafter
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!~ ^^
Reply
:iconthespook:
thespook Featured By Owner Feb 18, 2011
You're welcome :)

Mind if I ask why you made your journal fixed height?
Reply
:iconmoofestgirl:
moofestgirl Featured By Owner Feb 18, 2011  Hobbyist Artisan Crafter
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
Reply
:icontheredridinghood:
TheRedRidingHood Featured By Owner Oct 14, 2010  Hobbyist General Artist
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!
Reply
:iconthespook:
thespook Featured By Owner Oct 14, 2010
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.
Reply
:icontheredridinghood:
TheRedRidingHood Featured By Owner Oct 14, 2010  Hobbyist General Artist
Thanks for giving a look. However I think the majority of people can see it properly!
Reply
:icontheredridinghood:
TheRedRidingHood Featured By Owner Oct 14, 2010  Hobbyist General Artist
Oh, an error, the journal skin contained a previous version of minigal (credited).

Now the problem is in Mozilla... when you go over the minithumb with the mouse the preview appears thinner....
Reply
:iconsadistikid:
sadistikid Featured By Owner Sep 23, 2010  Hobbyist Digital Artist
I used this awesome script on my journal..
[link]
Reply
:iconvirus-ac:
Virus-AC Featured By Owner Jun 4, 2010  Professional Digital Artist
I love this and I used it in my journal!!
Reply
:iconthespook:
thespook Featured By Owner Jun 13, 2010
Looks great in that wide format :)

You might want to adjust the negative margin on the .minigal a:hover img{...} to -45px though, so that the popup image lines up with the 'box' :thumbsup:
Reply
:iconvirus-ac:
Virus-AC Featured By Owner Jun 15, 2010  Professional Digital Artist
ah Thank you for the tips!!!
Reply
:iconelisa-pinna:
Elisa-Pinna Featured By Owner May 28, 2010
Hi I used this cool CSS code in my journal here [link]
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 28, 2010
Do you have any idea why the mini thumbs look squeezed in a journal, but not for the preview? Or am i the only one that has this problem?
Reply
:iconthespook:
thespook Featured By Owner May 31, 2010
Okay, with the help of FireBug I found the problem.

dA was putting a max-width on images contained in journals. I forget the exact rule they use, but if you apply .shadow img{max-width:none!important} it'll fix the mini-thumbs :)
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 3, 2010
Will try that next time :hug:

Thank you!
Reply
:iconthespook:
thespook Featured By Owner May 31, 2010
Thanks for reminding me, I forgot about that :lol:

Since it's a new change, and the preview doesn't have the problem, it's probably some new CSS in dA's stylesheet. I'll look into it now.
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 31, 2010
For me it seems now like it was fixed. Maybe they changed things again. During the last time i had no problems with it anymore :confused:
Reply
:iconneurotype:
neurotype Featured By Owner May 25, 2010  Hobbyist General Artist
Drat, I was hoping for a way to hide most of the image without having to use the totally not allowed crop tag....

I did find a way to make it work for literature. You modify the 'a' to hide overflow (currently testing it on my journal, where it looks very silly).
Reply
:iconthespook:
thespook Featured By Owner May 27, 2010
Hide it how so? I see you've been experimenting in your journal... have you sorted it out yourself?

Nice work with the Lit btw, I never even tried it :lol:
Reply
:iconneurotype:
neurotype Featured By Owner May 27, 2010  Hobbyist General Artist
Oops, nevermind. The hover display does work, but it looks really bad for Lit....
Reply
:iconneurotype:
neurotype Featured By Owner May 27, 2010  Hobbyist General Artist
Basically, like the crop tag does--where 50 pixels of the full image show, without actually resizing anything. I got the resizing thing down (although I can't get the full display on hover :ohnoes:), I just thought there was a deviantArt-friendly way to crop.

Thanks!
Reply
:iconreverseg:
reverseg Featured By Owner Feb 23, 2010  Professional Interface Designer
Amazing code! Thank you for your creativity!

However, I've got a particularly pressing problem.

I tried this code on a journal, and it worked fine during the previews; however, upon publishing it, I ended up with the non-hover thumbnails fully squished into the dimensions I had set for the preview. This only happens when I am on the journal page - on the front page and preview windows, this does not happen.

Any ideas? I'm quite perplexed.
Reply
:icondredmix:
Dredmix Featured By Owner Dec 6, 2009  Student Digital Artist
I wish i could find this sooner..
Reply
:iconcatastrophe-designs:
catastrophe-designs Featured By Owner Nov 20, 2009
Thanks so much, very helpful. :hug:
Reply
:iconknightofthemoonlight:
hey,I'm trying to this mini gal code but I'm having problems

instead of rows,mine are forming into a long column...which kinda look crappy. Do you have an idea why it happens?

I hope you response to this

thanks in advance :)
Reply
:iconthespook:
thespook Featured By Owner Nov 14, 2009
Can you link me to a journal where this is happening? :)

There are some problems with the code that I need to fix for new versions of Firefox (the thumb position is wrong when you hover), but funny business with row/columns isn't one I've seen yet.
Reply
:iconknightofthemoonlight:
Hey,thank you for the response :)

I'm not sure if its my screen or something but when I view my journal from the front page,the thumbs seems to form columns. But if I view it by clicking ';previous journals' link, it seems to be arrange
Reply
:iconthespook:
thespook Featured By Owner Nov 15, 2009
If they're wrapping onto columns on your userpage, but going back into rows in full view, that's what they're meant to do when there isn't enough space - just like when text wraps onto new lines :)
Reply
:iconknightofthemoonlight:
I see :) as I thought so.

thanks for the help spook!:)
Reply
:iconhippopottermiss:
Hippopottermiss Featured By Owner Oct 1, 2009  Professional Artisan Crafter
:clap: congrats & nice idea :D
Not sure I'm savvy enough to use it though :(
Reply
:icon2dazed:
2dazed Featured By Owner Jun 9, 2009  Hobbyist Artisan Crafter
Very nice friend! :heart:
Reply
:iconjenepooh:
jenepooh Featured By Owner Jun 8, 2009  Hobbyist General Artist
:clap: I am so thrilled this is working. I am going to give it a go sometime soon. Definitely saves space in a journal lol.
Reply
:iconcolliemom:
Colliemom Featured By Owner Jun 8, 2009  Hobbyist Digital Artist
:clap:
Reply
Add a Comment:
 
×

:iconthespook: More from thespook


Featured in Collections

JOURNAL-SKINNED by Cre8aRt4LifE




Details

Submitted on
May 27, 2010
Link
Thumb

Stats

Views
3,397 (1 today)
Favourites
28 (who?)
Comments
197
×