Journal CSS: Image list - updt!

10 min read

Deviation Actions

nichtgraveyet's avatar
Published:
64 Comments
2K Views
update update: note that this wont work in IE - so if you can be bothered you should also link to the deviation (ie using the deviation title) so iediots can still visit the deviations :thumbsup:

update: added ability to nest lists, see example below. Looks a bit ugly, but it's up to you to style it to your taste :)


Hey guys, here's another Journal CSS trick I promised I'd share, a thumb/image list - again, full explanation to come when I finish my Creative Journal CSS tutorial.

The stuff going on in the CSS is a little complicated, but once you customise the colours and sizes you can forget about it. The HTML, as you'll see is nice and simple, so it's not going to be a hassle to use this regularly - it's not much different to what you use daily already.

It's also pretty flexible - any image you place inside a list will get the treatment. You can use thumb code, or image tags. If you use image tags there will be extra work, but it also means the :hover size will be larger - so it's a trade-off you'll have to decide upon.

Because emotes are images too, they'll get the treatment too, not a problem if you don't use emotes, but if you'd like to use emotes you'll need to change the code. Wrapping your images in bold tags, and then changing the selector to imglist b img{...} will do. If you don't know what I'm talking about... eh. Send me a note or wait until I'm done with the tutorial.

I've also added a line of CSS so that if you wrap the image in italic tags the border will be hidden. If you want the border hidden on all images, do this in the CSS properly. I've added the italic trick incase you want to hide the border on things like emotes.

Das fancypants list



  • 5875 by The-Definition 5875 by The-Definition
  • RITE_SAMPLE_PAGE_2--02 by andrescampos RITE_SAMPLE_PAGE_2--02 by andrescampos
  • winter and construction by mutsy winter and construction by mutsy
  • sea turtle by macen sea turtle by macen
  • Big Knobs by bypass2020 :thumb60285660:
  • Mother by bypass2020 :thumb60030623:
  • pacman by Bad-Blood (wrapped in italic tags to remove border) pacman by Bad-Blood
  • l u s h 9 9 . 5 by taow :thumb45886539:
  • example of img tag by nichtgraveyet
  • example of avatar code, kinda pointless, but just 'cause :iconpachunka:
  • It's also possible to nest lists - Just place a list inside a list item! Extra CSS will be needed though, check the box below.
    • 5875 by The-Definition 5875 by The-Definition
    • RITE_SAMPLE_PAGE_2--02 by andrescampos RITE_SAMPLE_PAGE_2--02 by andrescampos
    • winter and construction by mutsy winter and construction by mutsy
    • sea turtle by macen sea turtle by macen
    • Big Knobs by bypass2020 :thumb60285660:
    • Mother by bypass2020 :thumb60030623:
    • pacman by Bad-Blood (wrapped in italic tags to remove border) pacman by Bad-Blood
    • l u s h 9 9 . 5 by taow :thumb45886539:
    • example of img tag by nichtgraveyet
    • example of avatar code, kinda pointless, but just 'cause :iconpachunka:



Das HTML


<div class="imglist">
<ul>
  <li>5875 by :devThe-Definition: :thumb40169790:</li>
  <li> pacman by :devbad-blood: <i>:thumb52735432:</i></li>
  <li><i>example of img tag by :devthespook:</i> <img src="http://tn3-1.deviantart.com/fs17/300W/f/2007/170/3/e/tv_on_grass__by_thespook.jpg" alt="" /></li>
  <li><i>example of avatar code, kinda pointless, but just 'cause</i> :iconpachunka:</li>
</ul>
</div>


Das CSS


Bold red text is bits you can change to customise the look/feel of the list to suit your journal.

If you want to change the default max-width of .imglist img{...}, you'll also have to change the padding of .imglist li{...} to adjust for this.

The position of .imglist img{...} is set to bottom: -10px so that as people move the mouse downwards the next image in the list will pop up unobstructed. You could change it to top: -10px if you so wish, but (to me anyhow) it's kinda annoying to use this way.

The final block of CSS is newly added for the nested lists :thumbsup:

.imglist img{
  display: none;
  position: absolute!important;
  left: 5px;
  bottom: -10px;
  border: 3px solid #ddd;
  max-width: 70px;
  height: auto!important;
  background: #eee
}

.imglist  ul{
  margin: 0;
  padding: 0;
  cursor: default;
  font-size: 11px;
  border: solid #ddd;
  border-width: 2px 0
}

