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]

11th Jul 2009, 4:04 AM #101
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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?
_______________________
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.
11th Jul 2009, 8:46 AM #102
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
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.
_______________________
hello
12th Jul 2009, 6:56 AM #103
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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.
_______________________
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.
12th Jul 2009, 8:00 AM #104
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
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
_______________________
hello
12th Jul 2009, 2:43 PM #105
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
I'm just happy to help out. Glad you liked the idea.
_______________________
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.
"The return of the Tips and Tricks Guide", 17th Aug 2009, 1:19 AM #106
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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!
_______________________
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.
17th Aug 2009, 1:22 AM #107
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
haha, awesome. I'll definitely add that to a layout
_______________________
hello
17th Aug 2009, 1:25 AM #108
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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
_______________________
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.
17th Aug 2009, 1:28 AM #109
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
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.
_______________________
hello
17th Aug 2009, 1:33 AM #110
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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.
_______________________
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.
17th Aug 2009, 1:39 AM #111
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
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.
_______________________
hello
17th Aug 2009, 1:43 AM #112
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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.
_______________________
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.
18th Aug 2009, 5:49 AM #113
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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.
_______________________
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.
18th Aug 2009, 12:14 PM #114
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
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
_______________________
hello
18th Aug 2009, 5:05 PM #115
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
oooorrrr... I could do it the way I just described, which works in IE
_______________________
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.
18th Aug 2009, 5:09 PM #116
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
but it's not elegant at all!
_______________________
hello
18th Aug 2009, 5:52 PM #117
Cyborg_572♂
M-M-M-Moderator
User avatar
Posts: 3052
Referrals: 0
Registration date: 5th Dec 2008
Location: London, Ontario, Canada
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?
_______________________
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.
18th Aug 2009, 7:15 PM #118
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
touché


You're right, it just felt hacky to me, maybe I misread something in your CSS earlier
_______________________
hello
18th Aug 2009, 9:42 PM #119
AFStaff♂
Weak, vulnerable
User avatar
Posts: 1955
Referrals: 0
Registration date: 6th Jul 2008
Location: Ohio, 1995
You seem to forget cyborg isn't me, you can stop trying to break his spirit now.
19th Aug 2009, 1:21 PM #120
Kyo♂
ComicFury Pretty Boy
User avatar
Posts: 15428
Referrals: 0
Registration date: 6th Jul 2008
Location: Germany
Jeff, you don't code for IE at all.
_______________________
hello
Forum > Layouts, HTML, CSS & Javascript > Layout design guide
Pages: [1] [2] [3] [4] [5] [6] [7] [8]