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 -->
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 -->
Share
Improve this question
asked Jul 23, 2013 at 14:37
DotDot
2791 gold badge9 silver badges21 bronze badges
5
- see jquerymobile./themeroller – svillamayor Commented Jul 23, 2013 at 14:45
- something like this jsfiddle/Palestinian/vGt2A? navigate to see the difference. here is another example jsfiddle/Palestinian/7bdPD – Omar Commented Jul 23, 2013 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 Commented Jul 23, 2013 at 15:12
- @Dot the tool lets you import the default themes and also create your own, so you can use both – svillamayor Commented Jul 23, 2013 at 15:20
- @svillamayor I have transferred the unzip file to my server. should i only transfer the zipped file? – Dot Commented Jul 23, 2013 at 15:30
3 Answers
Reset to default 4Working example: http://jsfiddle/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 */
}
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
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.