Speech Bubble Template

Have a Smack Jeeves template you'd like to share with the community? Post it here!

Speech Bubble Template

Postby Rosie11 » October 11th, 2010, 5:36 pm

Image
Check it out.

This is my Speech Bubble template. I made it very much to my own tastes - but I'm hoping that there are some other people who like both blue and speech bubbles. :D Even if you don't want to use the template I'd love to hear what you think of it.

1. Feel free to change the template however you want. As long there's still some of my work, though, please give me credit. I'll post info on making basic changes (such as replacing the character in the banner) right after this.

2. I've tested the site on Safari, Chrome, Firefox, and Internet Explorer. But, I might have missed something so make sure you tell me if you find any problems! (Note: Certain boxes with rounded corners, such as the headers in the archive and about sections, have square corners in Internet Explorer. I can't do anything about that, but I don't think it's a big deal.)

To apply the template, go to Webcomic Management -> Page Design/Appearance and paste this code into each section.

Overall layout:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="http://{SITE_URL}.smackjeeves.com/rss/"/>
<title>{SITE_NAME} :: {PAGE_TITLE}</title>

<style type="text/css">
/************** reset stuff *******************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
html, body { height: 100%; }
body { line-height: 1; }
ol, ul { list-style: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse;
   border-spacing: 0;
}

/*************** basic stuff ***************/
body {
background:#c7dbff;
font-family: Arial,Helvetica,sans-serif;
color: black;
line-height: 1.25;
}

.white { color: white; }
.right { float: right; }
.left { float: left; }
.block { display: block; }

#container {
width: 916px;
margin: auto;
background: url('http://i786.photobucket.com/albums/yy146/clubloveimages/grad-bg.gif') repeat-y;
min-height: 100%;
position: relative;
}

#bottom-border{
position: absolute;
bottom:0;
}

#content {
position: relative;
left: 8px;
width: 900px;
background: white;
}

a:link, a:visited {text-decoration:none; color: #003fb3;}
a:hover, a:active {text-decoration:none; color: #005aff;}

#footer{
color:#003fb3;
text-align: center;
}

#footer a {text-decoration: underline;}

#page {
width: 800px;
margin: auto;
}

#blue {
background: #4f8dff url("http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/stripeBG.gif");
color: white;
padding: 5px;
padding-bottom: 30px;
}

h1 { font-size: 1.3em; }
p { margin: 0px 20px; }

.header {
background: #7facff url("http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/header-star2.gif") 8px 4px no-repeat;
margin: 3px;
padding: 3px 5px 3px 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

/************* Rating/News bar ****************/

#bar {
width: 900px;
height: 35px;
background:#005aff url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/bar.gif') repeat-x;
position: relative;
}

#bar-text {
width: 890px;
position:absolute;
top:2px;
left:10px;
color: white;
font-size: 1.4em;
}

a.bar:link, a.bar:visited {
color: #ffffff;
padding: 3px 15px;
float: right;
height: 27px;
position: relative;
top: -1px;
}

a.bar:hover, a.bar:active {
background-color:#003fb3;
}

img.rating-star{
position: relative;
top: 3px;
}

/****************** Comments / News *****************/

#comment-container {
position: relative;
width: 850px;
min-height: 131px;
margin: auto;
}

div.avatar {
position: absolute;
bottom: 0;
width: 125px;
height: 125px;
}

img.avatar {
position: absolute;
bottom: 10px;
}

.anchor-right { right: 0; }
.anchor-left { left: 0; }

#sb-container {
width: 700px;
padding-bottom: 5px;
position: relative;
}

div.user-comment {
position: relative;
left: 150px;
}

#sb-top { background: url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/sb-slices2.gif') 0 -24px; height: 16px;}

#sb-mid1 { background: white url("http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/sb-midbottom.gif") bottom left no-repeat; }

#sb-mid2 {
background:url("http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/sb-slices2.gif") 0 -119px no-repeat;
min-height: 47px;
padding: 5px 30px;
color: black;
position: relative;
}

#sb-author-bottom { background: url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/sb-slices2.gif') 0 -41px;
height: 38px; }

#sb-user-bottom { background: url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/sb-slices2.gif') 0 -80px;
height: 38px; }

#info-container{
width: 600px;
position: absolute;
bottom: 2px;
padding: 3px 35px;
}

div.user-info {
position: relative;
left: 28px;
}

