Set different colour for Jquery mobile navbar

Question

I currently have set data-theme a for my navbar, but I want to be able to set it to a different colour. how do I do this? the navbar is inside the header. How do I override jquery mobile's css?

 <div data-role="page">
 <div data-role="header" data-id="pagetabs"  data-position="fixed"> <!-- MyActivity Header-->
    <div data-role="navbar" data-iconpos="left">
        <ul>
          <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
          <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
          <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
        </ul>
    </div>
  </div> <!-- MyActivity Header End -->
  <div data-role="content">
   </div> <!-- MyActivity Content End -->
   <div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div> <!-- MyActivity Footer -->
  </div> <!--End of page -->

something like this http://jsfiddle.net/Palestinian/vGt2A/? navigate to see the difference. here is another example http://jsfiddle.net/Palestinian/7bdPD/ — Omar, Jul 23 '13 at 14:53
@svillamayor I have created a theme, but am having difficulties in integrating it together with what I currently have, I am also using jquery mobile's default themes want to be able to use them both — Dot, Jul 23 '13 at 15:12
@Dot the tool lets you import the default themes and also create your own, so you can use both — svillamayor, Jul 23 '13 at 15:20
@svillamayor I have transferred the unzip file to my server. should i only transfer the zipped file? — Dot, Jul 23 '13 at 15:30

Gajotres · Accepted Answer · 2013-07-24T08:09:02.657

Working example: http://jsfiddle.net/Gajotres/PMrDn/39/

HTML :

<div data-role="navbar" data-iconpos="left" class="custom-navbar">
    <ul>
        <li><a href="" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
        <li><a href="" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
        <li><a href="" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
    </ul>
</div>

CSS:

.custom-navbar ul li a {
    background: #67497a; /* Old browsers */
    background: linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important;
    background: -moz-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* FF3.6+ */
    background: -webkit-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* Opera 11.10+ */
    background: -ms-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67497a', endColorstr='#946ab1',GradientType=0 ); /* IE6-9 */   
}

.custom-navbar ul li a.ui-btn-active {
    background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important;
    background: #67497a; /* Old browsers */
    background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* FF3.6+ */
    background: -webkit-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* Opera 11.10+ */
    background: -ms-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5393C5', endColorstr='#6FACD5',GradientType=0 ); /* IE6-9 */       
}

score 2 · Answer 2 · answered Jul 23 '13 at 14:57

2

Override .ui-navbar a class:

.ui-navbar a {
  /* changes here */
}

Or make a custom class:

.ui-custom-navbar {
  /* changes here */
}

and then add it to <a> within .ui-navbar.

$('.ui-navbar a').addClass('ui-custom-navbar')

Demo

answered Jul 23 '13 at 14:57

Omar

32,302
9
69
112

I don't understand the long background url, can we not simple put in a hex value for the colour in the url and make it work? – Dot Jul 23 '13 at 15:11
@Dot I used a gradient background, you can use whatever you want. – Omar Jul 23 '13 at 15:13
I included this $('.ui-navbar a').addClass('custom-navbar'); in my javascript file onload. and added the style.. it doesn't seem to be working? :/ – Dot Jul 23 '13 at 15:24
Have you made a new class? @Dot – Omar Jul 23 '13 at 15:30

score 0 · Answer 3 · answered Jul 23 '13 at 14:55

0

One way would be to create your own top level class.

Example:

<body class="myclass">

Some CSS:

.myclass .classToOverride {
//some styles
}

Also, I notice in your code you don't currently have a class on your navbar. So you may need to add one.

answered Jul 23 '13 at 14:55

khollenbeck

16,028
18
66
101

Set different colour for Jquery mobile navbar

3 Answers3

HTML :

CSS: