I've only checked this in Opera (Alpha 10), so, if you see any problems, tell me. ^_^;
http://blisstemplate.smackjeeves.com/
Webcomic Management -> Appearance ->
Overall Layout
- Code: Select all
<html>
<head>
<title>Your Site Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
font-family: tahoma;
font-size: 13px;
color: #E3D3D8;
scrollbar-arrow-color: #A68D95;
scrollbar-track-color: #A68D95;
scrollbar-face-color: #D0BEC4;
scrollbar-highlight-color: #A68D95;
scrollbar-3dlight-color: #A68D95;
scrollbar-darkshadow-color: #A68D95;
scrollbar-shadow-color: #A68D95;
background:#D0BEC4 url(http://sadpanda.us/images/24402-XSKGXA3.jpg); background-repeat: repeat-n
}
a:active {
color: #F0D9E7; text-decoration: none;letter-spacing: 0px; }
a:link {
color: #E6CED0; text-decoration: none;letter-spacing: 0px; }
a:visited {
color: #BFB0B5; text-decoration: none;letter-spacing: 0px; }
a:hover {
color: #F0D9E7; text-decoration: underline;font-weight:bold; letter-spacing: 1px;
}
#navcontainer ul
{
text-align: center;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #D0BEC4;
color: A68D95;
width: 100%;
font-family: Lucida Sans Unicode
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: A68D95;
text-decoration: none;
border-right: 1px solid #F5EDF0;
border-left: 1px solid #F5EDF0;
font-family: Lucida Sans Unicode
}
#navcontainer ul li a:hover
{
background-color: #A68D95;
color: D0BEC4;
}
#navcontainer #active { border-left: 1px solid #fff; }
h2 {
background: #D0BEC4;
text-align: center;
border: 2px solid #A68D95;
color: #A68D95;
text-transform: uppercase;
font-family: arial;
font-size: 15px;
margin-bottom: 2px;
}
.red {
color:#F0D9E7;
}
</style>
</head>
<body bgcolor="#D0BEC4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="900" height="310" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://sadpanda.us/images/24403-QLLTP3D.jpg" width="900" height="90" border="0" alt="" usemap="#tempimages_01_Map">
</td>
</tr>
<tr>
<td BACKGROUND="http://sadpanda.us/images/24404-9QE7Y5Q.jpg" width="900" height="54" alt="">
<div align="center">
<font face="Broadway" size="6" color="#A68D95">
*Your Site Title Here*
</font></div></td>
</tr>
<tr>
<td>
<img src="http://sadpanda.us/images/24405-ITHO8JF.jpg" width="900" height="118" alt=""></td>
</tr>
<tr>
<td BACKGROUND="http://sadpanda.us/images/24406-ASPPANR.jpg" width="900" height="100%" alt="">
<div align="center">
<div id="navcontainer">
<ul id="navlist">
<!--START NAVIGATION HERE -->
{MENU}
<!--END NAVIGATION HERE -->
</ul>
</div>
<br>
{CONTENT}
<br><br>
</div> </td>
</tr>
<tr>
<td BACKGROUND="http://sadpanda.us/images/24575-ZF88KMQ.jpg" width="900" height="39" alt="">
<div align="center">
<b><font face="tahoma" color="#A68D95">
|Site Content: <a href="http://siteurlhere.com">YOURNAME(s)HERE</a>|Template By:
<a href="http://www.smackjeeves.com/profile.php?id=38833">AyaneSensei</a>
|Best Viewed in Opera <a href="http://www.opera.com/browser/"><img
src="http://sadpanda.us/images/24400-W9PWH4G.png"
width="94" height="15" border="0" alt="Opera" /></a>|</b></font>
</div> </td>
</tr>
</table>
<map name="tempimages_01_Map">
<area shape="rect" alt="Template By: AyaneSensei"
coords="710,7,891,16" href="http://www.smackjeeves.com/profile.php?id=38833" target="_blank">
</map>
</body>
</html>
Menu
- Code: Select all
<ul>
<!-- BEGIN links -->
<li><a href="{links.URL}">{links.TEXT}</a></li>
<!-- END links -->
<li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Favs</a></li>
</ul>
News Page
- Code: Select all
<div style="border:0; padding:10px 5px 10px 5px; background:transparent; width:300px; text-align:center; float:right;">
<!-- BEGIN latest_comic -->
<strong>Latest Update:</strong><br />
<a href="{latest_comic.URL}" title="{latest_comic.TITLE}"><img src="{latest_comic.THUMBNAIL_IMG_SRC}" alt="{latest_comic.TITLE}" /></a><br />
<a href="{latest_comic.URL}">{latest_comic.TITLE}</a>
<!-- END latest_comic -->
<br /><br />
<a href="{SITE_URL_FULL}rss" title="RSS Feed"><img src="http://sadpanda.us/images/24444-YT96XRY.jpg" alt="RSS Feed" /></a>
</div>
<h4 class="red">» {PAGE_TITLE}</h4>
<h3>{SITE_NAME}</h3>
<p>{SITE_DESCRIPTION}</p>
<br />
<img src="http://sadpanda.us/images/24421-NB4N1LD.jpg" alt="News" />
<!-- BEGIN news_loop -->
<!-- Begin .post -->
<a name="{news_loop.POST_ID}"></a>
<h4>{news_loop.POST_TITLE}</h4>
<p>{news_loop.MESSAGE_BODY}</p>
<p><em>posted by <a href="{news_loop.AUTHOR_PROFILE_URL}">{news_loop.POST_AUTHOR}</a> @ {news_loop.POST_DATE}</em> -
<a href="{news_loop.COMMENT_LINK}">{news_loop.COMMENT_COUNT} comments</a></p>
<!-- End .post -->
<!-- END news_loop -->
<p class="right"><a href="/news-archive/">News Archive »</a></p>
Comic Page
- Code: Select all
<script language="JavaScript">
var dir = "";
var pic_unselected = "http://sadpanda.us/images/24425-YYJW06P.jpg";
var pic_selected = "http://sadpanda.us/images/24426-QEPOYFY.jpg";
// "Buffers" the image to the browser
document.write('<img style="display: none" src="' + dir + pic_unselected + '" />');
document.write('<img style="display: none" src="' + dir + pic_selected + '" />');
<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
<!-- END switch_user_hasnt_voted -->
function build_vote()
{
document.write('<b>Rate: </b> ');
for (n = 1; n<= 5; n++)
{
if (n <= default_rating)
{
default_pic = pic_selected;
} else {
default_pic = pic_unselected;
}
document.write('<a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '" border=0></a> ');
}
document.write('</ul>');
}
function rateover(star_num)
{
for (n = 1; n <= 5; n++)
{
if (n <= star_num)
{
da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
} else {
da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
}
eval(da_code);
}
}
function vote(rating)
{
var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
new_window.focus();
}
</script>
<table name="news" width="100%" border="0" cellspacing="0" cellpadding="15">
<tr><td valign="top" align="center">
<table name="title" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="red" align="left" valign="middle">» {PAGE_TITLE} - {COMIC_POST_DATE}<br></td>
<td align="right"><script language="javascript" type="text/javascript" src="http://www.smackjeeves.com/templates/default/jsbookmark.js"></script><br></td>
</tr>
<tr><td align="left" valign="bottom"><br> <b>Average Rating:</b> <i>{AVERAGE_RATING}</i></td>
<td align="right" valign="bottom"><br><script language="JavaScript">build_vote();</script> </td>
</tr>
</table name="title">
<br />
<!-- BEGIN comic_image -->
<style>
#comic_image {
border-width: 1px;
}
</style>
{comic_image.FORMATTED}
<!-- END comic_image -->
<!-- BEGIN switch_no_comic_image -->
<img src="http://www.imagemonster.org/getimg/image_na.gif" width="600" height="400">
<!-- END switch_no_comic_image -->
<br><br>
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="{NAV_FIRST}" class="navi">« First</a></td>
<td align="center"><a href="{NAV_PREV}" class="navi">< Back</a></td>
<td align="center">
<form name="jumpbox" method="GET">
<input type="hidden" name="url" value="{SITE_URL}">
<input type="hidden" name="page" value="comic">
<select name="url" onchange="if(this.options[this.selectedIndex].value != -1){ window.location = this.options[this.selectedIndex].value; }">
<option value="-1">--- ARCHIVE ---</option>
<!-- BEGIN jumpbox -->
<option value="{jumpbox.COMIC_URL}">#{jumpbox.COMIC_NUMBER} - {jumpbox.COMIC_TITLE}</option>
<!-- END jumpbox -->
</select>
</form>
</td>
<td align="center"><a href="{NAV_NEXT}" class="navi">Next ></a></td>
<td align="center"><a href="{NAV_LAST}" class="navi">Latest »</a></td>
</tr>
</table>
<br><br>
<table name="commentary" border="0" align="center" width="100%>
<tr><td colspan="2">
<!-- BEGIN switch_author_comments -->
<h2>Author Comments:</h2>
<!-- END switch_author_comments -->
</td></tr>
<!-- BEGIN loop_author_comments -->
<tr><td colspan="2">
<a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}
<span>
<!-- BEGIN switch_user_can_edit -->
<a href="{loop_author_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_author_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">( Edit )</a>
<!-- END switch_user_can_edit -->
<!-- BEGIN switch_user_can_delete -->
<a href="{loop_author_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_author_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">( Delete )</a>
<!-- END switch_user_can_delete -->
</span>
</td></tr>
<tr><td valign="top" width="25%" align="left">
<p>
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_author_comments.POSTER_AVATAR_IMG_WIDTH}" />
<!-- END switch_poster_avatar -->
</td>
<td valign="top">
<b>{loop_author_comments.POST_TITLE}</b><br>
{loop_author_comments.MESSAGE}
</p>
</td></tr>
<tr><br></td></tr>
<!-- END loop_author_comments -->
<tr><td colspan="2" align="right"><a href="/postcomment.php?cid={COMIC_ID}" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">Post A Comment</a></td></tr>
<tr><td colspan="2">
<!-- BEGIN switch_user_comments -->
<h2>User Comments:</h2>
<!-- END switch_user_comments -->
</td></tr>
<!-- BEGIN loop_user_comments -->
<tr><td colspan="2">
<a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}
<span>
<!-- BEGIN switch_user_can_edit -->
<a href="{loop_user_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">( Edit )</a>
<!-- END switch_user_can_edit -->
<!-- BEGIN switch_user_can_delete -->
<a href="{loop_user_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">( Delete )</a>
<!-- END switch_user_can_delete -->
</span>
</td></tr>
<tr><td valign="top" width="25%" align="left">
<p>
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" />
<!-- END switch_poster_avatar -->
</td><td valign="top">
<br><b>{loop_user_comments.POST_TITLE}</b><br>
{loop_user_comments.MESSAGE}
</p>
</td></tr>
<tr><td colspan="2">
<tr><td colspan="2"></td></tr>
<!-- END loop_user_comments -->
<tr><td colspan="2" align="right"><a href="/postcomment.php?cid={COMIC_ID}" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">Post A Comment</a>
<br />
</td></tr></table name="commentary">
</td></tr>
</table name="news">
<br>
Comic Archive
- Code: Select all
<div id="dhtmltooltip"></div>
<h4 class="red">» Comic Archive</h4>
<table width="650px" border="1" cellpadding="5" cellspacing="0" align="center">
<tr><th bgcolor="#87737A">#</th><th bgcolor="#87737A">Title</th><th bgcolor="#87737A">Date Released</th><th bgcolor="#87737A">Comments</th></tr>
<!-- BEGIN archive_list -->
<tr><td>{archive_list.COMIC_NUMBER}</td><td><a href="{archive_list.COMIC_URL}" onMouseOver="ddrivetip(thumbnail('{archive_list.THUMBNAIL_IMG_SRC}'))" onMouseOut="hideddrivetip()">{archive_list.COMIC_TITLE}</a></td><td>{archive_list.DATE_RELEASED}</td><td><a href="{archive_list.COMIC_URL}">{archive_list.NUMBER_COMMENTS} Comments</a></td></tr>
<!-- END archive_list -->
</table>
<style type="text/css">
#dhtmltooltip{
position: absolute;
border: 2px solid black;
background: #fff;
padding: 2px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<script language="JavaScript" type="text/javascript">
/* <![CDATA[ */
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=15 //Customize x offset of tooltip
var offsetypoint=25 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
function thumbnail(img_src) {
return '<img src="' + img_src + '" />';
}
/* ]]> */
</script>
