style_system | 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! :)

/**
 * Soft Keys by aprilclydel_ac @ LiveJournal.com
 * http://calvione.livejournal.com, http://evanessencia.net
 */

/* @font-face */

@font-face {
  font-family: 'Delius Unicase';
  font-style: normal;
  font-weight: 400;
  src: local('Delius Unicase'), local('DeliusUnicase-Regular'), url(http://themes.googleusercontent.com/static/fonts/deliusunicase/v6/b2sKujV3Q48RV2PQ0k1vqiiT6GQZqXe56UwGtNcbg_g.woff) format('woff');
}

@font-face {
  font-family: 'Delius Unicase';
  font-style: normal;
  font-weight: 700;
  src: local('Delius Unicase Bold'), local('DeliusUnicase-Bold'), url(http://themes.googleusercontent.com/static/fonts/deliusunicase/v6/7FTMTITcb4dxUp99FAdTqLrq9kGEa_BMz9YVDYs3nGY.woff) format('woff');
}

@font-face {
    font-family: 'TuffyRegular';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.svg#TuffyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyItalic';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.svg#TuffyItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyBold';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.svg#TuffyBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyBoldItalic';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.svg#TuffyBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* global & default overrides */

html, body {
	margin: 0;
	padding: 0;
	background-color: #F6F6F6;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

a {
	text-decoration: none;
	color: #10ABA9;
	-webkit-transition: color 0.3s linear;
	   -moz-transition: color 0.3s linear;
	    -ms-transition: color 0.3s linear;
	     -o-transition: color 0.3s linear;
	        transition: color 0.3s linear;
}

a:hover {
	color: #0A7A79;
        text-decoration: 
}

b, strong {
	font-family: 'TuffyBold';
}

i, em {
	font-family: 'TuffyItalic';
}

b i, b em, strong i, strong em, i b, i strong, em b, em strong {
	font-family: 'TuffyBoldItalic';
}

/* wrappers */

#content-outer, #content {
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 950px;
}

/* header */

#header {
	margin: 0 0 15px;
	padding: 30px;
}

.navheader {
	margin: 0;
	padding: 0;
	float: right;
	list-style: none;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.navheader li, .navfooter li {
		margin: 0 5px;
		padding: 5px 50px 5px 15px;
		background-color: #FFF;
		border: #CCC 1px solid;
		display: inline;
		-webkit-border-radius: 30px;
		   -moz-border-radius: 30px;
		    -ms-border-radius: 30px;
		     -o-border-radius: 30px;
		        border-radius: 30px;
		-webkit-transition: box-shadow 0.3s linear;
		   -moz-transition: box-shadow 0.3s linear;
		    -ms-transition: box-shadow 0.3s linear;
		     -o-transition: box-shadow 0.3s linear;
		        transition: box-shadow 0.3s linear;
	}
	
	.navheader li:hover, .navheader li.view, .navfooter li:hover, .navfooter li.viewing {
		-webkit-box-shadow: #CCC 0 0 10px inset;
		   -moz-box-shadow: #CCC 0 0 10px inset;
		    -ms-box-shadow: #CCC 0 0 10px inset;
		     -o-box-shadow: #CCC 0 0 10px inset;
		        box-shadow: #CCC 0 0 10px inset;
	}
	
.title {
	margin: 0;
	padding: 30px 0 0;
	clear: right;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 30px;
}

.subtitle {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	letter-spacing: 15px;
	text-align: center;
}

/* sidebar */

#sidebar {
	margin: 0;
	padding: 0;
	clear: right;
	width: 200px;
	float: right;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.defaultuserpic {
	margin: 0 auto;
	padding: 5px;
	width: 70px;
	height: 70px;
	background-color: #FFF;
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
		-ms-border-radius: 40px;
		 -o-border-radius: 40px;
			border-radius: 40px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.defaultuserpic img {
		margin: 0 auto;
		width: 70px;
		height: 70px;
		-webkit-border-radius: 35px;
		   -moz-border-radius: 35px;
			-ms-border-radius: 35px;
			 -o-border-radius: 35px;
				border-radius: 35px;
	}

.sbarlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbarbody, .sbarbody2 {
	margin: 0 0 15px;
	padding: 15px 10px;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}

.sbartitle {
	margin: 0 0 5px;
	padding: 0;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 20px;
}

.sbarcontent {
	margin: 0;
	padding: 0;
}

.sbaritem {
	margin: 2px 0;
	padding: 5px 15px;
	background-color: #FFF;
	border-color: #CCC;
	border-width: 0 1px 1px 0;
	border-style: solid;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 11px;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}

.sbaritem:hover {
	border-width: 1px 0 0 1px;
}

#sidebar_calendar {
	display: none;
}

.tagcloud {
}

/* maincontent */

#maincontent {
	margin: 0 215px 0 0;
	padding: 0;
}

.subcontent {
	margin: 0;
	padding: 5px;
	background-color: #FFF;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.userpic, .userpicfriends, .datesubject {
	float: left;
}

.datesubject {
	margin: 0;
	padding: 5px;
}

.date {
	margin: 0;
	padding: 2px;
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.subject {
	margin: 0;
	padding: 5px;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 30px;
}

.subject a {
	}

.userpic, .userpicfriends {
	margin: -25px 0 0 -25px;
	padding: 10px;
	width: 100px;
	height: 100px;
	text-align: center;
	color: #FFF !important; 
	background: #FFF !important;
	-webkit-border-radius: 60px;
	   -moz-border-radius: 60px;
	    -ms-border-radius: 60px;
	     -o-border-radius: 60px;
	        border-radius: 60px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.userpic img, .userpicfriends img {
		width: 100px;
		height: 100px;
		-webkit-border-radius: 50px;
		   -moz-border-radius: 50px;
		    -ms-border-radius: 50px;
		     -o-border-radius: 50px !important;
		        border-radius: 50px;
	}
	
	.userpicfriends a {
		margin: -120px 0 0;
		padding: 5px;
		position: relative;
		background-color: #10ABA9;
		float: left;
		z-index: 200;
		font-family: 'TuffyRegular', sans-serif;
		font-size: 11px;
		color: #FFF;
		-webkit-transition: background-color 0.3s ease;
		   -moz-transition: background-color 0.3s ease;
		    -ms-transition: background-color 0.3s ease;
		     -o-transition: background-color 0.3s ease;
		        transition: background-color 0.3s ease;
	}
	
	.userpicfriends a:hover {
		background-color: #0A7A79;
	}
	
	.userpicfriends font {
		color: #FFF !important;
	}

.entry {
	margin: 0;
	padding: 10px;
	clear: left;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	line-height: 1.75;
}

.entry_text {
	text-align: justify;
}

.ljtags {
	margin: 30px 0 0;
	padding: 15px 15px 0;
	background-color: #E9E9E9;
	-webkit-border-radius: 30px 30px 0 0;
	   -moz-border-radius: 30px 30px 0 0;
	    -ms-border-radius: 30px 30px 0 0;
	     -o-border-radius: 30px 30px 0 0;
	        border-radius: 30px 30px 0 0;
}

.currents {
	margin: 0;
	padding: 0 15px 15px;
	background-color: #E9E9E9;
	-webkit-border-radius: 0 0 30px 30px;
	   -moz-border-radius: 0 0 30px 30px;
	    -ms-border-radius: 0 0 30px 30px;
	     -o-border-radius: 0 0 30px 30px;
	        border-radius: 0 0 30px 30px;
}

/** Do you tag your entries or do you not?
 * You told me once but I forgot.

.ljtags {
	display: none;
}

.currents {
	margin: 30px 0 0;
	padding: 15px;
	background-color: #E9E9E9;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}*/

.comments {
	margin: 0;
	padding: 10px;
	text-align: right;
}

.skiplinks {
	margin: 0 0 30px;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	text-align: center;
}

.separator {
	margin: 0;
	padding: 50px 0 0;
}

.year {
	margin: 0;
	padding: 0;
	list-style: none;
}

.year li {
		display: inline;
		font-family: 'Delius Unicase', sans-serif;
		font-size: 20px;
	}

/* comments */

.box {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.commentbox {
	margin: 15px auto;
	padding: 15px;
	background-color: #FFF;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
	border-radius: 30px;
}

.datesubjectcomment {
	margin: 0;
	padding: 5px 5px 15px 5px;
	border-bottom: #CCC 1px solid;
}

.userpiccomment {
	margin: 10px;
	padding: 0;
	width: 70px;
	height: 70px;
	float: right;
	-webkit-border-radius: 35px;
	   -moz-border-radius: 35px;
	    -ms-border-radius: 35px;
	     -o-border-radius: 35px;
	        border-radius: 35px;
}

.commentreply {
	margin: 0;
	padding: 15px 5px 5px;
	line-height: 1.5;
}

/* footer */

#footer {
	margin: 30px auto 0;
	padding: 0;
}

.navfooter {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

/* input & output */

code, kbd, tt, pre {
	font-family: 'Courier New', 'Courier', monospace;
}

input, textarea, {
	padding: 5px;
	background-color: #F6F6F6;
	border: none;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

button, input[type="submit"], input[type="button"] {
	border: #10ABA9 1px solid;
}

button {
}

/* tiny icons
   Generated by Malionette's Tiny Icon Generator 
   http://malionette.net/generator/tinylite.html */

span.i-ljuser img[src*="img/userinfo.gif"] {
	width: 0 !important;
	height: 0 !important;
	background: transparent url(http://i.imgur.com/C6ttE.png) no-repeat !important;
	padding: 16px 0 0 16px !important;
}

span.i-ljuser img[src*="img/community.gif"] {
	width: 0 !important;
	height: 0 !important;
	background: transparent url(http://i.imgur.com/TYhJj.png) no-repeat !important;
	padding: 16px 0 0 16px !important;
}

/* extra */

.clear, .clearfoot {
	margin: 0;
	padding: 0;
	height: 0;
}

.clear {
	clear: left;
}

.clearfoot {
	clear: both;
}

::-webkit-selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

::-moz-selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

::selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

.entry img { max-width: 600px; !important;
}

Dreamwidth style system discussion

Icons for metadata

Icons for metadata

no subject

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags