The Metadata Tutorial

Apr 14, 2010 17:16

The New Metadata Tutorial

I'm not sure how relevant this tutorial is anymore, but the tutorial I'm about to give you allows you to add tiny icons to your metadata without needing a paid account or layers.

There is also this tutorial by robot_sky that includes the metadata tutorial for all possible layouts.

How to get this for your journal:


moodtheme: here
tiny icons: unknown
layout: velvetb0x


If you find that you don't have any of these codes in your current layout, you may add them.

1. In your layout, you want to find .ljtags portion. And anywhere between the brackets { } you want to add background: url(tiny icon url goes here) no-repeat;

like this:

.ljtags {
background: url(http://i44.tinypic.com/2hnp1ug.png) no-repeat;
}

You may have to adjust other aspects, like the padding, which is just the space between the content (the tags) and the border, it is similar to the margin. Also the line-height will be important to adjust too so there is space between the previous and next lines. But since I don't know how it will look in each and every individual layout, you will have to play around with it to get it how you want it to look.

2. Now to change the moods, you'll want to find a few things. The first thing you'll want to find is .currents section (the mood, location, music)

The first one is .currents strong This is the actual words, mood, music, and location, shown here. If you want the words before the item, then delete the entire code altogether (or you may customize the font, size, color, etc.), otherwise put display: none; in between the { }

like this:

.currents strong { display:none; }

3. Now, you can define the actual look of the metadata. First start with the all the currents together (if you don't have this code you can add it), only customize this if you want all the "currents" fonts to look the same. For example, if you all want them to be Arial, size 10, italic, then you'll put the appropriate codes in the .currentlocation, .currentmood, .currentgroups, .currentmusic section. For my layout, I did not customize this, its up to you.

4. Now in order to have each separate item have different tiny icons, you will do the same thing you did with the .ljtags. You will want to add somewhere between the brackets { } the same code, background: url(tiny icon url goes here) no-repeat;

like this:

.currentmood {
background-image: url (http://i42.tinypic.com/im5tp4.png) no-repeat;
}

.currentmusic {
background: url(http://i44.tinypic.com/2iw82tf.png) no-repeat;
}

.currentlocation {
background: url(http://i39.tinypic.com/3346m2s.png) no-repeat;
}

Now you'll have to adjust some other things like the line-height: play around with some pixels (mine is set to 6px) so that they aren't all smashed together, there is space in between the lines.

This should be all you need to do in order to get your metadata to look like this, if you have any questions I can try to help you as best as I can.

Tiny icons used in this tutorial: pinvoke

Best,
Alexis Nicole

&style: flexible squares, #tutorial: metadata, (apologize)

Previous post Next post
Up