Okay, then in your case it will be VERY simple.
1. Create a directory templates/considerin
2. Copy the file templates/default/info.txt and /templates/default/index.tpl into your templates/considerin/ directory
3. Edit the file info.txt. Make up a template name and insert it. This will be the template name you can then choose on the Serendipity Admin Interface in "Styles".
4. Edit the index.tpl file in your template directory. This is the important part. This is a HTML template with some Smarty markup in. Here you can change the HTML so that it matches your layout. You can add your header HTML blocks, and you can insert the CSS calls to your central CSS file instead of the Serendipity ones. Just take a look at the simple file and modify it. Take some time to go through every line and try to understand what it does.
In the end it will look something like this:
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
<meta name="Powered-By" content="Serendipity v.{$head_version}" />
<title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
<link rel="alternate" type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
<link rel="alternate" type="application/x.atom+xml" title="{$blogTitle} Atom feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
{if $entry_id}
<link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&entry_id={$entry_id}" />
{/if}
<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
{serendipity_hookPlugin hook="frontend_header"}
<style type="text/css">
@import url( "http://consider.in/site.css" );
textarea,select {
background: url('http://youre.consider.in/bbim/watermark.jpg');
background-attachment: fixed;
}
.user {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #2A3E52;
}
.title {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.normal {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.online {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.small {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
}
.small2 {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
}
input,textarea,select {
font-size: 10px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
td {
font-family: Verdana;
font-size: 12px;
}
A:link { COLOR: #26384B;
TEXT-DECORATION: none;}
A:visited { COLOR: #26384B;
TEXT-DECORATION: none;}
A:active { COLOR: #26384B;
TEXT-DECORATION: none;}
A:hover { COLOR: #B50905;
TEXT-DECORATION: none;}
A.red:link { COLOR: #8A032E;
TEXT-DECORATION: underline;}
A.red:visited { COLOR: #8A032E;
TEXT-DECORATION: underline;}
A.red:active { COLOR: #8A032E;
TEXT-DECORATION: underline;}
A.red:hover { COLOR: #293E51;
TEXT-DECORATION: underline;}
A.footnav:link { COLOR: #FFFFFF;
TEXT-DECORATION: underline;}
A.footnav:visited { COLOR: #FFFFFF;
TEXT-DECORATION: underline;}
A.footnav:active { COLOR: #FFFFFF;
TEXT-DECORATION: underline;}
A.footnav:hover { COLOR: #B50905;
TEXT-DECORATION: none;}
</style>
<style type="text/css">
td.tdbdr,tr.tdbdr { border: 1px;
border-style: solid;
border-color:#3d4463;
background:#8B012E;
background:url('http://youre.consider.in/bbim/titlebg.gif');
}
</style>
</head>
<body>
<div id="notice">
Copyright © 2005 <a href="http://www.consider.in">Consider.in</a>. Forums Powered by: <a href="http://www.bbv2.com" target=_blank>bbBoard v2</a> (Licensed to: youre.consider.in)
Copyright 2003-2005 bbNetwork Ltd</font></div>
<div id="header">
<div id="headerAura"> </div>
<div id="headerIcon"><img src="images/icon.png" alt=""/></div>
<div id="headerTitle"><img src="images/title.png" alt="" /></div>
<div id="headerNavigation">
<ul>
<li><a href="http://consider.in">Home</a></li>
<li><a href="http://consider.in">Blog</a></li>
<li><a href="http://consider.in">Forums</a></li>
<li><a href="http://consider.in">Gallery</a></li>
</ul>
</div>
<div id="content">
<p>
<em>You're viewing the <b>BLOG</b></em>
</p>
</div>
</div>
<!-- Header over -->
<!-- Content -->
<div id="serendipity_banner">
<h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
<h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>
<table id="mainpane">
<tr>
{if $leftSidebarElements > 0}
<td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
<td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
<td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
</tr>
</table>
</body>
</html>
That's all the whole magic! Only some simple and very few Smarty tags define the Serendipity content. The reast can be fully customizable HTML by you.
Regards
Garvin
