148 replies to this topic

[Celice]

I think it's cool--but not its animated gimmick. That part looks clunky, out of place, and strangely artificial. Basically, it's jarring unnecessarily moreso than it's helping coherently.

But yeah, blueskies user here also, so what/ev

[Wooster]

congratulations, you received praise for affirmed mediocrity

see how one doesn't follow the other?

There's a difference between mediocrity and subjectivity. You don't like it? I'll accept that.

i did give you constructive criticism. i don't have to suggest an alternative for any of the elements in the banner if none exist.

moving images seem juvenile. the altar is out of place. the armory quote is absolutely out of place and the font for that is atrocious.

(but you probably won't listen anyway)

Originally, the alter had a background item to hide the altered perspective. But the staff didn't like it so much, mostly because the alter was also on top of the structure, so it was removed.


You don't like the movement? There are, of course other themes, but I'll research how to selectively disable it without generating a whole new theme, if possible. My background is strong CSS. I've got little experience in setting and reading cookies. But I'll make the effort.
You don't like the font? Fine. I'll look for something you might like more. No need to get vicious about it.

Also, hopefully the last menu bug has been fixed and submitted to Vincent for application.

Edited by Wooster, 03 May 2012 - 05:55 AM.

[VincentASM]

Fix added!

Please tell me your experiences.

[NinjaMonkey]

What's this animation that people keep going on about? I can't see it.

IE user, by the way.

[VincentASM]

It's not available on IE I'm afraid.

There's three "variants" as far as I'm aware.

IE has the plain banner.
Firefox and other browsers have summoned heroes and a change of scenery towards the end.
Other other browsers get a guest appearance from a new hero.

[BrightBow]

All the issues I mentioned seem to be fixed in Opera now. Yune is the only animation that appears, though.
Just in case it isn't intended that way.

Anyway Wooster & Vincent, I hate being redundant but you are kinda awesome and all.


You know, I tried a bit to mess with Dragonfly and writing in my own CSS file to fix the problem with the container blocking the menu. I failed, though. On the bright side, almost every member badge shows Echidna for me now, so it wasn't an entirely wasted effort.

Still, since I am interested in CSS, I would like to ask: What was the problem and how did you fix it?
The contrainer at least is still in place, from what I can see with Dragonfly.

Edited by BrightBow, 03 May 2012 - 10:52 AM.

[Elieson]

I don't like it. Blue Skies can stick around.

Actually, because of this new banner, I'm starting with blue skies permanently.

Edited by Elieson, 03 May 2012 - 10:57 AM.

[eclipse]

Looks like the links are back. Thank you! If I had to guess, the unselectable block was probably moved below the rest of the links.

[Wooster]

All the issues I mentioned seem to be fixed in Opera now. Yune is the only animation that appears, though.
Just in case it isn't intended that way.

Anyway Wooster & Vincent, I hate being redundant but you are kinda awesome and all.


You know, I tried a bit to mess with Dragonfly and writing in my own CSS file to fix the problem with the container blocking the menu. I failed, though. On the bright side, almost every member badge shows Echidna for me now, so it wasn't an entirely wasted effort.

Still, since I am interested in CSS, I would like to ask: What was the problem and how did you fix it?
The contrainer at least is still in place, from what I can see with Dragonfly.

Okay first the problems were both technical and personal.

First and likely most importantly, when I was creating the banner, I did not own my own copy of IP Board, nor did/do I have access to Serenesforest's server. I copied one two or three pages' generated HTML, added a BASE tag to the header so the referenced linked files wouldn't break, and then added my own CSS and HTML as needed. While, visually, everything turned out according to spec, my demos never permitted me to interact with the forums on a daily basis (My copy of a forum topic was several weeks out of date for instance, so I never had the opportunity to run into the interactive bugs you folks did. Since I could really only look and not interact with my demo.) When Vince, TheEnd, and Tangerine were helping me out they only saw the static page, so they couldn't/wouldn't interact with the menus themselves either. It wasn't until it went live that anyone got to interact with the menus and I'm ashamed to admit it never occurred to me that it might've been a problem.

On the technical end however...

Basically the problem was how the browser prioritizes how and what you can click on. On the left side of the screen the problem issue was the div 'container' a 300x300 invisible pixel block. For Opera and IE, that div does nothing. For Safari and Chrome, it handles the 3D magic needed for the spinning magic circle. (Firefox doesn't, yet, support 3D transforms, so its magic circle is totally different). And due to how 3D perspective is handled, chancing the size of the block radically changes the perspective of the magic circle. It was very tedious getting it right the first time, so I decided I'd rather work around it when it came to fixing how it overlaps.

My preferred method of getting browsers to ignore elements is to add userselect: none; to the element (with the various vendor prefixes added as needed) basically telling the browser that, if someone clicks on this, it's to ignore it and send the click over to the next lowest element. I found out on this project that Opera and IE doesn't support that. The next solution isn't really desirable as it's adding 'unselectable="on"' to the violating tag in question, but Opera and IE support that. Beggars can't be choosers however.

For some reason however, Opera ignored it on some, but not all tags. For that I resorted to modifying the z-index. I don't generally like playing with the z-index however. Basically it treats elements of different z-indexes as being on different layers. And sometimes weird things can happen in consequence (font weight decreasing despite registering the same for instance). Ultimately changing the Z-index won out in the end. I had to change the nav bars so they were rated higher then 'container'. I don't like that solution. But it works.

If you're interested in any CSS tricks I'm totally up to answering your questions or even giving a hand with whatever you might be working on.

[BrightBow]

Thank you very much for giving such an elaborate answer.

Man, I would have never figured the issue is how the <div/> is handled. I figured such an element would be treated in any way identical on all actual browsers. Shows how very little I know, I guess.


One thing, though: Is the animation in the upper left supposed to work in Opera at this point?
Like I said, Yune does show up for me but not that one.

Edited by BrightBow, 03 May 2012 - 12:35 PM.

[Wooster]

Yune's not animated, so she should show up in all browsers.

On the left however…

Opera and IE should just show FE13 My Units on top of the alter. IE6 (And 7?) getting a GIF'd version of that image. Opera however doesn't show the protagonists. I left code in so if/when Opera supports animations they should get it at some point. (Though I think I left the Webkit animation code in. Not sure)

FireFox supports animations, but not 3D. FireFox gets a magic circle that just fades in as the protagonists show up.

Chrome and Safari support 3D transforms. Their magic circle is different from FireFox's and spins/decelerates as it summons the protagonists.

Then there's the easter egg. Not sure if Chef Krom shows up on FireFox. Getting the timing to work was brutal for Webkit. But it 'should' show up on FireFox? I don't believe there's a technical reason why it wouldn't work. As Vincent said, it was working at least on an earlier build. It might've gotten gutted when fixing the 3D/2D transforms.

Another trick I used, was, since there's a lot of images involved in this, I threw everything into a sprite sheet. It was honestly rather fun, but excessively tedious to set up. (The alter for instance, was deliberately placed on the top right corner of the sheet, because when placed on the div on the left side, there'd be nothing on the image to the right or above freeing it up for transitions and hiding FE13 my units off screen.)


But yes, it's crazy how different things are handled in different browsers. But it's a WHOLE lot better then it used to be.

[kdanger]

The main issues I have with it are that the animations get distracting, and bringing in colors besides green looks cluttered and also distracting. It was a neat idea, but it doesn't really work out for me.

I could probably also gripe about the font (mainly the border, don't like the border) but eh that's less of a concern really.

silly post editor, i wasn't done yet! why do you post things blargh

Edited by kdanger, 03 May 2012 - 12:57 PM.

[BrightBow]

I already saw that sheet. I wondered where that Krom part was being used.

Speaking of the sheet, I wanted to ask: Would you mind if I could copy the sheet and edit it? So I could try to have my browser use that one instead.

Granted, technically it doesn't matter all that much at this point because of Opera. And I don't know yet how to have it use image from my hard drive anyway but I'm sure I will figure that one out.

[Wooster]

http://hobohodo.cour...visionfinal.zip

Knock yourself out. Note, everything in that zip is what I originally gave Vincent. There are no CSS fixes in it.

And if you want your to load a local file… Try loading an JPG or something in your browser. You'll get something like…

file:///Users/Wooster/Sites/Serenes%20Forest/Logo2.png

It's extremely bad form to do that on a website. But it's harmless fun if you're doing it for your personal style sheet.

Spoiler - Raw Sprite Code/Locations

.Background-2 {
  background: url(Sprite.png) 0px -146px no-repeat;
  display: block;
  width: 682px;
  height: 291px;
}

.Krom {
  background: url(Sprite.png) 0px -1457px no-repeat;
  display: block;
  width: 682px;
  height: 157px;
}

.Left2 {
  background: url(Sprite.png) -268px 4px no-repeat;
  display: block;
  width: 414px;
  height: 150px;
}

.Logo2 {
  background: url(Sprite.png) 0px -437px no-repeat;
  display: block;
  width: 682px;
  height: 150px;
}

.Right2 {
  background: url(Sprite.png) 0px -582px no-repeat;
  display: block;
  width: 465px;
  height: 160px;
}

.Shop Clerk {
  background: url(Sprite.png) -493px -517px no-repeat;
  display: block;
  width: 189px;
  height: 300px;
}

.circle {
  background: url(Sprite.png) 24px -714px no-repeat;
  display: block;
  width: 394px;
  height: 405px;
}

.circle-fire-fox {
  background: url(Sprite.png) -284px -741px no-repeat;
  display: block;
  width: 213px;
  height: 81px;
}

.fe1 {
  background: url(Sprite.png) -370px -847px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe10 {
  background: url(Sprite.png) 0px -1335px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe12 {
  background: url(Sprite.png) -183px -1335px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe12MU {
  background: url(Sprite.png) -366px -1335px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe13MU {
  background: url(Sprite.png) 0px -24px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe2 {
  background: url(Sprite.png) -370px -969px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe4 {
  background: url(Sprite.png) 0px -1091px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe5 {
  background: url(Sprite.png) -183px -1091px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe6 {
  background: url(Sprite.png) -366px -1091px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe7 {
  background: url(Sprite.png) 0px -1213px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe8 {
  background: url(Sprite.png) -183px -1213px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

.fe9 {
  background: url(Sprite.png) -366px -1213px no-repeat;
  display: block;
  width: 183px;
  height: 122px;
}

Note the .feX tags might not 1:1 match up. I know Vincent replaced a FE1 Marth with FE13's Krom. I didn't originally include him in the rotation since he was the major easter egg.

[NinjaMonkey]

Opera and IE should just show FE13 My Units on top of the alter.

I don't see any FE13 MU's or an altar, though... (and as I mentioned previously, I use IE).

[Wooster]

Version?

[NinjaMonkey]

I think it's 7...

[fuzz94]

Chef Krom

[SPSEliwoodGabriel]

Just curious, when should Chef Krom appear, anyway?

also I wan to use him as my next sig.

[Wooster]

Very strange. I've just tried tampering. Mind I don't actually have IE 7 so I'm working blind. Force Refresh and tell me what you see now. Or any IE 7 user for that matter.

Edit: Chef Krom appears after a few minutes of idle time. I think it should be around 4 or 5 minutes currently for Safari and Chrome users.

Edited by Wooster, 03 May 2012 - 06:54 PM.