Styling jQueryMobile 1.4 buttons as 1.3

Question

I upgraded to JQM 1.4, but I liked the theme of 1.3 much better. There is a classic theme in 1.4, which has the same colors. But the navigation buttons in the corners (header) look completely different.

Is it possible to reproduce the same look for those buttons in 1.4?

Answer 1

It is hard to get it exact as jQM 1.3 enhanced buttons using nested spans which are no longer there in 1.4. However, with a little CSS you can get pretty close. Given a header with buttons:

<div data-role="header"  data-theme="b">
   <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left"> Home </a>
    <h1>Theme B</h1>
  <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> Contact Us </a>
</div>

Assign a new class to the buttons (btn_round in my example) and then create the following CSS:

.btn_round
{
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

    -moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}

This adds the gradient background, rounded corners and shadows that were present in 1.3.

Here is a working DEMO

NOTE: the demo includes CSS for both the dark theme and the light theme. Tweak the CSS to get your desired look.