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!

3. •
•
•
•
•

4. •
•
•
•

5. •
•
•

9. – –
– –
– –
–
–
–

10. –
–
–

13. •
•
•

17. •
•
•
–
–
–
–

21. •
•

22. •
–
–

23. •
•
•

24. •
•
•

27. •
•
–
•
–

28. •
•

30. •
•
•

32. •
•
.ui-slider .ui-slider-handle
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

34. •
.ui-state-hover
{
-moz-box-shadow: 0px 0px 8px #85b2cb;
-webkit-box-shadow: 0px 0px 8px #85b2cb;
box-shadow: 0px 0px 8px #85b2cb;
}

36. •
.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;
}

38. •
.ui-state-default
{
text-shadow: 0px 1px 0px rgba(255,255,255,0.7)
}

40. •
.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)";
}

42. •
•
•