I'd like to use several buttons on single page, but I want to have one group which has one style (e.g. red color) and other one with different style (e.g. gray background and red forecolor).
Is it somehow possible?
Yes you can. The way to do this would be to use the css scope option when downloading the ui - http://jqueryui.com/download/
Simply include the framework, and the include both stylesheets with the different styles. Make sure to apply different css scopes (e.g. .light-style and .dark-style).
Next, in your html, whenever you show the buttons, add the appropriate CSS scope to the parent element so that the correct style is picked up.
You can also manually combine the two stylesheets so that you save space. This is assuming you only want the two differing button styles only.
Read the theming section here: http://api.jqueryui.com/button/
You can always add extra class to change the style. So after calling button() on an element, you can:
$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");
and of course you need to define your own CSS class for this:
.ui-button-text-2 { color: red; }
This is of course clumsy, because you need to use two calls instead of a single button() call. But jQuery can be extended - you can simply create a $.themedbutton() method that accepts extra parameters...
Related
I'm using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a "part" to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?
Thanks in advance for help.
#Update
Turns out that as of today there is no way of having customized styling on scrollbars for vaadin-combo-box component. Element responsible for scrolling resides inside contents shadow DOM and is inaccessible from outside nor its going to inherit style implemented on the parent part [part="content"]
The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.
This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.
So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes
I'd like have default styles for UIViews.
Let's say that I want to have ALL UILabel with backgroundColor of color.light_gray.
Moreover I want to style my custom UIViews, e.g. for EVERY AttributedUILabel I want to have kerning value set to 2.
How to resolve that in RMQ?
In your RMQ application, you should have an ApplicationStylesheet class from which all your other stylesheets should inherit.
You could add a default_label method in this ApplicationStylesheet:
def default_label(st)
st.background_color = color.light_gray
end
To apply the style you would have to use it when you append your label
rmq.append UILabel, :default_label
Same goes for your AttributeUILabel, create a method in your ApplicationStylesheet and use the style when you append it to the view.
I suggest you go back to the RMQ stylesheets documentation, it shows everything you need to know about styling.
I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)
Can any1 tell me how to change the css style properties internally without changing custom.css file in jquery..so that the internal properties can effect the webpage..like changing properties of widgets and jquery-ui(ex:buttons,datepickers etc)...
You can just override the styles defined in the jquery style sheets in your own stylesheets. CSS stands for Cascading Style Sheets. The Cascading part means that one style can override another. You just have to place it further down the evaluation chain (or make it more specific, or any number of other ways).
You just create your own style sheet. Make sure it comes after the jquery-ui stylesheet in your page, and redefine the styles.
I would like to programmatically set a border around a Form component in Java. How can I do this without having to edit the css style sheet?
You could wrap the form with a Panel component, which has a border defined already. Otherwise, not much alternatives than just using CSS.
One option, if you wish to stay inside the server environment, is to use the CSSInject add-on and add the border using that (you still need to write CSS, but you can do it on the server in a Java file and not inside a regular CSS file).
Vaadin Flow — Style::set to specify CSS
In Vaadin Flow (Vaadin versions 10 and later), you can conveniently set CSS for a widget or layout programmatically. No need to edit separate CSS files, even though styling with CSS files is the recommended way.
On your widget/layout, call getStyle to retrieve the Style object.
On that Style object, call set to pass the name and value of your CSS property.
For example, I find setting a bright colored border on my nested layouts quite helpful for debugging.
myVerticalLayout.getStyle().set( "border" , "6px dotted DarkOrange" ) ;
You can see this in action with this screenshot on my Answer to another Vaadin question here: