Template: Choco Mint

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

Template: Choco Mint

Postby Airse » June 23rd, 2013, 9:08 am

Tried my hand at making a template. Please do tell me if there are any bugs C:
Image
http://chocominttemp.smackjeeves.com/

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>
   <META NAME="Description" CONTENT="{SITE_DESCRIPTION}">
   <META NAME="Keywords" CONTENT="{SITE_NAME}, {PAGE_TITLE}, good webcomic">
   <style type="text/css">
      body {
         font-family: 'Lucida Sans Unicode';
         color: #685642;
         margin: 0;
      }
      a {
         color: #78D03B;
         font-weight: bold;
         text-decoration: none;
      }
      a:hover {
         color: #FFFFFF;
      }
      h2 {
         background: rgb(125,211,66); /* Old browsers */
         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkZDM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YjhhMWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background: -moz-linear-gradient(top,  rgba(125,211,66,1) 0%, rgba(75,138,31,1) 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,211,66,1)), color-stop(100%,rgba(75,138,31,1))); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* IE10+ */
         background: linear-gradient(to bottom,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dd342', endColorstr='#4b8a1f',GradientType=0 ); /* IE6-8 */
         color: #FFFFFF;
         padding-top: 10px;
         padding-bottom: 10px;
         text-align: center;
      }
      #side-navigator {
         position: absolute;
         top: 30px;
         left: 0px;
         width: 250px;
         padding: 0 0 0 0;
         display: block;
         background-color: #DED29E;
         -moz-border-top-right-radius: 10px;
         border-top-right-radius: 10px;
         -moz-border-bottom-right-radius: 10px;
         border-bottom-right-radius: 10px;
      }
      #comic-info {
         margin: 0;
         background: rgb(125,211,66); /* Old browsers */
         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkZDM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YjhhMWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background: -moz-linear-gradient(top,  rgba(125,211,66,1) 0%, rgba(75,138,31,1) 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,211,66,1)), color-stop(100%,rgba(75,138,31,1))); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* IE10+ */
         background: linear-gradient(to bottom,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dd342', endColorstr='#4b8a1f',GradientType=0 ); /* IE6-8 */
         color: #FFFFFF;
         padding: 15px 5px 15px 5px;
         -moz-border-top-right-radius: 10px;
         border-top-right-radius: 10px;
         -moz-border-bottom-right-radius: 10px;
         border-bottom-right-radius: 10px;
         width: 240px;
      }
      #menu {
         width: 100%
         padding: 0 0 0 0;
         margin: 0;
      }
      #menu ul {
         margin: 0;
         padding: 0 0 0 0;
      }
      #menu li {
         display: block;
         padding: 5px 5px 5px 5px;
         background-color: #DED29E;
         width: 240px;
         -moz-border-bottom-right-radius: 10px;
         border-bottom-right-radius: 10px;
      }
      #menu li:hover {
         background: rgb(222,210,158); /* Old browsers */
         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlZDI5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNWE5NzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background: -moz-linear-gradient(top,  rgba(222,210,158,1) 0%, rgba(181,169,118,1) 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,210,158,1)), color-stop(100%,rgba(181,169,118,1))); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  rgba(222,210,158,1) 0%,rgba(181,169,118,1) 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  rgba(222,210,158,1) 0%,rgba(181,169,118,1) 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  rgba(222,210,158,1) 0%,rgba(181,169,118,1) 100%); /* IE10+ */
         background: linear-gradient(to bottom,  rgba(222,210,158,1) 0%,rgba(181,169,118,1) 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ded29e', endColorstr='#b5a976',GradientType=0 ); /* IE6-8 */
      }
      #menu a {
         color: #685642;
         text-transform: uppercase;
         text-decoration: none;
         font-weight: bold;
      }
      #top-menu {
         text-align: center;
         background-color: #685642;
         -moz-border-top-right-radius: 10px;
         border-top-right-radius: 10px;
         -moz-border-top-left-radius: 10px;
         border-top-left-radius: 10px;
         padding-left: 20px;
         padding-right: 20px;
      }
      #top-menu ul {
         display: inline-block;
         padding: 0 0 0 0;
         margin: 0 auto;
         zoom: 1;
         *display: inline;
         font-size: 0pt;
      }
      #top-menu li{
         padding: 20px 20px 20px 20px;
         background-color: #685642;
         font-size: 12pt;
         display: inline-block;
         text-align: center;
      }
      #top-menu li a {
         text-decoration: none;
         text-transform: uppercase;
         font-weight: bold;
         color: #FFFFFF;
         vertical-align: middle;
      }
      #top-menu li:hover {
         background-color: #473B2D;
      }
      #main-bottom {
         width: 100%;
         background-color: #685642;
         color: #FFFFFF;
         margin-top: 20px;
         font-size: 10pt;
         padding-top: 5px;
         padding-bottom: 5px;
      }
      #rate ul {
         display: inline-block;
         padding: 0 0 0 0;
      }
      #rate li {
         display: inline-block;
         padding: 5px;
      }
      .credits {
         font-size: 8pt;
      }
      #content {
         margin-left: 280px;
         margin-top: 30px;
         display: inline-block;
      }
      .main {
         max-width: 800px;
         border: 2px #685642 solid;
         padding-left: 20px;
         padding-right: 20px;
         padding-bottom: 30px;
         -moz-border-bottom-right-radius: 10px;
         border-bottom-right-radius: 10px;
         -moz-border-bottom-left-radius: 10px;
         border-bottom-left-radius: 10px;
      }
      #comic-container {
         width: 100%;
         text-align: center;
      }
      .comicnav {
         text-align: center;
      }
      .comicnav a{
         font-size: 20pt;
         background-color: #DED29E;
         width: 100px;
         height: 40px;
         display: inline-block;
         padding: 20px;
         color: #685642;
      }
      .comicnav a:hover {
         background-color: #685642;
         color: #DED29E;
      }
      .sub-title {
         text-align: center;
         font-size: 15pt;
      }
      .cpost-header {
         text-align: right;
         background-color: #685642;
         color: #FFFFFF;
         -moz-border-top-right-radius: 10px;
         border-top-right-radius: 10px;
         -moz-border-top-left-radius: 10px;
         border-top-left-radius: 10px;
         padding:10px
      }
      .cpost-header a {
         color: #FFFFFF;
         margin-right: 10px;
      }
      .post-me {
         text-align: center;
      }
      .post-me a {
         padding: 10px;
         background: rgb(125,211,66); /* Old browsers */
         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkZDM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YjhhMWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background: -moz-linear-gradient(top,  rgba(125,211,66,1) 0%, rgba(75,138,31,1) 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,211,66,1)), color-stop(100%,rgba(75,138,31,1))); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* IE10+ */
         background: linear-gradient(to bottom,  rgba(125,211,66,1) 0%,rgba(75,138,31,1) 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dd342', endColorstr='#4b8a1f',GradientType=0 ); /* IE6-8 */
         color: #FFFFFF;
         font-size: 15pt;
         -moz-border-radius: 10px;
         border-radius: 10px;
      }
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
      var scroll_point;
      var stalking_sidebar = function(){
         if(scroll_point == null)   {
            scroll_point = $("#side-navigator").position().top;
         }
         if($(window).scrollTop() >= scroll_point){
            $("#side-navigator").css({position:'fixed',top:'0px'});
            $("#side-navigator").css('left','-' + $(window).scrollLeft() + 'px');
            return;
         }
         $("#side-navigator").css({position:'absolute',left:'0px'});
         $("#side-navigator").css('top',scroll_point + 'px');
      };
      $(window).load(stalking_sidebar);
      $(window).scroll(stalking_sidebar);
   </script>
