replacing the cut-expansion triangles with other images

[rise]

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?

Comments

[onyxlynx]

Neat!

[afuna]

That works, and is quite cool!

It's also made me realize that the cut tag controls are lacking some classes. I thought that the above could be done using just existing classes (.cuttag .cuttag-action img for closed, .cuttag-open .cuttag-action img for open), but I just realized that there's no way to distinguish between starting and ending arrow, so I've gone and filed a bug to make that possible.

[turlough]

Awesome!! I tried messing around with the those triangles a while ago but never got it to work as I wanted it to. *bookmarks*

[adalger]

I think that's pretty nifty!

[blacklungs]

Hello! I am using a custom layer, and using a livejournal layout (flexible squares). Is there a chance you might know why this isn't working on such layouts?

I have hidden the whole thing on other accounts with an imported LJ layout with this:

.cuttag {display: none;}

.cuttag_container {display: none;}

But it doesn't seem to work anymore.