True Flower Template (Modified)

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

True Flower Template (Modified)

Postby Guest » March 15th, 2011, 4:00 am

I'm not sure what happened to the original creator of this template, she hasn't replied to my PM... AyaneSensei, if you don't want me posting this I will take it down asap. ^

The original is here. All credit goes to AyaneSensei.

Image
True Flower Modified

I've modified her original template by updating a few things. You can see the list here:
Spoiler! :
  • Updated HTML to HTML5
  • Changed the Title brackets
  • Changed the Rating image
  • Font is now Georgia
  • Title is bolder color; has a 'glow' in most browsers
  • Layout is centered
  • Removed thumbnail script; fixed table in both archives (if someone knows how to improve the thumbnail script so that it isn't screwy in other web browsers please do tell!)
  • Remodeled Welcome page
  • Collapsed the Archive , Next, Last buttons to be on one line
  • Now cross-browser friendly. Tested in Opera, Safari, Google Chrome, Internet Explorer 8-9 and Firefox.


If you would like to use it please copy and paste the following codes into the according:

Overall
Code: Select all
<!DOCTYPE html>
   <html>
   <head>
   <title>「{SITE_NAME}」</title>
   <meta charset="UTF-8"/>

<style type="text/css">   

* { margin: 0; padding: 0; outline:0; }
html, body { height: 100%;}

   body {
      margin:0;
      padding:0;
      font-family: 'Georgia', serif;
      color: #D4B3AE;
      background-color:#D8E1C9;
   }

   ::selection {
   background:#A37175;
   color:#fff;
   }

   ::-moz-selection {
   background:#A37175;
   color:#fff;
   }

   ::-webkit-selection {
   background:#A37175;
   color:#fff;
   }
      
   a{ 
         color: #F7F7E8;
      text-decoration: none;
      }

   a:active { 
         color: #FCCCBE;}
   
   a:visited { 
      color: #D8E1C9; }
   
   a:hover { 
      color: #FCCCBE;
      text-decoration: underline;}
   
   a.nav{
      display:block;
      padding: 2px 0px 2px 5px;
      border-left: 5px solid #FFF;
      text-align: left;
      text-decoration: none;
      text-transform:uppercase;}
   
   a:link.nav {
      color: #D8E1C9;
      border-bottom: 1px dotted #B08982;
      background:#CB9F97;}

   a:active.nav {
      color: #889C4A;
      border-bottom:1px dotted #B67A6E;
      background:#CB9F97; }

   a:visited.nav {
      color: #D8E1C9;
      border-bottom:1px dotted #B08982;
      background:#CB9F97;}

   a:hover.nav {
      color:#CB9F97;
      font-weight:none;
      border-bottom:1px dotted #C6A6AD;
      background-color: #D8E1C9;}

   h1, h2, h3, h4, h5 {padding:0; margin:0;}
      
   h1 {
      color: #CB9F97;
      font-size: 15px;
      font-weight:bold;
      text-align: center;
      letter-spacing:1px;
      text-transform: uppercase;]
      border: 2px solid #D8E1C9;
      background: #D8E1C9;
      margin-bottom:2px;}

   h2 {
      color: #CB9F97;
      font-weight:bold;
      font-size: 15px;
      text-align: center;
      border: 2px solid #D8E1C9;
      background: #D8E1C9;
   }

   span {
      font-family:'Arial', sans-serif;
      font-size:9px;
      }
   
   #wrap{
      background: transparent url(http://sadpanda.us/images/44274-NLNEBT1.png);
      background-repeat: center repeat-y;
      width: 990px;
      margin:0 auto;
      overflow: hidden;
      min-height:100%;
      }
      
   #header{
      background: transparent url(http://sadpanda.us/images/44273-C10WHWR.png);
      background-repeat: no-repeat;
      height:258px;
      text-align:center;
   }

   #title{
      font-weight:bold;
      font-size:40px;
      text-shadow:0px 0px 15px #fff;
      padding-top:100px;
      color:#A37175;
      }
   
   
   #navcolumn{
      float:left;
      position:relative;
      top:-25px;
      left:50px;
      width:165px;
      text-align:center;}
   
   #content{
      float:right;
      position:relative;
      top: -25px;
      left: -40px;
      width: 720px;
      margin:0 auto;
      text-align:left;}

   .red {
      color:#02D9B5;
    }
   
   .space{height:10px;}
   
   .comic{
      text-align:center;}
 
   .comment{
      width:100%;}
      
      .comment img{float: left; padding: 5px 10px; display:block;}
 
   table{
      border-collapse:collapse;
      margin:0 auto;
      text-align:center;}
      
   table,th, td{
      border:0;}
      
      th{background-color:#A37175;}
      
      ul, li, ol {list-style-type:none;}
      
   .latest{
      border:0;
      padding:10px 5px;
      background:transparent;
      text-align:center;
      float:right;
      position:relative; top:-15px;}

   .right{float:right; padding-right:20px;}
   .left{float:left; padding-left:20px;}
 
</style>
</head>

   <body>
   <div id="wrap">
      <div id="header">
      <div id="title">{SITE_NAME}</div>
      </div>
      
      <div id="navcolumn">
      <h1>Navigation</h1>
      {MENU}
      <span>Template Created By: <a href="http://www.smackjeeves.com/profile.php?id=38833">AyaneSensei</a></span>
      </div>
      
      <div id="content">
      {CONTENT}
      </div>

   </div>


   </body>
</html>


Menu
Code: Select all
      <!-- BEGIN links -->
      <a href="{links.URL}" class="nav">{links.TEXT}</a>
      <!-- END links -->     
      <a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="nav">+Favs</a>


News/ Welcome Page
Code: Select all
      
   <div class="latest">
      <!-- BEGIN latest_comic -->
         <br /><br />
       <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/44283-VDE7LDP.png" alt="RSS Feed" /></a>
    </div>

    
    <h1>{PAGE_TITLE}</h1>
    <div style="min-height:200px;"> <br />
      <!-- BEGIN news_loop -->
      <!-- Begin .post -->
     
     <a name="{news_loop.POST_ID}"></a>
      <strong>{news_loop.POST_TITLE}</strong>
      <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> &nbsp;-&nbsp;
      <a href="{news_loop.COMMENT_LINK}">{news_loop.COMMENT_COUNT} comments</a></p>
      <!-- End .post -->
      <!-- END news_loop -->
     </div>
    
      <a href="/news-archive/">News Archive &#187;</a>


News Archive
Code: Select all
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="text-align:left;">
<tr><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><br />

<!-- End .post -->
<table id="comments_container"><tr><td>
<!-- BEGIN switch_comments -->
<h1 class="sub-title">Comments:</h1>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<h1 class="cpost-header">
<span>
<!-- 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 -->
</span>

<a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>, {loop_comments.DATE_POSTED}</h1>
<p>

<!-- 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 -->
<b>{loop_comments.POST_TITLE}</b>
{loop_comments.MESSAGE}
</p>
<!-- END loop_comments -->   

<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>
</td></tr></table>

</td>
<td>
<div style="float:right; position:relative; top:-35px; text-align:center;">
<h3>News Archive</h3>

<ul class="months">
<!-- BEGIN loop_months -->   

   <li><a href="{loop_months.MONTH_LINK}">{loop_months.MONTH}</a></li>

<!-- BEGIN loop_posts -->

   <!-- BEGIN switch_selected_post -->
      <li class="post-item-selected">
   <!-- END switch_selected post -->
 
  <!-- BEGIN switch_unselected_post -->
   <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 -->

<!-- END loop_months -->
</ul>
</div>
</td>

</tr></table>


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

var dir = "";
var pic_unselected = "http://sadpanda.us/images/388157-PBR4DWN.png";
var pic_selected = "http://sadpanda.us/images/388158-72RQ4CK.png";

// "Buffers" the image to the browser
document.write('<img style="display: none; line-height:16px;" src="' + dir + pic_unselected + '" />');
document.write('<img style="display: none; line-height:16px;" 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>

   <h1>» {PAGE_TITLE} - {COMIC_POST_DATE}</h1>

   <div class="comic">
   
      <div class="space"></div>

      <b>Average Rating:</b>
      <i>{AVERAGE_RATING}</i> <br /><br />
      <script language="JavaScript">build_vote();</script>
      
   <div class="space"></div>
   
   <!-- BEGIN comic_image -->
   <style>
   #comic_area   {
   display: inline-block;
   margin: 0 auto;
   position: relative;
   text-align:center;
   }
   </style>
   
   <div id="comic area">{comic_image.FORMATTED}
   <!-- END comic_image -->
   <!-- BEGIN switch_no_comic_image -->
   <img src="http://i129.photobucket.com/albums/p207/KNIVORY/A.gif">
   <!-- END switch_no_comic_image -->
   
   </div>


   <table><tr><td><a href="{NAV_FIRST}">« First</a> &nbsp;</td>
   <td><a href="{NAV_PREV}">< Back</a> &nbsp;</td>

   <td><form name="jumpbox" method="GET" style="margin:0 auto; padding:5px 15px;">
   <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><a href="{NAV_NEXT}">Next ></a> &nbsp;</td>
   <td><a href="{NAV_LAST}">Latest »</a></td></tr></table>
</div>

<div class="space"></div>

<div class="comment">

   <!-- BEGIN switch_author_comments -->
<h2>Author Comments</h2>
   <!-- END switch_author_comments -->
   
   <!-- BEGIN loop_author_comments -->
   <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>

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

   <div style="min-height:120px;">
   <br /><b>{loop_author_comments.POST_TITLE}</b><br>
   {loop_author_comments.MESSAGE}
   </div>

   <!-- END loop_author_comments -->

   <!-- BEGIN switch_user_comments -->
   <h2>User Comments</h2>
   <!-- END switch_user_comments -->   

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

   <!-- 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 -->
   <div style="min-height:120px;">
   <br><b>{loop_user_comments.POST_TITLE}</b><br>
   {loop_user_comments.MESSAGE}
   </div>

   <!-- END loop_user_comments -->   
   
   </div>

   <div style="float: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></div>


Comic Archive
Code: Select all
      <h1> Comic Archive</h1>
      <br>
      
<table width="540px" cellpadding="5" cellspacing="0">

   <tr><th>#</th>
   <th>Title</th>
   <th>Date Released</th>
   <th>Comments</th></tr>
   
   <!-- BEGIN archive_list -->
   <tr><td>{archive_list.COMIC_NUMBER}</td><td><a href="{archive_list.COMIC_URL}">{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>


Custom Page
Code: Select all
<h1>{PAGE_TITLE}</h1>
Your text below~
Guest
 

Re: True Flower Template (Modified)

Postby Lazy-lil-ninja » January 19th, 2012, 4:07 pm

Hi I was wondering-- what would I need to do to change the banner image/background image to coustom images posted on a image-hosting site (in this case photobucket) I have just enough know-how that if you point me in the right direction I can follow along pretty well. I just need to know which part of what code needs to be switched. thank you.
User avatar
Lazy-lil-ninja
 
Posts: 4
Joined: December 12th, 2010, 10:01 am

Re: True Flower Template (Modified)

Postby Guest » February 3rd, 2012, 10:14 pm

Lazy-lil-ninja wrote:Hi I was wondering-- what would I need to do to change the banner image/background image to coustom images posted on a image-hosting site (in this case photobucket) I have just enough know-how that if you point me in the right direction I can follow along pretty well. I just need to know which part of what code needs to be switched. thank you.


Sorry, but the header image is a little difficult to change. I didn't want to heavily deconstruct the original, only to clean it up, so I didn't make it as fully customizable and would not want to without prior permission from the original author.

But if you want to just photoshop a new banner image the image you need to change is this, located under the header id:
http://sadpanda.us/images/44273-C10WHWR.png

Since some of the bg is there, you also need to change it. To change the background image, search for the wrap id and change this image:
http://sadpanda.us/images/44274-NLNEBT1.png
Guest
 

Re: True Flower Template (Modified)

Postby SolaratheHedgehog » March 1st, 2012, 5:17 pm

In which template do we paste the code?
ImageImage
User avatar
SolaratheHedgehog
 
Posts: 291
Joined: July 5th, 2009, 3:26 pm

Re: True Flower Template (Modified)

Postby aquakitty101 » October 13th, 2014, 9:44 pm

how do I change the colors
Image
User avatar
aquakitty101
 
Posts: 64
Joined: September 24th, 2014, 8:40 pm

Re: True Flower Template (Modified)

Postby Viival » October 14th, 2014, 8:44 pm

aquakitty101 wrote:how do I change the colors

Alter the six symbol codes with pound symbols in front. More information on this page: http://faq.smackjeeves.com/faq-basiccoding/
Image
User avatar
Viival
 
Posts: 79
Joined: August 31st, 2014, 2:08 pm


Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest