Comic Fury Webcomic Hosting - Layout design guide

I still plan on making that layout I promised I'd make if you put jQuery up as an option, but I actually had a couple questions.

1. If I want to use layout files for it, do they have to be the static ones?
2. Is anything happening with that thumbnails thing? Or should I just assume they're not an option during planning?

1) layout files are ok.
2) Thumbnails, I will add them, but they are fairly low on the priority list right now, so you will have to live without them. You can later go back and edit the layout, I do that a lot.

If you're interested, I had an idea for something that might be neat for the layout system, and might help with some of the simplification stuff you're working for.

Layout Constants. They'd be a user defined element, and you could set/add them using a form at the top of the customization page. There could be a few kinds, like "color" "true/false" and "other"

color could be set by either punching in the HTML hex code or using a color selector. You could have one called something like "headercolor" and then in the CSS there would be

body{
background-color:[c:headercolor];
}

and then all the user has to do change the color of the header (and anything else that might use that color as part of the color scheme) is just change the constant at the top of the page.

the "true/false" constant could be set with just a check box, and the be used in a condition like

<!--cond:[c:topnavtoo]-->

allowing layouts to have more things disable-able/enable-able then what's currently in the comic settings.

the third option "other" would work like a normal variable to allow easy customization of some of the text eg.

<a href=[commentlink]>[c:addcommenttext]</a>

This all just popped into my head earlier, so I thought I'd mention it.

that is a fucking awesome idea. I am definitely adding that.

The only thing I am afraid of is that it will make the complicated layout editing mode even more complicated. Maybe these should only be used for the quick 'n easy mode (and custom layouts). Man, this idea will make everything so much easier.

I love you man

I'm just happy to help out. Glad you liked the idea.

I've been working at it, and the tips and tricks guide is almost completely back together. The only thing not yet fixed is the Advanced In-line Comments, but the basic version is there and working.

The Visual Ratings has been overhauled to take advantage of the fact that you can use a link to set the rating. It also uses the new [ratingpercentage] element to show partial stars, and to let you have the whole thing have a width other than 5em. Best of all, the individual stars can be selected to give the comic that rating, using absolutely no Javascript.

As for the items that do use javascript, a tip on enabling jQuery was added, and the Embedded Video tip has been rewritten to use jQuery and to only handle YouTube video. As a result, it is now easier to use, and can be copy-pasted into the Overall layout without having to edit little bits of the other pages.

The Advanced In-line Comment should still work as is, but I'll have the updated version done by the end of the week.

Enjoy!

haha, awesome. I'll definitely add that to a layout

I'm toying around with some ideas to make the stars look even more like the javascript versions, but I'm debating actually putting them in the guide because they'd start getting harder to explain

it'd be kinda cool if all stars prior to the one selected would also light up. You could achieve this with having the 5 spans be in each other, I guess.

aacutally, since all the stars are position using absolute positioning, you'd just need to change the highlight image to have all 5 stars, make each link 32px wider than then the one before it, reverse the order of the links in the HTML, and stick the right edge of the background against the right edge of the link, if that makes any sense at all. It's one of the things I'm toying with. If you start to get picky with actualy background positioning, you can create the entire rating display using 1 image. I might work on that.

my idea was this:
have a box that is 25px
inside that box, one that is 20px
inside that have one that is 15
10
5
all of them are transparent
if you hover over the 5, only the contents of the 5px box get "highlighted", thus one star displays
if you hover over the 10, both invisible stars in the 10px light up

etc.

basically the idea is that you stack a bunch of stuff on top of each other, with rests peaking out, which you can hover over.

Yeah, that's bassically what I'm saying too. But the point is that you don't have to edit the HTML to do it. I won't get a chance to work on it until tuesday, but I'll show it then.

Okay, I'm not rushing out the door right now, so I actually have time to make my point clearly. The issue with the box-in-a-box-in-a-box thing, is that there is no kind of box that will work for this. To show the stars, you need to use CSS's :hover Pseudo-class. Unfortunately, the only tag IE(6?) will render a :hover on is <a>, and I just found out that <a>'s can't be nested.

<a href="#1">
  <a href="#2">
    <a href="#3">
      <span>Hello!</span>
    </a>
  </a>
</a>

becomes

<a href="#1"></a>
<a href="#2"></a>
<a href="#3">
  <span>Hello!</span>
</a>

or, at least, that's what Firefox seems to do with it.

Now, the way I'm suggesting doing it, is to use the same HTML as I have in the tips guide, maybe reverse the order of the <a>'s so you can avoid using z-index. Since all the <a>'s are positioned absolutely, and since the <div> with class="ratingBack" has it's position set to relative, the <a>'s all get positioned relative to it. This is how the current version of the tip lines the links up over the stars.\
All you would have to do to get the look you're going for is to reposition all the links to top=0 left=0, and then change their widths to be bigger as the rating gets higher. Now instead of box's nested inside each other, you get boxes stacked on top of each other. To see what I'm talking about, just reverse the order of the links and edit the CSS, starting with the .ratingStars a{ line, to look like this:

.ratingStars a{
display:block;
height:32px;
background: none;
position:absolute;
top:0px;
left:0px;
}
.ratingStars a:hover{background: url("[f:ratingHighlight]") top left repeat-x;}
.star1{width:32px;}
.star2{width:64px;}
.star3{width:96px;}
.star4{width:128px;}
.star5{width:160px;}

The next update of the layout guide will have this.

You can't nests a href's, because that makes no sense. Listen, cyborg. I try to make my layouts IE compatible too, but sometimes you just can't, and when that time comes, it's time to give IE users a castrated experience. The browser has been released in 2001, and letting it hold back webdesigners from doing neat things is just frustrating. Most agree on this issue, just make it look acceptible and work in IE6.

That being said, you could just do the JSless approach for everything, and add an eventhandler based approach for IE inside a conditional comment. Just like suckerfish did

oooorrrr... I could do it the way I just described, which works in IE

but it's not elegant at all!

It uses the exact same amount of CSS as the version where only one star lights up. How is this less elegant than adding a bunch of IE specific javascript?

touché


You're right, it just felt hacky to me, maybe I misread something in your CSS earlier

You seem to forget cyborg isn't me, you can stop trying to break his spirit now.

Jeff, you don't code for IE at all.