Need to make one button orange but theme overrides all attempts!
I'm using the classic JQM theme which is contained in mytheme.css.
- <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="mytheme.css" />
<script src="jquery.mobile/jquery-2.1.4.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
The relevant HTML looks like this:
- <div id="homePage" data-role="page" data-content-theme="b" data-theme="b">
<div class="ui-grid-solo">
<input type="button" id="my_id" class="alert" data-theme="e" value="My Button">
</div>
</div>
I've tried several things to change the color of my_id to darkorange including leaving out the data-theme and setting the .css as follows:
- #my_id .ui-page .ui-content .ui-btn .ui-btn-inner
{
color : black;
background :darkorange !important;
}
- #my_id .ui-btn {
background: #ffa500 !important;
background-image: -moz-linear-gradient(top, #ffa500, #ffa500) !important;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffa500), color-stop(1, )) !important;
color: black;
text-shadow: 0px 0px 0px ;
font-size: 40px;
border: none;
}
I've also tried changing the color via jquery and still nada
- $('#shooter').parent().find('.ui-btn-inner').css("background-color", "orange !important");
Everything else is perfect... just one button with a needed color change... So, what's the trick?