CODEWITHSUNDEEP
csshtmljquery-mobile
Jomia
Jomia

Reputation: 3404

Html5 - Css styles are overriden by jquery mobile style

I am using html5, css, jquery mobile to develop some application. But the html elements and css are overridden by jquery-mobile default style sheet (jquery.mobile-1.0.css).

How can i overcome this problem? I just want to use my style to my page. For example If I give bgcolor="red" in body tag, it will not work..

Please give me some suggestions....

Thanking you....

Upvotes: 0

Views: 5628

Answers (4)

glimmer
glimmer

Reputation: 626

JQuery Mobile creates sub classes of the body style so to target the body background you need to be more specific.

Add adjustments to you CSS file which is declared after the JQM CSS file.

You can target each theme body background by using the following:

.ui-body-a,
.ui-overlay-a {
/* green 4FFF19 ellipse */
    background-image: -webkit-gradient(radial, center center, 0, center center,     497, color-stop(0, #4FFF19), color-stop(1, #264C73));
    /* Webkit (Chrome 11+) */ 
}

This targets theme a for example. That took a bit of sweat to learn.

By using this, you are able to create radial gradiented backgrounds etc which the JQM theme roller does not provide for, a good page to create the CSS for various radial gradients is microsoft page of all places: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html.

Good Luck.

Upvotes: 0

Paul
Paul

Reputation: 9022

bgcolor="red" is not CSS but an HTML attribute.

Alter your website to load your custom CSS file after the jQuery mobile CSS. In your custom CSS file declare your styles, e.g. like:

body { background-color: #f00; }

Upvotes: 0

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4368

Instead of including your style.css at first, load that at last

like

<link href="query.mobile-1.0.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318508

Use CSS and if necessary mark attributes as !important.

body { background-color: #f00; }

If that doesn't work, e.g. because another selector from the jQuery Mobile CSS overrides it, use !important:

body { background-color: #f00 !important; }

The precedence rules are explained here: http://www.w3.org/TR/CSS21/cascade.html#specificity - however, usually simply testing if your rule already works or if it needs !important is sufficient.

What you certainly should do is including your stylesheet after the jQuery mobile CSS. This gives equally-weighted rules in your stylesheet a higher priority even without !important.

Upvotes: 5

Related Questions