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

August 2017

S M T W T F S
   12345
6789101112
13141516171819
20212223242526
2728293031  

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 20th, 2017 07:01 am
Powered by Dreamwidth Studios