Template Request (before I break anything else)

Request custom templates here. There is no guarantee that it will be made for you. Please be respectful, polite, and patient when posting a request.

Template Request (before I break anything else)

Postby thexeternal » August 1st, 2014, 8:05 pm

Heeeyyy~

So, I've gone back and forth a few times to different templates, trying to edit things here and there to get what I want, but I never really had any success. Now that I've kind of doodled things out in MSpaint, is there anyone who can help me accomplish what I'm looking for?

Spoiler! :
Image


It's kind of(?) similar to the one I've got now, instead of hangin out on the side, I would really like the links right under the banner. The "about" image referenced in my MSpaint pic is something I'm still working on so you wouldn't have to make one of those. Just have a space that I can easily put one in I guess.

The "preview" comic pic would link to the full-sized page, just like it does on the templates that SJ provides.


So is this doable? Is it more complicated than I think it is? D:
Of course if anyone wants to tackle this, you're free to make any changes that you think would look better. I have absolutely no eye for this thing haha.

(btw link to my banner is here- http://img.photobucket.com/albums/v214/ ... anner5.jpg)
User avatar
thexeternal
 
Posts: 174
Joined: January 18th, 2014, 11:15 pm
Location: butt

Re: Template Request (before I break anything else)

Postby eishiya » August 1st, 2014, 9:33 pm

How do you want the comic pages to look? Any special formatting for the comments? Should the comic page navigation be the same as what you have now?
Is this layout meant to be centered, or to the side?

In any case, this is definitely doable! Check out TopBanner, I think it's rather similar to what you're looking for, and would make for a better starting point than your current Pyro template. If you'd rather have someone else make it for you, I can do that, as it's a pretty quick modification of TopBanner.

If you have a test comic for creating new layouts, invite me as an author on that and I'll get to it as soon as I can. If not, then I can use my own.

One thing, though: although it IS possible to have the news page split up into halves with a black bar between them like you've drawn, I do not recommend doing it that way, as it'll create a lot of clutter in the news part and the preview half will be quite empty. Instead, I recommend having the preview take up less space and not have a black separator. As long as the preview bit has sufficient padding around it, it won't look like it's part of the news.

Edit: Another recommendation: Make the banner less tall. The width is fine, but the height is quite large and pushes the page down, meaning the reader has to scroll more to see the comic page.
Image
User avatar
eishiya
 
Posts: 9451
Joined: December 5th, 2009, 11:17 am

Re: Template Request (before I break anything else)

Postby thexeternal » August 1st, 2014, 10:14 pm

Thank you so much for the recommendations! They are very smart suggestions and I definitely agree with them.

I unfortunately don't have a test comic for new layouts and stuff. I didn't even think of that. If you are willing to take up the task of making my layout with your tester, that would be awesome! I appreciate it tons! <3

For the comic pages, I like the way TopBanner has them, all nicely centered and stuff, but it's too narrow for my pages. Otherwise it's great. I just really like Pyro's "previous, next, etc" buttons. In fact I think that's the only reason why I've used it so long haha. And for the comments, I don't really have any preferences. Whatever TopBanner does with them will probably do! Or y'know whatever else you might decide to do with them. :)

Oh and before I forget, here's a slightly smaller banner that you can use if you want:
http://img.photobucket.com/albums/v214/ ... anner6.jpg

I know it's not a lot smaller, but I'm kinda partial to large banners, hehe.

Thank you again! <3 I can't offer anything monetary, but I owe you some gift art~
User avatar
thexeternal
 
Posts: 174
Joined: January 18th, 2014, 11:15 pm
Location: butt

Re: Template Request (before I break anything else)

Postby eishiya » August 2nd, 2014, 8:16 am

I'll get on it. I'll keep the navigation buttons from Pyro and I'll see what works best for the comments. I'm personally not fond of either, but I'm probably going to stick with the TopBanner ones.


Edit: Done! Here you go, a preview.
It's mainly a modification of TopBanner made to use your and Pyro's images and made wider to fit your comics, and with the news page arranged closer to how you drew it. For everything else, I went largely with what TopBanner has, with a few minor changes. Some notes:
- you may want to create new ratings images. The ones you're using have a black background, but since you want a purple background, there's no match. It's not terribly noticeable and the same problem exists on your current layout, but I thought I'd mention it.
- Do you want the black around the header image to extend to the edge of the screen, or should it end where the layout ends? Or do you want the whole page except the content area to be black? My layout has it extending only to the edge of the layout.
- Do you want the "share this comic" widget that has Stumbleupon, etc links? I feel like it adds unnecessary clutter and longform comics don't tend to get shared on sites like that, but if you think it's useful, there's no problem in keeping it. It's in the layout right now, but removing it would be trivial.
- What is that Jeeves link meant to be? I'm an SJ member and I have no idea what you would mean by that and would have to look at the URL to figure it out xP You might want to rename it.
- I created placeholders for the non-automatic links. You will need to go into the menu section and add in the URLs yourself.
- I did not add the "Nightwalker updates every Sunday!" part because that's something that should be in your description.

Tell me if there are changes you need. If you're happy with it, then here's the code:
Spoiler! :
Overall layout:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>



<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="http://{SITE_URL}.smackjeeves.com/rss/" />

<meta name="Description" content="{SITE_DESCRIPTION}" />

<meta name="Keywords" content="{SITE_NAME}, {PAGE_TITLE}, web comic, webcomic, comic, web comics, webcomics, comics" />

<meta http-equiv="Content-Type" content="text/html" />



<title> {SITE_NAME} - {PAGE_TITLE}</title>



<style type="text/css">
@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");

body, html {
   margin:0;
   padding:0;
   background:#000;
   color:#fff;
   font-family:verdana, arial, sans-serif;
   font-weight:normal;
   font-size:1em;
}

body {
   min-width:900px;
}


#wrap {
   margin:0 auto;
   width:900px;
   background: #2b283b;
}

