I'm new to jQuery mobile. I was trying to change the default header color to a #013A6F.

<div data-role="header" data-theme="b">
  <h1> Wele</h1>
</div>

Any insight??

I'm new to jQuery mobile. I was trying to change the default header color to a #013A6F.

<div data-role="header" data-theme="b">
  <h1> Wele</h1>
</div>

Any insight??

• javascript
• jquery
• jquery-mobile

• How did you try to change it? What happened? Are you satisfied? – alexn Commented Jun 8, 2011 at 4:42
• I was looking into jQuery theme. I was wondering wheter in should overwrite in jQuery's theme css or should I overwrite in my style sheet?? – peterpan Commented Jun 8, 2011 at 4:44
• It should be in the css folder...at least thats where the 'default' colors are for regular jQuery themeroller – Trevor Arjeski Commented Jun 8, 2011 at 4:46

3 Answers 3

I think this would be your css.[Link here]
If so, do this.

.ui-bar-b h1{
    background-color: #013A6F;
}

You can actually easily add your own themes.

This: https://github./jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.css if a second set of themes from the project repository. To make add your own, you can title them anything you wish, provided you wish to title them a single letter a-z.

For instance, if you wanted to add your own theme 'x', it would look something like:

.ui-bar-x { .... }

The file linked about is an excellent example at what you have to play with. And, as naveen pointed out, it is the .ui-bar-? class you'd want to play with to change the header color.

There are a few third-party themes linked here, sadly a few of the links seem broken - they looked pretty nice when I originally saw it: http://forum.jquery./topic/custom-theme-28-2-2011

This is a class in jquery.mobile-1.0b1.min.css, here I have used the web gradient colors as #a2cbe7 & #6aaedb. You can replace them with your own color codes.

.ui-bar-b{border:1px solid #456f9a;background:#6aaedb;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #254f7a;background: #6aaedb; /* Old browsers */
    background: -moz-linear-gradient(top, #6aaedb 0%, #a1cae6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6aaedb), color-stop(100%,#a1cae6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #6aaedb 0%,#a1cae6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aaedb', endColorstr='#a1cae6',GradientType=0 );}