a.info:link, a.info:visited { color: white; }
a.info:hover, a.info:active { text-decoration: underline; }

</style> </head>

<body>
<div id="container"> <div id="content">

{MENU} <br>
{CONTENT}
</div>

<img id="bottom-border" src="http://i786.photobucket.com/albums/yy146/clubloveimages/bottom-blend.gif">
</div>

<p id="footer"><a href="/">home</a> &nbsp|&nbsp {SITE_NAME} is hosted by <a href="http://www.smackjeeves.com">Smack Jeeves</a> &nbsp|&nbsp template by <a href="http://www.smackjeeves.com/profile.php?id=84425">Rosie11</a></p>
<br>

</body></html>


Menu:
Code: Select all
<style type="text/css">
#menu-container{
position:relative;
width: 900px;
height: 214px;
background: #4f8dff;
}

#title {
width: 620px;
height: 90px;
position:absolute;
left:65px;
text-align: center;
font-weight: bold;

/**** Adjust this to make the title font larger or smaller ****/
font-size: 3em;

/**** Adjust this to move the title up or down ****/
top:50px;
}

#link-container {
width: 715px;
position:absolute;
bottom: 1px;

/**** Delete this if you don't want your links to be all lower-case ****/
text-transform:lowercase;

/**** Adjust this to make the menu links larger or smaller ****/
font-size: 1.4em;
}

a.menu:link, a.menu:visited {
color: #ffffff;
padding-top:3px;
float: left;
height: 30px;

/*** Adjust right and left padding to change the amount of space between links ****/
padding-right:15px;
padding-left:15px;
}

a.menu:hover, a.menu:active {
background-color:#003fb3;
}
</style>

<div id="menu-container">

<!--replace portrait2 with your character image -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/title.gif"><img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/portrait2.gif">

<div id="title"> <a href="{SITE_URL_FULL}" class="title">{SITE_NAME}</a> </div>

<div id="link-container">
<!-- BEGIN links -->
   <a href="{links.URL}" class="menu">{links.TEXT}</a>
<!-- END links -->
<a href="http://www.smackjeeves.com/favorites.php?add= {SITE_ID}" class="menu">+ Fav</a>
</div>

</div>


News/welcome page:
Code: Select all
<script language="Javascript">
// Changes the position of the comic thumbnail depending on the comics proportions (w/h)
// This is meant to approximately vertically center the thumbnail in the arrow.
function setThumbnailTop(w_div_h)
{  var moveDown = 0;
   if (w_div_h > 3) { moveDown = 40; }
   else if (w_div_h > 2) { moveDown = 30; }
   else if (w_div_h > 1.5) { moveDown = 20; }
   var string = "<style type=\"text/css\"> #thumbnail {top:"+moveDown+"px } </style>";
   document.write(string);
}
</script>

<style type="text/css">
#welcome-container {
width: 540px;
margin: 0 30px;
min-height: 220px;
}

#welcome-container h1 {
color: #005aff;
color: #003fb3;
font-size: 1.7em;
}

#arrow {
float: right;
margin-right: 15px;
height:226px;
width: 277px;
position: relative;
}

#arrow a {
height:226px;
width: 277px;
display:block;
position: absolute;
background: url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/arrow2.gif');
}

#arrow a:hover { background: url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/arrow2.gif') 0 226px; }

#arrow h2 {
color: #003fb3;
font-size: 1.3em;
position: absolute;
bottom: 195px;
right: 140px;
}

#thumbnail-container{
width: 125px;
height: 125px;
position: absolute;
left: 20px;
top: 50px;
}

#thumbnail {
display: block;
margin: auto;
position: relative;
}

#news-bar-title {
font-size: 1.2em;
position: relative;
top: -1px;
left: 5px;
}

a.old-news{
margin-left: 50px;
font-size: 1.2em;
}

h2.news-title { font-size: 1.1em; }

</style>

<div id="arrow">
<h2>latest comic</h2>
<!-- BEGIN latest_comic -->

<script language="javascript"> // Find the latest comic's proportion and set the thumbnail's position.
var w_div_h = {latest_comic.IMG_WIDTH} / {latest_comic.IMG_HEIGHT};
setThumbnailTop(w_div_h);
</script>

<a href="{latest_comic.URL}">
<div id="thumbnail-container">
<img src="{latest_comic.THUMBNAIL_IMG_SRC}" id="thumbnail" alt="{latest_comic.TITLE}" title="{latest_comic.TITLE}">
</div></a>

