Wondering if anyone knows a way to combat this shortcoming.
I use jQuery UI buttons for all of my button actions and the stock icons are a tad boring and I much prefer using an icon set from the twitter bootstrap.
before I go any further here is how I'm styling the buttons:
$('#juiBtnLocked').button({
disabled: true,
icons: {
primary: "ui-icon-locked"
}
});
it seems that the icons property only accepts jquery ui css styles, which I don't know why that should matter as the value provided is the full css name from the css file so logically it should technically accept ANY css rule given.
my question is, has anyone successfully got another css sprite code to work with the buttons?
to answer the question on why I don't just use the twitter buttons, its because that's breaking the jquery ui buttons and I use too much of the jquery ui toolkit to ditch it. If twitters dialog was more robust, I'd skim the jquery ui a bit, but its too limited for my needs.
You could simply override the styling for that class using CSS.
.ui-icon-locked {
background: url(myimage.png) no-repeat 0 0;
}
ui-icon-locked is not a CSS rule. It is just a hook for a HTML class. The default rules for the styles (including the icons) are stored in jquery-ui.css in the directory of the theme you are using.
For example, in the jquery-ui.css of the base theme of 1.9.1 you can find these:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
...
.ui-icon-locked { background-position: -192px -96px; }
what bažmegakapa said is a good answer, which is why I marked it as the answer, but I found another way to do it that allows me both usages. I'm writing it here so people know another way to do it.
with twitter bootstrap, you have button CSS and then you have button js code that's similar to that of jquery ui.
all I did was took out the js code from their buttons and just use the css rules to style my buttons. now jquery ui is happy and so am I.
I noticed this same approach will work on a few other things within the twitter bootstrap.
This actually was a better solution than how I was doing it as its now all html controlled compared to making a button element and using jquery ui to style and mold it, which is a bit overkill I suppose.
Related
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.
The jQuery UI dialog has a dialogClass option, which is nice, since the dialog is nested directly within the document <body>. However when setting the modal option to true, a ui-widget-overlay div is also rendered directly within the body (as a sibling of the dialog div).
Is there a way to, in effect, apply an overlayClass when opening a jQuery UI dialog with modal: true?
I know we could apply custom css to the overlay by giving the <body> a class attribute, or by overriding the .ui-widget-overlay class directly. I'm looking for a solution that would make a css definition like the following work:
.my-custom-class.ui-widget-overlay {
opacity: .5;
}
Actually there is a really simple way to do this using the CSS.(So long as you downloaded the jQuery UI library). There should be a jquery style sheet entitled: "jqGrid-custom.css"
Simply go into the overlays section and adjust this line:
.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }
There is no option for this. Looking at the source, there's not an easy way to jocky it in there either. For reference, here's the bit that adds the class:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
You likely would be best to just customize / update your css to override / extend the default stylings.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.
I'd like to have the images of a playing card displayed with CSS. But it would be great if there was a templating language that could set up a style like:
.playing-card-(.*) {
width: 30px
height: 40px
background-image: "/images/cards/$1.gif"
}
Does such a thing exist?
I'd love for this to exist but where I've had to do simular tasks I've had to rely on the server side to write the background-image as an inline style or use JS to do it (eg if I'm loading the data via AJAX).
I don't know if there is any CSS technology that will do this for you. Though it's not ideal, you can use jQuery to achieve this:
I would start by assigning a common class to each card "cards", then using jQuery to iterate through each item, assigning the appropriate CSS to the element.
$('.cards').each(function(index,element) {
$(element).css('background-image','url(images/cards/'+index+'.gif)');
});
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.