The Fall template request (layout done in PS included)

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.

The Fall template request (layout done in PS included)

Postby bm289 » May 30th, 2010, 9:58 am

Hi all!!

First of all, thank you for even looking at this thread. I appreciate it. Now, on to my most humble request for a layout because I suck at css.

I created a layout of what I would like the site to look like in photoshop. The problem I have is converting this into something actually usable in .css and html. If someone could take a look at the layout i designed and tell me what works and what doesn't and maybe do their magic on it so i could use this as my actual comic layout, I would very much appreciate it and you would get full credit, of course, somewhere on the layout. Just some notes, the font I used is Impact, i think this is a fairly standard font on everyone's machine (Don't know about macs) and the width for the comic itself would obviously not be a fixed width. I think the maximum width allowed by SJ is 2000 pixels. Also, feel free to make changes to the layout as needed. The banner I plan to use with this template has the following dimensions: 1000 X 120. The advertiser banners on the side would be standard sizes for banners as well. (Skyscraper and such) I can provide the sizes if needed. Umm....I dunno what else to add so i can help this be easy so if you need more information from me I will provide it :).
Image
bm289
 
Posts: 4
Joined: April 25th, 2010, 4:59 pm

Re: The Fall template request (layout done in PS included)

Postby Mist the Moonhunter » June 3rd, 2010, 1:56 am

I'm not sure if this will help you at all.
But I thought I better post it in case its what you're looking for,
Its a way of making a template with photoshop but afterwards you'll need to fix up the html a little.
Spoiler! :
Image

Sadly I don't have enough time to make you a template, but maybe with this you yourself can.
:P
Or maybe someone else will come over to save the day.
User avatar
Mist the Moonhunter
 
Posts: 18
Joined: March 1st, 2010, 12:32 am

Re: The Fall template request (layout done in PS included)

Postby Coeus » June 3rd, 2010, 10:00 am

I knocked up a working set of code here: http://coeus.smackjeeves.com/
Let me know what you would like changed, and I'll edit it and send across the finished template to you.

Oh and just a quick explanation on some of the changes I made.
1. I used the font impact for several titles, but I decided not to use it as liberally as you did for a couple of reasons. The main one is one you identified yourself: it's not a standard font for everyone, so you don't want the site to look terrible if someone doesn't have that font. I've set up alternatives if people don't have impact, though.
Secondly, it's a font that doesn't read very well when used under a certain size, so I couldn't really use it for the side-menus with any conviction.

2. You'll notice that the advertisements/sponsors/etc jump from the top of the page to next to the comments on comic pages. This is simply so that users do not have to horizontal scroll when your comic breaks the edges. You will have to fill in some of the gaps, such as the affiliates, with the codes you have been given.
Oh, and as a result of this, you will have to change two pages when you need to update any of that stuff. It's a bit of an inconvenience, and I'm sorry about that, but in order to accommodate the size your comic pages on normal screens it sort of has to be done.

Enjoy!
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: The Fall template request (layout done in PS included)

Postby bm289 » June 3rd, 2010, 11:53 am

@Coeus. thank you! This definitely looks better than what I had in mind even. Thank you so much. I definitely want that template. Make sure to please add your "Made by:" somewhere there. So cool! Just one question. On the actual comic page, is there a way to place an ad above or below the image? Is this something i can do myself by just inserting some html directly above the image or below it? That way I can market the ads below or above the comic along with the one's alongside the comments. Just thinking about monetization here. (Does anyone else feel shameful when they talk about monetizing their work? i do. :-( I wish I could afford a business manager to do the money thinking for me and that way i feel less cheap :oops:

@Mist: That tutorial is kick ass. Thank you! I definitely bookmarked it for reference.
bm289
 
Posts: 4
Joined: April 25th, 2010, 4:59 pm

Re: The Fall template request (layout done in PS included)

Postby Coeus » June 3rd, 2010, 11:38 pm

Absolutely you can have an ad there. I will drop one in for you now, and you can just place your ad code there.

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


Alright let's get this show started. Now, please copy the following code into their respective places, making doubly sure that you replace all code within the blue box! If you get some weird issue down the line, the first thing you should try is re-pasting all of this code back in, just in case you accidentally missed something, or didn't paste over the whole code.

The following code will make your webpage look identical to my tester. There shouldn't be anything broken, but as always I'm human and can only test so much. If you see something broken don't hesitate to let me know and I will fix it as soon as I can.

Some of the code may look similar, but please copy all of it in order to get the same design, some changes I have made are very small and thus might not be immediately noticeable.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{SITE_NAME}</title>

<style type="text/css">

body {
   background-color:#737373;
   margin:0;
   padding:0;
   color:#dbd2d2;
font-family:"Myriad Pro",Calibri,Century Gothic, Arial, sans-serif;
font-size:15px;
}

a:link, a:visited {
   color:#deadad;
   text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

a img {
   border:0;
}

#header {
   text-align:center;
}

#menu {
background-color:#685e5e;
padding:4px 0 5px 0;
text-align:center;
font-family:Impact,"century-Gothic",Arial,sans-serif;
font-size:20px;
text-transform:uppercase;
width:934px;
margin:0 auto;
}

#menu ul
{
   margin: 0;
   padding: 0;
}

#menu li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}


#content {
margin:0 auto;
}

/* NEWS PAGE */

#leftadnews {
float:left;
width:150px;
margin-left:8px;
text-align:center;
background-color:#8F8F8F;
padding:2px;
}

#leftadnews span {
font-size:14px;
background-color:#4F4F4F;
padding:3px;
color:#fff;
}

#leftadnews form {
margin:10px 0 20px 0;
}

#leftadnews img {
background-color:#CFCFCF;
padding:5px;
margin-top:5px;
}

#leftadnews p {
font-size:12px;
background-color:#666666;
padding:3px;
}

#rightadnews {
float:right;
width:150px;
margin-right:8px;
text-align:center;
background-color:#8F8F8F;
padding:2px;
}

#rightadnews span {
font-size:14px;
background-color:#4F4F4F;
padding:3px;
color:#fff;
}

#rightadnews img {
background-color:#CFCFCF;
padding:5px;
margin:5px 0 10px 0;
}

#news {
width:934px;
margin:0 auto;

}

#newscontent {
margin:5px;
}

#arc {
text-align:right;
margin-right:10px;
}

#latest-comic {
background-color:#666666;
padding:8px;
width:300px;
margin-left:30px;
text-align:center;
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;
}

#latest-comic span {
font-size:20px;
font-family:Impact,"century-Gothic",Arial,sans-serif;
}

#desc {
background-color:#666666;
padding:8px;
width:500px;
margin-right:30px;
text-align:center;
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;

}

#newsname {
font-size:40px;
font-family:Impact,"century-Gothic",Arial,sans-serif;
text-transform:uppercase;
text-align:center;
margin:10px 0 10px 0;
letter-spacing:2px;

}

/* NEWS POSTS */
.date-header
{
   margin: 5px 10px 0;
   float: right;
   font-size:85%;
   line-height:2em;
   text-transform:uppercase;
   letter-spacing:.2em;
}

.post
{
   margin:10px;
   padding:0;
   text-align: left;
}

.post-title
{
   margin:0;
   font-size:135%;
   line-height:1.5em;
   background-color:#685e5e;
   display:block;
   padding:2px 14px 2px 29px;
}

.post-body
{
background-color:#666666;   
padding:10px 14px 1px 29px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
}
 
.post p
{
   margin:0 0 .75em;
}

p.post-footer
{
   margin:0;
   padding:2px 14px 2px 29px;
   font-size:90%;
   line-height:1.5em;
   text-align:right;
}

/* COMIC PAGE */

#topadbanner {
margin:10px;
}


#comictitle {
width:934px;
margin:0 auto;
text-align:center;
}

#comictitle .title {
font-size:25px;
margin:10px 0 10px 0;
}

.comic-date-header
{
   margin: 0 auto;
   font-size:85%;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#AFA4A4;
}

#comic-header
{
   height: 30px;
}

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

#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 img
{
   margin: 0;
   padding: 0;
   display: block;
   float: left;
}

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


#comic {
text-align:center;
}