</head>
<body>
<div id="side-navigator">
   <div id="comic-info">
      <span style="text-transform:uppercase; font-weight: bold; font-size: 14pt;">{SITE_NAME}</span><br>
      {PAGE_TITLE}
   </div>
   <div id="menu">
      {MENU}
   </div>
</div>
<div id="content">
   <div id="top-menu">{MENU}</div>
   {CONTENT}
</div>
<div id="main-bottom">Template by <a href="http://www.smackjeeves.com/profile.php?id=8145">Airse</a></div>
</body>
</html>


News/Welcome Page
Code: Select all
<div class="main">
   <h2>{SITE_NAME}</h2>

   <!-- BEGIN latest_comic -->
   <div id="latest-comic" style="padding: 10px;">
      <table>
         <tr>
            <td style="width: 70%;">{SITE_DESCRIPTION}</td>
            <td style="text-align:center;">
               <a href="{latest_comic.URL}">{latest_comic.TITLE}</a><br />
               <a href="{latest_comic.URL}"><img src="{latest_comic.THUMBNAIL_IMG_SRC}" alt="{latest_comic.TITLE}" title="{latest_comic.TITLE}" /></a>
            </td>
         </tr>
      </table>
   </div>
   <!-- END latest_comic -->
   <h2>News</h2>
   <!-- BEGIN news_loop -->
   <!-- Begin .post -->
   <div class="post"><a name="{news_loop.POST_ID}"></a>
      <h3 class="post-title">
      <a href="{news_loop.COMMENT_LINK}">{news_loop.POST_TITLE}</a>
      </h3>
      <div class="post-body">
      <p>{news_loop.MESSAGE_BODY}</p>
      </div>   
      <p class="post-footer">
        <em>posted by <a href="{news_loop.AUTHOR_PROFILE_URL}" target="_profile">{news_loop.POST_AUTHOR}</a> @ {news_loop.POST_DATE}</em> &nbsp;
        <a class="comment-link" href="{news_loop.COMMENT_LINK}">{news_loop.COMMENT_COUNT} comments</a>
      </p>
   </div>      
   <!-- End .post -->      
   <!-- END news_loop -->
   <a href="{NEWS_ARCHIVE_LINK}">News Archive >></a>
