CODEWITHSUNDEEP
jquerycssjquery-ui
Emil L
Emil L

Reputation: 21071

How to support different jquery-ui themes

I am making a calendar component in jQuery which I want to be styleable with theme-roller themes and any of the available jquery themes (smoothness, ui-ligtness, ui-darkness etc.). Using the different css classes ui-widget, ui-widget-container, ui-state-XXX I have something that works ok. The problem is that the background for some of the themes ends up looking weird because of the backgrounds position.

An sample is available here: http://jsfiddle.net/Ddn3t/1

However, note that I can't realy use background-postion: bottom since if I change the theme I would need to alter that value to top instead.

For instance in this case: http://jsfiddle.net/Uasen/2

So I need a way to have the background be positioned properly for both cases.

Upvotes: 1

Views: 87

Answers (1)

Andrew
Andrew

Reputation: 13853

The state classes are for clickable button-like elements, not really for anything else. They are the issue. If you remove them then everything will display fine. You probably should also add the ui-widget class to the outer element. ie.

<div style="height: 400px;" class="ui-calendar-day ui-widget ui-widget-content">
<div class="ui-calendar-day-name ui-calendar-day-header ui-widget-header ui-helper-clearfix " style="top: 0px; ">Friday</div>
<div style="display: none" class="ui-calendar-day-number ui-calendar-day-header ui-widget-header" style="top: 0px; ">7</div>

​

@see Theme API

Upvotes: 1

Related Questions