how do I customize header color in jquery mobile?


Tags: jquery,html,css,jquery-mobile,jquery-mobile-button

Problem :

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

Here is what I have so far

ATS Mobile

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
ImageShack

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?



Solution :

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.


    CSS Howto..

    How can i auto rotate this carousel

    How can I get IE8 to accept a css :before tag?

    Ionic 2 - how to make ion-button with icon and text on two lines?

    How to select this td element?

    How to optimize CSS file for speed

    Parsing erb within erb in a view. How to add CSS class?

    CSS: How to remove enter from HTML?

    How to dynamically import javascript and css files

    How to make a File Sharing website [closed]

    How to remove critical CSS from the main.css file

    How do I make LessCSS output css which is then uploaded to webserver

    How to increase or decrease space between two lines in same paragraph?

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    How to add a CSS table next to my google map?

    CSS: How to clear line-through for an element in a table row?

    How to calculate padding-top in % of the given div relative to its parent div

    how to change negative sign position css

    How to display a box of color beside a table row using CSS?

    How to Change the hover image in CSS

    How to apply CSS selector on Select Option Child

    How to manage clashing third party CSS

    How to animate two divs in html / css to make a semi-circle transition?

    How to check the CSS hyphens in effect using Chrome developer tools?

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    How to make div size bigger?

    How do I make my elements occupy the width of their “max-width” specification?

    How to horizontally center Twitter Bootstrap grid elements

    How to break a table with CSS diagonally or vertically?

    how to overwrite global css to div tag which contains different html tags with different style

    How do I keep parentheses of SASS / SCSS mixin?