Comic Fury Webcomic Hosting - Layout design guide

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [2] [3] [4] [5] [8]

"Layout design guide", 21st Feb 2009, 4:26 PM #1
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
About a week ago I had a little two-post conversation with AFStaff in
this thread here I took it as him more or less saying "go ahead and write a tutorial"

I don't know if what I wrote qualifies as a tutorial or not, but it should be helpful, I think. It's nowhere near being completely done, but it's usable. I posted it on this page of my comic. I also have a standalone html copy of it.

some of the sections I'd like to include later are a FAQ, and some guides for common tasks. I'm open to suggestions for these, as well as anything else you might want to see in it. I'm also interested in any comments/critiques/feedback you might have.

I wasn't sure what forum this would go in, and this one seemed to be more or less the "support forum" so its here.

Enjoy!

_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
21st Feb 2009, 6:31 PM #2
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
CF2k is going to have a guide thing. I'll throw it in there. Thanks.

Your guide is really well-written and easily understandable, but I'm going to warn you that CF2k will introduce some new things which might render parts of your guide suboptimal. It shouldn't be more than a few little changes, and I'll try to make everything as backwards compatible as possible.
_______________________
hello
21st Feb 2009, 10:49 PM #3
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I wasn't expecting things to not change with CF2K. I plan on keeping this thing as up to date as possible.
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
22nd Feb 2009, 7:49 AM #4
Dave Andrews

User avatar
Posts: 62
Referrals: 0
Registration date: 18th Jan 2009
Location: Canada
sweet. I'm going to soak up every guide available, I suck at computers.
_______________________
thattinglyfeeling.thecomicseries.com
22nd Feb 2009, 8:45 AM #5
AFStaff♂
Weak, vulnerable
User avatar
Posts: 1955
Referrals: 0
Registration date: 6th Jul 2008
Location: Ohio, 1995
Thanks a bunch for making this. This will make my job a lot easier.
"Done-ish", 22nd Feb 2009, 2:53 PM #6
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Okay, so I just updated the guide to be a lot more complete. Basically, the sections that were placeholders last night are full-blown sections now, and I added a spot for a FAQ and a Tips and Tricks section. Although I may move the tips and tricks out on their own, as pasting the HTML into the comic fury page nearly crashes my browser, it's gotten so big.

Anyways, anyone have any requests for tips and tricks? or suggestions for Q's to FA? I'll try and come up with some of my own too :P
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
26th Apr 2009, 4:28 PM #7
AliJ5533

User avatar
Posts: 8
Referrals: 0
Registration date: 2nd Mar 2009
Location: England
Cyborg_572:Anyways, anyone have any requests for tips and tricks? or suggestions for Q's to FA? I'll try and come up with some of my own too :P


Well, I have a Q that will probably be FA by HTML noobs like me. Your guide made things a lot clearer for me in most parts, but there was one thing that confused me. Since on the menu, the extra pages are put in a loop, and also since they're controlled differently, my question is "is it actually possible to change the image/icon that appears on the menu for each individual extra page." You know, like in the Schrodinger's layout, Home's a house, Archive's a safe etc. But if you add extra pages, they just appear as text of their page title.

So yeah, I know it can't be FA until asked by more people, but it'll probably be a mutual problem for most who don't get HTML. Also, thanks for your guide so far.
_______________________
http://mist.thecomicseries.com
26th Apr 2009, 8:25 PM #8
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
Kinda. You could just link to them individually (their paths) without the loop and put up images for each one. Or you could set the order to 0 on those which you want to have icons and make those have hardcoded links with icons.
_______________________
hello
26th Apr 2009, 10:54 PM #9
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I've updated the guide to have this answer in it now. I hope I worded it clearly.
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
26th Apr 2009, 10:56 PM #10
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
You will hate me so much after CF2k

everything is changed
_______________________
hello
26th Apr 2009, 11:32 PM #11
AliJ5533

User avatar
Posts: 8
Referrals: 0
Registration date: 2nd Mar 2009
Location: England
Cyborg_572:I've updated the guide to have this answer in it now. I hope I worded it clearly.


Alright, good advice, thanks for clearing that up. I went and followed your instructions, and, using the above menu page's HTML and a lot of trial & error, got to this;


