Aldro ([personal profile] aldro) wrote in [community profile] style_system2013-05-21 11:46 am
  • Add Memory
  • Share This Entry

Icons for metadata

I would like to replace the standard text of my currents for tiny icons, but I'm not sure what to add to the CSS code. Any help is greatly appreciated! :)

Flat | Top-Level Comments Only

[personal profile] ex_awakened208 2013-05-22 02:07 am (UTC)(link)
Maybe try this code?

.currentlocation strong, .currentmusic strong, .currentmood strong {
display: none; }

.currentmusic {
background: no-repeat url('LOCATION IMG');
padding-left: WIDTH OF IMG; }

.currentmood {
background: no-repeat url('LOCATION IMG');
padding-left: WIDTH OF IMG; }

.currentlocation {
background: no-repeat url('LOCATION IMG');
padding-left: WIDTH OF IMG; }

[personal profile] aldro 2013-05-22 08:39 am (UTC)(link)
As usual, the people in this community are awesome. ;) It works, but I do have a couple of issues.

For one, I can't seem to make it work for the tags. The icon is either aligned wrong or the grey background disappears. Secondly, the alignment of the other tiny icons is a bit off. I'm not sure what to change to get everything right.

[personal profile] ex_awakened208 2013-05-22 09:03 am (UTC)(link)
Hmm, it looks like the tags area won't through a background url because it's already using the background attribute for the gray background behind it. This is the closet thing I can think of for the tags:

.ljtags:before {
content: url('IMAGE URL'); }

When you say alignment, do you mean horizontally or vertically? I can visibly see a difference in horizontal alignment but I think it's caused by, for example, the music note being smaller than the house within their image files, even though the image files themselves are 16x16 wide each.

[personal profile] aldro 2013-05-22 09:08 am (UTC)(link)
The icon for the tags now shows up nicely, but I can't seem to get rid of the tag text.

When I say alignment, I mean horizontally. I got these icons after seeing them on someone else's journal, where the alignment looked fine. Would it make a difference if I used other icons?

[personal profile] ex_awakened208 2013-05-22 09:27 am (UTC)(link)
Yeah, that's the thing about Flexible Squares. The tag label has no class to identify it by. There's a way around it, but it gets rid of all of the non-link text. Some people use gaps to separate the tags instead. Here's the code if you're okay with that/want to try it out.

.ljtags {
font-size: 0px; }

.ljtags a {
font-size: 10.5px;
padding-right: 10px; }

Hmm, I can't imagine why it would show up differently. Maybe if I had a screenshot of what you're currently seeing and a screenshot of what you'd like it to be, I could try to figure out why.

Alternatively, there is a theme layer code for replacing the text with icons without css, one that actually eliminates the tags label without having to try to work around it. Here's the code, if you're interested.

I'm sorry, I wish I could be of more help!

[personal profile] aldro 2013-05-22 09:47 am (UTC)(link)
I tried the workaround and that seems to do the trick without anything else looking off. :)

I have a couple of screenshots. The first one is what I am seeing in my journal, the second one is what I would like it to be as the icons seem to look nicely aligned with the text.

Screenshot 1: Voorbeeld02 photo Untitled-2.jpg

Screenshot 2: Voorbeeld01 photo Voorbeeld.jpg

[personal profile] ex_awakened208 2013-05-22 10:08 am (UTC)(link)
I think I understand what you're looking for but I can't seem to make it look consistent while I'm testing it out. I'm sorry.

[personal profile] aldro 2013-05-22 10:14 am (UTC)(link)
That's okay, you're already golden for your help so far. Thank you! :)

[personal profile] ex_awakened208 2013-05-22 11:11 am (UTC)(link)
You're welcome~
Flat | Top-Level Comments Only