Shrinking and Centering/Header Image
this is both a public apology to ![[info]](http://l-stat.livejournal.com/img/userinfo.gif)
missjecka and a tutorial.
i would first like to apologize to missjecka to how my previous entry was presented. i know that what i intended it to mean isnt as powerful as what it actually meant to her.
if you notice, i removed the links that directly linked to the other page.
my intent for that entry of mine was to state that i was annoyed at the reposting of questions that happens constantly at times.
this is in no way directed at only her, but all of you guys who dont go back and read.
i would also like to think that those people who come up with new nifty ideas would post a top level entry (like this) that says "hey! heres how you do this nifty thing that i came up with in comments on another entry!"
... putting that aside... i have a new tutorial.
i nabbed the base of this from masterslacker's recreating the navbar tutorial.
and i got a spiffy tip from eduthepenguin to just put everything in one bigass table... awesome.
i dont understand you people. :P
update [mar 30, 2005]:
removed warnings for header image junk. added vars to top for header image url and alt text.
completely re-did nav links section to hopefully make it easier to add custom links.
</update>
update [jan 30, 2005]:
if the content of your entries is wider than the width you have set for your journal, it will expand. period. you need to fix your entries so that the overflow is set to auto so scrollbars will activate when needed.
</update>
<update datetime="20051214T150000">
add border="0", cellpadding="0" and cellspacing="0" to $k1Swidth <table>. w00t.
</update>
function page_layout(Page p) {
# Set this to the width that you want both the navbar (if it exists) and the whole journal to be
# may be percentage (70%) or number of pixels (700px).
var string k1Swidth = "70%";
var string k1Sheader_url = ""; # optional header image url
var string k1Sheader_alt = ""; # optional header image alt text
# 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->print_head();
"""
<title>$title</title>
</head>
""";
# Start the body section of the html document which controls the visible parts of the page.
"""<body style="text-align:center;">""";
if($k1Sheader_url != "") {
"""<div align="center"><img src="$k1Sheader_url" alt="$k1Sheader_alt" title="$k1Sheader_alt" /></div>""";
}
if($k1Swidth != "") {
"""<table border="0" cellpadding="0" cellspacing="0" style="border: 0px; margin: auto; padding: 0px; width:$k1Swidth;"><tr><td>""";
}
# Print the 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 class="header">""";
var string[] views_order = ["recent", "friends", "archive", "userinfo"]; # view order
# "recent" = recent view
# "friends" = friends view
# "archive" = calendar view
# "userinfo" = userinfo link
var string{} view_text = { # build text hash
"recent" => $*nav_entries_text,
"friends" => $p.journal_type != "C" ? $*nav_friends_text : $*text_view_friends_comm,
"archive" => $*nav_calendar_text,
"userinfo" => $*nav_info_text
};
var string base_url = $p.journal->base_url(); # get base url
var string{} view_url = { # build url hash
"recent" => "$base_url/",
"friends" => "$base_url/friends/",
"archive" => "$base_url/calendar/",
"userinfo" => "$*SITEROOT/userinfo.bml?user=$p.journal.username&mode=full"
};
foreach var string v ($views_order) {
print """<span class="header-item"><a href="$view_url{$v}" class="headerLinks">$view_text{$v}</a></span>""";
}
# print """<span class="header-item"><a href="$*SITEROOT/tools/memories.bml?user=$p.journal.username" class="headerLinks">memories</a></span>""";
# print """<span class="header-item"><a href="http://www.yahoo.com/" class="headerLinks">yahoo!</a></span>""";
if ($p.journal.website_url != "") {
print "<span class=\"header-item\"><a href=\"$p.journal.website_url\" class=\"headerLinks\">$p.journal.website_name</a></span>";
}
$p->lay_viewspec_nav(); # prints previous / next links including arrow images
"""
</div>
""";
}
# Print a spacer at the top of the page above the components and main area.
"""<div><img src="$*PALIMGROOT/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 cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
<td width="3">
<img src="$*PALIMGROOT/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="$*PALIMGROOT/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="$*PALIMGROOT/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="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
</td>
</tr>
</table>
""";
if($k1Swidth != "") {
"""</td></tr></table>""";
}
# End the body section and end the html document
"""
</body>
</html>
""";
}
![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small}
component_help,
