Over-ride CSS in jquery mobile

Question

My specific problem is that I'm trying to implement this in JQuery Mobile:

http://www.rwe-uk.com/blog/comments/ichat_like_speech_bubbles_with_css_3

What's happening is that I can see the page looking perfect for about half a second, then JQuery Mobile turns it all gray.

I guess the more general question is how can I get JQuery Mobile to leave part of a page alone?

I've Googled a lot on this, I've seen suggestions for using the Themeroller, but I can't see how I could use that to set these particular styles.

I've also tried using data-role="none" but that just seems to work on form elements.

EDIT:

Here's the code:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <link rel="stylesheet" href="http://www.rwe-uk.com/static/ichat_with_css3/style_5.css" />
  </head>
  <body>
    <div data-role="page">
      <div class="commentArea">
        <div class="bubbledLeft">
          Hi
        </div>
        <div class="bubbledRight">
          Hi there yourself
        </div>
      </div>
    </div>
  </body>
</html>

If I remove the jQuery Mobile script line it works fine.

Please post some sample code where this issue can be seen..

user700284
– user700284

2012-02-23 15:26:40 +00:00
Commented Feb 23, 2012 at 15:26 — user700284
– user700284, Commented Feb 23, 2012 at 15:26

Richard A · Accepted Answer · 2012-02-23 20:28:56Z

5

You could either modify the style of the page:

<div data-role="page" style ="background: transparent;">

Or add a custom class:

.ui-content-transparent{
    background: transparent !important;
}

--

<div data-role="page" class="ui-content-transparent">

See Example

answered Feb 23, 2012 at 20:28

Richard A

2,10015 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darryn.ten · Accepted Answer · 2012-02-23 18:25:14Z

0

The way I have achieved this is by loading the CSS in the following order:

Theme file from themeroller
The jquery.mobile.structure-1.0.min.css
My common overriding style
My platform specific overriding styles e.g. android.css or ios.css

With the stylesheets the order of loading is important.

When I'm overriding a style in stylesheet 3 or 4 I often need to use !important.

Remember to make sure you are targeting the final DOM layout with your overriding styles.

I hope this helps.

answered Feb 23, 2012 at 18:25

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

Collectives™ on Stack Overflow

Over-ride CSS in jquery mobile

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related