Sara (waterofthemoon) wrote in component_help,
Sara
waterofthemoon
component_help

  • Mood:

Tutorial: Tab-like headers

In response to this post, this is for those who have been wondering about how to get those nifty tab-style (shortened) entry headers. Hope this is helpful!

Notes:
- A lot of this code has been blatantly stolen from Components on Both Sides and edited slightly for these purposes, along with a little bit from Square Components (though you shouldn't USE it with Square Components). Special thanks to liabunny and kunzite1.
- Comments are appreciated. :-)

The code:
function print_entry_header(string content) {
# rounded corner variables
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);

# top part of header
var string comp_header_open = "<tr><td valign='top' rowspan='3' colspan='3' width='5'><img src='$*SITEROOT/palimg/component/curve-top-left.gif$corner_color' width='5' height='5' border='0' /></td><td class='dkLine'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td valign='top' rowspan='3' colspan='3' width='5'><img src='$*SITEROOT/palimg/component/curve-top-right.gif$corner_color' width='5' height='5' border='0' /></td></tr><tr><td class='ltLine'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='tabBg'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td></tr><tr><td class='dkLine' width='1' rowspan='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='ltLine' width='1' rowspan='2'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='tabBg' width='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='tabBg' width='100%'>";

# bottom part of header
var string comp_header_close = "</td><td class='tabBg' width='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='ltLine' width='1' rowspan='2'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='dkLine' width='1' rowspan='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='medLine' colspan='4'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='dkLine' colspan='5'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr>";

"""
<table cellspacing="0" cellpadding="0" border="0" width="50%"> # specifies the header length - change this number to whatever you want
$comp_header_open
<div class="entryDate" style="position:relative; top:0px; left:2px;">$content</div> # inserting the date and security icon if needed
$comp_header_close
</table>
""";
}
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 11 comments