[personal profile] rise posting in [community profile] style_system
i was tweaking my own journal layout today out of boredom, and i think i've figured out a workable way to customize the triangles for expanding cut tags. here's how i did it:

/*--- custom tag expansion icons ---*/

img[src*="collapse.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i54.tinypic.com/2z7lfk1.png) no-repeat scroll 0 0;
}

img[src*="expand.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i51.tinypic.com/33cykh3.png) no-repeat scroll 0 0;
}

img[src*="collapse-end.gif"] {
width: 0;
height: 0;
padding: 14px 15px 0px 0px !important;
background: transparent url(http://i55.tinypic.com/2s9owoz.png) no-repeat scroll 0 0;
}


just in case the names aren't self-explanatory: "collapse.gif" is the image shown when the cut tag is not yet expanded. once expanded, "expand.gif" takes its place, and "collapse-end.gif" appears at the end of the cut area. it isn't that drastically different from replacing site icons with custom tinyicons, where the original image is reduced to 0x0, the new image is set as its background, and the object padding is set to the same as or just little bigger than the dimensions of the new image.

i think would probably work well in many layouts to switch to slightly different images on hovering over the originals, to give some visual clue to users that the images are clickable. for instance, instead of what i've done, you could use pacman tinyicons for expand and collapse, and use an animated chomping pacman on hover to indicate clickability. here's a pseudo-css of what that might look like:

img[src*="collapse.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/static-closed-circle.gif) no-repeat scroll 0 0;
}

img[src*="collapse.gif"]:hover {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/animated-chomping-pacman.gif) no-repeat scroll 0 0;
}

img[src*="expand.gif"], img[src*="collapse-end.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/static-openmouthed-pacman.gif) no-repeat scroll 0 0;
}

img[src*="expand.gif"]:hover, img[src*="collapse-end.gif"]:hover {
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
background: transparent url(http://fictional.image.host/animated-chomping-pacman.gif) no-repeat scroll 0 0;
}


what do you all think?

Date: 2011-07-14 03:37 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
I think that's pretty nifty!

Profile

Dreamwidth style system discussion

April 2025

S M T W T F S
  12345
6 78910 1112
13 141516171819
2021 2223242526
27282930   

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 11th, 2025 02:55 pm
Powered by Dreamwidth Studios