is it true to say that jquery mobile's themeroller only gives one the options to define swatches for those finite set of elements that are on the themeroller screen (http://themeroller.jquerymobile.com/)? There is no way to use theme roller to define style of other html element, such as .
Well jqm mainly enhances the buttons and links. So it promotes all the elements to button types by wrapping them like list items and selectmenus. and these things you can easily change using themeroller. But if you want to style buttons differently then you'll have to use jqm classes and override their styling.
Common classes are
ui-btn : to override button styles
ui-body: to override background styles
ui-listview: to override list styling
ui-header/footer : to override header/footer
ui-content : to override content settings
ui-btn-icon : to override icons
ui-navbar : to override navbar styling
And other customizable options can be available on their demos site
JQM Demos
Related
What is the best way to override the angular-material theme...?
Is it a good practice to override the angular-material classes, for example:
.mat-form-field-infix {
background-color : #000fff;
}
or By creating own css classes for the Angular-material elements..?
By creating the own css classes, I'm facing the problem while selecting the inner child elements in the angular-material element.
Here I have created a custom class called "form-filter-select-wrapper",
but I want to change the styling for the element with the class "mat-form-field-infix", which is parent element to the "form-filter-select-wrapper" class.
How can I customize the properties for this class "mat-form-field-infix". Which I can not handle from the component level.
Please advice me the best way to override the Angular-material elements.
In my view, the best way to override a material theme is by creating a custom theme, as explained on the official documentation:
Theming your Angular Material app
Theming your custom component with Angular Material's theming system
The basics is to create a custom theme for the entire app, using default angular palettes/colors (available here), deciding between light or dark theme and letting it apply to the entire app.
Still, you may go much further, for example:
Creating custom color palettes based on hex color codes
Creating multiple themes and apply them to different components
Theming components based on parent class
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 need to format multiple containers (div) in a web page to look like a jquery-ui dialog.
The divs should automatically change if I change the theme.
So far I'm applying a jquery-ui tab to the div, but this don't have the same title bar and I need to add a lot of html for each div
Thanks In Advance
Just use the same css as jQuery UI and apply it to your divs.
Examples:
http://jsfiddle.net/Fyj7L/
http://jsfiddle.net/Fyj7L/1/
http://jsfiddle.net/Fyj7L/2/
How do I change the <a data-role="button"> button's background to my image? Also how can I add my custom icons on top of a button at left side?
Give the link a class and use CSS to change the background image.
<a data-role="button" class="my-button">
...
.my-button {
background-image: url('images/my-button.png') !important;
}
I would say that the recommended way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. There also additional HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (ui-icon, ui-btn-text, ui-btn-inner, etc).
Here is a tutorial that explains how to do advanced customization of the jQuery Mobile buttons. The articles shows how to do some basic customization, how to reset the jQuery Mobile theme, and how to turn the default button into anything you want:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/