Theming jQuery UI Like an Aristocrat

6,148 views

Published on

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!

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,148
On SlideShare
0
From Embeds
0
Number of Embeds
989
Actions
Shares
0
Downloads
53
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. • • • • •
    2. 2. • • • •
    3. 3. • • •
    4. 4. – – – – – – – – –
    5. 5. – – –
    6. 6. • • •
    7. 7. • • • – – – –
    8. 8. • •
    9. 9. • – –
    10. 10. • • •
    11. 11. • • •
    12. 12. • • – • –
    13. 13. • •
    14. 14. • • •
    15. 15. • • .ui-slider .ui-slider-handle { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
    16. 16. • .ui-state-hover { -moz-box-shadow: 0px 0px 8px #85b2cb; -webkit-box-shadow: 0px 0px 8px #85b2cb; box-shadow: 0px 0px 8px #85b2cb; }
    17. 17. • .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; }
    18. 18. • .ui-state-default { text-shadow: 0px 1px 0px rgba(255,255,255,0.7) }
    19. 19. • .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)"; }
    20. 20. • • •

    ×