Need template ASAP 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.

Need template ASAP please!

Postby Tanako » October 21st, 2010, 1:06 pm

[size=120] HEY GUYS. I've been busting my A** trying to figure out how to code this but i cant, as i said before i don't need any designs or anything i can do that all by my self i just need the code for this template and the rest i can do i guess. i want it to look exactly like the picture. please someone help me, I'm in desperate need of this.
and if you require me to pay i don't mind but hopefully it wont be expensive. i need this ASAP and i want it to be compactable with internet explorer and Firefox. because the current template I'm using, people who view my web site with internet explorer cant view most of my web page only people who use fire fox can, so i don't want that to happen with my new template. here is the image

if you are thinking what size should the banner be, just make it like you see it, not too big not to small. another thing i want in this template is, when someone is viewing the comic, i want the background to become transparent instead of white like the rest of the templates, if you need and example, take a look at my comic "the boy with a secret" that's an example. but when you are viewing the rest of the pages, i want the white background to appear. :)
Last edited by Tanako on October 25th, 2010, 5:16 pm, edited 1 time in total.
Image
User avatar
Tanako
 
Posts: 107
Joined: June 14th, 2010, 7:06 pm

Re: Need template ASAP please!

Postby Tanako » October 22nd, 2010, 12:43 pm

found someone! :D
Image
User avatar
Tanako
 
Posts: 107
Joined: June 14th, 2010, 7:06 pm

Re: Need template ASAP please!

Postby Rosie11 » October 23rd, 2010, 3:40 pm

Ok, it's done! It wasn't a very complicated layout, and hopefully you'll be able to understand what's going on if you want to change stuff later. Let me post the code and then I'll explain some stuff.

Overall Layout
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="http://{SITE_URL}.smackjeeves.com/rss/">
<title>{SITE_NAME} {PAGE_TITLE}</title>

<style type="text/CSS">
/****************** reset stuff *********************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
html, body { height: 100%; }
ol, ul { list-style: none; }

/******************* basic stuff ******************/
body {
background: #fff1cd url(""); /* you can put a background image here */
font-family: Arial,Helvetica,sans-serif;
line-height: 1.25;
text-align: center;
}

#main {
width: 800px; /* width of banner */
margin: auto;
}

/*********************** classes *****************/
.border { border: 2px solid #a88131; }

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

a:hover {
text-decoration: underline;
}

/********************** divs ***********************/
#content-container {
margin-left: 160px; /*width of sidebar + 10 */
}

#content {
background: white;
padding: 10px;
}

#banner {
height: 100px; /* height of your banner */
background: url("") no-repeat; /* put banner URL here */
margin: auto;
margin-bottom: 10px;
}

#footer { padding: 10px; }

/******************* menu *****************/
#menu {
margin: 5px 0;
padding: 2px 0;
background: #f2d8a6;
}

#menu a {
padding: 0 20px; /* space between links */
}

/******************** sidebar ***************/
#sidebar {
float: left;
width: 150px;
line-height: 1.75;
background: #f2d8a6;
}

#sidebar h2 {
background: #dbb365;
font-size: 1.2em;
border-left: none;
border-right: none;
}

#sidebar h2.single {
/* border on the bottom only, for the first header or to make a line */
border-top: none;
}

#sidebar a:link, #sidebar a:visited {
display: block;
}

#sidebar a:hover {
background: #e6c585; /* the color when you mouse over the links */
text-decoration: none;
}

/*************** comic stuff *******************/
#navigation { margin: 5px 0; }

#navigation a {
font-size: 1.2em;
padding: 0 20px; /*space between links */
}

#navigation span { margin: 20px; } /*space next to jumpbox */

#rating {
text-align: left;
margin: 20px 0;
line-height: 1;
}

#rating a.unselected, #rating a.selected {
/* the text that's used for rating stars */
text-decoration: none;
font-weight: bold;
font-size: 2em;
color: #dbb365;
}

#rating a.selected { /* change the color when the star is selected */
color: #674500;
}

/************** comments *********************/
#comment-container {
background: white;
margin: 10px 0;
padding: 5px;
text-align: left;
}

#comments img {
float: left;
margin-right: 10px;
}

#comments h1 {
font-size: 1.2em;
}
</style>

</head> <body>

<div id="main">

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

<div id="banner"></div>


<div id="sidebar" class="border">
   <h2 class="single border">Menu</h2>
      <a href="">About</a>
      <a href="">FAQ</a>
      <a href="">Contact</a>
      <a href="">Links</a>
      <br>
   <h2 class="border">Comics</h2>
      <a href="">About comic</a>
      <a href="">Character poll</a>
      <a href="">Artwork</a>
      <a href="">Fanart</a>
      <a href="">News archive</a>
      <br>
   <h2 class="border">Other Sites</h2>
      <a href="">Facebook</a>
      <a href="">Y Gallery</a>
      <a href="">Twitter</a>
      <br>
   <h2 class="single border"></h2>
      <a href="">Vote, etc</a>
      <br>
</div>

<div id="content-container">
<div id="content" class="border"> {CONTENT} </div>

<div id="footer">
Hosted by <a href="http://www.smackjeeves.com/">Smack Jeeves</a> | Design by <a href="">PrivateSketch</a> | Code by <a href="http://www.smackjeeves.com/profile.php?id=84425">Rosie11</a>
</div>

</div>
</div>
</body></html>

Comic Page
Code: Select all
<script type="text/javascript"> // Sets up the rating stars

<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
var rate_message = "Your rating: "
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_message = "Rate this comic: "
<!-- END switch_user_hasnt_voted -->

function build_vote()
{  document.write(rate_message);
   for (n = 1; n<= 5; n++)
   {  if (n <= default_rating) { class = "selected"; }
      else { class = "unselected"; }
      document.write('<a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);" class="'+ class +'" id="star'+n+'">&lowast;</a>');
   }
}

function rateover(star_num)
{  for (n = 1; n <= 5; n++)
   {  if (n <= star_num) { da_code = 'document.getElementById("star'+n+'").className="selected";' }
      else { da_code = 'document.getElementById("star'+n+'").className="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>

<style type="text/CSS"> #content { background: none; border: none; padding: 10px 0;} </style>

<!-- 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 id="navigation">
<!-- note: lsaquo and rsaquo are codes that create left and right angle symbols -->
   <a href="{NAV_FIRST}">&lsaquo;&lsaquo; First</a>
   <a href="{NAV_PREV}">&lsaquo; Prev</a>
   
   <span>{JUMPBOX_FORMATTED}</span>
   
   <a href="{NAV_NEXT}">Next &rsaquo;</a>
   <a href="{NAV_LAST}">Last &rsaquo;&rsaquo;</a>
</div>

<div id="rating">
Average Rating: {AVERAGE_RATING} <br />
<script type="text/javascript">build_vote();</script>
</div>

<div id="comments">

<!-- BEGIN switch_author_comments -->
<div style="text-align:right"><h1>Author's Comments</h1></div>
<!-- END switch_author_comments -->
   
<!-- BEGIN loop_author_comments -->

<div id="comment-container" class="border">

<!-- BEGIN switch_poster_avatar -->
<div style="min-height: {loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}px">
<img src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" />
<!-- END switch_poster_avatar -->

<h2>{loop_author_comments.POST_TITLE}</h2>
{loop_author_comments.MESSAGE}

<div style="text-align:right">
<a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}

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

<!-- BEGIN switch_poster_avatar -->
</div> <!-- end that div that we put in to set the height -->
<!-- END switch_poster_avatar -->

</div>

<!-- END loop_author_comments -->

<br />
<div style="text-align:right"><h1>
<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></div>

<!-- BEGIN loop_user_comments -->

<div id="comment-container" class="border">

<!-- BEGIN switch_poster_avatar -->
<div style="min-height: {loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}px">
<img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" />
<!-- END switch_poster_avatar -->

<h2>{loop_user_comments.POST_TITLE}</h2>
{loop_user_comments.MESSAGE}

<div style="text-align:right">
<a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}

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

<!-- BEGIN switch_poster_avatar -->
</div> <!-- end that div that we put in to set the height -->
<!-- END switch_poster_avatar -->

</div>

<!-- END loop_user_comments -->

</div>

Menu
Code: Select all
<!-- BEGIN links -->
<a href="{links.URL}">{links.TEXT}</a>
<!-- END links -->
<a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">Favorite</a>

The rest (archive, news, etc) are up to you. Whatever you write in those will appear in the main content box.

Changing the colors
To make changes to the background, colors, and so on, you have to edit the CSS that at the beginning of the Overall Layout code. I put in some notes so that hopefully it will not be too confusing, but let me know if you have questions.

The sections with borders (the menu, the sidebar, and the content area) all share the class .border - this means that you can change all the borders at once by editing that class in the "classes" section of the CSS.

The Sidebar
Adding and removing links from the sidebar should be pretty straight-forward, just look at the section of the code where I've listed a bunch of links. To make a heading on the side bar, you use <h2 class="border">Heading Name</h2>. Note that the first heading should be written as <h2 class="single border">First Heading</h2> in order to prevent a double line on top. Also, you can use <h2 class="single border"></h2> to make a line in the sidebar, as I did before the vote section.

If you want to, you can adjust the width of the sidebar. There are two steps: 1) Find #sidebar in the CSS and change the width 2) Find #content-container and change the margin-left to the width of sidebar + 10 px. Margin-left is how far away the content area is from the left side, so we have to leave space for the sidebar + some extra space, currently 10px.

The Banner
I've made it so that you can have a different banner on each page. The method is a little more complicated than just adding the banner image to the HTML, though. Here's what to do:
1. All your banners should be the same width, and this is also the width of the rest of the layout. So find #main near the beginning of the CSS and change the width from 800px to whatever size your banner is.
2. Find #banner in the div section of the CSS. Set the background to your main banner by putting the URL inside url(" "), and change the height to be the height of your banner. This banner will then show up on every page.
3. On any pages where you want a different banner, including custom pages if you want, add this code at the top: <style type="text/CSS"> #banner { height: 100px; background: url(""); } </style> Once again, you have to put in your banner URL and the height of the banner. So, different pages can have different height banners, and you can even remove the banner by changing the height to 0.

The Rating Stars
I changed the rating stars to text instead of images, mainly so that it would be easy for you to change the color using just CSS and not having to make a new image or anything. But if you want to use images instead, you can put back the original rating code (the Javascript code at the top of the Comic template) from the default Smack Jeeves template. Let me know if you have questions about this.

I think that's it! It seems like I wrote a lot, but it really shouldn't be too complicated. Let me know if you have any questions! :D
Image
User avatar
Rosie11
 
Posts: 87
Joined: May 21st, 2010, 10:44 am


Return to Template Requests

Who is online

Users browsing this forum: Majestic-12 [Bot] and 3 guests