Comic Fury Layout Guide (Version 1.0)testingonly.thecomicseries.com/files/comicfury_guide.pdfComic...

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.

http://simple.thecomicseries.com/

http://w3schools.com/

http://comicfury.com/forum/viewthread.php?id=169


~ 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


~ 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


~ 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


~ 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).


~ 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.


~ 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.

~ 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



The comic has a banner available!



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.

~ 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



[l:authorname] said [l:comment]



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.


~ 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.


~ 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.

~ 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:



Gets replaced with the Layout CSS

~ 14 ~



Gets replaced with the layout section or extra page approriate for the current URL. eg. When

looking at "http://simple.thecomicseries.com/comics"  will be

replaced with the Comic Strip Display layout section.

Conditions:



Marks a section of HTML that only shows when search is turned on



Marks a section of HTML that only shows when the comic is set to not associate itself with

Comic Fury


Marks a section of HTML that only shows when the comic has a banner uploaded



Marks a section of HTML that only shows when the viewer is looking at one of your comic's

extra pages



Marks a section of HTML that only shows when the viewer is looking at the search page.

Loops:



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


~ 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

~ 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:



Marks a section of HTML that only shows if you comic has chapters enabled



Marks a section of HTML that only shows if the displayed comic is in a chapeter



Marks a section of HTML that only shows if you have ratings enabled



Marks a section of HTML that only shows if leaving comments is allowed



Marks a section of HTML that only shows when viewers who aren't Comic Fury members are

allowed to leave comments



Marks a section of HTML that only shows when there are author notes (author comments)

left on the displayed comic



Marks a section of HTML that only shows when you enable permalinks



Marks a section of HTML that only shows if you've enabled comments being show



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:

*

~ 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



Marks a section of HTML that only shows when the current comic is the displayed comic



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



Marks a section of HTML that only shows when the note's author has an avatar


Marks a section of HTML that repeats for each comment left on the displayed comic


~ 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


Marks a section of HTML that only shows when the comment author has an avatar

~ 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:



Marks a section of HTML that only shows if the archive is displaying a single chapter instead

of all your comics

Loops:



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 

[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



Marks a section of HTML that shows only if the current comic's chapter has a description



Marks a section of HTML that shows only if the current comic's chapter is different then the

chapter of the previous comic

~ 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:



Marks a section of HTML that only shows if you have uploaded comics



Marks a section of HTML that only shows if your comic has blog entries posted

Loops:



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


Marks a section of HTML that only shows when the blog entry's author has an avatar

~ 21 ~

Author Blog Archive Layout

Variables:

Conditions:



Marks a section of HTML that only shows if your comic has blog entries posted

Loops:



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]


[l:authorname]


[l:avatar]


[l:posttime]






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]


[l:authorname]


[l:avatar]


~ 22 ~

[l:blog]

Gets replaced with the contents of the current blog entry

[l:posttime]




~ 23 ~

Comic Search Layout

Variables:

[searchterm]

Gets replaced with the word(s) that the viewer searched for

Conditions:



Marks a section of HTML that only shows if the viewer got to the page using a search form



Marks a section of HTML that only shows if the search found results

Loops:



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


~ 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

~ 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  is.

After that, it finds the element . 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.

~ 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  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">



</style>

</head>

<body>

<div id="header">


<img src="[banner]" alt="[webcomicname]" />





<h1>[webcomicname]</h1>



<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>



<li><a href="[addsubscriptionlink]">Subscribe</a></li>





<li><a href="/search/">Search</a></li>





<li><a href="[l:link]">[l:title]</a></li>



</ul>

</div>

<div id="content">


~ 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;

http://www.w3schools.com/css/default.asp

~ 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



<h2>[latestcomictitle]</h2>

<div id="comic">

<a href="/comics/">[latestcomicimage]</a>

</div>







<div class="blog">

<h4>[l:blogtitle]</h4>

<h6>by [l:authorname] at [l:posttime]</h6>

<div>

[l:blog]

</div>

</div>







Error: This webcomic is empty right now. Why don't you check back

later.

~ 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



<h2>Blogs:</h2>

<ul id="archive">



<li><a href="[l:bloglink]">[l:blogtitle]</a> by [l:authorname]

([l:postime])</li>



</ul>



<div class="blog">

<h4>[l:blogtitle]</h4>

<h6>by [l:authorname] at [l:posttime]</h6>

<div>

[l:blog]

</div>

</div>







Error: no blogs.


~ 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>

~ 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]



in <a href="[chapterlink]">[chaptername]</a>



</h4>

<div id="comic">

[comicimage]

</div>

<span id="comicnav">

<a href="/comics/first/">First</a> |

<a href="[prevcomic]">Previous</a>|



Average rating: [rating], based on [votecount] votes.

<a href="[ratelink]">Rate</a> |



<a href="[nextcomic]">Next</a>|

<a href="/comics/">Latest</a>

</span>



<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>

~ 32 ~

<h3>Author's Notes:</h3>



<div class="comment">


<img class="avatar" src="[l:avatar]" alt="[l:authorname]" />



<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>









<h3>Comments:</h3>


<div class="comment">


<img class="avatar" src="[l:avatar]"

alt="[l:authorname]" />



<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>









<h3><a href="[commentlink]">Leave a Comment</a></h3>



<h6>

(You need to be registered at

<a href="http://comicfury.com/">Comic Fury</a>

to comment.)

</h6>

~ 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


- [chaptername]



</h2>


<h4>[chapterdescription]</h4>



<ul id="archive">





<li class="name">[l:chaptername]</li>



<li class="description">[l:chapterdescription]</li>





<li>[l:number]. <a href="[l:comicurl]">[l:comictitle]</a>

([l:posttime])</li>



</ul>

~ 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>





<h4>Error: no results</h4>





<ul id="searchResults">



<li><a href="[l:comicurl]">[l:comictitle]</a>([l:posttime])</li>



</ul>


~ 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!

http://www.itfigures.thecomicseries.com/guide

http://comicfury.com/forum/viewthread.php?id=169


~ 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.

http://itfigures.thecomicseries.com/tips/#3.2


~ 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.

http://comicfury.com/profile.php?userid=428


~ 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{


~ 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>









<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


~ 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>

~ 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"></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.

http://jquery.com/

http://itfigures.thecomicseries.com/comics/pl/4328


~ 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



~ 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){ ... }




~ 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.

Comic Fury Layout Guide (Version 1.0)testingonly.thecomicseries.com/files/comicfury_guide.pdfComic...

Documents

Transcript of Comic Fury Layout Guide (Version 1.0)testingonly.thecomicseries.com/files/comicfury_guide.pdfComic...