CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobilejquery-mobile-button
onTheInternet
onTheInternet

Reputation: 7253

how do I customize header color in jquery mobile?

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?

Upvotes: 6

Views: 24465

Answers (4)

minimallinux
minimallinux

Reputation: 139

The above using .ui-page .ui-header in css file causes a reload of the original header color first before displaying the new color, it is far better just to use the theme roller at https://themeroller.jquerymobile.com/

Change your colors in the required classes and download the new css file. This will ensure smooth changes between pages.

Upvotes: 0

Quick learner
Quick learner

Reputation: 11467

It is actually like this the above answers are correct .. i just made an example to show you just create a <style> tag in <head>

like this

  <head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
    background: #5069A0;
}
</style>
</head>

then to use this 

<!DOCTYPE html>
<html>
<head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
    background: #5069A0;
}
</style>
</head>
<body>


<div data-role="page" id="pageone">
  <div data-role="header" class="ui-bar ui-bar-b">
  <h1><span style="color:white;">facebook</span></h1>
  </div>

  <div data-role="main" class="ui-content">
  <p>Welcome!</p>
  </div>

  <div data-role="footer">
  <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

Upvotes: 0

gprathour
gprathour

Reputation: 15333

In jQueryMobile 1.4 they have only two default themes, light and dark. But you can use the same class as mentioned in Gajotres's answer to change the background-color. It still works like a charm.

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

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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.

Upvotes: 12

Related Questions