Awhile ago,
xmirax published a tutorial for a fancy links list in her own journal. A few people have been asking how I did it, so here it is. I modified Mirax's a bit, but props go to her for the original idea.This does not pull the code from your site-created links list, so you'll have to re-code those links once you've got the list set up.
CSS classes you'll need:
.centertext; .teeny [optional]; .compList.
To achieve the look of the funky links list, you'll need A. some idea of what you're doing with a stylesheet and B. mad copy-paste skillz. Seriously, that's about it.
The CSS: [This is in no way the only way the classes have to look. It's just the way that I've found to look neatest.]
=====
.centertext {
line-height: 12px;
font-family: arial;
font-size: 8pt;
color: #67343D;
font-weight: bold;
letter-spacing: 3px;
text-align: center;
text-transform: lowercase;
}
.compList {
line-height: 12px;
padding-left: 3px;
}
.teeny { font-size: 6pt;
text-transform: italic;
text-align: center;
}
=====
Got that pasted into your stylesheet? Great. Note that .compListb and .teeny are both optional. If you want to center your links, I recommend not putting comments next to them.
The Code comes next. Seriously, just copy-paste the next chunk exactly, and you'll be fine. [This tutorial can be used with the scrollbox in component tutorial, but I don't recommend it for people that are newer to s2 coding.]
=====
function print_links(Page p) {
print_comp_header("LINKS");
"""
## This sets up the header of the links list component. ##
<div id="linkslist" style="position: relative; width: 100%; line-height: 12px;">
<table cellspacing="0" cellpadding="0" cellborder="0" border="0" width="100%">
<tr width="100%">
<td width="100%" class="compFont">
<div class="compList">## This next line is only necessary if you want a little comment at the top. If you decide not to use it, then you don't need the .teeny CSS class, either. ##
<div class="teeny">hover on a link to see its description</div></div>
<div class="centertext"> CATEGORY #1</div>
<div class="ltLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
## Repeat this as often as necessary. Then, to close the component: ##
</td>
</tr>
</table>
</div>
""";
print_comp_footer();
}
=====
Now, let's say that you like the look of it, overall, but you want less of a divider between your links. Here's the code for you:
=====
function print_links(Page p) {
print_comp_header("LINKS");
"""
<div id="linkslist" style="position: relative; width: 100%; line-height: 12px;">
<table cellspacing="0" cellpadding="0" cellborder="0" border="0" width="100%">
<tr width="100%">
<td width="100%" class="compFont">
<div class="compList">
<div class="teeny">hover on a link to see its description</div></div>
<div class="centertext"> CATEGORY #1</div>
<div class="ltLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
<div class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="compList"><a href="HTTP://YOURLINK.COM" title="YOUR LINK DESCRIPTION">TEXT</a> COMMENT</div>
</td>
</tr>
</table>
</div>
""";
print_comp_footer();
} =====
Want a darker divider between links? Go through that last bit of code and change ltLine to medLine, every time.
Did this tutorial help? Did it suck? Let me know.
Please direct all comments to the newer version of this tutorial. Thanks!