Jill aka Jo (sireesanwar) wrote in layout_lounge,
Jill aka Jo

Making A Layout: Currents/Tags/Comment Links

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Customizing Your Currents, Tags and Comment Links.
Links: Code Index

Something I always forget about it the currents which are your location, music, mood and custom friends groups. The only one of these I ever really use are the custom friends groups and mood. So I tend to turn off the location & music. So I think I shoudl teach you a think or two about this area of the coding and while we are at it we will just do the entire bottom section of a post which includes ljtags and comments. This also includes Tiny Icons for the currents, users, community, and posts.

The coding I would like to work with is from my layout Oxygen.

You can put this area right after the Entry Section. Some like these things towards the end of the coding. It doesn't matter much.

.currents: Here we've decided to lump .currentlocation, .currentmood, .currentgroup, and .currentmusic all together so they will be the same. The only one I would separate out and code by itself would be .currentmood because that one is really different what with the image and all. Mostly, I keep them together.

.currentlocation, .currentmusic { display: none; }: Seeing has I rarely use location or music on my journal I had them turned off and typically forget to turn them back on for all of you. You can simply remove this line to get your location and music currents back.

div.ljtags: As the picture above shows, this is where we are listing the tags for our post. Some of you prefer not to see them in which case you'd add the line: display:none; but otherwise this is where we'd code them. You can also create a div.ljtags a & a div.ljtags a:hover to customize their link coloring.

But now that we've coded the currents and the ljtags do you see there is a large gap between them. I don't know if I like that so if I want to change it we'd be going back to our entry coding of div.entry_text and changing the padding: 20px 30px 30px 30px;. This tells me that there is a padding of 20px on the top, then 30px on the right, then 30px on the bottom, and lastly 30px on the left. We are wanting to change the pixels on the bottom. So by changing the third number from 30px to say 10px or even 0px we will be moving the ljtags and currents closer together.

.comments: This is the customization of the "comment" links at the bottom of your entry. However, this is basically a bar at the bottom of your entry. If we ascribed a background-color to it, it would look something like this:
If you want this look then go for it. But for this layout we don't want the background-color. Notice the line between the 13 and comment links? This is a default of LJ and the easiest way to get ride of it is to change the color in .comments to match whatever the color is behind the text.

div.comments a, div.comments a:link, div.comments a:visited: Instead we want to give this section a background-color to get the block look. Of course, you'll need the padding around these links otherwise your background color will just be behind the words.

div.comments a:hover: And as always a hover color. This also has a hover color for the background so it will look a little different upon hover.

Now let's finish off this entry coding with the TINY ICONS section. Most of these have to do with the Entries but some do not.

These are pretty much set up exactly how you should be using them. But I'll go over what they all are...

.currentlocation: This will be the tiny icon next to your current location in your entries current list. So should you need to adust the padding for the tiny icon for location... this is where you should do it.

.currentmood: This will be the tiny icon next to your current mood in your entries current list.

.currentmusic: This will be the tiny icon next to your current music in your entries current list.

.currentgroups: This will be the tiny icon next to your customized groups in your entries current list. This is if you decided that simple friends lock isn't enough. Maybe you made a friends list of everyone who talks about books. When you customize who sees your posts this is where it will tell you what list it is apart of. If it is just a friends view post then this shouldn't come up. This is the same with public and private posts.

Now to the Protected Entry sections of Tiny Icons

subject img[src*="icon_protected.gif"]: So this is for protected entries meaning friends locked.

.subject img[src*="icon_sticky.png"]: This one is for your sticky post at the top or your journal.

.subject img[src*="icon_groups.gif"]: For your friends groups if you've created any.

.subject img[src*="icon_private.gif"]: For any private posts you might make.

And now we are into the tiny icons for usernames and communities.
html body .ljuser img & html body .ljuser img[src*="userinfo.gif"]: There are two sections for a user tiny icon. These two sections you will use to specify what tiny icon you want to use for when you see your username or a friends.

html body .ljuser img[src*="community.gif"]: This one is for a community name you post or for when you see one come up on your Friends Page.

For these I would leave the coding intact though you might have to adjust padding on these depending on the tiny icon.

So what do we have so far:

Any questions about this tutorial? Please Comment

Tags: !layout-tutorials, #account: all, .flexible-squares, account: paid, help with: comments, help with: currents: music-location-etc, help with: entries-tags, help with: links, help with: tiny icons
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened