How to adjust the display color of the header?

Question

I am new to jQuery mobile. I tried to change the default header color to # 013A6F.

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

Any understanding ??

Answer 1

I think it will be your css. [Link here]
If so, do it.

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

Answer 2

You can easily add your own themes.

This: https://github.com/jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.css , if the second set of themes from the project repository. To add your own, you can call them whatever you want, if you want to call them one letter az.

For example, if you want to add your own "x" theme, it will look something like this:

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

Associated with a file is a great example of what you have to play with. And, as Naven pointed out, is that .ui-bar-? the class you want to play with to change the color of the title.

There are several third-party topics here, unfortunately some of the links seem to be broken - they looked pretty nice when I initially saw this: http://forum.jquery.com/topic/custom-theme-28-2-2011

Answer 3

This is a class in jquery.mobile-1.0b1.min.css, here I used gradient colors on the Internet like # a2cbe7 and # 6aaedb. You can replace them with your 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 );}