Update your jQuery UI theme

themeroller

Whenever you need to add a date picker to a form control or other user interface actions, effects or widgets, jQuery UI is what you are looking for.

With the download builder you can pick up the components you need, you can even choose a theme of your choice. If none of those suit your needs there’s the themeroller tool which allows you to customize the colors, fonts and many more properties.

After you created your own theme you might want to change your style. Or after an update of the jQuery UI library you probably want to recreate your theme in order to make it compatible with the new version.

Let’s have a look at a sample theme. From the default values the border-radius has been changed to 0px, the font has been made smaller and the title background was changed.

jquery-ui-dialog

All these customizations are gone after an update but the developers of the themeroller have their solution already put to the stylesheets that you downloaded. If you open one of them you’ll see a link in the header.

/*! jQuery UI - v1.10.3 - 2013-07-06
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=0px&bgColorHeader=%23cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=%23aaaaaa&fcHeader=%23222222&iconColorHeader=%23222222&bgColorContent=%23ffffff&bgTextureContent=diagonals_medium&bgImgOpacityContent=75&borderColorContent=%23aaaaaa&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=%23d3d3d3&fcDefault=%23555555&iconColorDefault=%23888888&bgColorHover=%23dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=%23999999&fcHover=%23212121&iconColorHover=%23454545&bgColorActive=%23ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=%23aaaaaa&fcActive=%23212121&iconColorActive=%23454545&bgColorHighlight=%23fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=%23fcefa1&fcHighlight=%23363636&iconColorHighlight=%232e83ff&bgColorError=%23fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=%23cd0a0a&fcError=%23cd0a0a&iconColorError=%23cd0a0a&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px&zThemeParams=5d000001000306000000000000003d8888d844329a8dfe02723de3e5701fa198449035fc0613ff729a37dd818cf92b1f6938fefa90282d04ae436bb72367f5909357c629e832248af2c086db4ab730aa4cced933a88449eca604ecf7f3b23d47f58a712d809b6088edfb34ad39fdc365386d0fa05a1ac3ecd320d2c989729f79ebdc6c6c1efbdad4c8411d498f009ffe951077ff4decb4d45fbc4214e7d404d021bb1e93a9f1499b0377bc7ba4f184c27177397cf7144d7a728ea555365cedba7cf3950fd611657cc6a18411ddece693934049ebe8c202b12122a680d142e12bbde07f8e4c592a17650de00d8382e23772853265a4b4d658dc9f7fbef1335436f37bec386cc8c98fc88f2d5bc9a3186cbac52445528d052c0e5dcdeaa2831c252c8fa751c1927b70267b72ea462541a2823bc782b24f3a373cde44dc453762f6b2bbe8527d601470e7cb8e46420a0f776a0791cd26b4b0fc1b15fc3a5b5c63fb63fd8d6a97a5b3d591316fc12c62e95935c5e881e2fb768136ad8cb96b9f2e65c2a1f8b6f1fe8788954e004cfc523b69711dd8dd2d5b82573880dd10011595b18df4428f57e3d5f48c68cb84c614ce7a910950b6fd88a1d8b683caa35a810f7aef86e04d37a4eefa31887b1a165573b6b0d01575a3877a3e473c3d65b30536fee52124
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */

All you need is simply copy and paste the link jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-se… from the fourth line to your address bar and reload your old settings.

Note

In rare cases the link doesn’t work correctly. Don’t panic, describe your problem here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>