Adding Tiny Icons to Expressive

[sireesanwar]

Account Status: All
Theme: Expressive
Actions: Adding Tiny Icons to Currents (mood, music, location, tags)
Links: Code Index


to

So on some of my Expressive layouts you'll see this:

Current Tiny Icons: I after a lot of digging I think I've discovered that Expressive doesn't give you the ability to have tiny icons next to your currents (mood, location, music, etc). There is a way to do it with Theme Layers in a paid layout but again, I'm not doing this now. If you know differently please comment and tell me because I couldn't get it to work no matter what I did.
Apparently, I lied. Or forgot how to code for a moment. But I figured out how to give you tiny icons on the currents in expressive.

You'll find code like this in those Layouts:
/* mood, music, location */
.lj-currents ul {
padding: 5px;
background-color: transparent !important;
margin: 0px;
font-size: 11px;
font-family: 'Oswald';
letter-spacing: 1px;
color: #EF9D87;
text-align: left;
text-transform: uppercase;
}
.lj-currents ul {margin: 5px 0px; padding:0px; padding-left: 5px;}
.lj-currents li { list-style-type: none; }
.entryMetadata-content {padding-left: 5px;}

Let's Change it to this:
/* mood, music, location Currents */
.lj-currents ul {
padding: 5px;
background-color: transparent !important;
margin: 5px 35px;
font-size: 11px;
font-family: 'Oswald';
letter-spacing: 1px;
color: #004359;
text-align: left;
text-transform: uppercase;
}
.lj-currents ul {margin: 5px 38px; padding:0px; padding-left: 5px;}
.lj-currents ul li { list-style-type: none; margin: 5px 0px; }

.lj-currents ul li span.entryMetadata-content { font-weight: normal!important; padding-left: 5px;}

/*-Location-*/
.lj-currents ul li {
background: url(Location Tiny Icon) no-repeat left center;
padding: 0px 0px 0px 20px;
}

/*-Mood-*/
.lj-currents ul li+li {
background: url(Mood Tiny Icon) no-repeat left bottom;
padding-left: 20px;
}

/*-Music-*/
.lj-currents ul li+li+li {
background: url(Music Tiny Icon) no-repeat left bottom;
padding: 0px 0px 0px 20px;
}

Now let's find the coding for LJ Tags if you want a tiny icon next to that.

This is the lj tag code you'll find in the no tiny icons layout:
/*-ljtags-*/
.asset-tags { list-style-type: none; padding-left: 5px; margin: 10px 0px; }
.asset-tags-header { display: inline; padding: 0px; width: auto; }
.asset-tags-list { display: inline; margin: 5px 0 0 0; padding: 0px; list-style-type: none; }
.asset-tags li { display:inline; color: #444; line-height: 200%; margin: 0px 0px 5px 0px; }

.asset-tags li a {
background-color: transparent;
color: #EF9D87;
padding: 1px 0px 3px 0px;
border-top: 1px solid #EF9D87;
border-bottom: 1px solid #EF9D87;
}

.asset-tags li a:hover {
color: #009A7C;
border-top: 1px solid #009A7C;
border-bottom: 1px solid #009A7C;
}

And we will change it to this coding:
/*-ljtags-*/
.asset-tags { list-style-type: none; padding-left: 35px; margin: 10px; text-align: left; }

.asset-tags-header {
background: url(https://hosting.photobucket.com/images/j49/SireesAnwar/tag-orange.png) no-repeat left center; padding-left: 20px;
display: inline; width: auto; margin-left: 0px; text-transform: uppercase; font-weight: bold; font-size: 11px; font-family: 'Oswald'; letter-spacing: 1px; color: #004359;}

.asset-tags-list { display: inline; margin: 5px 0 0 0; padding: 0px; list-style-type: none; }

.asset-tags li { display:inline; color: #444; line-height: 200%; margin: 0px 0px 5px 0px; }

.asset-tags li a {
background-color: transparent;
color: #004359;
padding: 1px 0px 3px 0px;
border-top: 1px solid #004359;
border-bottom: 1px solid #004359;
}

.asset-tags li a:hover {
color: #009A7C;
border-top: 1px solid #009A7C;
border-bottom: 1px solid #009A7C;
}

Some padding and margins get changed in here to accommodate the icon. Originally when I was thinking you couldn't do it; it was because in the Flexible Square code there are specific css coding for them .currentmood, .currentlocation, .currentmusic, etc. There was so such thing in Expressive but I forgot when dealing with a ul li list of items you can just add +li.

So in the coding you will see location is .lj-currents ul li and mood is .lj-currents ul li+li and music is .lj-currents ul li+li+li. It is designating which item in the list so one li is the first and ever li after moves the item down the list. I guess that is what happens when you haven't done much in the way of coding in 2 years or more. You start forgetting things. But it suddenly came to me and you get to benefit. I hope this helps you!

Any questions about this tutorial? Please Comment