Gradients for Crisped!

[rise]

Hello! First time submitting themes here, though we should still have a valid CLA from May, 2010, when we submitted some v-gift art.

Theme name/Layout: French Gradients / Crisped
Author: flatlanders
Info: Info · Source · Preview

Theme name/Layout: Cool Gradients / Crisped
Author: flatlanders
Info: Info · Source · Preview

These are basically the same theme with different temperatures—Cool Gradients is just French Gradients with the red and blue channels swapped. It seems stable after conversion, but I think it needs some crossbrowser testing and code-checking before we can be sure that it's 100% ready to go.

The gradient in the original layout was an image, but to allow for color customization by users, it's been completely converted to CSS3 linear gradients which use s2 color variables.

We've tested in Chrome and Safari, and it should hopefully work the same in Firefox and Opera. Unfortunately, because IE9 apparently can't do color-stops in CSS3 gradients, it looks like the headerless modules are going to have their gradient running the full length of the box instead of stopping after 30px. Not sure if there's a way to fix that; official documentation wasn't any help and googling around suggested "use an image background instead".

Comments

[ex_rising236]

I would just like to say, these are GORGEOUS. Stupid gods damn IE9 with stupid compatibility issues. Because these are beautiful.

[gone_fishing]

These are awesome. *punches IE9*

[gone_fishing]

Also, they look fine in Firefox.

[rise]

thank you! i added the css for mozilla and opera browsers when converting to s2, so i was a little nervous about whether it would work or not. opera needs fixing, but it's a relief that it works right in firefox!

[rise]

Ah, is there a reason we're tagged "needs cla"? We thought the CLA we signed and snail-mailed last year was still valid. Do we need to send in a new one? This is a different journal from back then, but our legal name and address haven't changed.

[ninetydegrees]

In this case, it just means the patcher will have to check with Fu or Denise because I don't have you in the styles list*. It doesn't mean there's something wrong with the one you sent. :)

*Unless it was under another name?

[rise]

Ah, thank you! That makes sense. We haven't submitted themes before, just art, so we're not in the styles list.

Just to be on the safe side: about anything before rise that would be us would be sheelal (system member) or manifold (group journal), most likely, if we had. Multiple system = multiple journals = maximum confusion, so we always try to stick to The Flatlanders as a public name and the system email (flatlanders@zensenbutai.com) for anything important.

[afuna]

Hi! I'm sorry to have taken so long, but we couldn't find the CLA filed under any of the names or email addresses mentioned here. Can you please resubmit? I'm terribly sorry for the inconvenience!

[rise]

It's all right! It took us a week to get to a printer to print out the CLA again and then a scanner to scan the last page. We wanted to wait on replying to you until we actually had something ready. Snail mail is going to have to wait until Tuesday, because of Columbus Day, but hopefully the scanned signature page is arriving in Denise's inbox soon.

We added more information under the signature, full name, address, and email, just to be sure that you have enough information this time. What could have gone wrong, we think, is that we have a legal name that we only use for legal purposes, such as signing legal documents, but we never use under any other circumstances because we... well, we just don't like it. So we added our professional working name (Vivian Hill, which hopefully will be the new legal name soon-ish), and our group name (the Flatlanders), usernames we've been known to submit under, and other emails we might be associated with, as well as a second initialing with the professional initials, just in case. It's probably overkill, but better overkill than another CLA lost in confusion, right?

[afuna]

Excellent, CLA confirmed! (We got it a few days earlier, actually, but I was out of town / had a crappy internet connection so I couldn't log in to tell you)

Thank you, I'm pretty excited :)

[turlough]

Beautiful!

[mmejavert]

The gradients don't actually show up in the current version of Opera. I checked in Chrome to see what I was missing and it's just gradient-less. Just to let you know. :)

[rise]

ah, thank you for the heads up! i wonder what happened there. i was pretty sure that the code from this article on dev opera was the right way to code for opera, but if it's not working in the latest version, obviously i missed something.

the article does deal solely in rgb and rgba, so maybe trying to make it work with s2 user-defined hex colors breaks something. do the drop shadows also work, or are they also missing?

(i'm thinking that since you double-checked in chrome, and it's just gradient-less in Opera, but not completely css3-less, that would mean i must have gotten the code for the gradients wrong but still had the code for the drop shadows right, which could hint at what i need to fix in the gradient code.)

Testing, Testing...

[delladea]

Hello rise! I'm in the process of patching these two themes and was reviewing the CSS. I tested in Opera, Firefox, Chrome and IE8 under Windows XP, and Firefox under Ubuntu.

Firefox and Chrome look lovely with no changes. As far as IE, support for box shadowing required a "filter:" command until version 9, so the boxes have their gradients but look flat in IE8. Even with the required filter commands, I could not get the box shadows to show in IE8. (Screenshot). I think this may be as good as it gets as far as IE is concerned. Supposedly Microsoft is going to add support for color-stops in gradients in IE10, but we all know how that goes...

Opera had little to no support for gradients until version 11, and then it requires Opera-specific CSS to get them to show up. Adding the required CSS to the block of gradient background CSS did not produce gradients, but separating Opera-specific things into a block all by itself seemed to do the trick (Screenshot).

I've made a copy of your theme layers for testing and tweaking, could you please test these again in Safari to make sure they still look good?

Cool Gradients Test
Info | Source | Preview

French Gradients Test
Info | Source | Preview

(I must say, I'm in LOVE with Cool Gradients. Both of them are gorgeous!)

Re: Testing, Testing...

[rise]

thank you so much for all the work you've done, especially fixing the gradients in opera! I knew there was something I was missing, but I never would have thought of separating those elements into their own block! it's all right if that's the best we can do for IE. the box shadows are nice to have, but it's still (hopefully) a perfectly useable layout without them, too.

both tests work out perfectly in safari. (I also copied over the French Gradients test source over the source in rise to see if the tinyicons and extras I kept on in Custom CSS from the original CSS layout version stayed on, and they all work perfectly with the test, too. So, er, don't be too bewildered if the source there is Suddenly Your Test, because it is.)

Re: Testing, Testing...

[delladea]

Great! I'll go ahead and use the revised CSS for the patch. :D