<!-- END latest_comic -->
</div>

<div id="welcome-container">
<h1 class="welcome">Welcome to {SITE_NAME}</h1>
{SITE_DESCRIPTION}
</div>
<br>

<div id="bar"> <div id="bar-text">
<span id="news-bar-title"><img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/star-white.gif" /> News</span>
</div></div>

<div id="blue"><br>

<!-- BEGIN news_loop -->

<!-- Begin .post -->

<div id="comment-container">
<a name="{news_loop.POST_ID}"></a>

<div id="sb-container">
<div id="sb-top"></div>
<div id="sb-mid1"> <div id="sb-mid2">

<h2 class="news-title"><a href="{news_loop.COMMENT_LINK}">{news_loop.POST_TITLE}</a></h2>
{news_loop.MESSAGE_BODY}

</div></div><!-- end sb-mid-->

<div id="sb-author-bottom"></div>

<div id="info-container">
<a href="{news_loop.AUTHOR_PROFILE_URL}" target="_profile" class="info">{news_loop.POST_AUTHOR}</a>, {news_loop.POST_DATE}
<a class="info right" href="{news_loop.COMMENT_LINK}">{news_loop.COMMENT_COUNT} comments</a>
</div>

</div><!-- end sb-container-->

<div class="avatar anchor-right">
<!-- BEGIN switch_author_avatar -->
<img src="{news_loop.AUTHOR_AVATAR_IMG_SRC}" class="avatar anchor-left" />
<!-- END switch_author_avatar -->

<!-- BEGIN switch_author_no_avatar -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/guest-avatar2.gif" class=" avatar anchor-left" />
<!-- END switch_author_no_avatar -->
</div>

</div> <!-- end comment container-->
<br>
<!-- End .post -->
<!-- END news_loop -->
<a href="{NEWS_ARCHIVE_LINK}" class="info old-news"> Older news >> </a>

</div>


News archive:
Code: Select all
<style type="text/CSS">
#side-bar {
float: right;
width: 300px;
margin-right: 10px;
padding: 5px;
}

#news-main {
width: 560px;
margin-left: 10px;
padding:5px;
}

#sub-links {
margin-left: 30px;
}

a.news { color: black; }
a.news:hover, a.news:active { color: #003fb3; }

span.med-blue { color: #003fb3;}

#news-comment-container {
width: 550px;
min-height: 125px;
margin-left: 20px;
position: relative;
}

#news-comment-text {
width: 350px;
min-height: 90px;
position: relative;
left: 125px;
margin: 0 10px;
padding: 5px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #4f8dff;
}

div.news-avatar {
position: absolute;
top: 0px;
width: 125px;
height: 125px;
}

img.news-avatar {
position: absolute;
}

#news-info {
text-align: right;
color: #003fb3;
margin-left: 140px;
width: 380px;
}

#post-comment {
margin-left: 40px;
font-size: 1.3em;
}

</style>

<div id="side-bar">
<h1 class="header">News Archive</h1>
<p>
<!-- BEGIN loop_months -->   

<a href="{loop_months.MONTH_LINK}" class="news">{loop_months.MONTH}</a><br>
<!-- BEGIN loop_posts -->

<div id="sub-links">
<!-- BEGIN switch_selected_post -->
<span class="med-blue">• {loop_months.loop_posts.TITLE}</span>
<!-- END switch_selected post -->

<!-- BEGIN switch_unselected_post -->
<a href="{loop_months.loop_posts.LINK}" class="news">• {loop_months.loop_posts.TITLE}</a>
<!-- END switch_unselected_post -->
</div>

<!-- END loop_posts -->
<br>
<!-- END loop_months -->
</p>
</div><!-- end sidebar -->

<div id="news-main">
<!-- Begin .post -->

<h1 class="header">{POST_TITLE}</h1>
<p>{POST_CONTENT}<br>
<span class="right med-blue"><a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a>, {POST_DATE}</span>
</p>

<!-- End .post -->

<br><br>

<!-- BEGIN loop_comments -->

<div id="news-comment-container">

<div id="news-comment-text">
<b>{loop_comments.POST_TITLE}</b>
{loop_comments.MESSAGE}

</div>

<div id="news-info">
<a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>, {loop_comments.DATE_POSTED}
<!-- BEGIN switch_user_can_edit -->
| <a href="{loop_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_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_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">delete</a>
<!-- END switch_user_can_delete -->
</div>

<div class="news-avatar anchor-left">
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_comments.POSTER_AVATAR_IMG_SRC}" class="news-avatar anchor-right" />
<!-- END switch_poster_avatar -->

<!-- BEGIN switch_poster_no_avatar -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/guest-avatar2.gif" class="news-avatar anchor-right" />
<!-- END switch_poster_no_avatar -->
</div>

</div><!-- end comment container -->
<br>
<!-- END loop_comments -->

<a href="/newscomment.php?cid={POST_ID}" id="post-comment" onClick="var new_window = window.open('/newscomment.php?cid={POST_ID}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">>> post a comment</a>

</div><!-- end news-main -->

<br>


Comic page:
Code: Select all
<script language="JavaScript">

var dir = "http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/";
var pic_unselected = "star-white.gif";
var pic_selected = "star-blue.gif";

// "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};
var rate_it_text = "your rating: ";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_text = "rate comic: ";
<!-- END switch_user_hasnt_voted -->

function build_vote()
{document.write(rate_it_text);
   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 + '" class="rating-star"></a>');
   }
}

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>

<style type="text/css">

/*********** Comic and Navigation ************/

#comic-title {
margin: auto;
width: 90%;
}

#comic-title h1 {
display: inline;
color: #003fb3;
font-size: 1.7em;
}

#comic-title p {
display: inline;
color: #4f8dff;
font-size: 1.1em;
}

#jumpbox {
float: right;
margin-top:10px;
}

#comic-container {
margin: 10px 0px;
text-align: center;
}

#nav-container{
margin: auto;
width: 320px;
height: 45px;
position: relative;
}

a.nav-first, a.nav-prev, a.nav-next, a.nav-last {
height:45px;
width: 42px;
display:block;
position: absolute;
background: #3248A8;
}

a.nav-first { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 0 0; }
a.nav-first:hover { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 0 -45px; }

a.nav-prev { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') -42px 0; left: 70px; }
a.nav-prev:hover { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') -42px -45px; }

a.nav-next { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 84px 0; right: 70px;}
a.nav-next:hover { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 84px -45px; }

a.nav-last { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 42px 0; right: 0; }
a.nav-last:hover { background:url('http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/nav3.gif') 42px -45px; }

/********** comment button ***********/

a.comment-button {
padding: 7px 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #0053ea;
color: white;
font-size: 1.4em;
border: 1px solid #002364;
border-top-style: none;
border-left-style: none;
}

a.comment-button:hover { background: #003fb3;}

</style>


<br>
<div id="comic-title">
<h1>{COMIC_TITLE}</h1>&nbsp
<p> {COMIC_POST_DATE} </p>
<div id="jumpbox">{JUMPBOX_FORMATTED}</div>
</div>

<div id="comic-container">
<!-- BEGIN comic_image -->
{comic_image.FORMATTED}
<!-- END comic_image -->
<!-- BEGIN switch_no_comic_image -->
<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400">
<!-- END switch_no_comic_image -->
<br><br>
<div id="nav-container">
<a href="{NAV_FIRST}" class="nav-first"></a>
<a href="{NAV_PREV}" class="nav-prev"></a>
<a href="{NAV_NEXT}" class="nav-next"></a>
<a href="{NAV_LAST}" class="nav-last"></a>
</div>
<br><br>

</div>

<div id="bar">
<div id="bar-text">
<script language="JavaScript">build_vote();</script>
 &nbsp average rating: {AVERAGE_RATING}
<a href="/postcomment.php?cid={COMIC_ID}" class="bar" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">post comment</a>
</div>
</div>
<div id="blue">
   
<!-- BEGIN loop_author_comments -->
<br>
<div id="comment-container">

<div id="sb-container">
<div id="sb-top"></div>
<div id="sb-mid1"> <div id="sb-mid2">

<b>{loop_author_comments.POST_TITLE}</b>
   {loop_author_comments.MESSAGE}

</div></div>
<div id="sb-author-bottom"></div>

<div id="info-container">

<a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile" class="info">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}

<span class="right">
   <!-- 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;" class="info">Edit</a> &nbsp
   <!-- 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;" class="info">Delete</a>
   <!-- END switch_user_can_delete -->
</span>

</div></div>

<div class= "avatar anchor-right">
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" class="avatar anchor-left" />
<!-- END switch_poster_avatar -->

<!-- BEGIN switch_poster_no_avatar -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/guest-avatar2.gif" class="avatar anchor-left" />
<!-- END switch_poster_no_avatar -->
</div>

</div>
   <!-- END loop_author_comments -->

<br>

<!-- BEGIN loop_user_comments -->

<div id="comment-container">

<div id="sb-container" class="user-comment">
<div id="sb-top"></div>
<div id="sb-mid1"> <div id="sb-mid2">

<b>{loop_user_comments.POST_TITLE}</b>
   {loop_user_comments.MESSAGE}

</div></div>
<div id="sb-user-bottom"></div>

<div id="info-container" class="user-info">

<a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile" class="info">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}

<span class="right">
   <!-- 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;" class="info">Edit</a> &nbsp&nbsp
   <!-- 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;" class="info">Delete</a>
   <!-- END switch_user_can_delete -->
</span>

</div>

</div>

<div class="avatar anchor-left">
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" class="avatar anchor-right" />
<!-- END switch_poster_avatar -->

<!-- BEGIN switch_poster_no_avatar -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/guest-avatar2.gif" class="avatar anchor-right" />
<!-- END switch_poster_no_avatar -->
</div>

</div>
<br>
   <!-- END loop_user_comments -->
<br>
<div style="text-align: center">
<a class="comment-button" 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 comment</a>
</div>

<br>
</div>


Comic archive:
Code: Select all
<style type="text/css">

a.chapter {
background: #c7dbff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px 10px;
margin: 5px;
border: 1px solid #003fb3;
border-top-style: none;
border-left-style: none;
color: black;
}

a.chapter:hover {
background: #7facff;
color: black;
}

p.chapter {
line-height:250%;
}

#chapter-table {
margin-left: 30px;
margin-top: 10px;
}

#chapter-table td {
padding: 5px;
}

#chapter-table th, #chapter-table td {
border: 1px solid #005aff;
}

