Deviant Login Shop
 Join deviantART for FREE Take the Tour
×

:iconthespook: More from thespook




Details

Submitted on
May 27, 2010
Link
Thumb

Stats

Views
2,950 (1 today)
Favourites
27 (who?)
Comments
197
×

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 poisondlo The Ocean I Know by lisawang
Pilcrow by netnessie Brackets by netnessie


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
Add a Comment: