The Jaded - Need some help?

The Workshop - Building and Making Stuff
Ocean Blue Indextemplate

After the introduction of my 'Facelift' tutorial, I am still stunned by how popular the 'Charcoal Indextemplate' I provided has become. I seem to be getting more mail for the template than my comic!

Because it's been so well-received and people have given me so much nice feedback, I thought I'd take an afternoon off and whip up a couple more. The first one I came up with is a little more complex: The Ocean Blue Indextemplate.

This one has a few more features such as an optional navigation bar for those of you who want it.

Click here to see what the Ocean Blue Indextemplate looks like in action. Note that the buttons may not match because they were made for my comic. In normal cases they'll appear as text links or whatever you have set as your navigation buttons.


Start

  1. Copy the indextemplate code from here.
    (You probably can just right-click and Save Page As... or something like that)
  2. Make sure the file is named as indextemplate.html.
  3. You can also make a copy of it and name it dailytemplate.html for your archive pages.
  4. Upload the new indextemplates via FTP to your Keenspace account's /workspace folder .
  5. To get the pretty wavy pattern in the background, right-click on this image tile and Save Image As...
  6. Make sure it's saved as waves.gif and put it in your /workspace/images folder.
  7. Wait 24 hours or trigger a manual update. That's all you need to do to have the basic version of the Ocean Blue Indextemplate up!


Adding the Navbar

The Nav Bar will allow you to link to your extras pages, which are the following:

  1. Archive - This links to /archive.html
    You can use this to link to you archive page for easy navigation. For a premade archives page to match this theme, click here. After you save the code, upload to /workspace/webpages
  2. Cast - This links to /cast.html
    You can link to your cast page from here. I can't make this for you, so you'll have to do it yourself. Feel free to cannibalise the sample archive code above for this purpose.
  3. Links - This links to /links.html
    A links page is always essential, so link to your favourite sites here and build some karma!
  4. Email - Insert your email address to where it says so so your readers have a handy-dandy way to contact you!

Naturally it doesn't HAVE to link to these links, so if you know your HTML feel free to change the link locations.

Now, to get the Navbar working:

  1. By default the Nav bar is hidden by a couple of comment tags. To remove the tags, open up the indextemplate code in your text editor and search for the following HTML code:

    <!--REMOVE FOR NAVIGATION
    and
    REMOVE FOR NAVIGATION-->
  2. Delete both portions of code and save.
  3. Upload the indextemplate to your /workspace folder.
  4. Save this spacer image as sun_spacer.gif. Upload this to your /images folder.

And you're done! For some fun extras, how about some link buttons?

DONT HOTLINK THESE BUTTONS!!!!! RIGHT CLICK AND SAVE TO YOUR COMPUTER!!!

- Save as first_day.gif
- Save as previous_day.gif
- Save as next_day.gif
- Save as last_day.gif

Don't know how to insert link buttons? See here.


Voila! Pretty webpage with a minimum of effort!

As usual, feel free to tinker with or cannibalize the code as much as you want. Just remember to keep the little disclaimer at the bottom in so other people will know where to get the Workshop code.

I hope you'll like the Ocean Blue indextemplate. I might make more indextemplates in the future. Depends on how busy I am and how many people are interested enough to bug me into doing it ;)

Happy Webcomicking!

Back to : [ Jade's Office ]


The Jaded is hosted on Keenspace, a free webhosting and site automation service for webcomics.

"The Jaded", all its characters, webpage and images are the creations of Ping and are protected under copyright law. Please do not reproduce without permission.