#chapter-table th {
background: #c7dbff;
font-weight: normal;
padding: 3px 8px;
}

td.chapter-title {
font-size: 1.2em;
font-weight: bold;
}

</style>

<div id="page">

<!-- BEGIN switch_comic_has_chapters -->
<h1 class="header">Chapter Archive</h1>
<p class="chapter">
<!-- BEGIN archive_chapters -->
<a href="#ch_{archive_chapters.CHAPTER_ID}" class="chapter">{archive_chapters.CHAPTER_TITLE}</a>
<!-- END archive_chapters -->
</p><br><br>
<!-- END switch_comic_has_chapters -->

<h1 class="header">Comic Archive</h1>

<table id="chapter-table">
<div id="dhtmltooltip"></div>

<tr><th>#</th><th>title</th><th>date</th><th>comments</th></tr>
   
<!-- BEGIN archive_chapters -->

<!-- BEGIN switch_comic_has_chapters -->
<tr><td colspan="4" class="chapter-title">
{archive_chapters.CHAPTER_TITLE}
</td></tr>
<!-- END switch_comic_has_chapters -->
   
<!-- BEGIN archive_comics -->

<tr><td>{archive_chapters.archive_comics.COMIC_NUMBER}</td>
<td><a href="{archive_chapters.archive_comics.COMIC_URL}" onMouseOver="ddrivetip(thumbnail('{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}'))" onMouseOut="hideddrivetip()">{archive_chapters.archive_comics.COMIC_TITLE}</a></td>

<td>{archive_chapters.archive_comics.DATE_RELEASED}</td>
<td>{archive_chapters.archive_comics.NUMBER_COMMENTS} comments</td>
</tr>

<!-- END archive_comics -->
<!-- END archive_chapters -->
   

</table>

<br><br><br>
</div><!-- end page-->


<style type="text/css">
#dhtmltooltip {
position: absolute;
visibility: hidden;
z-index: 100;
}
</style>

<script 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=-60 //Customize x offset of tooltip
var offsetypoint=15 //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>


Webcomic Management -> Custom pages:
Code: Select all
<div id="page">

Custom page content! Whatever you want!

</div>
Last edited by Rosie11 on November 17th, 2010, 8:43 pm, edited 4 times in total.
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby Rosie11 » October 11th, 2010, 5:57 pm

Here's some basic changes you will probably want to make to the Speech Bubble Template!

