The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[paidaccount][generator] Adding a Header Image
howto_user wrote in s2howto
Paid Accounts Only
The following tutorial requires creating and editing a custom style, 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 provides a method of using both a header image and a background image with the S2 version of Generator, and replaces the Page::print () function. You will need to place the coding in a theme layer. If you already have a theme layer for the Generator style, you can edit it to include this code. Otherwise, you need to create one as explained in the Theme Layer tutorial.

You will need two images: a main background image, and a 'header' image, which will appear at the top of your journal. You can set the main background image using the S2 Customization interface, as explained in FAQ 214. The other will be set through the theme layer. Please note that both images will need to be hosted on webspace that allows remote loading to LiveJournal, and each must be in a valid image format.

Now, you will need to add the following code to your theme layer. First, copy and paste the following code into the layer, making sure to include everything:

function Page::print () { var string title = $this->title(); var string website_name = $.journal.website_name ? $.journal.website_name : $*text_website_default_name; var string website; if ($.journal.website_url != "") { $website = """<tr><td class="meta">[</td> <td class="meta" align="right"><b>$*text_website</b></td> <td class="meta" align="center">|</td> <td class="meta" align="left"><a href="$.journal.website_url">$website_name</a></td> <td class="meta">]</td></tr>"""; } var string links; var bool firstlink = true; foreach var string v ($.views_order) { if ($firstlink == false) { $links = "$links|"; } else { $firstlink = false; } $links = $links + ($.view == $v ? "<b>"+lang_viewname($v)+"</b>" : "<a class='index' href='$.view_url{$v}'>"+lang_viewname($v)+"</a>"); } """<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\n<html>\n<head>\n"""; if ($*external_stylesheet) { println """<link rel="stylesheet" href="$.stylesheet_url" type="text/css" />"""; } else { println """<style type="text/css">"""; print_stylesheet(); "</style>"; } $this->print_head(); """<title>$title</title> </head> <body bgcolor="$*page_back" text="$*entry_text" link="$*page_link" vlink="$*page_vlink" alink="$*page_alink"> <div align="center">
<img src='http://www.example.com/image.jpg' alt='Header Image' />
<table width="$*box_width" cellpadding="2" cellspacing="0" border="0" summary=""> <tr><td bgcolor="$*stronger_back" align="center"> <table width="100%" cellpadding="3" cellspacing="0" border="0" summary=""> <tr class="caption"> <td class="caption" align="left"><b>$title</b></td> <td class="index" align="right">[$links]</td> </tr></table> <table width="100%" cellpadding="3" cellspacing="0" border="0" summary=""> <tr> <td class="shadowed" align="center"> <table cellspacing="5" cellpadding="0" border="0" summary="" style="margin-left: auto; margin-right: auto;"> <tr>"""; $this->lay_top_userpic(); var string sitename_lc = $*SITENAMESHORT->lower(); """<td> <div align="center"><b>$.journal.name</b></div><p> <table cellspacing="0" cellpadding="0" border="0" summary=""> $website <tr> <td class="meta">[</td> <td class="meta" align="right"><b>"""+lang_viewname("userinfo")+"""</b></td> <td class="meta" align="center">|</td> <td class="meta" align="left"><a href="$.view_url{"userinfo"}">$sitename_lc userinfo</a></td> <td class="meta">]</td> </tr> <tr> <td class="meta">[</td> <td class="meta" align="right"><b>"""+lang_viewname("archive")+"""</b></td> <td class="meta" align="center">|</td> <td class="meta" align="left"><a href="$.view_url{"archive"}">journal archive</a></td> <td class="meta">]</td> </tr> </table> </td> </tr> </table> </td> </tr></table> </td></tr> </table> """; if (size $.linklist > 0 and $*linklist_support) { $this->print_linklist(); } """ <p> """; $this->print_body(); """ </div> <p> </body> </html> """; }

The portion highlighted in orange is the code this tutorial inserts into the standard Generator Page::print() function. You will need to replace http://www.example.com/image.jpg with the URL of your header image. You can, if you wish, replace the text Header Image with suitable alternate text which will display in place of the header image if your image fails to load, or if your journal is viewed in a browser that does not display images.

Compile your layer and it will be ready to use. If you created a new theme layer rather than editing one that was already in use, you will need to apply it using the theme layer dropdown of the Customize interface for it to take effect.

Contributed by phoenixdreaming and camomiletea.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account