Can someone make this template for me 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.

Can someone make this template for me please?

Postby skystears » January 15th, 2010, 12:16 am

Im Terrible at coding so is there anyone willing to make me this template?
Image

Hopefully this image would be all you need to make the template right? This image is an example , the avatar is bordered by 3 pixels and rounded by 3 pixels , and It would be cool if everything was rounded by 3 actually if at all possible...>.< If theres anything at all you need to know please ask and if you code it for me feel free to add your name at the bottom as credits linking back to your profle of course and I'll link your comic on my link page I'll make if you want
Um lets see as far as the URL's of site navigation at the top , you honestly dont have to worry about linking that,its one of the few things I can figure out , and I haven't created a World map page just yet anyway. The comic I want this to be for is hidden so heres the link ...

http://theothersidearomance.smackjeeves.com/
(long title on the link but "The other side" and "Other side" Where taken ...>.>; I'll be changing the banner later on


Blue : 919dc4
Pink: db5a8d

doesnt have to be exact , if you could come close I would be greatful , And if you make the top navi , basic text and code rather then the image , if it can hover in that pink and text white that would be cool ?
User avatar
skystears
 
Posts: 67
Joined: May 29th, 2007, 8:48 am

Re: Can someone make this template for me please?

Postby Pyroman » January 21st, 2010, 8:15 am

Hey, I'm more than happy to make this template for you, I just need to know what the font is called that you have used for the various menus and buttons in this image.
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Can someone make this template for me please?

Postby skystears » January 26th, 2010, 7:07 pm

Omg thank you so much ! Well Actually one font was made by my friend sarall I believe and its called MAL print < the cute handwriting one " the other font is called manicore http://www.fontstock.net/8672/manticore.html

I sent a PM to Sarall to see if i can get permission to upload her font, She sent it to me ON msn once , But im pretty sure She wont mind , I just want to make sure she knows before I upload it XD So I'll update this post when I get it sorry for the wait . Also as far as the font I used at the comments , I'm not sure what font that was but im sure it wont be hard to find something like it right? I'll let you use your judgment <3 Your the web designer

thank you sooo much for your kindness Pyroman , your my hero!


EDIT : I was given permission to upload it so heres the link In a Zip with credits in Text and the image I made
http://skystears.deviantart.com/art/Sar ... -151909927
User avatar
skystears
 
Posts: 67
Joined: May 29th, 2007, 8:48 am

Re: Can someone make this template for me please?

Postby Pyroman » February 1st, 2010, 10:55 pm

Sorry for the delay on this, I've been out partying! Now, I'm pretty much done, I just need you to re-upload that malprint font, as it seems to be corrupted. I simply can't open it and am getting a bunch of errors.

Thanks!
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Can someone make this template for me please?

Postby skystears » February 2nd, 2010, 12:31 am

Pyroman wrote:Sorry for the delay on this, I've been out partying! Now, I'm pretty much done, I just need you to re-upload that malprint font, as it seems to be corrupted. I simply can't open it and am getting a bunch of errors.

Thanks!



Oh im sorry I run linux so that might somehow be the reason I cant Zip it right or something >.<
Well I tried just adding the font file and the previewer I hope it works now
User avatar
skystears
 
Posts: 67
Joined: May 29th, 2007, 8:48 am

Re: Can someone make this template for me please?

Postby Pyroman » February 14th, 2010, 1:39 am

The Setup
Head over to Page Design/Appearance and apply the DEFAULT Template.

Only paste the code in the corresponding sections.
Be sure to replace all of the code in each blue box.
Some of the code you will be replacing will seem nearly identical, but do not forego these sections as I have made small changes. Copying what is here means that you will receive exactly what is shown on my test site.

You may have to edit some of the menu links if they are not names correctly.

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

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

<style type="text/css">
body {
   color:#FFF;
   background-color:#919dc4;
   font-family:Arial, Helvetica, sans-serif;
}

a img {
   border:0;
}

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

a:hover {
   text-decoration:underline;
}

#header {
   width:900px;
   margin:0 auto;
   text-align:center;
}

#menu {
   width:900px;
   margin:0 auto;
   text-align:center;
background-color:#fff;
   -webkit-border-radius: 3px;    /* for Safari */
   -moz-border-radius: 3px;       /* for Firefox */
}

#content {
   margin:0 auto;
   margin-bottom:10px;
   margin-top:10px;
   width:900px;
}

.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;
   background-color:#db5a8d;
   text-align: left;
   -webkit-border-radius: 3px;    /* for Safari */
   -moz-border-radius: 3px;       /* for Firefox */
}

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

.post-body
{
   padding:10px 14px 1px 29px;
}

.post p
{
   margin:0 0 .75em;
}

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

#latest_comic {
width:750px;
-webkit-border-radius: 3px;    /* for Safari */
-moz-border-radius: 3px;       /* for Firefox */
background-color:#acb6d6;
margin:0 auto;
padding:5px;
text-align:center;
}

#latest_comic p {
font-size:25px;
letter-spacing:3px;
text-transform:lowercase;
margin:5px;
}
#latest_comic img {
background-color:#fff;
padding:5px;
}

#newsimage {
margin:10px 0 0 30px;
}

#comic-container {
text-align:center;
margin:0 auto;
padding:10px;
}

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

#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: 100%;
   margin: 15px 0 15px 0;
padding:10px 0 10px 0;
background-color:#db5a8d;
text-align:center;

}

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

#comments_container .cpost-header
{
   background: #db5a8d;
   padding: 5px;
   margin: 0;
}

#comments_container p
{
   padding: 5px;
   margin: 0;
}

#comments_container p img
{
float: left;
margin: 0 5px 5px 0;
background-color:#db5a8d;
padding:5px;
-webkit-border-radius: 3px;    /* for Safari */
-moz-border-radius: 3px;       /* for Firefox */

}

#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:#FFF;
   font-size:80%;
   width:900px;
   margin:0 auto;
   text-align:center;
   color:#CCC;
   padding:3px 0 3px 0;
   -webkit-border-radius: 3px;    /* for Safari */
   -moz-border-radius: 3px;       /* for Firefox */

}

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

#footer a:hover {
   text-decoration:underline;
}
</style>


<title>{SITE_NAME}</title>
</head>

<body>

<div id="header"><a href="{SITE_URL_FULL}"><img src="" alt="" /></a></div>
<div id="menu">
<img src="http://img33.imageshack.us/img33/2919/menuje.png" alt="" border="0" usemap="#Map" />

<map name="Map" id="Map"><area shape="rect" coords="716,0,845,50" href="{SITE_URL_FULL}worldmap" /><area shape="rect" coords="557,1,697,50" href="{SITE_URL_FULL}characters" /><area shape="rect" coords="466,1,539,50" href="{SITE_URL_FULL}links" /><area shape="rect" coords="383,1,456,50" href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" /><area shape="rect" coords="295,1,368,50" href="{SITE_URL_FULL}comics" /><area shape="rect" coords="204,0,277,49" href="{FIRST_COMIC_URL}" /><area shape="rect" coords="94,0,185,50" href="{SITE_URL_FULL}archive" /><area shape="rect" coords="1,1,78,50" href="{SITE_URL_FULL}" /></map>

</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;All content created by <a href="">Skystears</a>&nbsp;&nbsp;|&nbsp;&nbsp;Design coded by <a href="">Pyroman</a></div>

</body>
</html>


News Page
Code: Select all
<!-- BEGIN latest_comic -->
<div id="latest_comic">

<p>Latest Comic:</p>


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

<div id="newsimage"><img src="http://img705.imageshack.us/img705/9341/newso.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 style="text-align:center;"><a href="{NEWS_ARCHIVE_LINK}">News Archive >></a></div>


Comic Page
Code: Select all
<div style="font-size:20px; margin:10px; text-align:center;">{COMIC_TITLE}</div>
<div class="comic-date-header">{COMIC_POST_DATE}</div>

<div id="comic-container">

<!-- 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 align="center">
<div style="padding: 8px 0 3px">{SHARE_THIS_COMIC}</div>

<div class="comicnav">

   <a href="{NAV_FIRST}"><img src="http://img687.imageshack.us/img687/2327/firsta.png" alt="&lt;&lt; First" /></a>

   <a href="{NAV_PREV}"><img src="http://img145.imageshack.us/img145/2770/prev.png" alt="&lt; Previous" /></a>   

   <a href="{NAV_NEXT}"><img src="http://img140.imageshack.us/img140/8950/nextu.png" alt="Next >" /></a>

   <a href="{NAV_LAST}"><img src="http://img697.imageshack.us/img697/1079/lasto.png" alt="Most Recent >>" /></a>

</div>
</div>

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

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



<div align="center"><img src="http://img41.imageshack.us/img41/1413/archivei.png" alt="Comic Archive" /></div>


<!-- BEGIN switch_comic_has_chapters -->

   <style type="text/css">
   
      .chapter_list a
      {
         padding: 4px 7px;
         margin: 0 4px;
         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;
color:#FF0000;
   }
   
#chapter_table a:link, #chapter_table a:visited {
color:#db5a8d;
text-decoration:none;
}
   #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;
   }
   
   .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>
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Can someone make this template for me please?

Postby skystears » February 18th, 2010, 12:43 pm

Omg Thank you so much Pyroman! Your amazing ! :D
User avatar
skystears
 
Posts: 67
Joined: May 29th, 2007, 8:48 am


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 2 guests