Changing the top banner
You will probably want to replace the guy on top banner with your own character. To do that, download this picture, and draw / paste your own character on top. It's important that you use that picture as the background or else it won't match the rest of the banner. When you're done, upload the finished picture to an image hosting site such as Photobucket. Next, go to Webcomic Management -> Appearance -> Menu. Find this spot in the html:
Code: Select all
<!--replace portrait2 with your character image -->
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/title.gif"><img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/portrait2.gif">

And replace the second URL with your picture's URL from the site you uploaded it to.

Changing the guest avatar
The picture for the guest avatar (which appears whenever a poster doesn't have an avatar) can any size less than or equal to 125px. Once you've finished that picture and uploaded it to some host, you have to change the URL in 4 places. (News/Welcome page, News archive, and twice on the comic page - everyone where avatars are displayed.)

In all cases, look for the code that says
<!-- BEGIN switch_author_no_avatar --> or <!-- BEGIN switch_poster_no_avatar --> .
After that will something like this:
<img src="http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/guest-avatar2.gif" class="avatar anchor-right" />
So just replace the URL with your image's URL.
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby Rosie11 » October 11th, 2010, 6:07 pm

More basic changes. I'm not trying to bump the thread or anything - it's just easier for me to post a little at a time.

Making title fit
If the tile of your comic is long or short, you can change the title size to make it look better. Go to Webcomic Management -> Appearance -> Menu and find this code:
Code: Select all
/**** Adjust this to make the title font larger or smaller ****/
font-size: 3em;

/**** Adjust this to move the title up or down ****/
top:50px;

You can adjust the size and move the title up or down until it fits well in the speech bubble.

Making links fit
If you have a ton of links in the menu, they might not all fit on one line. To solve this problem, you can either make the font size smaller or reduce the space between links. (Note: If you have a ton of extra pages, you might want to get rid of some of the default links, like home or latest comic, which take up space - ask me how to do that.)
In Webcomic Management -> Appearance -> Menu, find this code to adjust the size:
Code: Select all
/**** Adjust this to make the menu links larger or smaller ****/
font-size: 1.4em;


And this code to adjust the spacing: (Note: you should probably keep left and right padding the same.)
Code: Select all
/*** Adjust right and left padding to change the amount of space between links ****/
padding-right:15px;
padding-left:15px;


Let me know if you have any trouble or want me to help you change stuff! :D
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby I'm Rose » October 16th, 2010, 3:31 pm

Thanks so much! I might use it someday this is such a stylin' template.

I'm jealous of your layout skills. I can hardly make heads or tails of coding.
User avatar
I'm Rose
 
Posts: 2
Joined: October 7th, 2010, 4:16 pm

Re: Speech Bubble Template

Postby Rosie11 » October 20th, 2010, 8:32 pm

I'm glad you like it! :D As for coding skills, don't be discouraged. When I first started my comic I had the simplest layout ever (it wasn't on SJ so I didn't have to worry about comments and stuff.) Then over time I kept trying to improve my comic site, so I eventually learned a lot about HTML and CSS. If you're interested in making your own layout I recommend this site: http://www.w3schools.com/ - it's really helpful.
Image
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby Ddraigeneth » October 20th, 2010, 9:10 pm

Very cute. I'd be tempted to use it if I weren't working on my own. :)
User avatar
Ddraigeneth
 
Posts: 5475
Joined: June 26th, 2010, 12:06 pm
Location: 6 inches to the right

Re: Speech Bubble Template

Postby Gloometh » October 24th, 2010, 6:08 pm

umm.. I'm using your template here; http://usszodiac.smackjeeves.com but for some reason, all custom pages are weird? Look at the cast and about page. They've got no space between the edge of the template and the writing. Tables, blockqoute html codes and so on won't work, I've already tried.

Do you know what to do?

Also, awesome template!
User avatar
Gloometh
 
Posts: 2
Joined: March 20th, 2010, 11:48 am

Re: Speech Bubble Template

Postby Mr Aids » November 3rd, 2010, 1:17 am

This is a really cool template, you should PM Admin to have it added to the list of templates if you haven't already.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Speech Bubble Template

Postby Rosie11 » November 17th, 2010, 8:39 pm

Gloometh wrote:umm.. I'm using your template here; http://usszodiac.smackjeeves.com but for some reason, all custom pages are weird? Look at the cast and about page. They've got no space between the edge of the template and the writing. Tables, blockqoute html codes and so on won't work, I've already tried.


Sorry I didn't respond sooner - I forgot to watch this thread. Anyway, what you should do is enclose the code for your custom pages in a div. So on the custom page, the code will look like this:
Code: Select all
<div id="page">

