deanshot1: (Default)
[personal profile] deanshot1 posting in [community profile] style_system
 Hi there,

I was wondering if there was a way to use Tiny Icon Images instead of  text like Location, Current Music, Mood. 

Any help would be most appreciated. 

Problem Solved

Date: 2017-05-12 07:15 pm (UTC)
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)
From: [personal profile] syntheid
You could add in your CSS something like:

/* this hides the text visually, note this hides it on all of them, so if you want to only replace some headers, make sure to use their specific class like .metadata-label-mood instead of just .metadata-label */
.metadata-label {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
/* this adds a pseudo element to put an image into */
.metadata-label:before {
  content: '';
  display: inline-block;
}
/* these define the image replacements, make sure to use the width/height of your image */
.metadata-label-mood:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}
.metadata-label-music:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}
.metadata-label-location:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}
Edited Date: 2017-05-12 07:17 pm (UTC)

Date: 2017-05-13 05:37 am (UTC)
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)
From: [personal profile] syntheid
Um, it looks like tags are not part of metadata, so the structure's slightly different. But you should be able to:

Profile

Dreamwidth style system discussion

June 2017

S M T W T F S
    123
4 567 8910
111213 14151617
18192021222324
252627282930 

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 23rd, 2017 05:27 pm
Powered by Dreamwidth Studios