6

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?

onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • 3 options: **1.** Edit the current CSS theme; **2** Check with browser development tools what properties are being set and override them; **3** Add a class to that div and apply your own CSS; – balexandre May 11 '13 at 14:06
  • it's a comment, not an answer, please. grow up! – balexandre May 11 '13 at 21:05
  • @onTheInternet not the right attitude at all, whilst the comment from balexandre may seem 'obvious' - to some it isn't and since you're having difficulty theming jquery mobile checking the obvious is worthwhile. – Ryan McDonough May 20 '13 at 14:45

4 Answers4

12

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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    I realized that Jquery mobile has a themeroller that i can just use. While this answer is very helpful, i have already solved the problem. Will upvote this though. Thank you. – onTheInternet May 11 '13 at 16:28
0

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;
}
gprathour
  • 14,813
  • 5
  • 66
  • 90
0

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>
Quick learner
  • 10,632
  • 4
  • 45
  • 55
0

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.

minimallinux
  • 139
  • 2
  • 10