</div>


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

var dir = "";
var pic_unselected = "http://i39.tinypic.com/2illb10.jpg";
var pic_selected = "http://i43.tinypic.com/33mbo8w.png";

// "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_pic = "http://www.smackjeeves.com/templates/default/images/your-rating-2.gif";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/rate-it.gif";
<!-- END switch_user_hasnt_voted -->

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

      document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');
   }
   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>
<div class="main">
   <h2>{COMIC_TITLE}</h2>
   <table style="width:100%;">
      <tr>
         <td>
            {COMIC_POST_DATE}<br>
            <div id="rating">Average Rating:<b>{AVERAGE_RATING}</b></div>
         </td>
         <td style="text-align:right">
            <div id="rate"><script language="JavaScript">build_vote();</script></div>
         </td>
      </tr>
   </table>
   
   <table id="comic-container"><tr><td>

   <!-- 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 -->

   </td></tr></table>

   <div style="padding: 8px 0 3px">{SHARE_THIS_COMIC}</div>
   <div class="comicnav">
      <a href="{NAV_FIRST}">FIRST</a>
      <a href="{NAV_PREV}">PREV</a>      
      <a href="{NAV_NEXT}">NEXT</a>
      <a href="{NAV_LAST}">LAST</a>
   </div>
</div>
   <table id="comments_container" style="width:100%;"><tr><td>

      <!-- BEGIN switch_author_comments -->
      <h1 class="sub-title">Author's Comments</h1>
      <!-- END switch_author_comments -->
      
      <!-- BEGIN loop_author_comments -->
      <div class="cpost-header">
         <div style="float: left; margin-left: 10px;"><a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>@ {loop_author_comments.DATE_POSTED}</div>
         <a href="{loop_author_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_author_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
         <!-- 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=340, 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=340, width=420'); new_window.focus(); return false;">Delete</a>
         <!-- END switch_user_can_delete -->
      </div>
      <div class="main" style="padding-top: 10px; padding-bottom: 10px; margin-bottom:10px;">
         <table><tr>
            <td>
               <!-- 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 style="padding-left:20px;">
               <b>{loop_author_comments.POST_TITLE}</b><br>
               {loop_author_comments.MESSAGE}
            </td>
         </tr></table>
      </div>
      <!-- END loop_author_comments -->
      
      <!-- BEGIN switch_user_comments -->
      <h1 class="sub-title">User's Comments</h1>
      <!-- END switch_user_comments -->
      
      <!-- BEGIN loop_user_comments -->
      <div class="cpost-header">
         <div style="float: left; margin-left: 10px;"><a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>@ {loop_user_comments.DATE_POSTED}</div>
         <a href="{loop_user_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
         <!-- 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=340, 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=340, width=420'); new_window.focus(); return false;">Delete</a>
         <!-- END switch_user_can_delete -->
      </div>
      <div class="main" style="padding-top: 10px; padding-bottom: 10px; margin-bottom:10px;">
         <table><tr>
            <td>
               <!-- 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 style="padding-left:20px;">
               <b>{loop_user_comments.POST_TITLE}</b><br>
               {loop_user_comments.MESSAGE}
            </td>
         </tr></table>
      </div>
      <!-- END loop_user_comments -->   

      <h1 class="post-me"><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></h1>

   </td></tr></table>


Comic Archive
Code: Select all
<div id="dhtmltooltip"></div>


<div class="main">