.comicnav
{
   margin: 5px;
   padding:5px;
}

.comicnav form
{
   display: inline;
}

.comicnav select
{
   margin: 0 0 25px 0;
   
}

.comicnav img
{
   margin: 5px 5px 0 5px;
   border: 0;
}

/* COMMENTS */

#comments_container
{   
   text-align: left;
   margin: 0 auto;
   padding: 0;
   padding-left: 8px;
   padding-right: 8px;
   width: 934px;
}


#comments_container h1 span
{
   float: right;
}


#comments_container .cpost-header, #comments_container p
{   
   clear: left;
   font-size: 90%;
}

#comments_container .cpost-header
{
   background: #685e5e;
   padding: 5px;
   margin: 0;
font-size:16px;
}

#comments_container p
{
   padding: 5px;
   margin: 0;
min-height:135px;
background-color:#666666;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
}

#comments_container p img
{
   float: left;
   margin: 0 5px 5px 0;
background-color:#dbdbdb;
padding:5px;
}

#comments_container p b
{
   font-size: 1.15em;
   display: block;
   margin: 0;
   padding: 0;
}

.post-me
{
   clear: left;
margin:10px;
   font-size: 25px;
   text-align: center;
}


/* ARCHIVE */
#chapter_table th, #chapter_table a:link, #chapter_table th, #chapter_table a:visited {
color:#bd8c8c;
}

/* NEWS ARCHIVE */

#newsarchive {
margin:0 auto;
}

ul.months
{
   margin: 10px;
   padding: 0;
}

.months li
{
   margin: 0;
   padding: 0;
   text-align: left;
   list-style-type: none;
   border: 1px solid #ccc;
}

.months a:link, .months a:visited
{
   display: block;
   padding: 2px;
   padding-left: 5px;
   margin: 2px;
}

.months a:hover
{
   
}

.months li.post-item, .months li.post-item-selected
{
   margin: 5px;
   padding-left: 20px;
   background: url("http://www.smackjeeves.com/images/icon-arrow-sm.gif") no-repeat 8px 50%;
}

.months li.post-item-selected
{
   background: #999 url("http://www.smackjeeves.com/images/icon-arrow-sm.gif") no-repeat 8px 50%;
   border: 1px solid #000;
}

#comments_container2
{   
   text-align: left;
   margin: 0 auto;
   padding: 0;
   padding-left: 8px;
   padding-right: 8px;
   width: 785px;
}


#comments_container2 h1 span
{
   float: right;
}


#comments_container2 .cpost-header, #comments_container p
{   
   clear: left;
   font-size: 90%;
}

#comments_container2 .cpost-header
{
   background: #685e5e;
   padding: 5px;
   margin: 0;
font-size:16px;
}

#comments_container2 p
{
   padding: 5px;
   margin: 0;
min-height:135px;
background-color:#666666;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
}

#comments_container2 p img
{
   float: left;
   margin: 0 5px 5px 0;
background-color:#dbdbdb;
padding:5px;
}

#comments_container2 p b
{
   font-size: 1.15em;
   display: block;
   margin: 0;
   padding: 0;
}

/* FOOTER */

#footer {
   background-color:#685e5e;
   min-height:25px;
   text-align:center;
width:934px;
margin:0 auto;
}

</style>

</head>

<body>

<div id="header"><a href="{SITE_URL_FULL}"><img src="http://img25.imageshack.us/img25/7330/headerte.png" alt="The Fall" /></a></div>
<div id="menu">{MENU}</div>

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

<div id="footer">Proudly hosted by <a href="http://www.smackjeeves.com">Smackjeeves Webcomic Hosting</a> &nbsp;&nbsp;|&nbsp;&nbsp; The Fall is an original work &copy; {YEAR} PunkinStudios</div>
</div>

</body>
</html>


Menu
Code: Select all
<ul>
<li><a href="{SITE_URL_FULL}home">News</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{SITE_URL_FULL}archive">Archive</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{FIRST_COMIC_URL}">First</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{SITE_URL_FULL}comics">Latest</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Fav</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{SITE_URL_FULL}lore">Lore</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{SITE_URL_FULL}prints">Prints</a></li>&nbsp;&nbsp;|&nbsp;&nbsp;
<li><a href="{SITE_URL_FULL}comwork">Commissions</a></li>
</ul>


News/Welcome Page
Code: Select all
<div id="rightadnews">
<span>ADs</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" /><br />

<span>Affiliates</span><br />
<p></p>

</div>

<div id="leftadnews">
<span>Info</span><br />
<p>{SITE_DESCRIPTION}</p>

<span>Feed the Artist, please!</span><br />

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GHYJV4QY7ZQVQ">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>



<span>Sponsors</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" />

</div>

<div id="news">
<div id="newscontent">


<table width="934px">
<tr>
<td>
<!-- BEGIN latest_comic -->
<div id="latest-comic">

<span>Latest Comic:</span><br />

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

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

<td>
<div id="desc">
<p>{SITE_DESCRIPTION}</p>
</div>
</tr>

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

<div id="newsname">NEWS</div>

<!-- BEGIN news_loop -->

<!-- Begin .post -->

<div class="post"><a name="{news_loop.POST_ID}"></a>

   <h2 class="date-header">{news_loop.POST_DATE}</h2>

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

<div id="arc"><a href="{NEWS_ARCHIVE_LINK}">News Archive >></a></div>

</div>
</div>


News Archive
Code: Select all
<table width="934px" border="0" cellpadding="0" cellspacing="0" id="newsarchive">

<tr><td width="785px" 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_container2"><tr><td>



<!-- BEGIN switch_comments -->

<img src="http://img31.imageshack.us/img31/6950/commentsgh.png" alt="" />

<!-- 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&nbsp;&nbsp;</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 -->   



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



<td valign="top">



<div style="border: 1px solid #4F4F4F; margin: 10px; background: #5F5F5F;">



<h3 style="margin: 0; padding: 3px; font-size: 1em; color: #222;">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://img526.imageshack.us/img526/1801/unselected.png";
var pic_selected = "http://img168.imageshack.us/img168/1329/selected.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://img85.imageshack.us/img85/4348/yourrating.png";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_pic = "http://img10.imageshack.us/img10/6941/rateit.png";
<!-- END switch_user_hasnt_voted -->

function build_vote()
{
   document.write('<img id="text" src="' + rate_it_pic + '" /><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 id="comictitle">

<div id="topadbanner"><img src="http://img41.imageshack.us/img41/65/bennertop.png" alt="" /></div>

<div class="title">{COMIC_TITLE}</div>

<h1 class="comic-date-header">{COMIC_POST_DATE}</h1>

<div id="comic-header">

<div id="rating">
<img src="http://img443.imageshack.us/img443/5915/avgrating.png" alt="Average Rating:"> <b>{AVERAGE_RATING}</b>
</div>

<div id="rate">
<script language="JavaScript">build_vote();</script>
</div>

</div>

</div>

<div id="comic">
<!-- 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 -->


<div style="padding: 8px 0 3px">{SHARE_THIS_COMIC}</div>

<div class="comicnav">

   <a href="{NAV_FIRST}"><img src="http://img707.imageshack.us/img707/5905/firstz.png" alt="&lt;&lt; First" /></a>
   <a href="{NAV_PREV}"><img src="http://img413.imageshack.us/img413/8297/previousr.png" alt="&lt; Previous" /></a>
   
   {JUMPBOX_FORMATTED}
   
   <a href="{NAV_NEXT}"><img src="http://img405.imageshack.us/img405/6471/nextc.png" alt="Next >" /></a>
   <a href="{NAV_LAST}"><img src="http://img96.imageshack.us/img96/2961/latesty.png" alt="Most Recent >>" /></a>

</div>


<div id="rightadnews">
<span>ADs</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" /><br />

<span>Affiliates</span><br />
<p></p>

</div>

<div id="leftadnews">
<span>Info</span><br />
<p>{SITE_DESCRIPTION}</p>

<span>Feed the Artist, please!</span><br />

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GHYJV4QY7ZQVQ">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>



<span>Sponsors</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" />

</div>


<div>

<table width="934px" id="comments_container"><tr><td>

   <!-- BEGIN switch_author_comments -->
   <img src="http://img697.imageshack.us/img697/9927/authorcomments.png" alt="" />
   <!-- END switch_author_comments -->
   
   <!-- BEGIN loop_author_comments -->
   <h1 class="cpost-header">
   <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&nbsp;&nbsp;</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>
   <a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}
   </h1>
   <p>
   <!-- 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 -->
   <b>{loop_author_comments.POST_TITLE}</b>
   {loop_author_comments.MESSAGE}
   </p>
   <!-- END loop_author_comments -->
   
   <!-- BEGIN switch_user_comments -->
   <img src="http://img691.imageshack.us/img691/442/usercommentsq.png" alt="" />
   <!-- END switch_user_comments -->
   
   <!-- BEGIN loop_user_comments -->
   <h1 class="cpost-header">
   <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&nbsp;&nbsp;</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>
   <a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}</h1>
   <p>
   <!-- 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 -->
   <b>{loop_user_comments.POST_TITLE}</b>
   {loop_user_comments.MESSAGE}
   </p>
   <!-- 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>


