How to change a background color of jQueryUI Progressbar?
Im trying to use:
$('#progressbar div').css({backgroundColor: '#9CFF29'});
but no success :(
Anybody can help me?
Thanks!
The selector should be on the main <div> so just use #progressbar and to override the styling, use just background (since it also has an image defined as well), like this:
$('#progressbar').css({background: '#9CFF29'});
You can test it out here.
jQuery UI Progressbar plugin uses the
jQuery UI CSS Framework to style its
look and feel, including colors and
background textures. We recommend
using the ThemeRoller tool to create
and download custom themes that are
easy to build and maintain.
http://jqueryui.com/themeroller/
Make sure you are selecting the div. Are you able to change other properties of #progressbar such as width?
Related
I want to create a layout with a titled border just like in the Java application screenshot below:
Is it possible?
Does it have to be 100% like the image above? If not, you can try the Panel class with default (valo) theme, there's a sample with code at http://demo.vaadin.com/sampler/#ui/structure/panel
There is no layout which displays the same layout as you shown in image. However vaadin gives flexibility to play around its components look and feel. As #Jorge mentioned, you can have panel and then play around CSS to get the layout like you shown.
There is no ready to use layout like that in vaadin and even don't see the reason to have it one in core vaadin. if someone builds the add-on is different story.
I'm trying to find a way to use an existing jquery ui class for my altclass or use a background image from a theme. My purpose for this is so that I don't have to edit my altclass every time I change the theme. Has anybody achieved this?
jQuery Mobile has a fine collection of themes for buttons.
http://jquerymobile.com/test/docs/buttons/buttons-themes.html
However, I want a button with a red gradient in the background. I could just override the CSS for one button's theme directly, but is there way to do this without breaking jQuery Mobile's abstraction barriers?
In other words, can I add my own themes through the interface that jQuery Mobile offers?
Use the ThemeRoller at http://jquerymobile.com/themeroller/index.php
You can import the existing jQuery Mobile theme and then customize it. Note that if you have less than 5 themes, you need to edit the CSS yourself and specify the style for .ui-body-e because the error message uses it.
I'd like to provide a .png that renders as the background of a jQueryUI-based dialog object. This posting references the use of an 'overlay:' parameter but 'overlay' is not listed in the current documentation.
What's the current method to achieve this effect?
thx
You could use CSS to accomplish this. Just set a background-image: url(...) on the div you're making into a dialog (here's more about background-image).
Here's an example: http://jsfiddle.net/andrewwhitaker/S5pmw/
Edit: Just looking at the 1.6 code, it looks like you could specify CSS rules for the overlay that appears behind the dialog (if you specify modal). It doesn't control the actual background of the dialog itself, and it looks like this option was removed in 1.7(3). Here's a related jQuery forum thread about the option. Excerpt:
The overlay option was removed in
favor of defining styles in your
stylesheet. The overlay div has a
class of ui-widget-overlay.
So to accomplish the behavior the overlay option gave you, you just need to define CSS rules for ui-widget-overlay.
I am new to jQuery. I want to use the "ui-icon ui-icon-triangle-1-e" with a color that matches my application ,also I dont want use a differnt .png file with the color I want. Please help me get this done.
Your best option is to use a different PNG file, that's the only option for this really (that works cross-browser). However it's pretty easy to get the color you want, use the jQuery UI ThemeRoller and you can configure/download the exact colors you want in a theme, including the icons.