whistleonwild

SJ templates, part 2

Jul 26, 2009 19:18

(click thumbnail for full screenshot)

set up
Copy and paste everything from its .txt file to its respective template -- 'overall.txt' goes in the 'Overall Layout' template, 'Menu' goes into the 'Menu' template, etc.

modifying menu/navigation
If you want more links on the navigation bar, you'll have to make a button image for each one :| I'll try to work on a text-only navigation version of this soon, but if you want additional matching buttons go ahead and tell me (whistleonwild) what you need, and I'll throw them out for you! Or you can make your own, I guess.

edit, 7/26/09: SINCE I WAS STUPID AND DIDN'T SAY THIS BEFORE: the font used on the buttons is 'Delicious', and can be downloaded here.

modifying the header
The default header is just a placeholder. If you want to make your own banner image, just make sure it's 620x220 px, and (optional) add a border, I used 10px white (inside, so that the final image is still 620x220 px)

Then go to 'overall.txt' and find
-----------------------
#header {
background: url(http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/header.jpg) top no-repeat;
height: 220px;
width: 736px;
text-align: center;
margin-top: 20px;
}
-----------------------
Replace "http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/header.jpg" with a URL to your own banner.

how to create custom pages
Just make a new custom page and copy-and-paste the custom page template included in this post, under "custom page".

Just do NOT delete "
" or the "" tags at the beginning and end. Everything else in between can be modified or deleted.

this version
updated 7/8/2008
updated 12/12/2008, fixed navigtion menu sticking to the left side on comic + news archives. Thanks to Jokerine for alerting me!
updated 7/26/2009, fixed the fact that rating buttons weren't changing when users hovered over them. Thanks to Mr Aids for the fix.

comic archive

{COMIC_TITLE}

{COMIC_POST_DATE}

{comic_image.FORMATTED}

http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/nav-first.gif" alt="first">
http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/nav-prev.gif" alt="previous">
http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/nav-next.gif" alt="next">
http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/nav-last.gif" alt="last">

language="JavaScript">build_vote();

average rating: {AVERAGE_RATING}

post a comment

>author

{loop_author_comments.POST_TITLE}

{loop_author_comments.NAME} on {loop_author_comments.DATE_POSTED}

[edit]

[delete]

$view {loop_author_comments.NAME}'s profile$

{loop_author_comments.MESSAGE}

>user comments

{loop_user_comments.POST_TITLE}

{loop_user_comments.NAME} on {loop_user_comments.DATE_POSTED}

[edit]

[delete]

$view {loop_user_comments.NAME}'s profile$

{loop_user_comments.MESSAGE}

{POST_TITLE}

posted by {POST_AUTHOR} on {POST_DATE}

{POST_CONTENT}

{COMMENT_COUNT} comments

comments:

{loop_comments.POST_TITLE}

{loop_comments.NAME}

{loop_comments.MESSAGE}

(Edit)

(Delete)

News Archive

{loop_months.MONTH}

{loop_months.loop_posts.TITLE}

news page

{SITE_NAME}

{SITE_DESCRIPTION}

news

{news_loop.POST_TITLE}

posted by {news_loop.POST_AUTHOR} on {news_loop.POST_DATE}

{news_loop.MESSAGE_BODY}

{news_loop.COMMENT_COUNT} comments

News Archive >>

overall

{SITE_NAME}-- {PAGE_TITLE}
language="JavaScript">
var dir = "";
var pic_unselected = "http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/vote-unselected.gif";
var pic_selected = "http://img.photobucket.com/albums/v23/kanjii/smackjeeves/cold/vote-selected.gif";

var default_rating = 0;

function build_vote()
{
document.write('Rate this page: ');
for (n = 1; n<= 5; n++)
{
if (n <= default_rating)
{
default_pic = pic_selected;
} else {
default_pic = pic_unselected;
}

document.write('

');
}
document.write('');
}

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();
}

{CONTENT}

custom page

TITLES GOES HERE

SUBTITLE GOES HERE

(CONTENT GOES HERE)

sleepless

(click thumbnail for full screenshot)

set up
Copy and paste everything from its .txt file to its respective template -- 'overall.txt' goes in the 'Overall Layout' template, 'Menu' goes into the 'Menu' template, etc.

how to create custom pages
Just make a new custom page and copy-and-paste the custom page template included in this post, under "custom page".

If you want separate boxes on a single page, just set up your page as follows:

-----------------------

title

content of first section

title2

content of second section, etc

-----------------------

this version
made 12/14/08
02/02/09: copyright fixed

comic archive

Comic Archive

#	Title	Date Released	Comments
{archive_list.COMIC_NUMBER}	{archive_list.COMIC_TITLE}	{archive_list.DATE_RELEASED}	{archive_list.NUMBER_COMMENTS} Comments

type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (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//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 (curXtipobj.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 (bottomedgetipobj.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 '