Last Comment Bug 753163 - jquery.ui theme defaults for sandstone
: jquery.ui theme defaults for sandstone
Status: RESOLVED FIXED
P2
:
Product: Marketing
Classification: Other
Component: Design (show other bugs)
: unspecified
: All All
: -- normal (vote)
: ---
Assigned To: Tara (musingt)
:
Mentors:
Depends on:
Blocks: 748781
  Show dependency treegraph
 
Reported: 2012-05-08 15:52 PDT by Axel Hecht [pto-Aug-30][:Pike]
Modified: 2012-12-04 06:42 PST (History)
6 users (show)
See Also:
Due Date:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
a jquery.ui dialog (25.82 KB, image/png)
2012-10-11 10:59 PDT, Axel Hecht [pto-Aug-30][:Pike]
no flags Details

Description Axel Hecht [pto-Aug-30][:Pike] 2012-05-08 15:52:37 PDT
We want to sandstone elmo in bug 748781, but that's using quite a bit of jquery.ui.

It'd be nice for us, and probably other consumers of sandstone, to get some good defaults for jquery.ui theming.

The themeroller for jquery.ui would be the right tool for this, if we had a URL like (warning, anti-thesis) http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS%2C+Helvetica%2C+Arial%2C+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=dddddd&bgTextureHeader=02_glass.png&bgImgOpacityHeader=35&borderColorHeader=bbbbbb&fcHeader=444444&iconColorHeader=999999&bgColorContent=c9c900&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=50&borderColorContent=aaaaaa&fcContent=333333&iconColorContent=999999&bgColorDefault=eeeeee&bgTextureDefault=02_glass.png&bgImgOpacityDefault=60&borderColorDefault=cccccc&fcDefault=3383bb&iconColorDefault=70b2e1&bgColorHover=f8f8f8&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=bbbbbb&fcHover=599fcf&iconColorHover=3383bb&bgColorActive=999999&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=75&borderColorActive=999999&fcActive=ffffff&iconColorActive=454545&bgColorHighlight=eeeeee&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=ffffff&fcHighlight=444444&iconColorHighlight=3383bb&bgColorError=c0402a&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=c0402a&fcError=ffffff&iconColorError=fbc856&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0pxdow%3D0px, that'd be great help.

Not so much as a strict rule but as a good default.

Our particular interest would be for the stone variant.

Not strictly blocking sandstoning elmo, but marking the dependency anyway.
Comment 1 John Slater 2012-05-09 14:31:21 PDT
Hi Axel. To be honest, I'm having a hard time deciphering comment #0. Can you explain? And should this be a website bug instead of a design one?
Comment 2 Axel Hecht [pto-Aug-30][:Pike] 2012-05-09 14:45:05 PDT
You can go to the theme picker and select color values and border radii etc to your liking, and then create those as a link like the one I gave, which people can use to either download the theme as is, or customize further.

I guess this is design, as it's choosing the right color combinations and borders etc to match the 3 palettes of sandstone.
Comment 3 Tara (musingt) 2012-10-05 11:29:07 PDT
Hi Axel.  Sorry but I'm still not entirely clear on what the ask is here :( I'm not very technical so if you can help articulate the ask in more simple terms and the scope for this design bug -  I'd be happy to help.  But i'm not entirely sure what I'm supposed to do here.
Comment 4 Crystal Beasley [:skinny, :crystal] 2012-10-11 09:29:02 PDT
(In reply to Axel Hecht [:Pike] from comment #0)
> We want to sandstone elmo in bug 748781, but that's using quite a bit of
> jquery.ui.
> 

You're looking for default timing for animations? Or recommendations for which sort animations to use in which scenarios?
Comment 5 Axel Hecht [pto-Aug-30][:Pike] 2012-10-11 09:51:57 PDT
Sorry, see, all I say is hell confusing. This bug isn't about timing.

It's more about choosing color schemes and border radii for jquery.ui in a way that makes that good to use in a sandstoned site.
Comment 6 Crystal Beasley [:skinny, :crystal] 2012-10-11 10:08:26 PDT
Aha! I think I know exactly what you're asking now. :D

jquery has default CSS visual styles. Since these don't match Sandstone, we need to override them to spruce up the colors, border radii, possibly fonts also? 

Axel, can you post a screenshot of what the jquery ui defaults look like in context of Sandstone? Then the vizDs can see what we're working with.
Comment 7 Axel Hecht [pto-Aug-30][:Pike] 2012-10-11 10:59:11 PDT
Created attachment 670456 [details]
a jquery.ui dialog

Wee, one down :-)

We don't have elmo sandstoned yet, so I don't have a live sandstone example. But this is a jquery dialog as we're currently using it on elmo, which is getting a sandstone design in bug .

The alternative would be to just screenshot http://jqueryui.com/themeroller/, but I don't have a big-enough screen right now to help with that.
Comment 8 John Slater 2012-10-30 16:42:20 PDT
Steven, is this something you could help with? Feels like more in your area of expertise than mine (by a long shot).
Comment 9 Tara (musingt) 2012-12-03 15:27:54 PST
friendly ping.  Is this something we can close / redirect? Let me know... am trying to avoid outstanding idle bugs :)  Thanks!
Comment 10 Steven Garrity [:sgarrity] 2012-12-04 06:42:12 PST
I think a much more careful look at theming jquery UI elements in context is likely required, but for an absolute simple base starting point, I did run through the theme generator and try to tweak the defaults to be a bit more like Sandstone.;

Not that this should not be considered a finished Sandstone theme for jquery UI - it's just a starting point during development:

http://jqueryui.com/themeroller/#ffDefault=Open+sans&fwDefault=normal&fsDefault=14px&cornerRadius=0&bgColorHeader=fff&bgTextureHeader=01_flat.png&bgImgOpacityHeader=100&borderColorHeader=fff&fcHeader=333333&iconColorHeader=999999&bgColorContent=fff&bgTextureContent=01_flat.png&bgImgOpacityContent=100&borderColorContent=ddd&fcContent=333333&iconColorContent=999999&bgColorDefault=3175b1&bgTextureDefault=04_highlight_hard.png&bgImgOpacityDefault=20&borderColorDefault=3175b1&fcDefault=fff&iconColorDefault=fff&bgColorHover=3180c4&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=20&borderColorHover=3180c4&fcHover=fff&iconColorHover=fff&bgColorActive=2c699f&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=20&borderColorActive=2c699f&fcActive=ffffff&iconColorActive=454545&bgColorHighlight=e66000&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=e66000&fcHighlight=fff&iconColorHighlight=fff&bgColorError=aa1401&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=aa1401&fcError=ffffff&iconColorError=fff&bgColorOverlay=fff&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=50&opacityShadow=60&thicknessShadow=0&offsetTopShadow=2px&offsetLeftShadow=0&cornerRadiusShadow=0pxdow%3D0px

Note You need to log in before you can comment on or make changes to this bug.