Template Code please?

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 Code please?

Postby Guest » June 19th, 2010, 12:37 pm

I already make the template, just need the code.
if someone code this to me, I'd be very grateful.

the comics page:
Image

the home page:
Image

- principal background: 004080
- second background comics page: efefef
- second background home page: 005eb8
- everything else is white.

feel free to link back at bottom of the page.
Oh, I almost forgot it. that is the comic: http://everytime-we-touch.smackjeeves.com/

thanks. ^-^
Guest
 

Re: Template Code please?

Postby Coeus » June 20th, 2010, 9:24 am

http://coeus.smackjeeves.com/

Let me know if you need anything changed. I added the banner in, but it is a simple removal. Don't hesitate to let me know if there is something wrong, because it is better to catch it now while it is easy to fix.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: Template Code please?

Postby Guest » June 22nd, 2010, 12:03 pm

Looks great! I love it! :D
about the banner, can I remove it and leave the credits at the white bar below?

Thank you so much! :mrgreen:
Guest
 

Re: Template Code please?

Postby Coeus » June 23rd, 2010, 2:36 am

First things first, please apply the default template. This means you don't have to replace every single section, just the ones below.

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 web-page 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.

(As a side note, in order to change what is in the little white bar at the bottom, just edit the words inside of the <div id="footer"> part at the bottom of your OVERALL LAYOUT)

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} || {PAGE_TITLE}</title>

<style type="text/css">
body {
   background-color:#004080;
   font-family:Tahoma, Geneva, sans-serif;
   color:#ffffff;
margin:0 20px 0 20px;
padding:0;
}

a img {
   border:0;
}

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

a:hover {
   text-decoration:underline;
}

#menu
{
   height: 40px;
   margin: 20px 10px;
}

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

#menu li
{
   margin: 0;
   padding: 10px;
   display: inline;
   list-style-type: none;
   border: 1px solid #ffffff;
}

#newsBG {
background-color:#005eb8;
margin:0 60px 0 60px;
}

#newsBG span {
font-size:30px;
margin:0 auto;
}

#newsleft {
float:left;
margin:20px 20px 20px 60px;
padding:5px;
border:1px solid #ffffff;
text-align:center;
width:300px;
}

#newsright {
float:right;
margin:20px 60px 20px 20px;
padding:5px;
border:1px solid #ffffff;
text-align:center;
width:300px;
}

#newsright span {
   font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
}

#newstitleimage {
margin:10px 10px 10px 0;
}

#newsarchive {
text-align:center;
}

/* NEWS POSTS */

.date-header
{
   margin: 5px 10px 0;
   float: right;
   font-size:85%;
   line-height:2em;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#82bbf5;
}

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

.post-title
{
   font-family:Georgia, "Times New Roman", Times, serif;
   margin:0;
   font-size:135%;
   line-height:1.5em;
   display:block;
   border:1px solid #ffffff;
   padding:2px 14px 2px 29px;
}

a.title-link, .post-title strong
{
   text-decoration:none;
   display:block;
}

.post-body
{
   border:1px solid #ffffff;
font-size:90%;
margin-top:2px;
   padding:10px 14px 1px 29px;
}
 
 
.post p
{
   margin:0 0 .75em;
}

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

html>body p.post-footer
{
   border-bottom-color:transparent;
}

p.post-footer em
{
   display:block;
   float:left;
   text-align:left;
   font-style:normal;
}

.post img
{
   margin:0 0 5px 0;
   padding:4px;
}


.post blockquote p
{
   margin:.5em 0;
}

/* COMIC PAGE */

#comic {
margin:0 auto;
text-align:center;
}

#comictitle {
   font-family:Georgia, "Times New Roman", Times, serif;
font-size:30px;
margin:10px auto;
text-align:center;
}

#comicimage {
background-color:#efefef;
padding:5px;
}

#comic-container
{
   margin: 0 auto;
}

