JQuery mobile web app element theming using CSS?

So I'm making a mobile web app with jquery and I'm trying to make a custom theme using css within the html file. I'm gonna be using dropbox to distribute it.

I for example I do.ui-button {} in the style tag of my app but it's not working I want to change the color of the button and such. I want to do this with most of the elements like buttons and radio buttons, sliders, header, footer, text areas, ect.

Here's some of the code In a example app I made for this.
<style>
.ui-button {
Background-color: rgb(30, 60, 90);
}
.ui-content {
background-color: rgb(40, 60, 90);
}
.ui-header {
background-color: rgb(30, 60, 90);
}
.ui-footer {
background-color: rgb(30, 60, 90);
}
</style>

<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
Header
<div data-role="content">
<a data-role="button" href="http://www.google.com/">Google</a>
<div data-role="footer">
footer
</div>
</div>
</div>
</div>
</body>

I have a iPhone 5 if that helps.

The syntax for RBG background color is:
background: rbg(30, 60, 90);

If your style is a class and not an id, it would read as follows in your style sheet:
.ui-button {
background: rbg(30, 60, 90);
}
An id would read:
#ui-button{
background: rbg(30, 60, 90);
}

You determine style or id in the HTML of your page.
<div class="some class">content</div>
<div id="some id">content</div>

Add Comment