#menu {
   background:#000;
   color:#fff;
   padding:5px;
   margin: 5px 0px;
   text-align:center;
   font-family:"Century Gothic", verdana, arial, sans-serif;
   font-size:0.85em;
}

#menu ul{
   margin:0;
   padding:0;
   list-style:none;
}

#menu li{
   display:inline;
   margin:0;
   padding:0;
}

#menu a {
   font-weight: bold;
   color: #fff;
   text-decoration: none;
}

#menu a.hover {
   color: #dddddd;
   text-decoration: underline overline;
}

#header {
   background:#000;
}

#header img {
   border:0px;
   display: block;
   margin: auto;
}

#main {
   background:#2b283b;
   color:#fff;
   border:0;
   padding:5px 15px 5px 15px;
   font-size:0.75em;
}

#main img {
   border:0;
}

a, a:visited {
   font-weight:bold;
   text-decoration:none;
   color:#bbaabb;
}

a:hover {
   color:#dddddd;
   text-decoration:underline;


#comicnav .navleft {
   float:left;
   display:inline;
}

#comicnav .navleft img {
   margin:5px;
}

#comicnav .form {
   padding-top:30px;
}

#comicnav .navright {
   float:right;
   display:inline;
}

#comicnav .navright img {
   margin:5px;
}


/* RATINGS STYLING */
#comic-header
{
   height: 30px;
margin:0 10px 0 10px;
}

#comic-header #rating
{
   display: block;
   float: left;
}

#comic-header #rating img
{
   vertical-align: top;
   margin-top: 5px;
}

#comic-header #rating b
{
   font-size: 120%;
}

#comic-header #rate
{
   display: inline;
   float: right;
}

#comic-header #rate ul, #comic-header #rate li
{
   margin: 0;
   padding: 0;
   display: inline;
}

#comic-header #rate li
{
   list-style-type: none;
}

#comic-header #rate span
{
   margin: 0;
   padding: 0;
   display: block;
   float: left;
}

#comic-header #rate #text
{
   margin: 4px 4px 0;
}

#page {
   padding-bottom:30px;
}

.centered {
   text-align:center;
   margin-top:0px;
   margin-bottom:0px;
   padding:5px;
}   

