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] [6] [7] [8]

5th May 2009, 10:20 PM #61
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Kyo:<!--anti_cond:[stuff]--><!--end_anti_cond:[]--> and <!--file_anti_cond:[]--><!--end_file_anti_cond:[]-->

I think you're starting to overcomplicate things for the sake of simplicity. I'm not sure what's wrong with "no:commentson" other than that grammatically it doesn't make sense. My opinion is to go with a modifier inside the brackets. A modifier with not a whole lot of characters. The idea of having to type things like "<!--end_file_anti_cond:[picOfBob]--> several times a page makes me cringe ever so slightly.
_______________________
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.
5th May 2009, 10:53 PM #62
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
you have a point. No: it is then.
_______________________
hello
7th May 2009, 1:21 AM #63
Kyronea

User avatar
Posts: 10
Referrals: 0
Registration date: 2nd May 2009
Location: United States of Ame
Do I need to know HTML and/or CSS(I honestly don't know which this is because I'm not familiar with any programming language) before using this guide? Or can I use it without that prior knowledge?
7th May 2009, 2:01 AM #64
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
Yes, you do. CSS and HTML are not programming languages, though.

I'll implement a feature that lets you just change colors and some images without any html knowledge once I have the time to. In the meantime you can just have someone here help you.
_______________________
hello
7th May 2009, 2:05 AM #65
Kyronea

User avatar
Posts: 10
Referrals: 0
Registration date: 2nd May 2009
Location: United States of Ame
Kyo:Yes, you do. CSS and HTML are not programming languages, though.

I'll implement a feature that lets you just change colors and some images without any html knowledge once I have the time to. In the meantime you can just have someone here help you.

That will definitely be a nice feature when you can get it implemented.

Thank you for answering my question.
7th May 2009, 2:08 AM #66
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
you'll probably need to know at least CSS and the <div> tag if you just want to take the example and customize it. The layout system here is all CSS and HTML, with some special elements thrown in, but it's really not that hard. I'd recommend w3schools as a good place for learning the basics, it's actually how I learned. It's my hope that if you read the guide closely, and look into CSS a bit, you should be able to make a good start at customizing. If you have any questions, feel free to ask here or PM me. I'm on-line a lot.

EDIT: Gah. You internet goes down for 5 minutes and you get ninja'd, even when the forums are mostly dead :S
_______________________
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.
7th May 2009, 2:08 AM #67
AFStaff♂
Weak, vulnerable
User avatar
Posts: 1955
Referrals: 0
Registration date: 6th Jul 2008
Location: Ohio, 1995
Actually, it's so easy looking would you mind if I gave you a hand with the PHP kyo? For practice.
7th May 2009, 4:59 AM #68
Kyronea

User avatar
Posts: 10
Referrals: 0
Registration date: 2nd May 2009
Location: United States of Ame
Cyborg_572:you'll probably need to know at least CSS and the <div> tag if you just want to take the example and customize it. The layout system here is all CSS and HTML, with some special elements thrown in, but it's really not that hard. I'd recommend w3schools as a good place for learning the basics, it's actually how I learned. It's my hope that if you read the guide closely, and look into CSS a bit, you should be able to make a good start at customizing. If you have any questions, feel free to ask here or PM me. I'm on-line a lot.

EDIT: Gah. You internet goes down for 5 minutes and you get ninja'd, even when the forums are mostly dead :S

Okay. I'll give that a shot. I should probably learn HTML and CSS anyway. Thanks for the link.
7th May 2009, 7:05 PM #69
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
Jeff, I have a whole framework you'd have to work out. Own functions, classes, variables, template and language systems, ways to do things. Then there's security, which you don't know much about and of course code from beginners tends to have more mistakes and be rather sloppy.

I'd be happy to let you code something, but I'd rewrite it and make it pretty after you did.

After CF2k is done, I'll probably start releasing features at the speed I used to. You might not remember, but it was fast.
_______________________
hello
7th May 2009, 11:10 PM #70
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
I've been looking into javascript WYSIWYG editors. Being an open source kinda guy, I picked a nice open source one that has a lot of features and a good compatibility.

