jQuery Forum

Use the CSS, Luke!

(It worked yesterday...)

Hmm.. I hoped that there would be a simple parameter... since I'm a CSS novice I have no idea what to do and where to start.. am I really the first person with the problem described above?

You aren't going to make much headway with JQM if you do not learn CSS.

Browsers today have excellent tools for inspecting content and style, and for modifying and experimenting with styles on the fly. The use of Web Inspector or Firebug is essential to  success with JQM. They allow you to quickly figure-out how to write CSS overrides to get pages to look as you'd like.

If you aren't willing to learn CSS, then you should be willing to accept the appearance of JQM widgets as they come, "out of the box".

It would be impossible for JQM to provide "a simple parameter" (whatever that is?) for every possible variation in appearance that a user might like to make.

You want to change the background color of the search box, as I understand it. You can achieve this in the same you you can change the background color of any element on any webpage, with or without JQM - write a CSS override.

All you gotta do is remove the class "ui-bar-x" where X is your theme (a, b, c, d, e). See if you can do it, you can use CSS to override or you can use JavaScript to remove the class.

There are a number of ways of attacking this.

First, JQM has a theme system, which can be useful for making fairly general changes to appearance:

http://jquerymobile.com/demos/1.2.0/docs/api/themes.html

There are five pre-defined themes, A through E. You can generally apply these themes to any widget. But they don't offer a very fine-grained control over appearance. They do, however, provide for separate theming of the body and header ("bar")(if applicable) of most widgets.

So, the first thing you can do is to see if any of the pre-defined themes would be suitable to your needs. You apply a theme by adding, for example, data-theme="a" to a widget. The documentation will tell you where you can use data-theme. You will have to check for each type of widget.

If not, then you might want to use Themeroller to create your own themes.

If applying a theme won't do the job (and it often won't, because they don't offer a very fine-grained control) or perhaps you only want to change one thing on one particular widget, then you will need to write a CSS override. You will need to examine the CSS and determine what you need to override. The tools I mentioned above are invaluable for this.

You can fiddle to your hearts content in Web Inspector, and then copy the CSS to your override file once you are happy with it.

You should load your own CSS file containing overrides after the jQuery Mobile CSS.

Hi all,

thanks for your answers. In the meantime I've get familiar with WebInspector and I must say: this is a very cool tool! Thank you haga0054 - I've found the class ui-bar-x and removed in the css file the information regarding background, background-image and border. No the searchbox looks as desired.. perfect!

@watusiware: parameter was the wrong word - I meant attribute. Thank you for your tips & hints too!

Kind regards :)

I've found the class ui-bar-x and removed in the css file the information regarding background, background-image and border. No the searchbox looks as desired..

I hope you mean that you've overridden it in your own CSS file.

I wouldn't recommend editing jquery.mobile.css. You will have a daunting task ahead of you when you want to upgrade if you start editing it extensively.

Hi,

sorry for my late reply.
Thanks for the tipp and yes, I added it to my own css file :-)

Kind regards