.right {
   text-align:right;
}   

.red {
   color:#bbaabb;
}
</style>

</head>


<body>
   <div id="wrap">

      <div id="header">
         <a href="{SITE_URL_FULL}"><IMG SRC="http://img.photobucket.com/albums/v214/Lady_Hammer/nightwalkerbanner6.jpg" title="{SITE_NAME}" alt="{SITE_NAME}" /></a>
      </div>

      <div id="menu">{MENU}</div>

      <div id="main">   
      {CONTENT}
      </div>

   </div>

</body>
</html>

Menu:
Code: Select all
<ul>
<!-- BEGIN links -->
<li><a href="{links.URL}">{links.TEXT}</a>&nbsp;|&nbsp;</li>
<!-- END links -->     

<li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">Fav+</a>&nbsp;|&nbsp;</li>
<li><a href="yourtumblrurl">Tumblr</a>&nbsp;|&nbsp;</li>
<li><a href="yourfacebookurl">Facebook</a>&nbsp;|&nbsp;</li>
<li><a href="jeeveslink">Jeeves</a></li>

</ul>

News/Welcome page:
Code: Select all
<div class="centered"><p>{SITE_DESCRIPTION}</p></div>


<div style="height: auto; overflow: hidden;">
<div style="border:0; padding:10px; text-align:center; float:right; width: 200px;">

         <!-- BEGIN latest_comic -->

         <strong>Latest Update:</strong><br />

         <a href="{latest_comic.URL}" title="{latest_comic.TITLE}"><img src="{latest_comic.THUMBNAIL_IMG_SRC}" alt="{latest_comic.TITLE}" /></a><br />

         <a href="{latest_comic.URL}">{latest_comic.TITLE}</a>

         <!-- END latest_comic -->

         <br /><br />

         <a href="{SITE_URL_FULL}rss" title="RSS Feed"><img src="http://www.smackjeeves.com/templates/default/images/rss.gif" alt="RSS Feed" /></a>

      </div>
<div style="width: auto; overflow: hidden;">
      <h2>News:</h2>
      <style>
      .post {
         padding: 1em;
         margin: .5em;
         border: 1px dashed black;
         clear: both;
      }
      .date-header {
         margin: 0 0 .5em;
      }
      .post-title {
         margin: -2px -2px .2em;
         padding: 0;
         border: 0;
      }
      .post-title a {
         color: white;
         background: #333;
         padding: 6px;
         display: block;
      }
      </style>
     

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

         <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>
      </div>
      <!-- End .post -->
      <!-- END news_loop -->

      <p class="right"><a href="{NEWS_ARCHIVE_LINK}">News Archive &#187;</a></p>
</div>
</div>

News Archive:
Code: Select all
<div style="border:1px solid #bbaabb; padding:10px 5px 10px 5px; margin:15px 15px 15px 15px; color:#fff; width:250px; text-align:left; float:right;" align="center">

   <div id="navcontainer">

   <ul id="navlist">

   <!-- BEGIN loop_months -->   

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

   <ul id="subnavlist">

   <!-- BEGIN loop_posts -->

   <!-- BEGIN switch_selected_post -->

   <li>&#187;

   <!-- END switch_selected post -->

   <!-- BEGIN switch_unselected_post -->

   <li>

   <!-- END switch_unselected_post -->

   <a href="{loop_months.loop_posts.LINK}" id="subcurrent">{loop_months.loop_posts.TITLE}</a></li>

   <!-- END loop_posts -->

   </ul></li>

   <!-- END loop_months -->

   </ul>

   </div>

</div>



<h4 class="red">&#187; News Archives</h4>



   

<!-- Begin .post -->

<a name="{POST_ID}"></a>

   <h3>{POST_TITLE}</h3>

   <p>{POST_CONTENT}</p>

   <p><em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp;-&nbsp;

   <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;">{COMMENT_COUNT} Comments</a></p>

<!-- End .post -->



<br />



      <!-- BEGIN switch_comments -->

   <h4>Reader Comments:</h4>

      <!-- END switch_comments -->



