I have a project that uses JQuery-UI. I recently found formee, which is a nice framework for building forms. One annoyance is that the formee submit button styling overrides the jquery-ui themed button style. How can I get all of the formee goodness but keep my jquery-ui button style? I realize I can edit the formee CSS to remove the button style, but I'm hoping to avoid that.
You can, as you said yourself, remove the offending CSS, which is what I would recommend.
Alternatively you can give the jQuery UI css classes that apply on the relevant button more specificity than the formee classes. This would be second best solution.
As a last case you could add !important; behind all CSS attributes in the classes for jQuery UI... I really wouldn't recommend this.
use this to bring front:
#your-div-id{
position:relative;
z-index:999999;
}
Related
I'm implementing a booking process into an already excising WP website. The website has a MailChimp plugin that uses jQuery UI and has a theme designated for that, this part is out of my hands to remove or change.
This affects my code in the booking process by overwriting my custom css (less) for jQuery Datepicker.
My question is how can I reset all the jQuery UI components that have a specific ancestor class (.odin)? So that only components below that class will be reset.
br.
If you must overwrite the css, as seems to be your case, simply use a higher specificity. Get your selectors from your element inspector of choice and add the added specificity of your wrapper class. .odin .datepicker td{ /* your rule */ }
.odin {
*
}
this is called clear hack, its not a good practice to do it. Check alternatives first.
I think the answer to your problem lies not in jQuery but in CSS. You need to have better, more specific css selectors which do not end up getting beaten out by the jQuery UI rules.
I find using this calculator helps!
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
This might be a basic CSS question: I have a site designed with well-defined CSS themes. I'm adding some controls (from jquery), but they have the style of their designers, not my site's. What is the easiest way (least amount of work) to make the inserted controls use the site's css rather than the styles of the control? Is there an easy way to map one set of classes/ids onto another? Or am I missing something basic about css?
I'm assuming you're using jQuery UI? If so, they have a ThemeRoller.
You can try to "map" things by defining your own widgets and the external ones at the same time as much as possible:
div.my_widget,
div.external_widget
{ border: 1px blue solid; }
How successful that can be depends heavily on your site's and the controls' structure.
As a general rule, rather change your own stylesheets to work with the control, instead of changing the control to work with your stylesheet. That way, you can easily integrate new versions of the control.
Most common way is to inspect the DOM structure of the controls you are adding, and see if you can use the classes applied to style it the way you want, typically be overriding the CSS selectors in place for the control, or by writing CSS for the control DOM structure from scratch.
I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.
Any tips?
It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.
.yui-tt .bd {
/* Styles here... */
}
I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.
If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option
skin : {defaultSkin: ''}
to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.
Also note, that IE6 doesn't recognize !important so it won't work for that browser.
Hope that helps.