RSS Feed Random Comic Add To Favorites Frequently Asked Questions is proudly hosted by Smack Jeeves Webcomic Hosting.
SECTION : Basic HTML Coding
SUBSECTION 1: Basic HTML Questions

Question

What is HTML and what does it do?
Section. Main.

Answer


HTML (which stands for HyperText Markup Language, for those who are curious) is all the coding one has to do to make something, well, not look like a chunk of text. HTML can organize things into tables, change colors, add a background, bold font, italicize font, underline font, change what the font is, etc. Basically, it's what makes organizes page content and makes it look nicer. CSS is what should be used for the site design (to easily unify the look of the pages), and HTML should be used then only for the minor things (like changing the font on one spot, bolding/underlining/italicizing, etc.). Although that's how it should be done, you could code everything with HTML and not use CSS at all – although there are some more "fancy" things CSS can do that HTML cannot (such as overlapping).

Answer by falconer

Question

What is CSS?
Section. Main.

Answer


CSS is a more advanced language for HTML design. It stands for Cascading Style Sheets. A "Style Sheet" is essentially a collection of CSS codes (and the Cascading part simply refers to the fact that multiple styles can be applied to a certain tag, and have a set hierarchy of interaction).

Whereas in HTML, everything must be listed every time (for example, if you want all your tables to have a border, every table tag MUST have the "border=" tag), with CSS you can create custom classes which will automatically feature a whole host of commands.

CSS is used on every default template, via a linked CSS page, as well as used in nearly every custom template. This FAQ makes heavy use of CSS, for example. If you are interested in web design, CSS is an absolute must.

With CSS, the rules are different than HTML, and the formatting is different as well. CSS makes heavy use of the <style> tag, as well as the "style" attribute. For this reason, if you are new to CSS, it is a good idea to go through some [insert Xref link] basic tutorials.

If you need some immediate CSS help, head over to [xref link] Help & Guides on the SmackJeeves Forums and you will likely recieve a response from one of the many dedicated H&G forumers. Be sure to state your problem clearly and preferably paste the offending code.

Answer by JimmyDabomb

Question

What is PHP and what does it do?
Section. Main.

Answer


PHP is a coding language used to make websites a bit more…dynamic, we'll say. It's kind of the "behind the scenes" code, and it can be used to get information from a database and change what displays on a webpage based on variables, the URL itself, or some other factor. It can do a lot of spiffy things, doesn't show up if someone right clicks for the source code, and a page done in PHP is easily identifiable because the page name ends in ".php" instead of ".html". PHP is the reason why you can go to smackjeeves.com/comicprofile.php?id=x and see different web comic's information based on what number is in place of "x" even though you're visiting the same page. Unfortunately, you cannot code PHP into any of the code for your pages of your smackjeeves' webcomic. Er, well you could…it just wouldn't work.

Answer by falconer

Question

What is Javascript and what does it do?
Section. Main.

Answer


Javascript is another coding language which can do some neat things. I'd call this one dynamic too, but, as opposed to PHP, it's not running "behind the scenes". If anyone right clicks on a webpage and hits "see page source", they'll be able to see your Javascript code. One big strength of Javascript is how it can make your page (including any page on on SmackJeeves) interactive – it can change what appears without having to reload the page.

Answer by falconer

Question

What is a "hex code" (or a hex-color code)
Section. Main.

Answer


A hex color code is code comprised of 6 numbers, which run 0-F (0...9, then A...F) and can easily be set to render upto 16.7 million colors. The code is presented in this fashion: #RRGGBB, where R is red, G is green, and B is blue. The first number is always the larger, and controls more strongly the color. You can mix and match these colors as you will.

A hex value for your colour can be found in many ways, google is an option if it is not a specific colour, and Photoshop can be used for very specific colours. To find the hex code in Photoshop open up your colour window and select your colour, then look in the bottom right hand corner. Insert that number into the code, making sure that the hash is still there.

    Examples of Hex Colors:
  • #000000 = Black
  • #FFFFFF = White
  • #FF0000 = Red
  • #00FF00 = Green
  • #0000FF = Blue
  • #FF00FF = Pink
  • #00FFFF = Aqua
  • #FFFF00 = Yellow

Answer by Pyroman & JimmyDabomb

Question

How do I add links in HTML?
Section. Main.

Answer


To add a link simply type:

<a href="http://yourlinkhere.com/">YOUR TEXT HERE</a>