.imglist  li{
  list-style: none;
  margin: 2px;
  padding: 4px 4px 4px 90px;
  position: relative
}

.imglist br{display: none}
.imglist i img{border: 0!important}
.imglist  li:hover{background-color: #eee}
.imglist  li:hover img{display: block; z-index: 999}
.imglist  li img:hover{max-width: 100%!important}
.imglist  li .shadow{background-image: none!important}

.imglist li ul{border: 0; position:absolute; right: -999em; background: #eee}
.imglist li:hover ul{right: 0}
.imglist li:hover li img{display: none}
.imglist li li:hover img{display: block; border-color: #fff}
.imglist li li:hover{background: #fff}


Enjoy.

Any questions - shoot. More to come - might keep it up at one Journal CSS technique per day until the tutorial is finished. :thumbsup:

© 2007 - 2021 nichtgraveyet
Comments64
Join the community to add your comment. Already a deviant? Log In
noxiousone's avatar
Araul94's avatar
Thanks for making this :) explains a lot. But how do you get the big thumbs code? I've searched everywhere for it, I'm not sure how to use it...
nichtgraveyet's avatar
There is no big thumb code, well, not like :thumb###: anyhow. What you can do instead is create your own big thumbs with HTML - copy down the location of the preview of a deviation (the image you get before you full-view) and then use the following template:

<a href="URL TO DEVIATION" title="TITLE by USERNAME"><img src="URL TO PREVIEW IMAGE" /></a>

The title property is optional, but it'd be nice to include it. If you want to center your big thumbs, put them inside a div with align="center" - ie <div align="center">...</div>

:thumbsup:
Araul94's avatar
ah I get it now :) fixed it for my journal :D thanks so much for your help! And for getting back to me so quickly :)
Women-Photos's avatar
Hello!

=ShiraAriel here... I'm the new admin for this club and I have more questions!!

The list: How do I make two (or more) regular lists, no images, without having the second list indented...
I know I'm doing something wrong... Just can't figure out what... help...?
nichtgraveyet's avatar
If the second list is inside the first list, that is, they are nested, then what you need to do is 'undo' the margin-left in the nested list, usually by setting it to 0. If they're not meant to be nested, what might be happening is that you haven't closed the first list, so go make sure there's a closing tag for each list item, and also for the list itself.

When you say there's no images though, I get the feeling you might be building a hover menu instead... in which case my journal Journal CSS: Hover Menus might be of aid. :thumbsup:
Women-Photos's avatar
[link] I think I'm still doing something wrong... Can't quite figure out what... If you have time in the next few days to take a look at it? If not that's totally cool too.

Thank you!
=ShiraAriel
nichtgraveyet's avatar
Ah - the padding is what you'll need to take out :)

.journaltext ul{padding:0} will do the trick :thumbsup:
Women-Photos's avatar
You rock! Thank you!!!!! :D
arhcamt's avatar
awesome. can't wait to try. :D
samthefox996's avatar
i've been wanting to learn bout this =]
nieman's avatar
Berry creative.
animesuva05's avatar
Das HTML


next dA :D
ClaireJones's avatar
This image list code is fantastic! :O I'm going to have to try it very soon. :D
nichtgraveyet's avatar
I just checked out your journal (congrats on the DD :)) - and you might want to check out Journal CSS: Thumb table also. It's a framework for aligning thumbs nicely rather than hiding them away in lists, so it might be preferable for you.

Either way though, I hope you find them useful - drop me a note/comment if you have issues getting it working in your journal.

:thumbsup:
LeonaWindrider's avatar
*drools*
That's sexy CSS. As soon as I update my journal I'll be implementing it and crediting you for your genius :)
xxWrathxx's avatar
where do i place the code.
and which one do i use?
exchanged-stock's avatar
Wow...this is great..I hope one day my Css dufussness will be able to compile this info together...
Thank you for sharing..:heart:
arrioch's avatar
Damn!! Awesome stuff :wow:
I'll try to implement it.. Try.. :slow:
Lilyas's avatar
Hey cool! I also like to jazz up the list styles.
nichtgraveyet's avatar
:)

...I just wish we could give any element a class name, then things could get reaaaly interesting :D
hellfirediva's avatar
ihatemonday's avatar
:clap: very helpfull .. thanks for sharing this :)
Join the community to add your comment. Already a deviant? Log In