how do I customize header color in jquery mobile?

Question

I am working on a mobile site for a local company using jquery mobile.

Here is what I have so far

So far, it has turned out well but I'm running into a few problems.

1.
I do not know how to change the header color. I have tried different data-themes. I have tried to use a custom css style sheet. But nothing I do works.

edit - Ok, so apparently the head tag doesn't get a data-role like the other parts of the page. So i removed that. But i still need to figure out how to change the color. The css i write for it seems to get overwritten.

Here is the actual header

<div data-role="header" data-theme="c">

It seems like data roles for headers dont do anything

2.
The call us button has a 'href' tag that lets you dial to a phone. The problem is that ever since i put it in there, it creates a link style around the box that is pretty noticeable. Here is a screen shot

How do I stop that style from being made? I have already tried CSS to stop it.

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */

These work, but only on the expandable list at the bottom of the page. Why do they not work for all buttons?

Answer 1

Header background color

I made you a working example: http://jsfiddle.net/Gajotres/5VWuy/

.ui-page .ui-header {
    background: #112233 !important;
}

If you want to change it only on a specific page the replace .ui-page with an page id, like this:

#index .ui-header {
    background: #112233 !important;
}

Button problem

In this case don't wrap your a tag with button. A tag with data-role="button" is button so you can do it like this:

<a href="tel:8149413000" data-role="button" rel="external" data-theme="c" data-icon="custom-phone" data-iconpos="top">Call Us</a>

You can find this example in my previous jsFiddle.