CODEWITHSUNDEEP
javascriptmobilethemesjquery-mobile
Renato Aquino
Renato Aquino

Reputation: 814

JQuery Mobile default data-theme

Does anyone know how to set a default data-theme for jquery-mobile?

It looks like it´s necessary to set the data-theme for every component.

Even when you set the data-theme for the page data-role it is not respected by loaded lists and other components.

Am I missing some page of the manual?

Upvotes: 21

Views: 24238

Answers (4)

Smamatti
Smamatti

Reputation: 3931

Like Joel said, you have to overwrite the default values. At the moment it seems like there is no other way.

Take Joel's sample code: 

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Customize your custom-scripting.js

This is a sample code with a few more options you can configure:

$(document).bind("mobileinit", function () {

    // Navigation
    $.mobile.page.prototype.options.backBtnText = "Go back";
    $.mobile.page.prototype.options.addBackBtn      = true;
    $.mobile.page.prototype.options.backBtnTheme    = "d";

    // Page
    $.mobile.page.prototype.options.headerTheme = "a";  // Page header only
    $.mobile.page.prototype.options.contentTheme    = "c";
    $.mobile.page.prototype.options.footerTheme = "a";

    // Listviews
    $.mobile.listview.prototype.options.headerTheme = "a";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "c";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "d";  // List divider

    $.mobile.listview.prototype.options.splitTheme   = "c";
    $.mobile.listview.prototype.options.countTheme   = "c";
    $.mobile.listview.prototype.options.filterTheme = "c";
    $.mobile.listview.prototype.options.filterPlaceholder = "Filter data...";
});

There should be also other options like:

$.mobile.dialog.prototype.options.theme
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme

You might be able to find more settings here: http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

Upvotes: 30

jBeas
jBeas

Reputation: 926

For nested list views, to control the header theme you need to override the default option that is setting the nested header theme to blue.

To do this you simply add the following in between jquery loading and jquery.mobile.js loading.

example:

Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

So in "custom-scripting.js" put the following...

$(document).bind("mobileinit", function () {
   $.mobile.listview.prototype.options.headerTheme = "a";
});

Where "a" is the theme you want to be applied to nested headers..

Or you can just override it in the jquery mobile source, search for "headerTheme" it will be around line 5020

Upvotes: 9

Phill Pafford
Phill Pafford

Reputation: 85308

Themes a,b,c,d and e are all in the css file, if you want a custom theme you can use f-z, copy a and change it to your theme letter. add the data-theme="z" to your element

<body> 
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>

Upvotes: 7

naugtur
naugtur

Reputation: 16915

As far as I've seen you have to set a theme for a page div and it will be inherited inside.

Upvotes: 1

Related Questions