Custom page stuff!
Whatever you want!

</div>

This should put a margin around the stuff on your custom page. In retrospect, I really should have made this simpler - but hopefully it won't be too much trouble.
Image
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby Gloometh » November 24th, 2010, 3:07 pm

(sorry for being late - didn't notice!)

Thank you. ^.^ I'll go see if that works!

EDIT: yet another question... I'm not sure how to change the images for the next-previous, etc?
User avatar
Gloometh
 
Posts: 2
Joined: March 20th, 2010, 11:48 am

Re: Speech Bubble Template

Postby Rosie11 » November 27th, 2010, 12:29 pm

Gloometh wrote:yet another question... I'm not sure how to change the images for the next-previous, etc?

There are two ways you can change the navigation buttons. In the original template, the button image changed you rolled over them, but setting that up can get kind of complicated. If you don't care about having the buttons change when you put your mouse over them, then it's pretty simple to change the image. Just find this code:
Code: Select all
#nav-container{
margin: auto;
width: 320px;
height: 45px;
position: relative;
}

And replace it with this:
Code: Select all
#nav-container { text-align: center; }

#nav-container a { padding: 10px; }

You can also remove all the stuff in the CSS code about a.nav-first, a.nav-prev, etc, since you don't need it any more.

And then find this code:
Code: Select all
<div id="nav-container">
<a href="{NAV_FIRST}" class="nav-first"></a>
<a href="{NAV_PREV}" class="nav-prev"></a>
<a href="{NAV_NEXT}" class="nav-next"></a>
<a href="{NAV_LAST}" class="nav-last"></a>
</div>

and replace it with this:
Code: Select all
<div id="nav-container">
<a href="{NAV_FIRST}"> <img src="" alt="first"> </a>
<a href="{NAV_PREV}" > <img src="" alt="prev"> </a> &nbsp; &nbsp; &nbsp; &nbsp;
<a href="{NAV_NEXT}" > <img src="" alt="next"> </a>
<a href="{NAV_LAST}" > <img src="" alt="last"> </a>
</div>

And then put your own image in for each link. Let me know if you have any problems with this.

If you do want to have links where the image changes when you roll over them, you'll have to do some work yourself. Once you understand sprites (you can start by reading about them here: http://www.w3schools.com/css/css_image_sprites.asp) then you should be able to edit the original code to reflect the dimensions of your images.
Image
User avatar
Rosie11
 
Posts: 88
Joined: May 21st, 2010, 10:44 am

Re: Speech Bubble Template

Postby awsome guy » March 22nd, 2011, 5:54 pm

This is really helpful, thanks! :D
Need HTML help? I'm your guy!
Image
User avatar
awsome guy
 
Posts: 15
Joined: December 12th, 2010, 7:59 am
Location: a dark and dreary island in the middle of nowhere

Re: Speech Bubble Template

Postby awsome guy » March 23rd, 2011, 7:19 am

Need HTML help? I'm your guy!
Image
User avatar
awsome guy
 
Posts: 15
Joined: December 12th, 2010, 7:59 am
Location: a dark and dreary island in the middle of nowhere

Re: Speech Bubble Template

Postby Bratchan » March 23rd, 2011, 3:54 pm

Find this in the code
Code: Select all
var dir = "http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/";
    var pic_unselected = "star-white.gif";
    var pic_selected = "star-blue.gif";


You need to have a Directory
Code: Select all
http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/

( a photoalbum in photobucket)
and then you have the name of the images
star-blue.gif
star-white.gif
Code: Select all
so in the end it makes
http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/star-blue.gif
http://i1184.photobucket.com/albums/z335/SJ_speechbubbletemplate/star-white.gif

And the top code will magically put it together so it has links. I hope i explained that ok o.o
Image
Image
I sell WebLayouts for Smackjeeves! Only $35 email me - Bratchan[at]sbcglobal.net! This layout will be unique only to you!
User avatar
Bratchan
 
Posts: 37
Joined: March 13th, 2007, 10:56 pm

Re: Speech Bubble Template

Postby awsome guy » March 23rd, 2011, 4:45 pm

thanks!
and while i'm asking questions how do you change the tabs at the top that link to different pages?
Need HTML help? I'm your guy!
Image
User avatar
awsome guy
 
Posts: 15
Joined: December 12th, 2010, 7:59 am
Location: a dark and dreary island in the middle of nowhere

Next

Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest