eduthepenguin asked how to change the Boxed Navigation Bar into a Rounded Navigation Bar. I'm making this post because the code is too long to place into a comment.To change the Boxed Navigation Bar to a Rouned Navigation Bar, you need to override the
page_layout() function as shown below. This will modify it to a rounded component like the Title component, and spaces it accordingly. If you already use the page_layout() function, then you only need to copy what's in blue into your current function where the nav bar needs to be printed.You also need to make a few style overrides using the
print_custom_head() function so that the links will be properly spaced within the component. I've also added an override to remove the background of the nav bar because it doesn't mesh well with the rounded edges. This is also shown below. If you already use the print_custom_head() function, then you only need to incorporate the area in blue into your current function.function Page::print_custom_head() {
"""<style type="text/css">
.header-item {
top: 0px;
}
.header {
background-image: url(""); /* removed the gradient background */
height: 20px; /* adjust the height of the component */
}
</style>""";
}
function page_layout(Page p) {
# Calculate the corner_color for the new rounded navigation bar
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);
# Start the html document and print the head section which controls the page title, stylesheet information,
# server supplied head content, and custom header informtion from the print_custom_head function.
var string title = $p->title();
"""
<html>
<head>
<link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
$p.head_content
"""; $p->print_custom_head(); """
<title>$title</title>
</head>
""";
# Start the body section of the html document which controls the visible parts of the page.
"""<body>""";
# Print the rounded navigation bar if it is needed. This can be incorporated into any other tutorials which override
# the page_layout() function, and should be placed immediately after the <body> tag above.
if (not $*comp_navbar or $*comp_state=="none") {
"""
<div>
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="tabBg" width="100%">
<div class="header">
""";
print "<span class=\"header-item\"><a href=\""+$p.view_url{"recent"}+"\">$*nav_entries_text</a></span>";
print "<span class=\"header-item\"><a href=\""+$p.view_url{"friends"}+"\">$*nav_friends_text</a></span>";
print "<span class=\"header-item\"><a href=\""+$p.view_url{"archive"}+"\">$*nav_calendar_text</a></span>";
print "<span class=\"header-item\"><a href=\""+$p.view_url{"userinfo"}+"\">$*nav_info_text</a></span>";
if($p.journal.website_url != "") {
print "<span class=\"header-item\"><a href=\"$p.journal.website_url\">$p.journal.website_name</a></span>";
}
$p->lay_viewspec_nav(); # prints previous / next links including arrow images
"""
</div>
</td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr>
</table>
</td>
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
</tr>
</table>
""";
}
# Print a spacer at the top of the page above the components and main area.
"""<div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0"></div>""";
# Start the table which lays out the components and main area in side-by-side layout.
"""
<table width="100%" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
""";
# If the components are supposed to be on the left side of the page, then print them, followed by a column
# with a spacer which is to seperate the components and the main area.
if ($*comp_state == "left") {
print_my_components($p);
"""
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
""";
}
# Print the main area of the page.
print_my_entries($p, $title);
# If the components are supposed to be on the right side of the page, then first print a column with a spacer
# and then print the components after the spacer.
if ($*comp_state == "right") {
"""
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
""";
print_my_components($p);
}
# Finish off the table for the body
"""
<td width="3">
<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
</td>
</tr>
</table>
""";
# End the body section and end the html document
"""
</body>
</html>
""";
}