That will generate a link from 'YOUR TEXT HERE' to 'http://yourlinkhere.com/'.

For example, this code:

<a href="http://faq.smackjeeves.com/">SmackJeeves FAQ</a>

will generate this link: SmackJeeves FAQ



Linking an image is as simple as combining the two bits of code:

<a href="http://yourlinkhere.com/"><img src="http://blahblah.com/directlinktoyourimage.png" alt="your image desc"></a>

To add or remove a border from your image place:

border="insert a number"

after the alt part.
The number will be the size, try not to go crazy.

Be warned that when creating templates of your own borders are automatically placed on any images that are linked, and this can lead to broken webpages, so be sure to add border="0" to them.


Tips and Tricks

Try to get into the habit of adding '/' at the end of any URL's that end in a '.com', because otherwise the browser will send two requests to the linked page, one with the slash and one without. Do not add a slash if the ending is 'file.html' or anything similar (.php, .htm ...etc)

Answer by Pyroman

Question

How do I add plain text in HTML?
Section. Main.

Answer


To add plain text straight to a page you must use a few formatting rules, those used to forum codes will be familiar with these.

You may immediately notice you can only have one space at a time. To add more than one space insert &npsb; after the first space, and add as many as the spaces you need.

To go down a line, as if you hit 'enter' (return/carriage) type <br>

To go down two lines, as in to create a new paragraph type <p> and add </p> at the end of the paragraph. The <p> tag carries with it formatting guides and should always be closed.

  • To create bolded text do this: <b>TEXT HERE</b>
  • To create Italic text do this: <i>TEXT HERE</i>
  • To create underlined text do this: <u>TEXT HERE</u>

For more tags check out w3schools and also 'My first site' i have found to be a good source for the beginning coder.

Answer by Pyroman

Question

How do i make my HTML align to the left/right/center?
Section. Main.

Answer


If you want to change the alignment of a whole section, you can change it in the CSS like so:


#content { text-align: right; }

And replace "right" with "left" or "center" depending on what you want. On the default template, you don't have the CSS since it is imported, so you can change it with the div where the content you want to change the alignment of it contained (this is found in the overall layout):

<div id="content" style="text-align: right;">

Again, you can replace "right" with "left" or "center". If you want to change one small part, you can either put it in a div…

<div style="text-align: right;">HTML to be aligned here</div>

Or you can do it the old fashioned way!

<p style="text-align: right;">HTML to be aligned here</p>

Well that didn't save you much space, did it? While….

<center>text here</center>

…will still center text, it's actually deprecated code. That means it's considered outdated, and while it will still work…at some point, it might not.

Answer by Falconer

Question

I don't know anything about HTML -- what do I do?
Section. Main.

Answer


HTML (which is needed if you want to make a custom page, or customize the look of your page), is actually not too difficult to learn, as far as the basics go. Here are a couple of tutorials:

Remember that those who offer their time on the Smackjeeves Templates/Help and Guides Forums are not your slaves, and if you are not prepared to learn how to use HTML then don't expect that they will bow down and produce the template for you. There are some very kind members who spend much of their time to help new users, so take the time to listen and learn, not just take.

Answer by Cutething & CTFAQ Contributors
SUBSECTION 2: Common Template Changes

Question

How do i change the background colour?
Section. Main.

Answer


Open up you overall layout menu and look for this code:

<style type="text/css"> @import url("http://www.smackjeeves.com/sj-navbar.css"); </style>

Now Add This code below and change the [insert xref here] hex value to your colour of choice.

<style type="text/css"> body { background: #000000; }

Answer by Pyroman

Question

How do I set an image as the background?
Section. Main.

Answer


To make your background an image, paste the following between the the style tags of your HTML code (<style> & </style>). You can find the style tags in the top part of your overall template. The direct URL will need to be pointed to a (insert x-ref link here) remotely hosted image.

body { background: url("DIRECT URL YOUR IMAGE HERE") no-repeat; }

If you want it to be repeated over and over, for example a pattern or shape, remove the 'no-repeat' (but not the ";") at the end.

Tips for snazzy looking backgrounds:
  • Make sure to use a simple image. Low contrast images work well for the background, and keep from distracting the reader.
  • If you want your image to repeat, make sure you make it into a suitable pattern. Nothing looks worse than a repeating non-pattern image.
  • If your image is not repeating, you can set it to be "fixed" to the background. This way, no matter where you are on the page, the background image will remain displayed on the screen. To do this, simply add the word 'fixed' before 'no-repeat' and leave a space in between.

Answer by Pyroman

Question

How do I add images to my website?
Section. Main.

Answer


Unfortunately, any image not directly comic related will need to be linked to from a (insert x-ref linky) Remote Image Hoster, so your first step will be to select one and get that all setup.

Now, once you've uploaded your image to the site, you'll find a (insert xref link) URL which points directly to the image. You can test this by opening up your browser and entering that URL into your address bar. If you have done it right, you will be taken directly to the image. If the image is there, as are ads, then you have grabbed the wrong URL and will need to try again.

Once that's done, the proper tag for adding an image is IMG. You use it like this:

<img src="THE URL OF YOUR IMAGE" alt="TEXT TO SHOW UP IF IMAGE DOESN'T" title="TEXT THAT IS DISPLAYED WHEN YOU PLACE THE MOUSE OVER THE IMAGE">

You can, at your option, include the height and width as well. This can be useful, sometimes, but is not necessary. You can also add a (insert xref link) border using CSS.

The 'alt=' part of this code is required for those people who browse with images turned off, or who cannot see the images. The 'title' meanwhile, displays a little note for when people mouse over the image. You can leave either blank if you desire by leaving the two quote marks empty.

Answer by Pyroman & JimmyDabomb

Question

How do I change the navigation arrows on my comic?
Section. Main.

Answer


A Step-By-Step Guide
  1. Open up the comics section in your page design/appearance menu.
  2. Find this piece of code:

    <a href="/comics/382746/navi-prev/"><img src="http://www.smackjeeves.com/images/arrow_first.gif" alt="<< First" /></a> <a href=""><img src="http://www.smackjeeves.com/images/arrow_prev.gif" alt="< Previous" /></a> <form name="jumpbox" method="GET"> <input type="hidden" name="url" value="faq"> <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=""># - </option> <!-- END jumpbox --> </select> </form> <a href=""><img src="http://www.smackjeeves.com/images/arrow_next.gif" alt="Next >" /></a> <a href=""><img src="http://www.smackjeeves.com/images/arrow_last.gif" alt="Most Recent >>" /></a>

  3. Replace the following with the URL that goes directly to your new 'Latest comic arrow':

    http://www.smackjeeves.com/images/arrow_last.gif

  4. Replace the following with the URL that goes directly to your new 'Next arrow':

    http://www.smackjeeves.com/images/arrow_next.gif

  5. Replace the following with the URL that goes directly to your new 'Previous Arrow':

    http://www.smackjeeves.com/images/arrow_prev.gif

  6. And finally, replace the following with the URL that goes directly to your new 'First comic arrow':

    http://www.smackjeeves.com/images/arrow_first.gif

  7. Please Note: You'll need to (insert xref link) remotely host your arrow images.

Answer by Pyroman

Question

How do i change/remove the rating stars?
Section. Main.

Answer


A Step-By-Step Guide

A Note of Caution: The Ratings Code for SmackJeeves uses Javascript. While the process to change the images is not complicated, it is easy to screw up. Please read the directions carefully, and do not proceed until you are confident you can undo a mistake. FAQ.SJ cannot accept any responsibility for your actions.

    STEP ONE: Find The Ratings Code
  1. Head over to your 'comics' section in the page/design appearance menu.
  2. Scroll until you find this piece of code:

    <script language="JavaScript"> var dir = "http://www.smackjeeves.com/templates/default/images/"; var pic_unselected = "star-unselected.gif"; var pic_selected = "star-selected.gif"; // "Buffers" the image to the browser document.write('<img style="display: none" src="' + dir + pic_unselected + '" />'); document.write('<img style="display: none" src="' + dir + pic_selected + '" />'); <!-- BEGIN switch_user_has_voted --> var default_rating = {switch_user_has_voted.RATING}; var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/your-rating-2.gif"; <!-- END switch_user_has_voted --> <!-- BEGIN switch_user_hasnt_voted --> var default_rating = 0; var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/rate-it.gif"; <!-- END switch_user_hasnt_voted --> function build_vote() { document.write('<img id="text" src="' + rate_it_pic + '" /><ul>'); for (n = 1; n<= 5; n++) { if (n <= default_rating) { default_pic = pic_selected; } else { default_pic = pic_unselected; } document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>'); } document.write('</ul>'); } 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>

    If you don't want the rating system on your page:
  1. Delete the section entirely.
  2. You're done!
    If you want to change the images:
  1. Draw up some new images. They should be bold, but small (25x25 max). If you wish to have the rollover (as with the default images), you'll need to make two versions: the first for when when they're not highlighted (unselected), and the second for when they are highlighted (selected).
  2. Upload your images to a (insert xref linky) Remote Image Hoster. Take note of the images' entire URL.
  3. now, having already found the javascript code, scroll to the top of it and find the following:
    1. http://www.smackjeeves.com/templates/default/images/
    2. star-unselected.gif
    3. star-selected.gif
    Make doubly sure that you do not remove the quote marks that surround any of these parts.
  4. Delete the first one, as you won't need it. The Quotes that surrounded it should remain, though, as should the rest of the code.
  5. In place of the second one (star-selected.gif), paste the ENTIRE URL of your highlighted image (should start with http:// )
  6. In place of the third one (star-unselected.gif), paste the ENTIRE URL of your non-highlighted image.
  7. Note, if you have only used one image, then you can place the ENTIRE URL of the image in both spots.
Answer by Pyroman

Question

How do i modify a specific template?
Section. Main.

Answer


Unfortunately, with the premade SmackJeeves templates there is no easy to way write modification guidelines. For each of them, a full tutorial could eventually be written, complete with their own FAQ questions. Your best bet is to check the forum thread where the template was originally submitted. If the premade template you're trying to change doesn't have one here, you can also search the Template Submission forum and the Help & Guides forum.



What follows is a list of Premade Templates, and corresponding forum threads for them:



Horror Black V2:

Default (also explains general smackjeeves template terms):

Simple Red/Simple Blue
This also may be of help, as the official one does not go into, well, any detail:
Editing Simple Red/Blue

Kermit:

Summer Simplicity:

Top Banner V2:

Vertical Simplicity:

Björk Banner:

Vertical Grape (no longer supported):

Top Banner (No longer Supported, use Top Banner V2):

Sea Banner (No Longer Supported):

Black Leaves:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Alternate Horizontal:
No Tech Support yet, post questions in the Help and Guides section of the forum.

October Simplicity:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Blingmobile:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Gunmetal Grey:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Horror Black:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Serebii:
No Tech Support yet, post questions in the Help and Guides section of the forum.

Answer by Pyroman

Question

I accidentally deleted my "add comic as a favorite" button on my template. How do I re-add it?
Section. Main.

Answer


This is a common problem for users with custom templates or anyone who's deleted the blue bar from the default template.
1. Log in to the Smack Jeeves website
2. Click Manage Comic of the comic you wish to link to
2. Make a note of the id number in the url
3. For example: http://www.smackjeeves.com/managecomic.php?id=1234
4. Put the following code somewhere in your overall layout code where you want your +add link to appear:

<a href="http://www.smackjeeves.com/favorites.php?add=YOUR ID NUMBER">Add to Favorites<a>

Answer by Cutething & CTFAQ Contributors

Question

How do I turn commenting off entirely?
Section. Main.

Answer


This depends primarily on the template you're using. You'll need to go in and delete your specific comment code. A working knowledge of HTML and javascript will be invaluable if you want to do this yourself. Otherwise, post in forum under New Questions.

Answer by Cutething & CTFAQ Contributors
SUBSECTION 3: Custom Pages

Question

How do I create a custom page?
Section. Main.

Answer


A Step-By-Step Guide
  1. Head over to your webcomics management screen and select custom pages.
  2. Select 'Add Custom Page'
  3. Name your page. This will be the page title, and will be displayed at the in the page's title, as well as the link description for the Menu.
  4. Now add a name for the URL. The URL must be a single word (no spaces). Try to keep it simple as this will be the URL for your custom page and will be easier to remember if it isn't 'yourcomic.smackjeeves.com/thisismycharacterspagewithalltheinfoandbios'.
  5. If you would like the overall layout to apply to this page check the box. What this means is that the look of the overall layout will carry onto this page, including menus.
  6. Insert your HTML into the blue box (see next sections for tips on how to add basic code).

In the default template, all custom pages are added automatically. You may need to manually add the link yourself if you are using a (insert x-ref) non-default template.

Answer by Pyroman

Question

How can I hide custom pages from the default menu?
Section. Main.

Answer


Your best bet is to remove the default menu and code it manually, omitting any page you do not want displayed.

Answer by JimmyDabomb
SUBSECTION 4: Menu

Question

How is the default menu laid out?
Section. Main.

Answer


The default smackjeeves menu makes use of a quick PHP generation tool to create the links for your individual site, with an expandable list format. This means that, most menus on SJ look something like this.

<ul> <!-- BEGIN links --> <li><a href="{links.URL}">{links.TEXT}</a></li> <!-- END links --> </ul>

    The "links" file contains the following:
  • The link to the home page (http://YOURCOMIC.smackjeeves.com)
  • The link to your first comic.
  • The link to your latest comic. (comics/)
  • The link to your comic archive (archive/)
  • Every single custom page you've created

The upside to this creation is that, for the most part, you'll never worry about the menu, even if you add a custom page or two. The downside is that, if you wish to edit these links in any way (even just changing their order), you're first step will be to remove the PHP and code it yourself.

The other thing to note is the use of the <li></li> tag, which places each link into it's own "list item", and makes it easier to sort.

See:
PHP - How it works, and what it's doing on SmackJeeves.
Menu Customisation FAQ

By: JimmyDabomb

Question

I am using [*****] template, and my menu doesn't look like the default. What can I do?
Section. Main.

Answer


As each template is slightly different, customization for them is tricky. Try doing a search in the forum for your template name (specifically in the Template Submission and Help & Guides forum), and see if you can find instructions there.

See:
How do I search the forum?

Answer by JimmyDabomb

Question

How can I add links to the default Menu?
Section. Main.

Answer


If all you need is to add a simple link to the end of your links, you can simply load up your default menu and append your link AFTER the code, "<!--END links -->", but before the </ul> To properly format your code, make sure to put the code inside a <li> </li> tagset. Like this:

<li><a href="YOURSITEOFCHOICE">TEXT</a></li>

This will make absolutely certain that your code is displayed properly with the default menu.

Answer by JimmyDabomb

Question

How can I replace the menu with my own?
Section. Main.

Answer


It will often be necessary, as you work on your site, to remove the default menu and replace it with your own. So we've written up a quick step-by-step guide.

A step by step guide
  1. Load up your favorite text editor. Open a new file.
  2. Load up your website (http://YOURCOMIC.smackjeeves.com)
  3. Pick and follow your choice of instructions:
    • -- The simple (but time consuming) way.
      1. highlight each link in turn.
      2. right click and select "copy link location"
      3. select your text editor, and paste the location into your text file.
      4. make sure to label each one as you do so (first comic, latest comic, home, etc)
      5. repeat for all the text buttons you wish to copy over.
    • -- The faster, more tech saavy way.
      1. click "view source" to see the website's code.
      2. find the following code in your website's source code:

        <ul> <li><a href="/">Home</a></li> <li><a href="/comics/">Latest Comic</a></li> <li><a href="/comics/WEBSITE ADDRESS">First Comic</a></li> <li><a href="/archive/">Archive</a></li> </ul>

      3. highlight that code, and copy it.
      4. paste the code into your text editor.
  4. Go to your comic's management screen, and select "page design & appearence"
  5. Open up your menu.
  6. Now:
    • -- if you went with "the simple way" to gather the links:
      1. highlight the line that says <!--BEGIN links --> and the one that says <!-- END links --> and delete them.
      2. go to the line that says <li><a href="{links.URL}">{links.TEXT}</a></li> and copy it
      3. drop to the next line down and paste the line after itself.
      4. repeat this step until you have enough links for all the ones you copied.
      5. starting with the first link, copy the "link location" (which usually starts with http:) and paste it over, "{links.URL}". Replace {links.text} with the text description (i.e. Home, First Comic, Latest, etc)
      6. repeat until you have filled in this new list.
    • -- if you copied out the entire code:
      1. highlight the following 3 lines:

        <!-- BEGIN links --> <li><a href="{links.URL}">{links.TEXT}</a></li> <!-- END links -->

      2. replace with the code that you copied earlier.
  7. Click "Submit" to save.

Now, if it all worked, when you look at your menu on your page, you'll end up with EXACTLY what you had previously. At this point, your menu is ready to be customized to your heart's content.

If something has gone wonky, check for errors. If you don't see anything, you can easily revert by simply copying the original default menu and pasting it back into your template.

Answer by JimmyDabomb

Question

How can I change the order of the default menu?
Section. Main.

Answer


Pretty much the only way you can change the order of the default menu is by deleting the menu and hand-coding it.

Answer by JimmyDabomb