Comic Fury Webcomic Hosting - Autoloading stylesheets

This is a modified idea from what I did in ComicFury. The system is different here, and autoloading styles seems much easier to do.

The idea is this - you have all your regular CSS styles in the comic, in the OVERALL definition, either loaded using...

<style type="text/css">
/*<![CDATA[*/
   <!--layout:[css]-->
/*]]>*/
</style>
<script type="text/javascript"
      src="http://comicfury.com/cflayoutjs.js.php">
</script>

...which loads the code in the "Editing the layout CSS" part of your comic management, or something like...

<link rel="stylesheet" type="text/css" href="/files/overall.css"  />

...where you've uploaded overall.css as an extra file (I prefer this method for one reason or another). In either case this code's in you Header section.

Now the way that loading styles and external stylesheets is this - the code or link that come later in the file supersedes the code above it. For example, in...

<link rel="stylesheet" type="text/css" href="/files/overall.css"  />
<link rel="stylesheet" type="text/css" href="/files/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/files/extra.css"  />

...the overall.css file is loaded first; print.css is loaded and used only if you print that page; and extra.css is loaded last, so any CSS code in it replaces the same found in overall.css.

For example, if if you have...

body {
	background-image:url(/files/somebackground.gif);
	background-repeat:repeat-y;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #FFF;
}

...in overall.css, but extra.css has...

body {
	background-image:url(/files/adifferentbackground.gif);
	color: #000;
}

...then the background image and colour of the text are replaced, whereas the other attributes for body aren't. You can use this on extra pages to make things look a little different but it can also be handy for your comic pages, because you can vary how the pages will look on a page by page basis..

The key is to use a bit of data particular to an individual comic. Over in ComicDish I was limited to what was available (mostly chapter and time codes), but here's some possibilities...

<link rel="stylesheet" type="text/css" href="/files/[v:chaptername].css"  />
<link rel="stylesheet" type="text/css" href="/files/[v:pagetitle].css"  />
<link rel="stylesheet" type="text/css" href="/files/[v:comickeywords].css"  />

...which load an extra stylesheet based on the page title, chapter name, or comic keywords. And the thing is you could use any or all of these to load extra styles - simply add the code in the order you want them to apply (with the ones below superseding the ones above).

The worst that can happen under this is that no stylesheet gets loaded. For example let's suppose you have stylesheets called Xmas.css, Xmas Day.css, New Years.css and Halloween.css uploaded as an extra files. They're only going to get loaded if you have a match for that text somewhere in the comic page's data. For these examples lets assume that we're using all of the above three links.

So, first we have a chapter called The Siege, a page title of Duggan is Killed and a single keyword of Halloween. The generated code would be:

<link rel="stylesheet" type="text/css" href="/files/The Siege.css"  />
<link rel="stylesheet" type="text/css" href="/files/Duggan is Killed.css"  />
<link rel="stylesheet" type="text/css" href="/files/Halloween.css"  />

...in which the first two lines have no matching file, but the last does, so Halloween.css is loaded.

Next we have a chapter called Xmas, a page title called The Fall and no keywords. This generates:

<link rel="stylesheet" type="text/css" href="/files/Xmas.css"  />
<link rel="stylesheet" type="text/css" href="/files/The Fall.css"  />
<link rel="stylesheet" type="text/css" href="/files/.css"  />

...and the only match here is the first line so Xmas.css gets loaded (it doesn't matter that .css is not a proper file name, all that happens is nothing gets loaded).

In the last example the chapter is still Xmas, the page title is Christmas Day, and the single keyword is Xmas Day. This generates:

<link rel="stylesheet" type="text/css" href="/files/Xmas.css"  />
<link rel="stylesheet" type="text/css" href="/files/Christmas Day.css"  />
<link rel="stylesheet" type="text/css" href="/files/Xmas Day.css"  />

...which loads Xmas.css first, followed by Xmas Day.css second (I find you can get away with spaces in stylesheet file names). The Xmas.css style in general might have a snow motif, and maybe Xmas Day.css adds Santa or Elves or something.

In practice I mostly use this technique to add title pages, or extras like showing a background with a skyline for a 24 hour comic. For an example of what I've done with here, see the first 3 pages of Real Life Trips (and check out the left "spine" of each comic image).

Suppose you are using a range of values of a field to apply the same stylesheet - how do you do that? The answer is to have "dummy stylesheets" that load the other stylesheet that you do want to load.

As an example, assume that you have two or more chapters that you want to use the same style, like "Chapter 1", "Chapter 2", "Chapter 3" and so on. Let's assume too that sometimes you have extra storylines before and in between these that you want to display differently, like "Prologue", "Notes" and "Spot illo", so that the list of chapters looks something like this:

"Prologue"
"Chapter 1"
"Chapter 2"
"Chapter 3"
"Spot Illo"
"Chapter 4"
"Notes"

You would of course incorporate the main coding for the chapters in your overall stylesheet or coding. For the Spot Illo and Notes chapters you might have a "dummy stylesheet" that looks something like this:

@import url('/files/<filename>.css');

...where <filename> is the name of the stylesheet you want to use(e.g. notes.css). This will then import all the code from the file listed, and that's all that Spot Illo.css or Notes.css might contain.

If you were using the keywords to point to an extra stylesheet you'd point directly to notes.css by just having "notes" in that field, but this method allows for chapter and title links to refer to another sheet.

Super necro addendum:

[c:chaptername]<link rel="stylesheet" type="text/css" href="/files/[v:chaptername].css"  />[/]
[c:pagetitle]<link rel="stylesheet" type="text/css" href="/files/[v:pagetitle].css"  />[/]
[c:comickeywords]<link rel="stylesheet" type="text/css" href="/files/[v:comickeywords].css"  />[/]

this way, the css embed code will only be added to the page if there is a chaptername, pagetitle or comickeywords

also I edited your post to use the new layout codes.

Wonderful! :D

Actually Ky I do have one extra question on this code. Can one do a loop on the keywords?

That is I'm guessing that v:comickeywords would dump the whole contents of the keywords field, like "title, main, action, death of character". But is it possible to do a loop of the keywords, so that say for [v:l.comickeywords] you'd get "title" "main" "action" "death of character" instead?

I guess the code would be something like

[l:comickeywords]
    [v:l.comickeywords]
[/]

Just curious. Apart from auto-loading stylesheets, there might be other uses, like having a link to a characters entry on a cast page, or other info page.

No, that's not possible unfortunately. You can do it with javascript, I suppose.

Nah - just curious. Using keywords for stylesheet loading is already bending the system as it is! ;)