Also with a choice of which side to put the contents on!
And now with that silly Navigation Strip!
And if you want to simply add a header, set the width to
100%.Step One:
If you don't already have
Page::print_custom_head() in your layer, copy and paste this whole thing, otherwise just add the bolded part to the end of your current Page::print_custom_head() and move on to Step Two.#######################################
# CUSTOM CSS MODIFICATION #
# kunzite1, xtomxfallsx #
# component-help/1002140 #
# overrides Page::print_custom_head() #
# required by #
# SHRINKING AND CENTERING/SIDING #
#######################################
function Page::print_custom_head() {
"""
<style media="screen" type="text/css">
""";
if(viewer_sees_control_strip()) {
"""
html body {
padding-top: 46px !important;
}
""";
}
"""
.header-item {
top: 0px;
}
.header {
background-image: url() !important; /* remove the gradient background */
height: 20px !important; /* adjust the height of the component */
}
</style> """;
}Step Two:
####################################
# SHRINKING AND CENTERING/SIDING #
# (v3.0) #
# WITH ROUNDED OR SQUARE NAVBAR #
# AND OPTIONAL HEADER #
# kunzite1, xtomxfallsx #
# component-help/1002140 #
# overrides page_layout(Page p) #
# requires print_custom_head() #
####################################
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 (80%) or number of pixels (800px).
var string k1Swidth = "80%"; # width of component layout (including entries and components)
var string k1Sheader_url = ""; # optional header image url
var string k1Sheader_alt = ""; # optional header image alt text
var string k1Sheader_align = "center"; # header alignment
var string k1Salign = "center"; # layout alignment
var bool k1Sroundnavbar = true; # set to false for square navbar corners
# Calculate the corner_color for the new rounded navigation bar
var Color k1Sheader = $*header_bgcolor;
var Color k1SheaderMinus5 = $k1Sheader->darker(50);
var Color k1SheaderPlus3 = $k1Sheader->lighter(30);
var string k1Scorner_color = "/p0"+$k1SheaderPlus3->substr(1,6)+"1"+$k1SheaderMinus5->substr(1,6)+"2"+$k1Sheader->substr(1,6);
var string k1Smargin = $k1Salign == "center" ? " margin: auto;" : "";
# Create the corners of the navbar, both square and rounded
var string sq_nav_bar_open = """<table cellspacing="0" cellpadding="0" border="0"><tr><td class="dkLine" colspan="7"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" colspan="5"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" colspan="4"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="tabBg" rowspan="1" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr><tr><td class="dkLine" width="1" rowspan="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" width="1" rowspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="tabBg" width="100%"><div class="compFont" style="position:relative; top:-3px; left:2px;">""";
var string sq_nav_bar_close = """</div></td><td class="tabBg" width="3" ><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="medLine" width="1" rowspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" width="1" rowspan="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="medLine" colspan="4"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="5"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr></table>""";
var string ro_nav_bar_open = """<table width="100%" 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><td><table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-top-left.gif$k1Scorner_color" width="5" height="5" alt="" border="0" /></td><td class="dkLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-top-right.gif$k1Scorner_color" width="5" height="5" alt="" border="0" /></td></tr><tr><td class="ltLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr><tr><td class="dkLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="tabBg" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="tabBg" width="100%">""";
var string ro_nav_bar_close = """</td><td class="tabBg" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="ltLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-bottom-left.gif$k1Scorner_color" width="5" height="5" alt="" border="0" /></td><td class="tabBg"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-bottom-right.gif$k1Scorner_color" width="5" height="5" alt="" border="0" /></td></tr><tr><td class="ltLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr></table></td><td width="3"><img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0"></td></tr></table>""";
# set the width of the side td to zero if the navbar is square
var int k1Sside_spacing = ($k1Sroundnavbar == true) ? 3 : 0;
# 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>
""";
$p->print_head(); # print head content, call Page::print_custom_head()
$p->print_stylesheets(); # print stylesheets as defined by layout and chosen properties
$p->print_custom_head(); # call Page::print_custom_head() yet again because layout stylesheets will override first call
"""
<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;">""";
# print the navigation strip if the remote viewer sees it
$p->print_control_strip();
if($k1Sheader_url != "") {
"""<div align="$k1Sheader_align"><img src="$k1Sheader_url" alt="$k1Sheader_alt" title="$k1Sheader_alt" /></div>""";
}
if($k1Swidth != "") {
"""<table align="$k1Salign" border="0" cellpadding="0" cellspacing="0" style="border: 0px;$k1Smargin 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") {
if ($k1Sroundnavbar == true) {
print $ro_nav_bar_open;
} else {
print $sq_nav_bar_open;
}
""" <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" => get_url($p.journal, "recent"),
"friends" => get_url($p.journal, "friends"),
"archive" => get_url($p.journal, "archive"),
"userinfo" => get_url($p.journal, "userinfo")
};
foreach var string v ($views_order) {
print """<span class="header-item"><a href="$view_url{$v}" class="headerLinks">$view_text{$v}</a></span>""";
}
# to add your own links you can use these as a template
# 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>
""";
if ($k1Sroundnavbar == true) {
print $ro_nav_bar_close;
} else {
print $sq_nav_bar_close;
}
}
# 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="$k1Sside_spacing">
<img src="$*PALIMGROOT/component/clear.gif" width="$k1Sside_spacing" 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="$k1Sside_spacing">
<img src="$*PALIMGROOT/component/clear.gif" width="$k1Sside_spacing" height="1" alt="" border="0" />
</td>
</tr>
</table>
""";
if($k1Swidth != "") {
"""</td></tr></table>""";
}
# End the body section and end the html document
"""
</body>
</html>
""";
} # End code
← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →