Smack Jeeves Templates Guide

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Smack Jeeves Templates Guide

Postby Admin » May 21st, 2009, 7:01 pm

Smack Jeeves Templates Guide
This guide provides a basic overview on how to create your own custom site template on Smack Jeeves.

What are Templates?
Smack Jeeves uses a template system to control the appearance of each individual webcomic site hosted here. Templates contain HTML, which structures the page design, and variables, which output content (such as comic image URLs, user comment messages, and custom page names).

Here are some of the advantages of templates:

    1) Ability to customize. The main reason for the existence of templates is to allow you to customize the appearance of your site. Templates provide a system that allows you to control the very HTML that makes up your site.
    2) Interchangeability. Smack Jeeves comes with many pre-made templates. It's easy to change the design of your site by simply loading a particular template. When you create your own custom template, you can save it to your list of templates to choose from.
    3) Shareability. If you create a really awesome template that you want to share with everyone else who uses Smack Jeeves, you can post it here in the forums for us to add to the master list of default templates.

The Template Files
There are a few different files used in the template system. Each template file controls a different part of your site's HTML; this is to keep things organized and easy to manage.

The Overall Layout
The Overall Layout is the main template file that acts as the "skeleton" of your website. This is the core of your page design - every page's appearance will be determined mainly by the Overall Layout template. This template should include a spot for the Navigation Menu and the main Content area of your site. Code-wise, think of this as the "HTML skeleton" of every single page of your comic; the content of every page will be contained within this.

Here is a visual example of an extremely simple template design that could be used as an Overall Layout:

Image

And here is an extremely simple example of code that could be used in your Overall Layout:
Code: Select all
<html>
<head>
<title>My Comic</title>
<style>
***** insert your stylesheet here ******
</style>
</head>

<body>

<table width="100%" border="0">
<tr><td>{MENU}</td></tr>
<tr><td>{CONTENT}</td></tr>
</table>

</body>
</html>



The Menu
The menu contains the links to the various pages on your site, such as "Home", "Comics", "Characters", etc.

Here is an example of the code you would place in the menu:
Code: Select all
<!-- BEGIN links -->
<a href="{links.URL}">{links.TEXT}</a>
<!-- END links -->


The News
This template file shows your blog entries and gets displayed as the home page of your webcomic. It can also display the full image of your latest comic as well as a thumbnail for your latest comic, which people often use to link to the latest comic page.

Here is an extremely simple example of the code you could use in your NEWS page:
Code: Select all
<h2>Welcome to {SITE_NAME}</h2>
<p>{SITE_DESCRIPTION}</p>

<!-- BEGIN latest_comic -->

<h1>Latest Comic:</h1>

<a href="{latest_comic.URL}">{latest_comic.TITLE}</a>

<!-- END latest_comic -->

<a href="/news-archive/">See All Comic News >></a>



The News Archive / Comments
This is a little-seen page that archives all of your NEWS posts for people to comment on.

Here is an extremely simple example of the code you could use in your NEWS ARCHIVE page:
Code: Select all
<!-- Begin .post -->
<a name="{POST_ID}"></a>

   <h2>{POST_DATE}</h2>
   <h3>{POST_TITLE}</h3>
   <p>{POST_CONTENT}</p>
   <p><em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp; <a href="#">{COMMENT_COUNT} comments</a></p>

<!-- End .post -->

<table>
<tr><td>
<!-- BEGIN switch_comments -->
<h1>Comments:</h1>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<h1>
<!-- 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</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 -->
<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><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>



The Comic
These are the automatically generated pages that display your comic, along with the "first back previous next" buttons and a quick-link to your archive in a dropdown form. This is also where people get to post what they think about your comic in the form of commentary.

Here is an extremely simple example of the code you could use in your COMIC page:
Code: Select all
<h2>{COMIC_TITLE}</h2>
<h1 class="comic-date-header">{COMIC_POST_DATE}</h1>

<!-- BEGIN comic_image -->
{comic_image.FORMATTED}
<!-- END comic_image -->

<a href="{NAV_FIRST}"><img src="http://www.smackjeeves.com/images/arrow_first.gif" alt="<< First" /></a>
<a href="{NAV_PREV}"><img src="http://www.smackjeeves.com/images/arrow_prev.gif" alt="< Previous" /></a>
   
   <form name="jumpbox" method="GET">
      <input type="hidden" name="url" value="{SITE_URL}">
      <input type="hidden" name="page" value="comic">
      <select name="url" onchange="if(this.options[this.selectedIndex].value != -1){ window.location = this.options[this.selectedIndex].value; }">
         <option value="-1">------ Jump To ------</option>
         <!-- BEGIN jumpbox -->
         <option value="{jumpbox.COMIC_URL}">#{jumpbox.COMIC_NUMBER} - {jumpbox.COMIC_TITLE}</option>
         <!-- END jumpbox -->
      </select>
   </form>
   
<a href="{NAV_NEXT}"><img src="http://www.smackjeeves.com/images/arrow_next.gif" alt="Next >" /></a>
<a href="{NAV_LAST}"><img src="http://www.smackjeeves.com/images/arrow_last.gif" alt="Most Recent >>" /></a>



The Comic Archive
This is the big long table that is generated that shows all of your comic strips at thumbnails on one single page. You can modify this page with various pieces of javascript (provided in these forums) to "sort" your archive into smaller chapters or segments, or just use the default provided to make one huge table listing all of your comics on one page.

Here is an extremely simple example of the code you could use in your COMIC ARCHIVE page:
Code: Select all
<img src="http://www.smackjeeves.com/templates/default/images/comicarchive.gif" alt="Comic Archive" />

<table border="1" cellpadding="4" cellspacing="0" align="center">

   <tr><th>#</th><th>Title</th><th>Date Released</th><th>Comments</th></tr>
   
   <!-- BEGIN archive_list -->
   <tr><td>{archive_list.COMIC_NUMBER}</td><td>
<a href="{archive_list.COMIC_URL}">{archive_list.COMIC_TITLE}</a></td>
<td>{archive_list.DATE_RELEASED}</td>
<td><a href="{archive_list.COMIC_URL}">{archive_list.NUMBER_COMMENTS} Comments</a></td>
</tr>
   <!-- END archive_list -->
   
</table>



Variables
A variable is simply a placeholder for some text or HTML. In the Smack Jeeves template system, variables look like this:

Code: Select all
{VARIABLE}


For example, one variable used in the template system is {SITE_NAME}. Let's say your site's name is "Oranges". If you used the following HTML in a template:

Code: Select all
Welcome to <b>{SITE_NAME}</b>!


It would show up like this:

Welcome to Oranges!


If you ever changed the name of your comic, {SITE_NAME} would change as well. So if you changed your comic's name from "Oranges" to "Apples", the template would now show up like this:

Welcome to Apples!


There are many variables available to you in the template system. You can see what variables are available on each page template when you go to edit the template. Here is a screen shot example:

Image

Try out a few! When you are satisfied with your understanding of the basics of variables, come back to learn more!

Global Variables vs. Page Variables
Global variables work on all pages. Page Variables only work on specific pages. For example, {SITE_DESCRIPTION} will work on all pages, because it is relevant on all pages. But a variable like {COMIC_TITLE} will only work on one of the comic pages. After all, there is only a "comic title" for a page that shows a comic.

When you're editing a template, the Global Variables will be displayed first, and then the Page Variables are displayed:

Image

Loops & Switches
A switch decides whether or not something is displayed. For example, in the comic template, switch_user_has_voted only displays its content when the person viewing that particular comic has given it a rating.

A loop goes through a list of things and outputs them using a defined format. For example, in the comic template there is a loop that outputs user comments.

The way you use loops & switches is very similar. The code structure is like this:

Code: Select all
<!-- BEGIN loop_or_switch -->
(.. content ..)
<!-- END loop_or_switch -->


"loop_or_switch" would be replaced by the name of the particular loop or switch you wanted to output. Examples: there is a switch called "switch_user_has_voted"; there is a loop called "loop_user_comments" (both were mentioned earlier). Switches usually start with "switch_" and loops usually start with "loop_" so you can tell them apart.

Using a Switch
When you use a switch, whatever is inside the BEGIN and END tags is either displayed or hidden, depending on the circumstances. In the case of the "switch_user_has_voted" switch, the content is displayed if the user has voted. For example:

Code: Select all
<!-- BEGIN switch_user_has_voted -->
Thanks for rating my comic! I really appreciate it!
<!-- END switch_user_has_voted -->


If the person viewing it has voted, it will display:

Thanks for rating my comic! I really appreciate it!


If the person viewing it hasn't voted, it won't display anything. (There is also a switch called "switch_user_hasnt_voted" for that situation).

Loop/Switch Variables
Some switches also have their own variables. Loops always have their own variables because their purpose is to output lists of things, and each item (like a comment) will always have its own variables (like author, date, message).

In the case of a switch, or "switch_user_has_voted" in particular, loop and switch variables look like this:

Code: Select all
{switch_user_has_voted.RATING}


Note that the entire variable is still encapsulated by "{" and "}", and it starts with the name of the switch or loop, followed by a "." and then the name of the specific variable. You don't have to memorize this though because all loop and switch variables are listed in the template editing pages just like all the other variables.

Let's see this switch variable in action:

Code: Select all
<!-- BEGIN switch_user_has_voted -->
Thanks for giving my comic a {switch_user_has_voted.RATING}! I really appreciate it!
<!-- END switch_user_has_voted -->


Say the user gave the comic a 4, it will display:

Thanks for giving my comic a 4! I really appreciate it!


Try making your own message for a switch, and then continue this tutorial when you're ready to learn more.

Loops
Once you've learned how to use switches and loop/switch variables, using loops is a breeze.

Loops do just what they say they do: they "loop" repeatedly, using the same block of template code for each repetition. Say a loop was set to repeat 10 times. Specifically, lets say for this example that 10 people have left comments on one of your comics. If we used the following template code:
Code: Select all
<!-- BEGIN loop_user_comments -->
Hey there!
<!-- END loop_user_comments -->


the following would be displayed:

Hey there!
Hey there!
Hey there!
Hey there!
Hey there!
Hey there!
Hey there!
Hey there!
Hey there!
Hey there!


Of course we would never do this - it is just for example. What we are going to now is use the loop variables to show everyone's post.

Here are the variables we have available:

Image

Let's use HTML tables to format the data so its easy to read. Take note that the opening and closing <table> tags are NOT included in the loop structure, because we only need one opening and closing tag, not 10. We also use a header row here to label the columns.

Code: Select all
<table>
<tr><th>Poster</th><th>Comment</th></tr>
<!-- BEGIN loop_user_comments -->
<tr>
<th>
Posted by <a href="{loop_user_comments.POSTER_PROFILE_URL}">{loop_user_comments.NAME}</a><br>
on <i>{loop_user_comments.DATE_POSTED}</i>
</th>
<th>
{loop_user_comments.MESSAGE}
</th>
</tr>
<!-- END loop_user_comments -->
</table>


The HTML output would then look something like this:

<table>
<tr><th>Poster</th><th>Comment</th></tr>
<tr>
<th>
Posted by <a href="http://www.smackjeeves.com/profile.php&id=1">Admin</a><br>
on <i>2:00 PM August 18th, 2005</i>
</th>
<th>
Hey dude great job on the art, I'm lovin it! Keep it up!
</th>
</tr>
<tr>
<th>
Posted by <a href="http://www.smackjeeves.com/profile.php&id=236">Billy Bob</a><br>
on <i>2:10 PM August 18th, 2005</i>
</th>
<th>
I totally agree, this is kick ass!
</th>
</tr>
<tr>
<th>
Posted by <a href="http://www.smackjeeves.com/profile.php&id=306">George Forman</a><br>
on <i>3:30 PM August 18th, 2005</i>
</th>
<th>
HOLLA!! Check out my GRILL SKILLZ!!
</th>
</tr>
(etc. you get the point...)
</table>


Congratulations! If you've made it this far, it means you probably have more guts than most people, because I know this tutorial probably looked a little scary in the beginning 8). Hopefully you are now an expert at the Smack Jeeves template system now. However, if you have any questions still, feel free to ask, either in this thread or in a new topic on this board.

Now go out there and make your own design!
User avatar
Admin
Site Admin
 
Posts: 1461
Joined: August 17th, 2005, 11:10 pm

Re: Smack Jeeves Templates Guide

Postby dolphinsm » June 7th, 2009, 1:37 am

i was wondering how you change the ratings images, the flames into something you want?
User avatar
dolphinsm
 
Posts: 1
Joined: April 26th, 2008, 4:38 pm

Re: Smack Jeeves Templates Guide

Postby Mr Aids » June 7th, 2009, 2:25 am

You can find that out here.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Smack Jeeves Templates Guide

Postby Theorah » June 16th, 2009, 5:34 am

ok, I was wondering where have those extremely wonderful and helpful template tutorials gone? The ones that are for specific templates? They were nice and easy for people like me who have no clue about this kind of thing, all I had to do was copy and paste my own image file into the code that was already there. But they're gone!Are they gone for good, or are they just lost in the new forum?
User avatar
Theorah
 
Posts: 2
Joined: March 21st, 2008, 6:42 pm

Re: Smack Jeeves Templates Guide

Postby Pyroman » June 16th, 2009, 7:44 am

Not 100% sure which ones you are referring to, but the old premade templates FAQs are still archived in the old forums, and all the old Templates should still be accessible in your page design/appearance menu. You can find the list of support threads I made here, but you will need to edit the links to point to 'oldforum' instead of forum.
For example: http://www.smackjeeves.com/forum/viewtopic.php?t=13699 would need to be changed to http://www.smackjeeves.com/oldforum/vie ... hp?t=13699

If you are referring to WhistleonWind's amazing templates, you can see them here.
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Smack Jeeves Templates Guide- How do I insert this?

Postby emcat166 » June 23rd, 2009, 8:00 pm

Okay I have the sea banner or whatever template and it tells me I should put my image (at the top of the page) in the "news", "news archive" and "comic archive" section of the template. I made an image according to the sizes it specifies, but as to where I'm supposed to put it, I have no clear idea.
User avatar
emcat166
 
Posts: 1
Joined: July 18th, 2007, 11:30 pm

Re: Smack Jeeves Templates Guide

Postby Mr Aids » June 24th, 2009, 12:14 am

I'm assuming you've uploaded the banner to an image hosting site.

At the top of those pages, you'll see this:

Code: Select all
<img src="http://img157.imageshack.us/img157/3082/bannereday1.jpg" width="700" height="350"></div>


Replace that url with the url for your banner, and change the width and height to match it.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Smack Jeeves Templates Guide

Postby Theonewhoisodd » June 29th, 2009, 3:35 pm

I want to adjust the menu so that it only shows certain links because whenever you add a custom page it shows up on the menu. I tried using this code:
Code: Select all
<!-- BEGIN links -->
<a href="http://{SITE_URL}.smackjeeves.com/">Home</a>
<a href="http://{SITE_URL}.smackjeeves.com/comics/597623/omgzzzz-first-comicz/">First Comic</a>
<a href="http://{SITE_URL}.smackjeeves.com/comics/">Latest Comic</a>
<a href="http://{SITE_URL}.smackjeeves.com/archive/">Archive</a>
<a href="http://{SITE_URL}.smackjeeves.com/link/">Links</a>
<a href="http://{SITE_URL}.smackjeeves.com/rss/">RSS</a>
<a href="http://www.smackjeeves.com/viewsite.php?random">Russian Roulette</a>
<a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Fav</a>
<a href="http://twitter.com/MadManga">Twitter</a>
<!-- END links -->


Instead I get this:
Image

Can anyone help?
Author, Writer, Artist, and Colorist of Image
User avatar
Theonewhoisodd
 
Posts: 9
Joined: April 22nd, 2009, 8:36 am

Re: Smack Jeeves Templates Guide

Postby Pyroman » June 29th, 2009, 8:39 pm

Take out:
Code: Select all
<!-- BEGIN links -->
and
<!-- END links -->


Essentially, what that does is prepare SJ for the automated code it uses, and loops it. That's why on the default menu you only need one line of code.

Oh and just so you know, you can use lots of automated code in your menus, including {SITE_URL_FULL} for your links, which will create http://blahblah.smackjeeves.com/ , and then just add the page on the end. So for example, the first few links can be:
Code: Select all
<a href="{SITE_URL_FULL}">Home</a>
<a href="{FIRST_COMIC_URL}">First Comic</a>
<a href="{SITE_URL_FULL}comics">Latest Comic</a>
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Smack Jeeves Templates Guide

Postby jayblade14 » July 20th, 2009, 5:24 pm

I'm new to the whole making your own templates thing and I wanted to ask what a stylesheet is and how you would normally go about making one. :3 thankies
jayblade14
 

Re: Smack Jeeves Templates Guide

Postby TwinBulletBang » July 21st, 2009, 4:03 pm

How do you keep the background image to stay still when scrolling? (Like having it follow you when you scroll where it isn't tiled?)

(I don't really know how to put this question into words.)
TwinBulletBang
 
Posts: 2
Joined: July 21st, 2009, 2:22 pm

Re: Smack Jeeves Templates Guide

Postby Pyroman » July 22nd, 2009, 2:42 am

TwinBulletBang wrote:How do you keep the background image to stay still when scrolling? (Like having it follow you when you scroll where it isn't tiled?)

(I don't really know how to put this question into words.)


I getcha. You want the background image to be fixed, and not move when users scroll the page.
I'll assume you have done this, but Firstly; upload your image to an imagehoster.
Next go to your OVERALL LAYOUT and find this:
Code: Select all
<style type="text/css">

Below that, find 'body' and add this code between '{ },' replacing 'IMAGEURL' with the actual image URL.
Code: Select all
background:url(IMAGEURL) fixed no-repeat;


Now you can choose where you want the image to be oriented by adding directions after 'no-repeat.' For example, to make it aligned to the right:
Code: Select all
background:url(IMAGEURL) fixed no-repeat right;


The first direction will be the X-AXIS (horizontal) and if you put a second direction, e.g. 'right center,' this will be the Y-AXIS (vertical).
Directions you can use are: right, left, top, bottom and center.
ImageImage
ImageImage
Image
User avatar
Pyroman
 
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: Smack Jeeves Templates Guide

Postby TwinBulletBang » July 22nd, 2009, 12:49 pm

Thank you so much!! ;o;
TwinBulletBang
 
Posts: 2
Joined: July 21st, 2009, 2:22 pm

Re: Smack Jeeves Templates Guide

Postby FanFantasy » July 29th, 2009, 4:44 pm

Aggghhh.......I'm so confused. I have a couple questions:

Whats a style-sheet?

All this coding stuff is screwing with my brain, is there a way to learn how to edit one's that have already been made, thats for slow people like me?

When making a template, do you put the news archive and stuff inside the Overall layout code? (I'm very dumb and new at this.)

and also, whats the code for a fave button as a custom page?
Image

Go look! Please?
User avatar
FanFantasy
 
Posts: 6
Joined: June 13th, 2009, 1:40 pm

Re: Smack Jeeves Templates Guide

Postby Mr Aids » July 29th, 2009, 10:04 pm

For your stylesheet question, there is an answer here.

You can edit existing templates.You can check lots of common changes at the old SJ FAQ.

You put the code for News Archive in the News Archive part, Comic Page stuff in the Comic Page, etc. Overall Layout contains code that applies to all pages.

And your fave button question is answered in the FAQ here.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Next

Return to Template Development & Support

Who is online

Users browsing this forum: Baidu [Spider] and 3 guests