<a href="<!--var:[webcomicurl]-->/extras"> <imgsrc="http://i581.photobucket.com/albums/ss252/AliJ5533/Extra.gif" alt="Filler & Extras"></a>


However, that still doesn't work, now nothing shows up for that page. Can anyone see what's wrong with it? Thanks.
_______________________
http://mist.thecomicseries.com
27th Apr 2009, 12:43 AM #12
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
put a space between img and src
_______________________
hello
27th Apr 2009, 1:38 AM #13
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Kyo:You will hate me so much after CF2k

everything is changed


meh, the guide is so huge re-writing from scratch will probably be easier than editing anyway. It'll give me something to do.
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
27th Apr 2009, 2:17 AM #14
AFStaff♂
Weak, vulnerable
User avatar
Posts: 1955
Referrals: 0
Registration date: 6th Jul 2008
Location: Ohio, 1995
I wrote the descriptions of the code to make it a lot more easily understood. (English is not Kyo's native language so he has to go through 2 language barriers to explain things, code-> German -> English).

I took me long enough (Due to the laziness) but it should be a lot easier to understand what exactly things do now. Hopefully that'll help you.
27th Apr 2009, 5:55 AM #15
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
AFStaff:I wrote the descriptions of the code to make it a lot more easily understood. (English is not Kyo's native language so he has to go through 2 language barriers to explain things, code-> German -> English).

I took me long enough (Due to the laziness) but it should be a lot easier to understand what exactly things do now. Hopefully that'll help you.


Any chance of getting an early copy of that so I can get a jump on the new version of the layout guide? Or is it to be a big surprise?
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
27th Apr 2009, 6:49 AM #16
AFStaff♂
Weak, vulnerable
User avatar
Posts: 1955
Referrals: 0
Registration date: 6th Jul 2008
Location: Ohio, 1995
I'll have to wait for Kyo's ok but I don't have a problem with it. It'll help me make sure everything is understandable too.
27th Apr 2009, 10:42 PM #17
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
It's not completely done, so that's a no. I'm still changing things.
_______________________
hello
27th Apr 2009, 10:49 PM #18
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
okey-dokey
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
27th Apr 2009, 11:32 PM #19
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15259
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
I'll give you some insight on the new syntax, though.

First of all, end is renamed to end_loop, for continuity.

Now, there are two new elements. One, <!--comment:[stuff hereAF/(§%// %]--> which is a comment which will only be displayed on the layout editing mode, and not the actual comic.

Secondly, <!--file:[filename]-->

This is for layout files. When you upload a file, you are given the chance to assign an alphanumeric name to it (actually you have to), and that will be "filename" in the above example. I'm not sure about this but I think I'll have some special files which will point to something even if you haven't uploaded a file, like favicon.

Now, when you choose some standard layouts, like cafe templatte, it will create some files for you (like header). These you can overwrite in the layout files.

Otherwise, many many variable names changed, and many new ones were added. I added some extra conditions to make customizing stuff easy even without editing the HTML. (Some conditions influenced purely by comic settings like "show comments" and "show permalinks" (I still have to add that second one))

The archive loop is now global (for archive dropdowns) and on the archive page, a "chaptered archive" loop was added, which is pretty much the same except it has a conditional that tells you whenever a new chapter begins, and the comics are ordered by chapters.

Extra pages can use global variables, loops and conditions and layout files.

Is that all? I think so, maybe. I'll work over jeff's list and update it a bit and then I can give you that. I can't promise you that nothing will change till CF2k is out, though.
_______________________
hello
28th Apr 2009, 1:49 AM #20
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Wow, that all sounds awesome. Looks like there will actually be some stuff to put in the tips and tricks sections now. Cool.

I don't mind working with a constantly changing list of commands, I was just interested in getting the new guide out as soon after CF2K as possible.
_______________________
the whole "ComicFury" thing is just an acronym. It stands for Comics On My Interneting Computer For... Ummm.... Readers? Yeah....
Layout? I practically wrote the book on layouts. It's all probably being move to a wiki somewhere though. Still don't want to deal with the code? I'll do it for you.
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [2] [3] [4] [5] [8]