CODEWITHSUNDEEP
jquerycsshtmljquery-mobileoverriding
Lorenzo B
Lorenzo B

Reputation: 33428

Overriding jQuery Mobile CSS Structures: A rule of thumb

I'm pretty new to jQuery Mobile and as I understood it includes two different css parts: one is for themes and the other is for structure.

If you need to style a specific component you can take advantage of Theme Roller (or just create your own) and then specify the theme like data-theme="myTheme". On the contrary the structure allows to manage how elements are arranged, the layouts, etc. It's shared among all elements.

Base on this, I would like to know if it's possible to follow some rules for overriding in the correct manner the structure of the elements whenever needed. In particular, my approach is to find the css structure linked to a specific element, copy it and paste in my custom css structure. Obviously, in this way I could impact the structure of the other elements that don't need that custom structure.

So, what could be the correct way to achieve this?

EDIT

Based on @Gajotres's answer.

Where does .custom-btn come from? I think it's necessary to prevent other buttons to be styled with that color. Am I wrong? But in your snippet the button does not have that class.

If I open the theme css file provided by jQuery Mobile I can see a structure. What's the difference with the one contained in the structure css file?

Upvotes: 2

Views: 2245

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Intro

jQuery Mobile has 3 css files. I will write about this topic using jQuery Mobile 1.3 as a reference point.

CSS files differences

First CSS file, also a main one is : jquery.mobile-1.3.2.min.css

It holds jQuery Mobile structure and theme styles

Second CSS files is only jQuery Mobile structure file and it holds CSS needed to construct page and widget structures: jquery.mobile.structure-1.3.2.css

Third one holds only theme styles and it can be used to create new swatches: jquery.mobile.theme-1.3.2.css

Theme vs Swatch

This is next thing you need to understand. jQuery Mobile has only 1 theme but several swatches.

Swatch can be changed with data-theme="" attribute. Don't ask why it isn't called data-swatch="".

If you want to find out more about this difference then take a look at my other answer.

CSS Overriding

First thing you need to have is a tool that will show you jQuery Mobile HTML and CSS structure.

For Firefox browsers use Firebug plugin for real time HTML / CSS manipulation. It will give you a ability to see enhanced page markup, change CSS on the fly (much easier if you want to see what will happen when changes are applied without doing it manually) and copy inner HTML structure.

Chrome also has a firebug plugin but you should steer clear of it. It is a much much lighter version of Firefox firebug and at the same time Chrome has an excellent built tool called ”Developer tools” . It can be easily invoked with CTRL + SHIFT + I combination. Macintosh users can open it with this combination: Command + Option + i .

My final advice would be stick with a Chrome developer tools, Firebug plugin is known for been extremely resource hungry.

with this in mind you need to know another thing. What you can see as a basic jQuery Mobile page architecture here:

<div data-role="page">
    <div data-role="header">
        <!-- Inner content -->
    </div>
    <div data-role="content">
        <!-- Inner content -->
    </div>
    <div data-role="footer">
        <!-- Inner content -->
    </div>
</div>

is not a final page result. Just after pagecreate event (and before pageinit event) jQuery Mobile is triggering HTML markup enhancement process. So final result will look more or less much different.

Lets look at a jQuery Mobile button example, before enhancement it looks like this:

<a href="#" data-role="button">Link button</a>

After enhancement it looks like this:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Classic HTML button</span>
    </span>
    <input type="button" value="Classic HTML button" class="ui-btn-hidden" data-disabled="false"/>
</div>

That why we need additional tools so we can see final HTML structure.

With this can can proceed further.

If you want to override jQuery Mobile CSS definitions you will need to learn to use !important. While this is usually big NO NO we cant do this without it.

Lets say we want to change button text color (from a previous button example) we would do it like this:

.custom-btn .ui-btn-inner .ui-btn-text {
    color: #013301 !important;
}

There's another thing, you can always change original jQuery Mobile mobile structure but I would advise you against it.

If you want to find even more about this topic take a look at my blog article where I am discussing this topic (with working jsFiddle examples).

Last but not least

This answer can also be found here + working examples, to be more transparent it is my personal blog.

Upvotes: 5

Vladimir
Vladimir

Reputation: 387

If you know how css selectors priority works, you can do it easy. For example: 

.class a {

}

to override this property you can use

body .class a {} or div.class a {}.

In the same way you can override existing chains that was made with jQuery Mobile.

Upvotes: 0

Related Questions