<table id="comments_container" width="100%" border="0">

<!-- BEGIN loop_comments -->

<tr><td align="center" valign="top" width="20%">

<!-- 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}" style="border:0px; float:left; padding:0px 10px 3px 20px;" alt="" />

   <br /><br />

<!-- END switch_poster_avatar -->

   &nbsp;</td>

   <td valign="top" width="80%">

   <span class="large"><strong>{loop_comments.POST_TITLE}</strong></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 -->

   <p>{loop_comments.MESSAGE}</p>

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

   <br /><br />

</td></tr>

<!-- END loop_comments -->   

</table>



<p class="right"><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></p>

Comic Page:
Code: Select all
<script language="JavaScript" type="text/javascript">

/* <![CDATA[ */

var pic_unselected = "http://www.smackjeeves.com/templates/pyro_black/images/unselected.png";
var pic_selected = "http://www.smackjeeves.com/templates/pyro_black/images/selectedd.png";



<!-- 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('Rate it: ');

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="' + default_pic + '" name="star_' + n + '" style="border:0px;" /></a>&nbsp;');

}

document.write('');

}



function rateover(star_num)

{



for (n = 1; n <= 5; n++)

{

if (n <= star_num)

{

da_code = 'document.star_' + n + '.src="' + pic_selected + '"';

} else {

da_code = 'document.star_' + n + '.src="' + 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>



   <h4 class="red">&#187; {PAGE_TITLE} - <em>{COMIC_POST_DATE}</em></h4>

   

   <table border="0" width="100%" align="center">

   <tr><td align="left"></td>

       <td align="right">Average rating: <strong>{AVERAGE_RATING}</strong><br />

      <script language="JavaScript" type="text/javascript">/* <![CDATA[ */build_vote();/* ]]> */</script></td>

   </tr>

   </table>

   

   <p class="centered">

   <!-- BEGIN comic_image -->

   <div style="text-align: center; padding-bottom: 10px;">
      {comic_image.FORMATTED}
   </div>
   <!-- END comic_image -->

     

   <!-- BEGIN switch_no_comic_image -->

   <img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400" alt="" />

   <!-- END switch_no_comic_image -->

   </p>

 
<p class="centered">{SHARE_THIS_COMIC}</p>
  <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">

  <tr><td align="left" valign="top"><a href="{NAV_FIRST}" title="First Page"><img src="http://www.smackjeeves.com/templates/pyro_black/images/firstubl.png" alt="<< First"></a></td>

    <td align="left" valign="top"><a href="{NAV_PREV}" title="Previous Page"><img src="http://www.smackjeeves.com/templates/pyro_black/images/previousp.png" alt="< Previous"></a></td>

      <td align="center" style="width: 100%;">

      {JUMPBOX_FORMATTED}
      </td>

    <td align="right" valign="top"><a href="{NAV_NEXT}" title="Next Page"><img src="http://www.smackjeeves.com/templates/pyro_black/images/nexth.png" alt="Next >"></a></td>

    <td align="right" valign="top"><a href="{NAV_LAST}" title="Latest Page"><img src="http://www.smackjeeves.com/templates/pyro_black/images/lasts.png" alt="Latest Page >>"></a></td>

</tr>

</table>

 

  <br />



   

   <h3>Author Comments:</h3>

   

   <!-- BEGIN loop_author_comments -->

   <a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a><em>, {loop_author_comments.DATE_POSTED}</em>
   
( <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 -->

<br />

   <span class="large"><strong>{loop_author_comments.POST_TITLE}</strong></span>
<p>{loop_author_comments.MESSAGE}</p>



   <!-- END loop_author_comments -->

<p class="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></p>





   







     

      <h3>Reader Comments:</h3>

         

<table id="comments_container" width="100%" border="0">

   <!-- BEGIN loop_user_comments -->

<tr><td align="center" valign="top" width="20%">

   <!-- 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}" alt="" />

   <br /><br />

   <!-- END switch_poster_avatar -->

   &nbsp;</td>

   <td valign="top" width="80%">

   <span class="large"><strong>{loop_user_comments.POST_TITLE}</strong></span>
   
   ( <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 -->

    <p>

   {loop_user_comments.MESSAGE}

   </p>

   <p><em>posted by <a class="white" href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a> on {loop_user_comments.DATE_POSTED}</em></p>

   <br /><br />

   </td></tr>

   <!-- END loop_user_comments -->   

</table>





<p class="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></p>

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



<h4 class="red">&#187; Comic Archive</h4>


<!-- BEGIN switch_comic_has_chapters -->

   <style type="text/css">
   
      .chapter_list
      {
         text-align: center;
      }
   
      .chapter_list a
      {
         padding: 4px 7px;
         margin: 0 4px 8px;
         display: inline-block;
         border: 1px solid #bbaabb;
         -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
   {
   }
   
   .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}"></a><h2>{archive_chapters.CHAPTER_TITLE}</h2></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 style="white-space: nowrap">{archive_chapters.archive_comics.DATE_RELEASED}</td>
         <td style="white-space: nowrap"><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>

<br />

<div id="dhtmltooltip"></div>

<style type="text/css">

#dhtmltooltip
{
   position: absolute;
   text-align: center;
   border: 2px solid;
   padding: 5px;
   background-color: #EFEFFF;
   visibility: hidden;
   z-index: 100;
}      
#dhtmltooltip h1
{
   margin: 0 0 5px 0;
   font-size: 1em;
   font-weight: bold;
   text-decoration: underline;
}
</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=20 //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.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+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>
Image
User avatar
eishiya
 
Posts: 9451
Joined: December 5th, 2009, 11:17 am

Re: Template Request (before I break anything else)

Postby thexeternal » August 2nd, 2014, 11:28 am

It's great!!

I was thinking that the black part that the banner is in would extend to the bottom of the page, but other than that, I really like how clean everything looks. And yeah I'll rename the "Jeeves" thing. That's just how Pyro had it, as a link back to the SmackJeeves main page, but I'll change it, hehe.

The ratings images do look a bit weird because of the black background, but they can stay for now. They're not the worst, lol. I'll figure something out for them later.

By the "share this comic" widget, do you mean the little buttons beneath each page in the comic page layout? I don't mind them, they're pretty small. If they were any bigger I'd say lose 'em, but they're okay.

Thank you again! Other than the black around the header, everything is perfect and I love it! :)
User avatar
thexeternal
 
Posts: 174
Joined: January 18th, 2014, 11:15 pm
Location: butt

Re: Template Request (before I break anything else)

Postby eishiya » August 2nd, 2014, 4:00 pm

Do you want the purple part to extend all the way to the bottom, or should it be only as large as the content (so if a page is very short, there might be black on the bottom)?
I've edited the code above (as well as the preview) for the latter option since that's the quicker edit, but if you want it to extend to the bottom no matter the size of the content, that's doable as well.

And aye, the share this comic buttons are those little ones. Since you're fine with them, I'll leave them in.

I recommend leaving the SJ link out of the main menu, it'll only confuse your readers and it'll take them away from your site, which is a no-no xP
You could add a footer that says something like "Hosted by (link to Smackjeeves), comic created by (link to your profile)", or just not bother. It's not exactly hard to tell where your comic is hosted or to access SJ from it.
Image
User avatar
eishiya
 
Posts: 9451
Joined: December 5th, 2009, 11:17 am

Re: Template Request (before I break anything else)

Postby thexeternal » August 2nd, 2014, 11:56 pm

It's perfect! Don't change a thing! <3

I've got it up right now! Thank you so much for your suggestions and the work that you put into it. I know that you said it was simple, but still, you took the time to do it for me and I really appreciate it. I'll make sure to find a good spot to credit you! :)
User avatar
thexeternal
 
Posts: 174
Joined: January 18th, 2014, 11:15 pm
Location: butt

Re: Template Request (before I break anything else)

Postby eishiya » August 3rd, 2014, 9:14 am

No need! Just enjoy your new layout.
Image
User avatar
eishiya
 
Posts: 9451
Joined: December 5th, 2009, 11:17 am


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest

cron