Please help me with template - Out of Skills error

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.

Re: Please help me with template - Out of Skills error

Postby Asj » December 29th, 2010, 9:19 pm

this is what I have. (by the way, the chapter part of the archive may need adjusting if you use the chapter system)

Overall Layout:
Spoiler! :
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} />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

    * { margin: 0; padding: 0; }

    img
    { border: 0; }

    a
    { color: #fff; }

    a:hover
    { color: #808080; }

    body
    {
        background: #cf6161 url('http://img99.imageshack.us/img99/8317/backpo.png') repeat;
        font: 12pt century gothic, lucida grande, verdana, sans-serif;
        color: #fff;
        text-align: center;
    }

    #banner
    {
        margin-top: 50px;
    }

    #menu ul
    {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #menu a
    {
        text-decoration: none;
    }

    #menu li, .comicnav li, .commentedit li
    {
        display: inline;
    }

    .comicnav li
    {
        padding: 6px;
    }

    #menu li
    {
        padding-left: 5px;
        padding-right: 5px;
    }

    .comiccontainer
    {
        background-color: #000;
    }

    .ratingstars
    {
/*display: inline;*/
        text-align: right;
        padding: 10px;
/*background-color: #808080;*/
    }

    .comicnav, .blackcontent, #menu ul, .archiveheader
    {
        padding: 10px;
        margin: 20px auto 20px auto;
        text-align: center;
    }

    .blackcontent, #menu ul
    {
        background-color: #000;
        width: 420px;
/*width: 368px;*/
    }

    .commentbox
    {
        clear: both;
        margin: 20px 0;
        text-align: left;
    }

    .commentheader
    {
        margin-left: 100px;
        padding: 10px;
        text-align: left;
    }

    .commentdate
    {
        font: 8pt Arial, sans-serif;
    }

    .commentername
    {
        font: bold 11pt Arial, sans-serif;
        text-decoration: none;
    }

    .commentedit
    {
        font-size: 8pt;
        text-decoration: none;
    }

    .commenttitle
    {
        font: 16pt "Times New Roman", Times, serif;
    }

    .commentmessage
    {
        text-align: justify;
        padding-left: 10px;
        /*margin-left: 105px;*/
    }

    .commentbody
    {
        border-spacing: 0;
        align: left;
    }

    .commentbody td
    {
        vertical-align: top;
    }

    .avatar
    {
        /*float: left;*/
        width: 100px;
    }

    .avatar img
    {
        text-align: center;
        display: block;
        margin: auto;
    }

    .comicimage
    {
        margin-top: 35px;
        margin-bottom: 25px;
    }

    .comicimage table
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        border: 0;
        border-spacing: 0;
    }
    .comicimage tr, .comicimage td
    {
        margin: 0;
        padding: 0;
    }

    .frameleftup, .framerightup, .frameleftdown, .framerightdown
    { width: 32px; height: 32px; }

    .frameup, .framedown
    { height: 32px; }

    .frameleft, .frameright
    { width: 32px; }

    .frameleftup{ background: url('http://img264.imageshack.us/img264/5972/comicframecornerleftup.png') no-repeat; }

    .framerightup{ background: url('http://img264.imageshack.us/img264/1299/comicframecornerrightup.png') no-repeat; }

    .frameleftdown{ background: url('http://img412.imageshack.us/img412/2889/comicframecornerleftdow.png') no-repeat; }

    .framerightdown{ background: url('http://img340.imageshack.us/img340/9339/comicframecornerrightdo.png') no-repeat; }

    .frameup{ background: url('http://img209.imageshack.us/img209/8735/comicframeup.png') repeat-x; }

    .framedown{ background: url('http://img526.imageshack.us/img526/1733/comicframedown.png') repeat-x; }

    .frameleft{ background: url('http://img526.imageshack.us/img526/7988/comicframeleft.png') repeat-y; margin: 100px; }

    .frameright{ background: url('http://img526.imageshack.us/img526/1861/comicframeright.png') repeat-y; }


    .archiveheader
    {
        background-color: #000;
        font: bold 17pt "Comic Sans MS", sans-serif;
    }

</style>

</head>

<body>
    <div id="banner">
        <a href="{SITE_URL_FULL}"><img src="{SITE_BANNER_URL}" width="{SITE_BANNER_WIDTH}" height="{SITE_BANNER_HEIGHT}" alt="{SITE_NAME}" title="{SITE_NAME}" /></a>
    </div>
    <div id="menu">{MENU}</div></br>
    <div id="maincontent">
        {CONTENT}
    </div>
    <div id="footer">
    </div>
</body>
</html>


Menu:
Spoiler! :
Code: Select all
<ul>
   <li><a href="/comics/1047748/page-5/">First Comic</a></li>
   <li><a href="/">Latest Comic</a></li>
   <li><a href="/archive/">Archive</a></li>
   <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Fave</a></li>
</ul>


(the next two templates are included just in case someone tries to go to those pages)

News/Welcome page:
Spoiler! :
Code: Select all
<div class="blackcontent">What are you doing here?! There is no news page! D:</div>


News Archive:
Spoiler! :
Code: Select all
<div class="blackcontent">What are you doing here?! There is no news archive! D:</div>


Comic Page:
Spoiler! :
Code: Select all
<!--rating stars go here-->
<!--don't forget to add them below, also-->

<script language="JavaScript" type="text/javascript">
/* <![CDATA[ */
var dir = "http://i6.photobucket.com/albums/y223/Asj127/";
var pic_unselected = "piggy_star.png";
var pic_selected = "piggy_star2.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('');
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 + '" /></a>&nbsp;');
}
document.write('');
}

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>