.comic-date-header
{
   margin: 10px auto;
   font-size:85%;
   text-transform:uppercase;
   letter-spacing:.2em;
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_container
{   
   text-align: left;
   margin: 0;
   padding: 0;
   padding-left: 8px;
   padding-right: 8px;
   width: 100%;
}

#comments_container h1
{
   font-weight: bold;
}

#comments_container h1 span
{
   float: right;
}

#comments_container .sub-title
{   
   clear: left;
   font-size: 110%;
   margin: 10px;
   font-family:Georgia, "Times New Roman", Times, serif;
padding:7px;
border:1px solid #ffffff;
}

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

#comments_container .cpost-header
{
   border: 1px solid #ffffff;
   padding: 5px;
   margin: 0;
}

#comments_container p
{
   padding: 5px;
   margin-top: 2px;
   border: 1px solid #ffffff;
min-height:140px;
}

#comments_container p img
{
   float: left;
   margin: 0 5px 5px 0;
}

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

.post-me
{
   clear: left;
   margin: 0;
   padding-top: 15px;
   font-size: 1.4em;
   text-align: center;
}



#footer {
   background-color:#ffffff;
   padding: 5px;
   color: #4a7fb5;
   margin:10px 0;
   text-align:center;
   -webkit-border-radius: 5px;    /* for Safari */
   -moz-border-radius: 5px;       /* for Firefox */
}
</style>

</head>

<body>

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

<div id="footer">Proudly hosted by <a href="http://www.smackjeeves.com">Smackjeeves Webcomic Hosting</a></div>

</body>
</html>


NEWS/WELCOME PAGE
Code: Select all
<div id="newsBG">

<div id="newsleft">
<p>{SITE_DESCRIPTION}</p>
</div>

<div id="newsright">
<!-- BEGIN latest_comic -->

<span>Latest Comic:</span><br /><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>


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


<div style="clear:both;"></div>

</div>


<div id="newstitleimage"><img src="http://img192.imageshack.us/img192/9686/newsvk.png" alt="" /></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="newsarchive"><a href="{NEWS_ARCHIVE_LINK}">News Archive >></a></div>


COMIC PAGE
Code: Select all
<div id="comic">
<div id="comictitle">{COMIC_TITLE}</div>

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

<div id="comicimage">

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

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

<div class="comicnav">

   <a href="{NAV_FIRST}"><img src="http://img507.imageshack.us/img507/5818/firstn.png" alt="&lt;&lt; First" /></a>
   <a href="{NAV_PREV}"><img src="http://img705.imageshack.us/img705/8968/previous.png" alt="&lt; Previous" /></a>
   
   {JUMPBOX_FORMATTED}
   
   <a href="{NAV_NEXT}"><img src="http://img517.imageshack.us/img517/3175/nexty.png" alt="Next >" /></a>
   <a href="{NAV_LAST}"><img src="http://img401.imageshack.us/img401/8673/lastz.png" alt="Most Recent >>" /></a>

</div>

</div>

<table id="comments_container"><tr><td>

   <!-- BEGIN switch_author_comments -->
   <h1 class="sub-title">Author's Comments:</h1>
   <!-- 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</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 -->
   <h1 class="sub-title">User's Comments:</h1>
   <!-- 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</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;

      }
      
   </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;
      color:#000000;
   }
   
   .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>



<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>
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: Template Code please?

Postby Guest » June 23rd, 2010, 3:08 pm

The code is working very well, and I edited the words at the little white bar.
but, where are the link buttons at the top? it's just the only last thing to change, please :oops:

Thanks twice! v^-^
Guest
 

Re: Template Code please?

Postby Coeus » June 24th, 2010, 1:35 am

julialee wrote:The code is working very well, and I edited the words at the little white bar.
but, where are the link buttons at the top? it's just the only last thing to change, please :oops:

Thanks twice! v^-^


Oh dear, when I removed the banner I must have accidentally caught the menu in the crossfire.
Simply scroll to the bottom of your OVERALL LAYOUT, and just above the <div id="content"> add this line of code:
Code: Select all
<div id="menu">{MENU}</div>


I apologize for that, I'm usually much more diligent with checks!

Oh, and you do not need to credit me on your template, it was my pleasure.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: Template Code please?

Postby Guest » June 24th, 2010, 11:08 am

I prefer to credit you about the code, it's fair to me (:
Thank you so much (again)! :mrgreen:
Guest
 

Re: Template Code please?

Postby Coeus » June 24th, 2010, 9:23 pm

I'm glad you are happy. Let me know if you have any issues.
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 4 guests