<!-- 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;
color:#bd8c8c;
      }
      
   </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;
margin:20px auto;
   }
   
   #chapter_table th, #chapter_table td
   {
      padding: 4px 6px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
color:#bd8c8c;
   }
   
   #chapter_table th
   {
      background: #444;
      color: white;
   }
   
   #chapter_table td
   {
      background: #ededed;
   }
   
   .chapter_title h2
   {
      margin: .5em;
color:#bd8c8c;
   }
   
</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>



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


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

Now the important part! All of your ads, affliates and so on!
This is what the code looks like (and don't forget that you'll have to change this code on BOTH the NEWS/WELCOME page, and the COMIC page.)

It is at the very top of the NEWS page, and somewhere near the middle on the COMIC page.

Code: Select all
<div id="rightadnews">
<span>ADs</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" /><br />

<span>Affiliates</span><br />
<p></p>

</div>



<div id="leftadnews">
<span>Info</span><br />
<p>{SITE_DESCRIPTION}</p>

<span>Feed the Artist, please!</span><br />

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GHYJV4QY7ZQVQ">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>



<span>Sponsors</span><br />
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" />

</div>


Alright, so hopefully it isn't too difficult to see, but Essentially you want your ads to be placed where the img src is:
Code: Select all
<img src="http://img109.imageshack.us/img109/999/bannersv.png" alt="" />

Separating them with <br />

Next is the affiliates. Just drop the same code as you have currently between the <p> tags and you should be all good.

Adding the sponsors works in the same way as the others, just replace that <img src> with your own code.


If you want to add your own categories, simply place a new title in a <span>, and whatever content you want inside a <p>

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

The top banner ad on the comics page is just below the javascript ratings code and looks like this:
Code: Select all
<div id="topadbanner"><img src="http://img41.imageshack.us/img41/65/bennertop.png" alt="" /></div>


Simply replace the img src just like the other ads with your own code.

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

I...hm I think that is all, but naturally if I missed anything, or something bugs just let me know and I will fix it for you as soon as I see the message. Oh and don't worry about crediting, I'm not that bothered.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: The Fall template request (layout done in PS included)

Postby Guest » June 4th, 2010, 2:06 am

Oh nice, that template is brilliant!
Thanks for doing this Coeus, your help/input is always more than appreciated.
Guest
 

Re: The Fall template request (layout done in PS included)

Postby Coeus » June 4th, 2010, 2:45 am

granmastern wrote:Oh nice, that template is brilliant!
Thanks for doing this Coeus, your help/input is always more than appreciated.


It's my pleasure!
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: The Fall template request (layout done in PS included)

Postby bm289 » June 4th, 2010, 9:45 am

Thank you coeus! I appreciate it immensely! I will remember to add the ads to both pages when they need updating! Again thanks!!
bm289
 
Posts: 4
Joined: April 25th, 2010, 4:59 pm

Re: The Fall template request (layout done in PS included)

Postby Coeus » June 4th, 2010, 7:42 pm

No problem at all, I'm glad you are happy.
Let me know if you have any issues at all.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest