JQuery UI and theming

Question

I downloaded JQuery UI and added the script to my solution, and with a small amount of code, I have a beautiful date picker.

However, I need to use my own theme from my css file. I have created the date picker as per the example code, but it has no style. That is, it appears over existing text. Is there a way I can assign a css style from my existing css file, to make the background of the calendar no be transparent, and use my colours?

limc · Accepted Answer · 2011-01-31 01:26:42Z

6

The easiest way is to generate the JQuery UI theme using the ThemeRoller to match your current theme. It's much better than you create it by hand since you will need to match all the CSS namings used by JQuery UI,

answered Jan 31, 2011 at 1:26

limc

40.3k22 gold badges106 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Craig Over a year ago

Thanks @limc - but then how do I assign the them to my Date Picker? I tried a test by creating a CSS class in my CSS file with the same class name used on my textbox (which triggers the Date Picker), but the class is probably only applied to the text box - not to the drop down date picker. How would I assign the theme to the drop down section of the date picker?

limc Over a year ago

It is not as straightforward as merely assigning the class name to the textbox or the date picker. JQuery UI uses a lot of components to build the Date picker, which is why I suggested you to rely on their ThemeRoller rather than you manually write one.

limc Over a year ago

Another reason not to rely on your own CSS is in case if you upgrade JQuery UI in the future, it is possible that the Date Picker component is implemented differently and your CSS that worked before may no longer work after the upgrade.

Joko Wandiro · Accepted Answer · 2011-01-31 03:12:59Z

5

You can add your CSS property background for your theming on the following line in file jquery-ui-1.8.6.custom.css :

.ui-datepicker { width: 17em; padding: .2em .2em 0; background: salmon;}

I change background color to salmon and you can set anything for your necessary.

answered Jan 31, 2011 at 3:12

Joko Wandiro

1,9872 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

JQuery UI and theming

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related