<script language="JavaScript" type="text/javascript">
/* <![CDATA[ */

function build_avatar(imgsrc,height,width, alt)
{
    if (width > 100)
    {
        var new_width = 100.0;
        var x = new_width / width;
        height = height * x;

        document.write('<img src="' + imgsrc + '" height="' + height + 'px" width="' + new_width + 'px" alt="' + alt + '" />');
    }
    else
    {
        document.write('<img src="' + imgsrc + '" height="' + height + 'px" width="' + width + 'px" alt="' + alt + '" />');
    }
}

/* ]]> */
</script>


<div class="comicimage">

<!--there's a better way of creating the frame by using css3, but a lot of people can't view css3 yet-->
    <table cellspacing="0">
    <tr>
    <td class="frameleftup"></td><td class="frameup"></td><td class="framerightup"></td></tr>
    <tr>
    <td class="frameleft"></td><td class="comiccontainer">

    <!-- 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="600px" height="400px" alt="" />
    <!-- END switch_no_comic_image -->
<p class="ratingstars"><script language="JavaScript" type="text/javascript">/* <![CDATA[ */build_vote();/* ]]> */</script>&nbsp;Average Rating: {AVERAGE_RATING}</p>
    </td><td class="frameright"></td></tr>
    <tr>
    <td class="frameleftdown"></td><td class="framedown"></td><td class="framerightdown"></td></tr>
    </table>

</div>
<div class="comicnav">
    <ul>
        <li><a href="{NAV_FIRST}"><img src="http://img526.imageshack.us/img526/3097/firsts.png" width="99px" height="45px" alt="First Page" title="First Page" /></a></li>
        <li><a href="{NAV_PREV}"><img src="http://img264.imageshack.us/img264/236/prevz.png" width="90px" height="45px" alt="Previous Page" title="Previous Page" /></a></li>
        <li></li>
        <li><a href="{NAV_NEXT}"><img src="http://img98.imageshack.us/img98/3382/nextr.png" width="90px" height="45px" alt="Next Page" title="Next Page" /></a></li>
        <li><a href="{NAV_LAST}"><img src="http://img264.imageshack.us/img264/757/lasta.png" width="84px" height="45px" alt="Latest Page" title="Latest Page" /></a></li>
    </ul>
    {JUMPBOX_FORMATTED}
</div>

<div class="blackcontent">

<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;">Add A Comment</a>

    <!-- BEGIN loop_author_comments -->
        <div class="commentbox">
            <div class="commentheader">
                <div class="commentdate">{loop_author_comments.DATE_POSTED}</div>
                <div>
                    <a class="commentername" href="{loop_author_comments.POSTER_PROFILE_URL}">{loop_author_comments.NAME}</a>
                    &nbsp;
                    <!-- BEGIN switch_user_can_edit -->
                        <a class="commentedit" 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 class="commentedit" 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 -->
                </div>
                <div class="commenttitle">{loop_author_comments.POST_TITLE}</div>
            </div>
            <table class="commentbody" cellspacing="0">
                <tr><td>
                    <div class="avatar">
                        <!-- BEGIN switch_poster_avatar -->
                            <script language="JavaScript" type="text/javascript">/* <![CDATA[ */build_avatar('{loop_author_comments.POSTER_AVATAR_IMG_SRC}',{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT},{loop_author_comments.POSTER_AVATAR_IMG_WIDTH},'{loop_author_comments.NAME} avatar');/* ]]> */</script>
                        <!-- END switch_poster_avatar -->
                    </div>
                </td><td>
                    <div class="commentmessage">{loop_author_comments.MESSAGE}</div>
                </td></tr>
            </table>
        </div><br />
    <!-- END loop_author_comments -->


    <!-- BEGIN loop_user_comments -->
        <div class="commentbox">
            <div class="commentheader">
                <div class="commentdate">{loop_user_comments.DATE_POSTED}</div>
                <div>
                    <a class="commentername" href="{loop_user_comments.POSTER_PROFILE_URL}">{loop_user_comments.NAME}</a>
                    &nbsp;
                    <!-- BEGIN switch_user_can_edit -->
                        <a class="commentedit" 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 class="commentedit" 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 -->
                </div>
                <div class="commenttitle">{loop_user_comments.POST_TITLE}</div>
            </div>
            <table class="commentbody" cellspacing="0">
                <tr><td>
                    <div class="avatar">

                        <!-- BEGIN switch_poster_avatar -->
                            <script language="JavaScript" type="text/javascript">/* <![CDATA[ */build_avatar('{loop_user_comments.POSTER_AVATAR_IMG_SRC}',{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT},{loop_user_comments.POSTER_AVATAR_IMG_WIDTH},'{loop_user_comments.NAME} avatar');/* ]]> */</script>
                        <!-- END switch_poster_avatar -->

                        <!-- BEGIN switch_poster_no_avatar -->
                            <img src="http://img139.imageshack.us/img139/5228/mysteriousdragon.png" width="100px" height="100px" alt="{loop_user_comments.NAME} avatar" />
                        <!-- END switch_poster_no_avatar -->

                    </div>
                </td><td>
                    <div class="commentmessage">{loop_user_comments.MESSAGE}</div>
                </td></tr>
            </table>
        </div>
    <!-- END loop_user_comments -->

    <!-- BEGIN switch_user_comments -->
        <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;">Add A Comment</a>

    <!-- END switch_user_comments -->

</div>


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


<h2 class="archiveheader">Comic Archive</h2><br /><br />


<!-- 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: collapse;
   }
   
   #chapter_table th, #chapter_table td
   {
      padding: 6px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
   }
   
   #chapter_table th
   {
      background: #444;
      color: white;
   }
   
   #chapter_table td
   {
/* original bg color      background: #ededed;*/
                background: #000;
   }
   
   .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=black,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>
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Re: Please help me with template - Out of Skills error

Postby Darkhog » December 30th, 2010, 6:25 am

Can you post piggy ratings on imageshack, because my computer and some computers of my friends have troubles with photobucket? Anyway, thanks, now when basic work is done, little adjustments can be made by me (if I'll be unable to do them, I'll let you know)
//edit: OK, template is now complete except piggy ratings. I'll try to make them myself and upload to IS, so don't bother.
User avatar
Darkhog
 
Posts: 82
Joined: December 17th, 2009, 2:31 pm

Re: Please help me with template - Out of Skills error

Postby Asj » December 30th, 2010, 9:46 pm

you can save the images to your computer, right?
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Re: Please help me with template - Out of Skills error

Postby Darkhog » December 30th, 2010, 10:11 pm

The problem is, that it cannot load in browser (it doesn't matter if I use Chromium, Opera, Firefox or Konqueror), so I cannot save it. WGet also couldn't download it. But it's ok, I did my own ratings.
User avatar
Darkhog
 
Posts: 82
Joined: December 17th, 2009, 2:31 pm

Re: Please help me with template - Out of Skills error

Postby Asj » December 30th, 2010, 11:22 pm

okay. How odd, though.
Image
User avatar
Asj
 
Posts: 938
Joined: January 4th, 2009, 5:42 pm

Previous

Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest