howto_user ([info]howto_user) wrote in [info]s2howto,
2005-07-26 04:58:00
  • Previous
  • Memorize
  • Share
  • Next

[paidaccount][boxer] Adding a Header Image

Paid Accounts Only
The following tutorial requires creating and editing a custom layer, which in turn requires a paid, permanent, or early adopter account.  Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

This tutorial explains how to add a header image to the top of pages in The Boxer. Please note that the image you use must be hosted on webspace that allows remote loading to LiveJournal. Information about remote loading is available in LiveJournal's FAQ #130.

There are several ways to add a header image. This method uses a theme layer to modify the Page::print() function, which will allow you to add the header image while keeping any background image you may be using.

If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will first need to create one by following the instructions in the Theme Layer tutorial.

Copy the following code and paste it into your theme layer:

function Page::print() {

var string title = $this->title();

"""
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
""";
$this->print_head();
$this->print_stylesheets();
"""
    <title>$title</title>
</head>
<body>
<div align="$*page_align">
<!-- Header Image -->
<img src="http://www.example.com/example.jpg" alt="header image" />
<!-- End of Header Image code -->
""";

print_nav($this);


"""


<!-- /////////////////// HEADER ///////////////////// -->
<table cellspacing="0" cellpadding="0" border="0" width="$*page_width" class="new">
<tr>
<td class="info" align="left">
<div class="title">$title</div>
<div><a href="$*SITEROOT/userinfo.bml?user=$.journal.username" class="subtitle">$.journal.name</a></div>
</td>
</tr>
</table>

""";


var bool linkl = false;
if(size $.linklist > 0) { $linkl = true; }
if(not $*linklist_support) { $linkl = false; }

var bool box = false;
if($.journal.default_pic) { $box = true; }
if($*show_mini_calendar) { $box = true; }
if($linkl) { $box = true; }

if($box) {
"""
<table cellspacing="0" cellpadding="0" border="0" width="$*page_width" class="new">
<tr>
""";

if($.journal.default_pic) {
"""
<td align="center" class="info"><a href="$*SITEROOT/allpics.bml?user=$.journal.username"><img src="$.journal.default_pic.url" width="$.journal.default_pic.width" height="$.journal.default_pic.height" border="0"></a></td>
""";
if($linkl or $*show_mini_calendar) {
"""
<td width="2"><img src="$*PALIMGROOT/boxer/clear.gif" alt="" width="1" height="1" border="0"></td>
""";
}
}

$this->print_linklist();
if($*show_mini_calendar) {
if($linkl) {
"""
<td width="2"><img src="$*PALIMGROOT/boxer/clear.gif" alt="" width="1" height="1" border="0"></td>
""";
}
"""
<td align="center" class="info">
""";

print_calendar($this);

"""
</td>
""";
}
"""
</tr>
</table>

<!-- /////////////////// ENTRIES ///////////////////// -->

""";
}

$this->print_body();

print_nav($this);

"""
</div>
</body>
</html>
""";
}

Replace http://www.example.com/example.jpg with the URL of your header image, then compile the layer. Your changes will be applied to your journal when you select this theme layer from the Customize page.

Contributed by [info]phoenixdreaming.
Tags: - the boxer, header image, paid accounts only

Create an Account
Forgot your login or password?
Facebook Twitter More login options
English • Español • Deutsch • Русский…