Now, I doubt that this will work very well with comic layouts (I'll see how well it will work - variables may be especially problematic), but it should work fairly well with extra pages.
_______________________
hello
"Layout Hierarchy", 28th May 2009, 8:08 AM #71
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I think I need some suggestions. I'm trying very hard to re-write the layout guide for CF2K, as much as I can pre-release anyway, and I'm getting a bit confused. I don't think it's possible to write a clear guide whilst confused.

The new layout system seems like it will work well, and isn't in itself confusing. Where the confusion comes from is trying to lay an explanation of everything out as a single document. The old system followed a hierarchy something like this:
image
it's more or less straight forward, and easy to lay out with headings and sub-headings. A few things from the loops section overlaps the others, but it was clear enough to say "lvar is the same as var except..." etc.

The problem is that with the two ways elements are written now (<!--loop:[comments]--> vs. [l:date] for example) and with files, the "hierarchy" is looking more like this:
image

So I'm trying to think of how to lay this out right in writing. If I do it the same as the current guide, there'll be a ton of redundancy and lots of "see the other section" type links. I think that's confusing. I think I'll need to do something a bit more flexible. Here's what I'm thinking:

1: An extra page for each element from the picture above, with that picture as an image map linking to them

or 2: A javascript powered page that lets you pick a category and then shows all the element types that fall into it.

or 3: Something else? I'm open to suggestions.

I'm probably just over-thinking this a bit, I tend to do that sometimes. I'm leaning towards the javascript powered page, but things always make more sense when you're the one who makes it, so is it too complicated? I need input. I could probably quickly set up a demo of each if anyone wants them.

EDIT: you can see what I'm talking about with the javascript here.

P.S. @Kyo: Please don't take this as criticism of the layout system itself. I like it, just finding it hard to organize explanations of it.
_______________________
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.
28th May 2009, 8:52 PM #72
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
Yeah, I get what you mean. IMO, the problem stems from having a ton of new elements (some don't need to be explained like <!--comment:[]-->), namely file conditions and files. On top of that, there will be a ton of new variables and conditions, which make the lists longer and therefore less easy to scan through. What I'd do is just explain the different elements and then make lists of specific elements and their functions. That's what the official version will do anyway.

What I was going to do (eventually, maybe not right at launch) is add a dropdown with all variables and an "add variable" button, that way you don't have to bother with the code. Same for files and conditions.

I will code a simple layout mode which gives you control over colors and some images of the layout, without having to bother with HTML and the CF-syntax.

Maybe also a semi-advanced mode which will be a simplified version (i.e. just <!--comments--> instead of a whole customizable loop)

If you have any suggestions for the layout system (syntax), by all means, tell me. Right now I can still change it quite easily.
_______________________
hello
28th May 2009, 9:52 PM #73
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
The point of the guide has never really been to list every single variable, loop, condition, etc. Like you said, the official version does that. I'm just trying to explain more of the syntax and how the system works.

Kyo:If you have any suggestions for the layout system (syntax), by all means, tell me. Right now I can still change it quite easily.


I could think of a couple suggestions...

What about making <!--layout:[]--> work the way the other variables do? That would get rid of the whole visible vs. hidden issue, as everything that gets replaced by content is written one way, and everything else another.(maybe [s:] for "section" or something)

The other idea was something I thought you had actually done when I was reading the list of new variables and whatnot you posted earlier in this thread. What if you eliminated [l:] and lcond and just made [] and cond context sensitive? or would that make things confusing? I could see it being a pain for you to implement if the context checking isn't already there though...

_______________________
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.
29th May 2009, 12:37 AM #74
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
I've thought about that. I guess it's possible, but in a way, it's also easier on you, because you know what you can use where. Then there's the thing that posttime can refer to a comment post time, or a comic post time. I could change those to comicposttime and commentposttime, but that would just make everything longer and therefore less comfy.

I'd really like to standardize it all, get rid of the mixed syntax, but I can't think of a good way.

I do like that [s:] thing, though. Implementing that.
_______________________
hello
"Visual Ratings", 29th May 2009, 10:48 AM #75
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I've finally got something in the CSS section of the Tips and Tricks Guide. Mosey on over to see how to display your comic's rating as a set of icons instead of a number. No JavaScript required, just a couple images and some CSS.
_______________________
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.
30th May 2009, 8:07 PM #76
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
That is deviously brilliant. I'm still thinking of implementing some light user interaction on the comic pages. It's not entirely impossible, but it could not contain an actual session, just maybe a userid in a cookie set for .thecomicseries.com (and the other domains), which the page would then accept as "good enough" and display you your rating and edit and delete links only on your comments. This would expose user-ratings, but I don't see a problem with that, as a user should not have any reason to be secretive about his rating, unless he's rating unfairly.
_______________________
hello
"Layout Guide 2000", 26th Jun 2009, 5:14 AM #77
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
So, when the site upgraded to CF2K, almost everything in the Layout Guide and the Tips and Tricks Guide became instantly outdated. Slowly but surely, I'm getting everything back in order. I think the guide will receive a complete rewrite, and be split across a couple pages. The tips and tricks guide will need some real looking into, I think there might be a tip or two in there that aren't even needed anymore.

So far, Simplesville has been updated with a completely re-written bare-bones layout. It only has 20 lines of CSS, and is ready for your editing needs. Soon I'll have the guide up and you'll actually be able to get the layout. Hmmmm... I wonder what the odds are of the Bare-bones layout being available as a template? </totally not subtle question>

Anyways, I'm not sure how many people actually use this guide, but for those of you who want to use it to customize your new CF2K layout, hang in there, I'm going as fast as I can.
_______________________
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 Jun 2009, 10:54 AM #78
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
I encourage people to provide CF with their own layouts, and I'm happy to add them as default, but I don't think simplesville is really the kind of thing you would add to the default layouts. I see the purpose as being edited rather easily, but maybe it should get a "special place"
_______________________
hello
26th Jun 2009, 7:45 PM #79
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
Kyo:I encourage people to provide CF with their own layouts, and I'm happy to add them as default, but I don't think simplesville is really the kind of thing you would add to the default layouts. I see the purpose as being edited rather easily, but maybe it should get a "special place"


Did you have a certain "special place" in mind? Or are you just thinking aloud?
_______________________
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 Jun 2009, 7:55 PM #80
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15708
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
I was thinking something along the lines of "reset the layout to an unstyled CSS template"
_______________________
hello
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [2] [3] [4] [5] [6] [7] [8]