<!-- BEGIN switch_comic_has_chapters -->

   <style type="text/css">
   
      .chapter_list a
      {
         padding: 4px 7px;
         margin: 0 4px 8px;
         display: inline-block;
         border: 1px solid #444444;
         background: #eee;
         -moz-border-radius: 6px;
         -webkit-border-radius: 6px;
         text-decoration: none;
      }
      
   </style>
   
   <div class="chapter_list">
   
      <!-- BEGIN archive_chapters -->
         <a href="#ch_{archive_chapters.CHAPTER_ID}">{archive_chapters.CHAPTER_TITLE}</a>
      <!-- END archive_chapters -->
   
   </div><br />
   
<!-- END switch_comic_has_chapters -->

<style type="text/css">

   #chapter_table
   {
      border-collapse: separate;
   }
   
   #chapter_table th, #chapter_table td
   {
      padding: 4px 6px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
   }
   
   #chapter_table th
   {
      background: #444;
      color: white;
   }
   
   #chapter_table td
   {
      background: #ededed;
   }
   
   .chapter_title h2
   {
      margin: .5em;
   }
   
</style>

<table id="chapter_table" align="center">



   <tr><th>#</th><th>Title</th><th>Date Released</th><th>Comments</th></tr>
   
   <!-- BEGIN archive_chapters -->
   
      <!-- BEGIN switch_comic_has_chapters -->
      <tr><td colspan="4" class="chapter_title"><a name="ch_{archive_chapters.CHAPTER_ID}"><h2>{archive_chapters.CHAPTER_TITLE}</h2></a></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><a href="{archive_chapters.archive_comics.COMIC_URL}">{archive_chapters.archive_comics.NUMBER_COMMENTS} Comments</a></td>
      </tr>

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

</table>


</div>
<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 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<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>


News archive:
Code: Select all
<div class="main">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="padding-top:20px; padding-right:10px; width: 20%">
<div style="border: 2px solid #685642; margin: 0px; background: #DED29E; padding: 5px;">
<h3 style="margin: 0; padding: 3px; font-size: 1em; color: #222;">News Archive</h3>
<ul class="months" style="list-style:none; padding:0;margin:0;">
<!-- BEGIN loop_months -->   
   <li><a href="{loop_months.MONTH_LINK}">{loop_months.MONTH}</a>
   <ul style="list-style:none;">
<!-- BEGIN loop_posts -->
   <!-- BEGIN switch_selected_post -->
      <li class="post-item-selected">
         <!-- END switch_selected post -->
         <!-- BEGIN switch_unselected_post -->
      </li>
      <li class="post-item">
         <!-- END switch_unselected_post -->
         <a href="{loop_months.loop_posts.LINK}">{loop_months.loop_posts.TITLE}</a>
      </li>
<!-- END loop_posts -->
   </ul>
<!-- END loop_months -->
   </li>
</ul>
</div>
</td>
<td width="80%" valign="top">
<!-- Begin .post -->
<div class="post"><a name="{POST_ID}"></a>
   <h2 class="date-header">{POST_DATE}</h2>
   <h3 class="post-title">
   {POST_TITLE}
   </h3>
   <div class="post-body">
   <p>{POST_CONTENT}</p>
   </div>
   <p class="post-footer">
      <em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp;
     <a class="comment-link" href="#">{COMMENT_COUNT} comments</a>
    </p>
</div>
<!-- End .post -->
<table id="comments_container" style="width:100%"><tr><td>
<!-- BEGIN switch_comments -->
<h1 class="sub-title">Comments</h1>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<div class="cpost-header">
<div style="float: left; margin-left: 10px;"><a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>@ {loop_comments.DATE_POSTED}</div>
<!-- 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="main" style="padding-top: 10px; padding-bottom: 10px; margin-bottom:10px;">
   <table><tr>
      <td>
         <!-- BEGIN switch_poster_avatar -->
         <img src="{loop_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_comments.POSTER_AVATAR_IMG_WIDTH}" />
         <!-- END switch_poster_avatar -->
      </td>
      <td style="padding-left:20px;">
         <b>{loop_comments.POST_TITLE}</b><br>
         {loop_comments.MESSAGE}
      </td>
   </tr></table>
</div>
<!-- END loop_comments -->   



<h1 class="post-me"><a href="/newscomment.php?cid={POST_ID}" 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></h1>



</td></tr></table>



</td>

</tr></table>
</div>
User avatar
Airse
 
Posts: 3
Joined: September 30th, 2006, 9:24 pm

Re: Template: Choco Mint

Postby Meleeman » November 16th, 2013, 4:35 pm

This is beautiful. I like the how the menu stays fixed while i'm scrolling without interfering with other elements of the page.
User avatar
Meleeman
 
Posts: 63
Joined: July 6th, 2011, 12:25 am


Return to Template Submission

Who is online

Users browsing this forum: No registered users and 3 guests

cron