• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Theming jQuery UI Like an Aristocrat
 

Theming jQuery UI Like an Aristocrat

on

  • 4,543 views

We all know and love ThemeRoller for quickly styling jQuery UI, but we often have to go beyond its capabilities. We will walk through completely building a rich new theme from beginning to end. ...

We all know and love ThemeRoller for quickly styling jQuery UI, but we often have to go beyond its capabilities. We will walk through completely building a rich new theme from beginning to end. Recently, 280 North released an Open Source theme called Aristo. It is a really polished an professional looking style that can be applied to many different UI elements. It is also used in the popular Cappuccino web development framework as a built in theme. We are going to take this awesome design concept and build it as a ready-to-use theme for jQuery UI. Since ThemeRoller is so powerful, we will use it as a starting point. This will give us a standard framework to follow including common classes, states and helpers. ThemeRoller also gives us an easy way to generate color schemes and images to match which is a huge time saver. After we have the core theme in place we can begin customizing each widget’s style while still inheriting from the base CSS. Then we will add some CSS3 magic to make it diamonds!

Statistics

Views

Total Views
4,543
Views on SlideShare
3,559
Embed Views
984

Actions

Likes
4
Downloads
47
Comments
0

9 Embeds 984

http://banzor.us 899
http://alexisperrier.com 36
http://speakerrate.com 22
http://webcache.googleusercontent.com 8
http://www.banzor.us 8
http://www.banzor.us 8
http://204.232.206.121 1
http://translate.googleusercontent.com 1
http://www.slashdocs.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Gray Theme: http://jqueryui.com/themeroller/?ffDefault=Arial,sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=3px&bgColorHeader=c4c4c4&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=100&borderColorHeader=a8a8a8&fcHeader=4f4f4f&iconColorHeader=898989&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=100&borderColorContent=a8a8a8&fcContent=4f4f4f&iconColorContent=616161&bgColorDefault=c4c4c4&bgTextureDefault=04_highlight_hard.png&bgImgOpacityDefault=80&borderColorDefault=a8a8a8&fcDefault=4f4f4f&iconColorDefault=ffffff&bgColorHover=c4c4c4&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=80&borderColorHover=a8a8a8&fcHover=4f4f4f&iconColorHover=ffffff&bgColorActive=c4c4c4&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=4f4f4f&iconColorActive=ffffff&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=4f4f4f&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

Theming jQuery UI Like an Aristocrat Theming jQuery UI Like an Aristocrat Presentation Transcript

  • • • • • •
  • • • • •
  • • • •
  • – – – – – – – – –
  • – – –
  • • • •
  • • • • – – – –
  • • •
  • • – –
  • • • •
  • • • •
  • • • – • –
  • • •
  • • • •
  • • • .ui-slider .ui-slider-handle { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
  • • .ui-state-hover { -moz-box-shadow: 0px 0px 8px #85b2cb; -webkit-box-shadow: 0px 0px 8px #85b2cb; box-shadow: 0px 0px 8px #85b2cb; }
  • • .ui-state-default { -moz-box-shadow: inset 0px 1px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px #fff; box-shadow: inset 0px 1px 0px #fff; } .ui-state-hover { -moz-box-shadow: 0px 0px 8px #85b2cb, inset 0px 1px 0px #fff; -webkit-box-shadow: 0px 0px 8px #85b2cb, inset 0px 1px 0px #fff; box-shadow: 0px 0px 8px #85b2cb, inset 0px 1px 0px #fff; }
  • • .ui-state-default { text-shadow: 0px 1px 0px rgba(255,255,255,0.7) }
  • • .ui-state-default { background: #c4c4c4 url(images/ui-bg_highlight-hard_80_c4c4c4_1x100.png) 50% 50% repeat-x; background: #c4c4c4 linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)); background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0))); background: #c4c4c4 -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF)"; }
  • • • •