Transmogrified - Metadata

[okinay]

Does anyone have the secret code that will allow you to reorder meta/tags and move the mood pic to the left of the info group? I've searched through a few comms but can't find anything on this yet.

This is what I'm aiming for ...



Any help would be greatly appreciated!

Comments

[kaigou]

I don't use these but some folks on my flist do, so I looked through for how the CSS looks in realz. Slightly truncated on img line, cutting info not relevant here.

<div class="metadata">
    <ul>
        <li>
            <span class="metadata-label metadata-label-mood">how: </span>
            <img src="pissedoff.png">
            <span class="metadata-item metadata-item-mood">pissed off</span>
        </li>
    </ul>
</div>


Looks like to me what you want to work with is .metadata img, so long as it's pretty definitive that the mood-image is the only instance we'll ever trip over a case of 'img' inside the 'metadata' div. In that case, maybe:

.metadata img { float: left; }

though I'm not certain that would work, it's worth a try. Alternately, give it a position to the left of the metadata info, like so:

.metadata img { margin: 0 0 0 -40px; }

Although if someone's image is significantly larger or smaller, this may end up with overlap. The way I get around that kind of nonsense is by limiting it, like so:

.metadata img { margin: 0 0 0 -40px; max-width: 40px; }

And maybe add some padding or adjust the top/bottom margins to get it to line up neatly.

[foxfirefey]

Hrm, maybe we should add a class to that image...or an enclosing div...

[kaigou]

What, and undo my awesome hackyness? I live for hacks. That's the part about CSS that's the most fun!

Add a div? Gee, that sounds great! XP

[kaigou]

Okay, to get the image to the left and the text to the right (with note that my layout is already kinda funky anyway), I had to:

.metadata {margin: -40px 0 0 -160px;}
.metadata-label {margin: 0 0 0 90px; }
.metadata img { margin: -20px 0 0 0; float: left; }

The metadata overall sets the area, the metadata-label moves the text to the right, and the image then floats to the left. The problem is that there's not really a decent way to adjust for the fact that metadata images are inconsistent -- you can have what looks like anywhere from little 16x16 gifs up to some fairly big images. I don't know the overall limit, the range is pretty wide.

Given the variation possibilities, I would suspect that without a whole LOT of tweaking, there'll always be someone on your flist whose mood-images break the style. So probably is best to go with a new div for that -- and better yet if the div is outside the metadata ul, like prefacing it or suffixing it, just so the image can then be manipulated fully independently of the metadata:ul chunk.

[okinay]

Thanks for the suggestion ... the pic is now on the left and I tinkered with the padding but all the meta data isn't lining up. I'm a copy/paste kind of gal and when you start talking about divs and whatnot, I am clueless. I'm going to chalk this up to something that is way beyond my comprehension and hope that one day someone will code this as an option to the base layout. Until then, I'll keep playing with it.

[kaigou]

If you don't mind the text being BELOW the image, that's much easier with the existing CSS. That, I did manage to do, but it also helps if you set a max width for the metadata, that is, add:

.metadata {max-width: 100px;}

or whatever size works -- what that'll do is shove any text down because it doesn't have room to stay on the same line. Then play with the margins on the img, say:

.metadata img { margin-top: -20px; }

and play with the margins on the label to push it down, like so:

.metadata-label {margin-top: 40px; }

and that'll move things around. It's not exactly what you were looking for, but it's probably easier for you to play with and get sort of like your request, if not exactly. (I have no idea how long it takes to adjust the layouts to add extra handles for customized CSS, so figured I'd suggest this to try, as well, in the meantime.)

[okinay]

*dances around happily* Your last round of coding worked! I can't tell you HOW MUCH I appreciate your help with this. After playing around with it a bit, I got it to look like I wanted it to.

THANK YOU!

[turlough]

Oh yes, please! (Someday I'm going to try and make my heavily modified FS style DW native and that's one of the things I know I will fiddle with.)