Icons for metadata
Sorry if this has been covered before; I came here looking for a way to style the class-less metadata items individually and found no answer, so I wrote a small hack. Posting here for my own reference and in case anyone else finds it useful. I'm on a basic account.
->
The problem is that the location/music/mood metadata items have no type-specific classes, so there's no easy way to style them by type if you want to give them icons.
The general idea of the fix is:
1. Put your icon for music on .lj currents li. Set it as bg image and add some padding to make room for it.
2. Put your icon for location on .lj-currents .entryMetadata-content a (location is the only metadata that has an anchor afaik). You also need to add the following properties:
/* pseudocode */
background-color: [same colour as whatever bg is visible behind the element];
background-repeat: no-repeat;
display: block;
margin-left: [some negative number to pull your icon left if it's on the left of the text];
margin-right: [same as above, if your icon's on the right];
padding-left: [at least the width of your icon, if it's on the left];
padding-right: [same as above, if icon is on the right];
height: [at least the height of your icon];
So you're covering up the music icon with the location icon.
3. Do the same with the mood icon, except this time your selector is .lj-currents .meta-mood-img. You/your users must be using a mood theme, or the element you need won't exist. Which moodtheme does not matter as you're hiding it anyway.
In that ruleset, replace the moodtheme icon with your own the same way you replace userheads: set width/height to 0, and add padding to accommodate your background-image.
You have to mess around finding correct padding/margin numbers for each item to get them to line up, but it seems to work. Let me know if you got any issues/improvements.
->
The problem is that the location/music/mood metadata items have no type-specific classes, so there's no easy way to style them by type if you want to give them icons.
The general idea of the fix is:
1. Put your icon for music on .lj currents li. Set it as bg image and add some padding to make room for it.
2. Put your icon for location on .lj-currents .entryMetadata-content a (location is the only metadata that has an anchor afaik). You also need to add the following properties:
/* pseudocode */
background-color: [same colour as whatever bg is visible behind the element];
background-repeat: no-repeat;
display: block;
margin-left: [some negative number to pull your icon left if it's on the left of the text];
margin-right: [same as above, if your icon's on the right];
padding-left: [at least the width of your icon, if it's on the left];
padding-right: [same as above, if icon is on the right];
height: [at least the height of your icon];
So you're covering up the music icon with the location icon.
3. Do the same with the mood icon, except this time your selector is .lj-currents .meta-mood-img. You/your users must be using a mood theme, or the element you need won't exist. Which moodtheme does not matter as you're hiding it anyway.
In that ruleset, replace the moodtheme icon with your own the same way you replace userheads: set width/height to 0, and add padding to accommodate your background-image.
You have to mess around finding correct padding/margin numbers for each item to get them to line up, but it seems to work. Let me know if you got any issues/improvements.