Upload
others
View
20
Download
0
Embed Size (px)
Citation preview
COMIC
FURY
LAYOUT
GUIDE (Version 1.0)
Comic Fury Layout Guide (Version 1.0)
~ 2 ~
Introduction
Welcome to the Comic Fury layout guide. This guide is here to help you make a layout as
unique as your comic. The purpose of this guide is not to walk you through the process of
customizing your layout, or adding certain graphical effects. The purpose is to teach you how
the system works, to help you look at an existing Comic Fury layout and understand what it's
doing, and to help you know how to change it to get the look you want.
For examples, this guide makes reference to a comic called "Simplesville", which exists at
simple.thecomicseries.com. Simplesville uses the layout included as an example in this guide,
exactly as it appears on the explanation pages.
Comic Fury's layout system is mostly HTML and CSS, both of which are topics too large to
include in this guide, and they are well documented elsewhere. I'd suggest looking at
W3Schools to get an understanding of either of the languages. That's where I learned most of
what I know on the topics.
If you have any questions, comments, corrections, requests or feedback, the please leave a
comment on this forum thread. Thank you for reading the Layout Guide, and I hope you find
it helpful.
Comic Fury Layout Guide (Version 1.0)
~ 3 ~
Contents Introduction ............................................................................................................................................ 2
Syntax ...................................................................................................................................................... 6
Breakdown .............................................................................................................................................. 6
Types ................................................................................................................................................... 6
Prefix ............................................................................................................................................... 7
Parameters ...................................................................................................................................... 7
Modifiers ......................................................................................................................................... 7
Variables .................................................................................................................................................. 8
Description .......................................................................................................................................... 8
Example ........................................................................................................................................... 8
Prefixes ................................................................................................................................................ 8
Modifiers ............................................................................................................................................. 8
l: ....................................................................................................................................................... 8
f: ...................................................................................................................................................... 8
Conditions ............................................................................................................................................... 9
Description .......................................................................................................................................... 9
Example ........................................................................................................................................... 9
Prefixes ................................................................................................................................................ 9
end_ ................................................................................................................................................. 9
file_ .................................................................................................................................................. 9
l ........................................................................................................................................................ 9
Modifiers ............................................................................................................................................. 9
Loops ..................................................................................................................................................... 10
Description ........................................................................................................................................ 10
Example ......................................................................................................................................... 10
Prefixes .............................................................................................................................................. 10
Modifiers ........................................................................................................................................... 10
Comments ............................................................................................................................................. 11
Description ........................................................................................................................................ 11
Prefixes .............................................................................................................................................. 11
Modifiers ........................................................................................................................................... 11
Element List ........................................................................................................................................... 12
Overall Layout ................................................................................................................................... 13
Variables: ....................................................................................................................................... 13
Comic Fury Layout Guide (Version 1.0)
~ 4 ~
Layout Sections: ............................................................................................................................. 13
Conditions: ..................................................................................................................................... 14
Loops: ............................................................................................................................................ 14
Comic Strip Display Layout ................................................................................................................ 15
Variables: ....................................................................................................................................... 15
Conditions: ..................................................................................................................................... 16
Loops: ............................................................................................................................................ 16
Comic Archive Layout ........................................................................................................................ 19
Variables: ....................................................................................................................................... 19
Conditions: ..................................................................................................................................... 19
Loops: ............................................................................................................................................ 19
Author Blog Layout ............................................................................................................................ 20
Variables: ....................................................................................................................................... 20
Conditions: ..................................................................................................................................... 20
Loops: ............................................................................................................................................ 20
Author Blog Archive Layout ............................................................................................................... 21
Variables: ....................................................................................................................................... 21
Conditions: ..................................................................................................................................... 21
Loops: ............................................................................................................................................ 21
Comic Search Layout ......................................................................................................................... 23
Variables: ....................................................................................................................................... 23
Conditions: ..................................................................................................................................... 23
Loops: ............................................................................................................................................ 23
Error Pages Layout ............................................................................................................................. 24
Variables: ....................................................................................................................................... 24
How It All Fits Together ......................................................................................................................... 25
Overall Layout ........................................................................................................................................ 26
Overview ............................................................................................................................................ 26
Code Example .................................................................................................................................... 26
Layout CSS ............................................................................................................................................. 27
Overview ............................................................................................................................................ 27
Code Example .................................................................................................................................... 27
Author Blog Layout ................................................................................................................................ 28
Overview ............................................................................................................................................ 28
Code Example .................................................................................................................................... 28
Comic Fury Layout Guide (Version 1.0)
~ 5 ~
Author Blog Archive Layout................................................................................................................... 29
Overview ........................................................................................................................................... 29
Code Example .................................................................................................................................... 29
Error Pages Layout ................................................................................................................................ 30
Overview ........................................................................................................................................... 30
Code Example .................................................................................................................................... 30
Comic Strip Display Layout .................................................................................................................... 31
Overview ........................................................................................................................................... 31
Code Example .................................................................................................................................... 31
Comic Archive Layout ............................................................................................................................ 33
Overview ........................................................................................................................................... 33
Code Example .................................................................................................................................... 33
Comic Search Layout ............................................................................................................................. 34
Overview ........................................................................................................................................... 34
Code Example .................................................................................................................................... 34
Layout Design Tips and Tricks ............................................................................................................... 35
Introduction ...................................................................................................................................... 35
HTML ..................................................................................................................................................... 36
Simple Inline Comments ................................................................................................................... 36
The Code........................................................................................................................................ 36
The Explanation ............................................................................................................................. 36
Favicons and Touch Icons .................................................................................................................. 37
The Explanation ............................................................................................................................. 37
CSS ......................................................................................................................................................... 38
Visual Ratings .................................................................................................................................... 38
The Code........................................................................................................................................ 38
Javascript ................................................................................................... Error! Bookmark not defined.
jQuery ................................................................................................................................................ 41
Using jQuery .................................................................................................................................. 41
Embedded YouTube Video ................................................................................................................ 41
The Code........................................................................................................................................ 42
The explanation ............................................................................................................................. 42
Advanced Inline Comments .............................................................................................................. 43
The Code........................................................................................................................................ 43
The explanation: ............................................................................................................................ 43
Comic Fury Layout Guide (Version 1.0)
~ 6 ~
Elements Explained
Syntax
A layout on Comic Fury is mostly HTML and CSS. What makes it different is the use of
special elements. These are used to tell Comic Fury how to change the HTML you have
written. The uses of the elements range from inserting dynamic content (such as comments or
the newest comic), to providing short-cuts to commonly used links (such as the rating or
subscribe pages).
A Comic Fury element looks like this:
As you can see, there are four parts to an element, and the whole thing is wrapped in an
HTML comment. Not every element uses every part. Modifiers are especially rare. The
important thing to note, though, is that every element has a parameter. Every Element.
Breakdown
Let’s take a closer look at the three parts:
Types
There are 5 different types of elements in Comic fury; Variables, cond, loop, comment and
layout. An element's type determines it's behaviour. Some are replaced directly, some have
Comic Fury treat a section of the page differently, and some are just deleted (yes, there's
actually a use for that).
Comic Fury Layout Guide (Version 1.0)
~ 7 ~
A type name is always followed by a colon, then the modifier and parameter in square
brackets. Of course, not every element has a type. If you don't specify a type, then the element
is considered a Variable. There is no explicit way to set an element's type to Variable. If you
do not specify a type, then you should also not include the colon, or the HTML comment tags.
It's best to just consider those to be part of the type.
Prefix
Prefixes are used to change the way an element is treated. There are 3 prefixes, end_, file_
and l. Unlike the other parts of an element, there can be two prefixes in use at the same time.
This is always a combination of end_ and one of the other prefixes and end_ must come first.
Parameters
Parameters are probably the most important parts of elements. As I said above, the only part
every element uses is the parameter. Simple variables are really just a parameter in square
brackets. There are also a lot of parameters. Loads of them. An infinite amount if you take
into account the fact that some parameters are user defined.
Okay, so I think I've made it clear that parameters are important, but what exactly are they? If
the type tells Comic Fury what action to take, then the parameter tells it how to take that
action. If the type tells Comic Fury to replace the element, then the parameter tells it what to
replace the element with. What exactly it means depends on the type.
Modifiers
Modifiers are a lot like prefixes. They change the meaning of the parameter they precede. A
prefix is a single character followed by a colon. There are only 3 possible prefixes, n:, l: and
f:. Where you can use them is fairly limited.
Comic Fury Layout Guide (Version 1.0)
~ 8 ~
Variables
Description
Variables are a very important part of the Comic Fury layout system. They are what allows
Comic Fury to insert dynamic content into your pages. Variable elements are written without
a type and without the surrounding HTML comment. This makes them very fast to use and
also makes them visible when not being viewed as part of your layout. Being able to see them
is very useful if you're editing you layout files on your computer or using the WYSIWYG
editor to design an extra page.
To use a variable, just type [param], where param is the variable's parameter. When the page
is displayed, Comic Fury will replace the variable with the appropriate content.
Example
<a href="[nextcomic]"> will become <a href="http://simple.thecomicseries.com/comics/1">
Prefixes
There are no prefixes for the Variable type.
Modifiers
The Variable type has the most modifiers of any type of element. The modifiers you can use
are:
l:
The l: (lowercase "L") modifier is used on variables inside of loops to make the Variable
element use the loop's value for a parameter instead of the section's value.
f:
The f: modifier is used to get the URL of a layout file. When using this modifier, the
parameter should be the file identifier you created when uploading the layout file. Note: A
Variable using the f: modifier is replaced by the URL to the layout file, not the layout
file itself. If you uploaded "bob.png" as a layout file with the identifier "bob" and wanted
to put the image on a page, then you need to wrap it in an image tag, like this: <img src="[f:bob]" />
Variables using the f: modifier can be used on the Layout CSS.
Comic Fury Layout Guide (Version 1.0)
~ 9 ~
Conditions
Description
The cond: element type is used to make a section of the page show up only in certain
circumstances. To those familiar with programming, it's like an IF statement.
The parameter on a cond: element tells Comic Fury which condition it should be checking
against. A non-end_-prefixed cond: marks the start of the section of page that displays when
the condition is met. You must mark the end of a conditional section using a cond: with the
end_ prefix and the same parameter and prefixes.
Example
<!--cond:[banner]-->
The comic has a banner available!
<!--end_cond:[banner]-->
Prefixes
The cond: type has three prefixes available.
end_
The end_ prefix is very important. As stated above, a cond: without end_ marks the
start of a section, and a cond: with end_ marks the end. If the starting cond: has a
prefix, it must go after the end_ prefix.
file_
The file_ prefix is used to check for the existence of a layout file. When this prefix is
used, the parameter should be the file identifier of a layout file you uploaded.
l
Loops have their own selection of cond: parameters separate from global parameters
and the parameters for the current section. To tell Comic Fury too look for the
parameter in the loops selection of parameters, use the l (lowercase "L") prefix.
Modifiers
There is only one modifier available for the cond: element type. This modifier is n:. It has
the effect of making the parameter mean the opposite of what it normally would. If used with
the file_ prefix, then it will check if the layout file does not exist.
Comic Fury Layout Guide (Version 1.0)
~ 10 ~
Loops
Description
The loop: element type is used to make a section of the page display multiple times. With the
use var Variables with the l: modifier, what shows up each time will be different. loop:
elements are used for things like displaying comments, search results, all the comics in an
archive...etc. Anywhere where you page shows the same HTML over and over again with
different text or images, you'll be using a loop.
The parameter on a loop: element tells Comic Fury which loop should be run.
Example
<!--loop:[comments]-->
[l:authorname] said [l:comment]
<!--end_loop:[comments]-->
Prefixes
The only prefix available for the loop: element type is the end_ prefix. As stated above, a
loop: without end_ marks the start of a section, and a loop: with end_ marks the end.
Modifiers
There are no modifiers available for the loop: element type.
Comic Fury Layout Guide (Version 1.0)
~ 11 ~
Comments
Description
The comment: element type is probably the easiest element to use. It is also one you will
probably never use. The entire comment element, along with its parameter is deleted when
Comic Fury displays your page. The parameter can be anything at all. Anything. Usually it is
advice to people who are editing your layout files.
So you might be wondering, "What's the difference between the comment: element type and
an HTML comment? HTML comments get passed on to the viewer's web browser, and then
the web browser hides them. Comic Fury comment:s are never sent to the browser in the first
place. The only place they show up is in Comic Fury's layout editor.
Prefixes
There are no prefixes for the comment: Element type.
Modifiers
There are no modifiers for the comment: element type.
Comic Fury Layout Guide (Version 1.0)
~ 12 ~
Element List
This is a list of elements available for use in your Comic Fury Layouts. This list was put
together by switching through the various default layouts and trying to find all the elements
they use. As a result of this, there are probably elements missing from this list. Partially
because they can be easy to overlook, and partially because some of the elements were not
actually found in use anywhere, but it made sense that they should exist, and they worked
when I tried them. There are likely more elements that aren't used in any of the default
layouts, so they are not likely to be in this list.
Since I only know what pages I found the elements on, and not which pages they actually
work on, it's hard to tell which elements are global, and which are restricted to a single page.
I've made some educated guesses though, and elements that I've found to be global, or think
should be global are marked with an asterix (*). Don't rely on the asterix though. If you really
want to use an element on a page other than the one it's listed on here, try it and see if it
works.
In the event that Comic Fury posts its own descriptions of the Elements, this list will probably
be updated to match, or replaced with a link to the official version.
Comic Fury Layout Guide (Version 1.0)
~ 13 ~
Overall Layout
Variables:
[webcomicname]
Gets replaced with the name of the comic (eg. "Simplesville")
[webcomicdescription]
Get's replaced with the long description of you comic
[webcomicslogan]
Gets replaced with your comics slogan
[pagetitle]*
Gets replaced with the title of the current page
[banner]*
Gets replaced with the URL to your comic's banner
[addsubscriptionlink]
Gets replaced with the URL to Comic Fury's subscrition page for your comic.
[copyrights]
Gets replaced with the comic's copyright information.
[comicprofile]
Gets replaced with the URL to your comic's profile page on Comic Fury
[comicsnum]
Gets replaced with the total number of comics
[subscriptionsnum]
Gets replaced with the total number of subscribers
[webcomicrating]
Gets replaced with the average overall rating of your comic
[pageviewsnum]
Gets replaced with the number of times a page from your site has been loaded
[visitsnum]
Gets replaced with the number of people who have visited your site
Layout Sections:
<!--layout:[css]-->
Gets replaced with the Layout CSS
Comic Fury Layout Guide (Version 1.0)
~ 14 ~
<!--layout:[content]-->
Gets replaced with the layout section or extra page approriate for the current URL. eg. When
looking at "http://simple.thecomicseries.com/comics" <!--layout:[content]--> will be
replaced with the Comic Strip Display layout section.
Conditions:
<!--cond:[searchon]-->
Marks a section of HTML that only shows when search is turned on
<!--cond:[hidefromhost]-->
Marks a section of HTML that only shows when the comic is set to not associate itself with
Comic Fury
<!--cond:[banner]-->
Marks a section of HTML that only shows when the comic has a banner uploaded
<!--cond:[isextrapage]-->
Marks a section of HTML that only shows when the viewer is looking at one of your comic's
extra pages
<!--cond:[issearch]-->
Marks a section of HTML that only shows when the viewer is looking at the search page.
Loops:
<!--loop:[extrapages]-->
Marks a section of HTML that is repeated for every extra page with with a page order greater
than 0.
[l:link]
Gets replaced with the URL of the current extra page
[l:title]
Gets replaced with the title of the current extra page
Comic Fury Layout Guide (Version 1.0)
~ 15 ~
Comic Strip Display Layout
Variables:
[comicimage]
Gets replaced with an <img /> tag that displays your comic and has it's "alt" and "title"
attribrutes set to the comic's description
[comicnumber]
Gets replaced with the number of the displayed comic
[comictitle]
Gets replaced with the title of the displayed comic
[posttime]
Gets replaced with the time the displayed comic was posted
[chaptername]
Gets replaced with the chapter the displayed comic is in
[chapterlink]
Gets replaced with the URL of the displayed comic's chapter
[rating]
Gets replaced with the displayed comic's rating (a whole number between 0 and 5)
[ratingpercentage]
Gets replaced with the displayed comic's rating as a percentage rounded to the neares whole
number
[ratingpercentage_c]
Gets replaced with the displayed comic's rating as a percentage rounded to 2 decimal places
[votecount]
Gets replaced with the number of votes the displayed comic's rating is based on
[ratelink]
Gets replaced with the URL of a page where the viewer can rate the displayed comic
[prevcomic]
Gets replaced with the URL of the previous comic
[nextcomic]
Gets replaced with the URL to the next comic
[commentlink]
Gets replaced with the URL of a page where the viewer can leave a comment on the diplayed
comic
Comic Fury Layout Guide (Version 1.0)
~ 16 ~
[permalink]
Gets replaced with a permanent link to the displayed comic
[comicimageurl]
Gets replaced with the URL of the displayed comic's image
[transcript]
Gets replaced with the displayed comic's transcript
Conditions:
<!--cond:[usechapters]-->
Marks a section of HTML that only shows if you comic has chapters enabled
<!--cond:[haschapter]-->
Marks a section of HTML that only shows if the displayed comic is in a chapeter
<!--cond:[allowratings]-->
Marks a section of HTML that only shows if you have ratings enabled
<!--cond:[allowcomments]-->
Marks a section of HTML that only shows if leaving comments is allowed
<!--cond:[allowguestcomments]-->
Marks a section of HTML that only shows when viewers who aren't Comic Fury members are
allowed to leave comments
<!--cond:[authornotes]-->
Marks a section of HTML that only shows when there are author notes (author comments)
left on the displayed comic
<!--cond:[showpermalinks]-->
Marks a section of HTML that only shows when you enable permalinks
<!--cond:[showcomments]-->
Marks a section of HTML that only shows if you've enabled comments being show
<!--cond:[comments]-->
Marks a section of HTML that only shows if comments have been left on the displayed comic
[!--cond:[isfirstcomic]--]
Marks a section of HTML that only shows if the current comic is the first comic
[!--cond:[islastcomic]--]
Marks a section of HTML that only shows if the current comic is the last comic
Loops:
<!--loop:[archive]-->*
Comic Fury Layout Guide (Version 1.0)
~ 17 ~
Marks a section of HTML that repeats for every comic in the archive, ignoring chapters
[l:comicurl]
Gets replaced by the URL to the current comic
[l:comictitle]
Gets replaced by the title of the current comic
[l:rating]
Gets replaced by the rating of the current comic, as a number between 1 and 5
[l:rating]
Gets replaced by the rating of the current comic, as a percentage
<!--lcond:[currentcomic]-->
Marks a section of HTML that only shows when the current comic is the displayed comic
<!--loop:[authornotes]-->
Marks a section of HTML that repeats for each author note left on the displayed comic
[l:profilelink]
Gets replaced by the URL to the note's author's Comic Fury profile
[l:authorname]
Gets replaced by the username of the note's author
[l:posttime]
Gets replaced by the time the note was posted at
[l:editlink]
Gets replaced by the URL of a page where the note's author can edit the note
[l:deletelink]
Gets replaced by the URL of a page where the note's author can delete the note
[l:avatar]
Gets replaced by the URL of the note's author's avatar
[l:commenttitle]
Gets replaced by the title of the note
[l:comment]
Gets replaced by the contents of the note
<!--lcond:[avatar]-->
Marks a section of HTML that only shows when the note's author has an avatar
<!--loop:[comments]-->
Marks a section of HTML that repeats for each comment left on the displayed comic
Comic Fury Layout Guide (Version 1.0)
~ 18 ~
[l:profilelink]
Gets replaced by the URL to the comment author's Comic Fury profile
[l:authorname]
Gets replaced by the username of the comment author
[l:posttime]
Gets replaced by the time the comment was posted at
[l:editlink]
Gets replaced by the URL of a page where the comment author can edit the comment
[l:deletelink]
Gets replaced by the URL of a page where the comment author can delete the comment
[l:avatar]
Gets replaced by the URL of the comment author's avatar
[l:commenttitle]
Gets replaced by the title of the comment
[l:comment]
Gets replaced by the contents of the comment
<!--lcond:[avatar]-->
Marks a section of HTML that only shows when the comment author has an avatar
Comic Fury Layout Guide (Version 1.0)
~ 19 ~
Comic Archive Layout
Variables:
[chaptername]
Gets replaced by the name of the displayed chapter
[chapterdescription]
Gets replaced by the description of the displayed chapter
Conditions:
<!--cond:[ischapterarchive]-->
Marks a section of HTML that only shows if the archive is displaying a single chapter instead
of all your comics
Loops:
<!--loop:[chapteredarchive]-->
Marks a section of HTML that is repeated for every comic in the archive, sorted by chapter. If
chapters are disabled for your comic then it will behave the same as <!--loop:[archive]-->
[l:chapterdescription]
Gets replaced with the description of the current comic's chapter
[l:number]
Gets replaced with the current comics number, base on what order the comics are after
being sorted by chapter. This is not the same number as [number] on the Comic Strip Display
page
[l:comicurl]
Gets replaced with a permanent link to the current comic
[l:comictitle]
Gets replaced with the title of the current comic
[l:posttime]
Gets replaced with the time the current comic was posted
<!--lcond:[chapterdescription]-->
Marks a section of HTML that shows only if the current comic's chapter has a description
<!--lcond:[newchapter]-->
Marks a section of HTML that shows only if the current comic's chapter is different then the
chapter of the previous comic
Comic Fury Layout Guide (Version 1.0)
~ 20 ~
Author Blog Layout
Variables:
[latestcomictitle]
Gets replaced with the title of the newest comic
[latestcomicimage]
Gets replaced with an <img /> tag that displays the latest comic and has it's "alt" and "title"
attribrutes set to the comic's description
Conditions:
<!--cond:[hascomics]-->
Marks a section of HTML that only shows if you have uploaded comics
<!--cond:[blogentries]-->
Marks a section of HTML that only shows if your comic has blog entries posted
Loops:
<!--loop:[latestblogs]-->
Marks a section of HTML that repeats for each of the most recent blog entries
[l:blogtitle]
Gets replaced with the title of the current blog entry
[l:authorname]
Gets replaced with the username of the current blog entry's author
[l:avatar]
Gets replaced with the URL of th current blog entry's author's avatar
[l:blog]
Gets replaced with the contents of the current blog entry
[l:posttime]
Gets replaced with the time that the current blog entry was posted
<!--lcond:[avatar]-->
Marks a section of HTML that only shows when the blog entry's author has an avatar
Comic Fury Layout Guide (Version 1.0)
~ 21 ~
Author Blog Archive Layout
Variables:
Conditions:
<!--cond:[blogsexist]-->
Marks a section of HTML that only shows if your comic has blog entries posted
Loops:
<!--loop:[blogarchive]-->
Marks a section of HTML that repeats for each blog in the blog archive
[l:bloglink]
Gets replaced with the URL to the current blog entry
[l:blogtitle]
Gets replaced with the title of the current blog entry
[l:authorname]
Gets replaced with the username of the current blog entry's author
[l:avatar]
Gets replaced with the URL of th current blog entry's author's avatar
[l:posttime]
Gets replaced with the time that the current blog entry was posted
<!--lcond:[avatar]-->
Marks a section of HTML that only shows when the blog entry's author has an avatar
<!--loop:[blogs]-->
Marks a section of HTML that repeats for each blog entry who's contents will be shown on
the page
[l:bloglink]
Gets replaced with the URL to the current blog entry
[l:blogtitle]
Gets replaced with the title of the current blog entry
[l:authorname]
Gets replaced with the username of the current blog entry's author
[l:avatar]
Gets replaced with the URL of th current blog entry's author's avatar
Comic Fury Layout Guide (Version 1.0)
~ 22 ~
[l:blog]
Gets replaced with the contents of the current blog entry
[l:posttime]
Gets replaced with the time that the current blog entry was posted
<!--lcond:[avatar]-->
Marks a section of HTML that only shows when the blog entry's author has an avatar
Comic Fury Layout Guide (Version 1.0)
~ 23 ~
Comic Search Layout
Variables:
[searchterm]
Gets replaced with the word(s) that the viewer searched for
Conditions:
<!--cond:[searched]-->
Marks a section of HTML that only shows if the viewer got to the page using a search form
<!--cond:[foundresults]-->
Marks a section of HTML that only shows if the search found results
Loops:
<!--loop:[searchresults]-->
Marks a section of HTML that repeats for each search result
[l:number]
Gets replaced with the current search result's number
[l:comicurl]
Gets replaced with the URL of the comic in the current search result
[l:comictitle]
Gets replaced with the title of the comic in the current search result
[l:posttime]
Gets replaced with the time the comic in the current search result was posted
[l:transcript]
Gets replaced with the transcript of the comic in the current search result
Comic Fury Layout Guide (Version 1.0)
~ 24 ~
Error Pages Layout
Variables:
[errortitle]
Gets replaced with the name of the error the page is being shown for
[errormessage]
Gets replaced with extra information about the error the page is being shown for
Comic Fury Layout Guide (Version 1.0)
~ 25 ~
Layout Sections
How It All Fits Together
So, when you start editing you layout, you may start to notice that there are a lot of sections
that make up a Comic Fury layout. It does it a little something like this:
Every page starts with the Overall Layout section. It is the base of every page. The Layout
CSS is then inserted into the page at the point where <!--layout:[css]--> is.
After that, it finds the element <!--layout:[content]-->. It replaces this element with one
of the other layout sections. Which section it uses depends on which page of the site the
viewer is looking at. In the diagram above, the viewer would be at
"http://simple.thecomicseries.com/comics/". The section it uses could also be an Extra Page.
At some point during the whole assembly process, Comic Fury looks through the sections it's
using for Comic Fury elements, and takes the appropriate actions so that by the time the page
is assembled it's all pure HTML and CSS ready to be sent to a web browser.
Comic Fury Layout Guide (Version 1.0)
~ 26 ~
Overall Layout
Overview
The Overall Layout is probably the most important section of the Comic Fury layout system.
If your comic were a television show, then the Overall Layout is the television. What goes
into the Overall Layout will be shown on every page of your comic. You must make sure you
have everything that a web page needs in order to work. You need the DTD, the <html>,
<head> and <body> tags, and the appropriate <!--layout:[x]--> elements. It's also a really
good idea to set up the site's navigation in this section, otherwise you will have to create it on
every page.
Code Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
/>
<title>[webcomicname] - [pagetitle]</title>
<style type="text/css" rel="stylesheet">
<!--layout:[css]-->
</style>
</head>
<body>
<div id="header">
<!--cond:[banner]-->
<img src="[banner]" alt="[webcomicname]" />
<!--end_cond:[banner]-->
<!--cond:[n:banner]-->
<h1>[webcomicname]</h1>
<!--end_cond:[n:banner]-->
<ul id="navigation">
<li><a href="/comics/">Comics</a></li>
<li><a href="/comics/first">First</a></li>
<li><a href="/comics/random">Random</a></li>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/blog/">Blog</a></li>
<!--cond:[n:hidefromhost]-->
<li><a href="[addsubscriptionlink]">Subscribe</a></li>
<!--end_cond:[n:hidefromhost]-->
<!--cond:[searchon]-->
<li><a href="/search/">Search</a></li>
<!--end_cond:[searchon]-->
<!--loop:[extrapages]-->
<li><a href="[l:link]">[l:title]</a></li>
<!--end_loop:[extrapages]-->
</ul>
</div>
<div id="content">
<!--layout:[content]-->
Comic Fury Layout Guide (Version 1.0)
~ 27 ~
Layout CSS
Overview
The Layout CSS defines the look and feel of you entire site. It's what controls the fonts, the
sizes, the borders, the colours, the backgrounds, everything that has to do with the pages
appearance. The Layout CSS is written exactly as if it were a stylesheet. For more information
on CSS, stylesheets, and what's possible, check out W3School's CSS Tutorial.
Code Example
body{
text-align:center;
}
img{
border:0px;
}
#navigation li{
display:inline;
}
.blog{
text-align:left;
border:1px solid;
}
.comment{
text-align:left;
border:1px solid;
}
.avatar{
float:left;
Comic Fury Layout Guide (Version 1.0)
~ 28 ~
Author Blog Layout
Overview
By default, the Author Blog Layout is your comic's homepage. It's usually used to show the
newest comic and a few of the newest blog entries.
Code Example
<!--cond:[hascomics]-->
<h2>[latestcomictitle]</h2>
<div id="comic">
<a href="/comics/">[latestcomicimage]</a>
</div>
<!--end_cond:[hascomics]-->
<!--cond:[blogentries]-->
<!--loop:[latestblogs]-->
<div class="blog">
<h4>[l:blogtitle]</h4>
<h6>by [l:authorname] at [l:posttime]</h6>
<div>
[l:blog]
</div>
</div>
<!--end_loop:[latestblogs]-->
<!--end_cond:[blogentries]-->
<!--cond:[n:hascomics]--><!--cond:[n:bhasblogs]-->
Error: This webcomic is empty right now. Why don't you check back
later.
<!--end_cond:[n:hasblogs]--><!--end_cond:[n:hascomics]-->
Comic Fury Layout Guide (Version 1.0)
~ 29 ~
Author Blog Archive Layout
Overview
The Author Blog Archive Layout is used to display a list of all your blog entries, along with
the selected entry.
Code Example
<!--cond:[blogsexist]-->
<h2>Blogs:</h2>
<ul id="archive">
<!--loop:[blogarchive]-->
<li><a href="[l:bloglink]">[l:blogtitle]</a> by [l:authorname]
([l:postime])</li>
<!--end_loop:[blogarchive]-->
</ul>
<!--loop:[blogs]-->
<div class="blog">
<h4>[l:blogtitle]</h4>
<h6>by [l:authorname] at [l:posttime]</h6>
<div>
[l:blog]
</div>
</div>
<!--end_loop:[blogs]-->
<!--end_cond:[blogsexist]-->
<!--cond:[n:blogsexist]-->
Error: no blogs.
<!--end_cond:[n:blogsexist]-->
Comic Fury Layout Guide (Version 1.0)
~ 30 ~
Error Pages Layout
Overview
The Error Pages Layout is used to display errors. There's really not much to it at all.
Code Example
<h2>Error: [errortitle]</h2>
<h4>[errormessage]</h4>
Comic Fury Layout Guide (Version 1.0)
~ 31 ~
Comic Strip Display Layout
Overview
The Comic Strip Display layout is very important. It's the page where comics and their
comments are actually shown. All the forward and back links go on this page, along with
permalinks, comments, ratings, etc.
Code Example
<h2>[comicnumber]. [comictitle]</h2>
<h4>
Posted [posttime]
<!--cond:[usechapters]--><!--cond:[haschapter]-->
in <a href="[chapterlink]">[chaptername]</a>
<!--end_cond:[haschapter]--><!--end_cond:[usechapters]-->
</h4>
<div id="comic">
[comicimage]
</div>
<span id="comicnav">
<a href="/comics/first/">First</a> |
<a href="[prevcomic]">Previous</a>|
<!--cond:[allowratings]-->
Average rating: [rating], based on [votecount] votes.
<a href="[ratelink]">Rate</a> |
<!--end_cond:[allowratings]-->
<a href="[nextcomic]">Next</a>|
<a href="/comics/">Latest</a>
</span>
<!--cond:[showpermalinks]-->
<div id="permalinks">
<h3>Copy this comic strip into LiveJournal, your blog or Myspace
with this code:</h3>
<pre>
<a href="[permalink]">
<img src="[comicimageulr]" alt="[webcomicname] - [comictitle]" />
</a>
<a href="[permalink]">[webcomicname] - [comictitle]<a>
</pre>
<h3>Or into forums with this code:</h3>
<pre>
[URL=[permalink]]
[IMG][comicimageurl][/IMG]
[/URL]
[URL=[permalink]][webcomicname] - [comictitle][/URL]
</pre>
</div>
<!--end_cond:[showpermalinks]-->
<!--cond:[authornotes]-->
Comic Fury Layout Guide (Version 1.0)
~ 32 ~
<h3>Author's Notes:</h3>
<!--loop:[authornotes]-->
<div class="comment">
<!--lcond:[avatar]-->
<img class="avatar" src="[l:avatar]" alt="[l:authorname]" />
<!--end_lcond:[avatar]-->
<h4><a href="[l:profilelink]">[l:authorname]</a></h4>
<a href="[l:editlink]">edit</a>
<a href="[l:deletelink]">delete</a>
<h6>Posted on: [l:posttime]</h6>
<div>
[l:comment]
</div>
</div>
<!--end_loop:[authornotes]-->
<!--end_cond:[authornotes]-->
<!--cond:[showcomments]-->
<!--cond:[comments]-->
<h3>Comments:</h3>
<!--loop:[comments]-->
<div class="comment">
<!--lcond:[avatar]-->
<img class="avatar" src="[l:avatar]"
alt="[l:authorname]" />
<!--end_lcond:[avatar]-->
<h4><a href="[l:profilelink]">[l:authorname]</a></h4>
<a href="[l:editlink]">edit</a>
<a href="[l:deletelink]">delete</a>
<h6>Posted on: [l:posttime]</h6>
<div>
[l:comment]
</div>
</div>
<!--end_loop:[comments]-->
<!--end_cond:[comments]-->
<!--end_cond:[showcomments]-->
<!--cond:[allowcomments]-->
<h3><a href="[commentlink]">Leave a Comment</a></h3>
<!--cond:[n:allowguestcomments]-->
<h6>
(You need to be registered at
<a href="http://comicfury.com/">Comic Fury</a>
to comment.)
</h6>
<!--end_cond:[n:allowguestcomments]-->
<!--end_cond:[allowcomments]-->
Comic Fury Layout Guide (Version 1.0)
~ 33 ~
Comic Archive Layout
Overview
The Comic Archive Layout displays all you comics, sorted by chapter, if you have that turned
on. It also might only have to display the comics for a single chapter.
Code Example
<h2>
Archive
<!--cond:[ischapterarchive]-->
- [chaptername]
<!--end_cond:[ischapterarchive]-->
</h2>
<!--cond:[ischapterarchive]-->
<h4>[chapterdescription]</h4>
<!--end_cond:[ischapterarchive]-->
<ul id="archive">
<!--loop:[chapteredarchive]-->
<!--lcond:[newchapter]-->
<li class="name">[l:chaptername]</li>
<!--lcond:[chapterdescription]-->
<li class="description">[l:chapterdescription]</li>
<!--end_lcond:[chapterdescription]-->
<!--end_lcond:[newchapter]-->
<li>[l:number]. <a href="[l:comicurl]">[l:comictitle]</a>
([l:posttime])</li>
<!--end_loop:[chapteredarchive]-->
</ul>
Comic Fury Layout Guide (Version 1.0)
~ 34 ~
Comic Search Layout
Overview
The Comic Search Layout shows the search form. It will either be by itself, with a list of
results, or with an error saying it couldn't find any results. The search form can be put on any
page.
Code Example
h2>Search</h2>
<form method="post" action="/search/">
<fieldset>
<input type="text" name="search" value="[searchterm]" />
<input type="submit" value="Search!" class="submit" />
</fieldset>
</form>
<!--cond:[searched]-->
<!--cond:[n:foundresults]-->
<h4>Error: no results</h4>
<!--end_cond:[n:foundresults]-->
<!--cond:[foundresults]-->
<ul id="searchResults">
<!--loop:[searchresults]-->
<li><a href="[l:comicurl]">[l:comictitle]</a>([l:posttime])</li>
<!--end_loop:[searchresults]-->
</ul>
<!--end_cond:[foundresults]-->
<!--end_cond:[searched]-->
Comic Fury Layout Guide (Version 1.0)
~ 35 ~
Extras
Layout Design Tips and Tricks
Introduction
If you've read the Layout Design Guide then you may have noticed that the layouts you're left
with are very minimal, and that's the point. This page exists to show you some more advanced
things that can be done, without complicating the beginner's guide. By no means am I an
expert, and I'm sure some of my code will be less-than-optimized. If anyone has any
corrections, or requests, or a tip they want to share, then let me know on this forum thread. I'll
be sure to give you credit if you do.
This guide is split into sections based on what web standard is doing most of the work.
Anything that involves any JavaScript will end up in the JavaScript section, anything that
relies on CSS will be in the CSS section, and anything that works with JavaScript and CSS
turned off will go in the HTML section. Have fun!
Comic Fury Layout Guide (Version 1.0)
~ 36 ~
HTML
Simple Inline Comments
Currently, viewers commenting on your page are either sent to another page and then back
again, or if you didn't remove it, and the viewer has JavaScript, they get it in a window. This
tip will put the comment page in an iframe, so the only thing a viewer needs to click to
comment is the submit button. This has the same issue as the window, in that if they click the
"back to [your comic]" link, your entire page will load within the iframe. If you want to make
the whole page reload when they hit submit, check out the advanced version.
The Code
If you just want to get started fast, copy-paste this into to your layout where you would
normally put the comment link.
<iframe src="[commentlink]" id="commentFrame" style="width: 80%; height:
450px;">
<a href="[commentlink]">Leave a Comment</a>
</iframe>
The Explanation
<iframe src="[commentlink]" style="width: 80%; height: 450px;">...</iframe>
This code creates an iframe which contains Comic Fury's comment page. I would strongly
recommend using the Layout CSS to give the frame dimensions of at least 430x450, and then
removing style="[width: etc.]" from the tag. I just put it there so that people copy-
pasting the code without learning about it don't get a tiny frame with scroll bars.
<a href="[commentlink]">Leave a Comment</a>
This is what shows up if the viewer's browser does not support iframes. The example has a
simple link to the comment page. If you wanted you could use the onclick javascript from
the default layouts (see the layout guide, under useful links for the Comic Layout) so that if
they don't have frames but do have JavaScript they'll get it in a window.
Comic Fury Layout Guide (Version 1.0)
~ 37 ~
Favicons and Touch Icons
For those of you who don't know, favicons are the little icons that show up in your address bar
to identify a website. They're actually really easy to set up. Touch icons are for the iPod
Touch and iPhone. They show up when a page is saved to the iPod/iPhone's main page.
Special thanks to Stealth for tipping me off about the touch icons.
The Code
If you just want to get started fast, copy-paste this into to your layout before the closing
</head> tag.
<link rel="shortcut icon" href="[f:favicon]" />
<link rel="apple-touch-icon" href="[f:touchicon]" />
The Explanation
<link rel="shortcut icon" href="[f:favicon]" />
This sets up the favicon. Upload a layout file and name it "favicon" for this to work.
<link rel="apple-touch-icon" href="[f:touchicon]" />
This sets up the Touch Icon. Upload a layout file and name it "touchicon" for this to work. It
has to be 57x57 pixels.
Comic Fury Layout Guide (Version 1.0)
~ 38 ~
CSS
Visual Ratings
Lots of websites with a rating system like to give you a visual indication of what something is
rated. Instead of seeing a number, you'll see a row of 5 stars, with some lit up. These sites
usually let you click those stars to give a rating right then and there.
This tip allows you to add this feature to your comic. Best of all, you don't need any
JavaScript for it to work.
What do you need?
This tip uses a single layout for the stars using a technique called a CSS sprite. We use a
background image that is larger than the box it's acting as the background of, so we only see
one part of the image. We select which part of the image to use by using the background-
position CSS property, or in this case the background property, which can set almost
everything in one line.
The image we're going to use for this tip contains the 3 different kinds of stars all stacked on
top of each other. The top image is of the unlit start, in the middle is the normal lit star that
shows the current rating, and at the bottom is the star that shows up when the viewer hover's
his mouse over the rating to assign one. All 3 should be the same size, and any padding you
want around the stars should be included here. Here's the image I used:
The stars, including their padding, are all 32px by 32px, so the whole image is 32px by 98px.
Now that you have the image uploaded, you've got everything you need. Move on to the code!
The Code
If you just want to get started fast, copy-paste the CSS into the Layout CSS, and the HTML to
where ever you want the rating to appear. If you're using a layout file with different
dimensions than the one above, you'll have to adjust some of the numbers.
CSS .ratingBack{
margin:auto;
position:relative;
background: URL("[f:stars]") top left repeat-x;
display:block;
height:32px;
width:160px;
}
.ratingStars{
Comic Fury Layout Guide (Version 1.0)
~ 39 ~
position:absolute;
top:0px;
left:0px;
background: URL("[f:stars]") center left repeat-x;
display:block;
height:32px;
}
.ratingStars span{
display:none;
}
.ratingStars a{
display:block;
height:32px;
background: none;
position:absolute;
top:0px;
left:0px;
}
.ratingStars a:hover{background: URL("[f:stars]") bottom left repeat-x;}
.star1{width:32px;}
.star2{width:64px;}
.star3{width:96px;}
.star4{width:128px;}
.star5{width:160px;}
HTML <span class="ratingBack">
<span class="ratingStars" style="width:[ratingpercentage]%">
<span>Rate this comic:</span>
<a class="star5" href="[ratelink]&vote=5" title="give a rating
of 5"><span>5</span></a>
<a class="star4" href="[ratelink]&vote=4" title="give a rating
of 4"><span>4</span></a>
<a class="star3" href="[ratelink]&vote=3" title="give a rating
of 3"><span>3</span></a>
<a class="star2" href="[ratelink]&vote=2" title="give a rating
of 2"><span>2</span></a>
<a class="star1" href="[ratelink]&vote=1" title="give a rating
of 1"><span>1</span></a>
<span>Current Rating: [ratingpercentage_c]%</span>
</span>
</span>
The Explanation
.ratingBack{ ... }
This sets the CSS for the <span> that contains the whole rating. The CSS gives the <span> a
relative position so that the lit stars can be positioned within it, then assigns the image, then
makes it use the "block" display type so we can set the size, and then sets the size to be the
same as the image tiled horizontally 5 times.
.ratingStars{ ... }
This is the CSS for the <span> that holds all the links, and shows the rating. It gives it an
absolute position so we can position it at the top left corner of the link, and then positions it
Comic Fury Layout Guide (Version 1.0)
~ 40 ~
there. Then, like above, it assigns the image, the block display type, and the height. Note that
it does not set the width. The width is set in the HTML.
.ratingStars span{ ... }
This is the CSS hides all <span>'s within the main <span>. This allows us to have a text-
based rating system that shows up when CSS is disabled.
.ratingStars a{ ... }
This CSS is for the links that allow the user to rate the comic directly. The CSS gives it the
block display type, a height of 32px, then gives it no background, essentially making it
invisible. Then it positions it absolutely, and positions the top left corner of the link at the top
left corner of the ".ratingBack" <span>.
.ratingStars a:hover{background: ... }
This CSS changes the background on the links from nothing to the highlighted image, causing
the star beneath the link to light up when the mouse passes over it.
.star1{left:0px;}
This line of CSS, and the 4 others like it give each of the links their own width, which is the
width of 1 star, times the rating that link will assign.
<span class="ratingBack"> ... </span>
This creates the <span> that holds the whole rating display and shows the background of unlit
stars.
<span class="ratingStars" style="width:[ratingpercentage]%"> ... </span>
This creates the <span> that does all the work for the rating display. It gets most of its CSS by
having the "ratingStars" class, but it gets its width assigned by a style: attribute. The width
used is the rating as a percentage rounded to a whole number. The 2 decimal place version
isn't used here, because there's no need for that much accuracy.
<a class="star5" href="[ratelink]&vote=5" title="give a rating of
5"><span>1</span></a>
This line, and the four others just like it, create the links that allow the user to rate the comic.
Note the differences between all 4 of them. Putting the wrong numbers in the lines will cause
the links to give different ratings then what would be expected. The <span> in each gets
hidden, see below. They start with the highest rating and work their way down so that they
stack properly when the CSS causes them all to overlap.
<span>Rate this comic:</span> and <span>Current Rating: [ratingpercentage_c]%</span>
Comic Fury Layout Guide (Version 1.0)
~ 41 ~
These <span>s contain part of the text version of the rating for accessibilities sake. They get
hidden as they are <span>s that are children of something with the "ratingStars" class.
JavaScript
jQuery
jQuery is a JavaScript library that makes writing JavaScript a lot easier, faster, and more
cross-platform. For more information check out the jQuery Homepage.
The tips in this section have all been updated to use jQuery. This makes the code shorter,
simpler, and easier to just copy-paste without having to make many changes to the HTML. If
someone wants a basic JavaScript version of any of these tips, I might be able to give it to
you.
Using jQuery
Every comic on Comic Fury comes with a copy of jQuery, you just have to set it up. Copy
paste this code into the html for the Overall Layout, between the <head> and </head> tags.
The tips from below are copy-pasted where the comment indicates.
<script type="text/javascript" src="/files/static/jquery-
1.3.2.min.js"></script>
<script type="text/javascript"><!--
//Copy-paste tips and other jQuery code after this line
//--></script>
Embedded YouTube Video
I'm not going to lie, I'm actually pretty proud of this one. To see it in action, go here.
Basically, it adds a feature to your page that lets you have an embedded YouTube video that
replaces a comic when the viewer loads the page. This doesn't have a whole lot of uses, as
Comic Fury allows you to use an external flash file as a comic, so you could probably load a
YouTube video that way. But maybe the technique here will inspire you to create something
more useful.
Here's how it works. First, follow the instructions for setting up jQuery then paste the code
from below after the comment.
After that, make a video, upload it to YouTube and then make a picture for those people who
have javascript turned off. Upload the picture, and then in the description type vid: followed
by the YouTube video code (the jumble of characters after the "?v=" in the URL) eg.
vid:PtwFjTF9D0w That's it. It should all work now.
Comic Fury Layout Guide (Version 1.0)
~ 42 ~
The Code
If you just want to get started fast, follow the instructions for setting up jQuery then paste the
code from below after the comment.
$(function() {
comicImage = $("#comicimage");
titleText = comicImage.attr("title");
if (titleText.slice(0,4) == "vid:"){
titleText = titleText.slice(4);
YouTube = '<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/';
YouTube += titleText;
YouTube += '&hl=en&fs=1&rel=0"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed src="http://www.youtube.com/v/';
YouTube += titleText;
YouTube += '&hl=en&fs=1&rel=0" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>';
comicImage.before(YouTube).remove();
}
});
The explanation
$(function() { ... });
This marks the start of a jQuery function that is run when the page is ready to be manipulated
by javascript.
comicImage = $("#comicimage");
This line grabs the comic's <img /> tag using its id and stores it for later use.
titleText = comicImage.attr("title");
This stores the <img /> tag's title text, which contains the comic description.
if (titleText.slice(0,4) == "vid:"){ ... }
The code in this section will only be run if the first 4 characters of the comic description are
"vid:"
titleText = titleText.slice(4);
This just takes the "vid:" out of the description, leaving us with just the video's code.
YouTube = ..., YouTube += ... etc.
These lines assemble the HTML needed to embed the YouTube video, and store it in a
variable called YouTube. It does this by storing the first part of YouTube's embed code, up to
Comic Fury Layout Guide (Version 1.0)
~ 43 ~
the point where the video code is needed. Then it adds the vide code, then the rest of the
embed code until the video code is needed, then the video code, and then what's left of the
embed code.
comicImage.before(YouTube).remove();
This inserts the YouTube HTML before the comic image, and then deletes the comic image,
essentially replacing the image with the video.
Advanced Inline Comments
This tip uses some javascript to build on the Simpl Inline Comments tip, so you should follow
that first and then come here. This tip is a fairly simple javascript that counts how many times
the contents of the frame are loaded, and on the second time (when the viewer clicks submit)
it reloads the entire page.
The Code
If you just want to get started fast, follow the instructions for setting up jQuery then paste the
code from below after the comment.
$(function() {
var commentFrameLoads = 0;
$('#frame').load(function() {
if (commentFrameLoads==1){
top.location.assign(location);
}
commentFrameLoads++;
});
});
The explanation:
$(function() { ... });
This marks the start of a jQuery function that is run when the page is ready to be manipulated
by javascript.
var commentFrameLoads = 0;
This creates the global variable that we use to count how many times the contents of the
iframe are loaded. It starts at 0. We're going to add code so that when the inline comments
load, it changes to 1.
$('#commentFrame').load(function() { ... });
Creates a function that is called every time the iframe with the comment window finishes
loading the page it contains.
if (commentFrameLoads == 1){ ... }
Comic Fury Layout Guide (Version 1.0)
~ 44 ~
Everything between the following curly braces is done if the page in the iframe has already
been loaded once before. This is the case when the user clicks the submit button.
top.location.assign(location);
This tells the browser to navigate to the page it's currently on. This is basically refreshing the
page. Actually refreshing it causes problems though, so we're doing it in this round-about
way.
commentFrameLoads++;
This actually does the counting, adding 1 to the current value of commentFrameLoads. Note
that this is outside of the if block.