If you have a comment on this topic, contact Aptify Documentation. If you want to return to the Aptify Community Site, please click here.

Modifying the Theme of the Button Active State in Aptify Mobile for Members

The active state for each button has already been set by the theme. However, JQuery Mobile defaults to the JQM library CSS. To make sure JQM uses the same active state as the one designed in the theme, AMM has over-written active button state in the aptify.mobile.css (styles/aptify.mobile.css). To modify the button active state:

  1. Locate .ui-btn-active in styles/aptify.mobile.css
  2. In following code, edit the Hex-color codes for each background-image declaration and extension (-moz, -webkit, -ms, -o and linear-gradient).


    .ui-btn-active{ 
     background-image: linear-gradient(bottom, #C34D03 0%, #FCBB86 100%); 
     background-image: -o-linear-gradient(bottom, #C34D03 0%, #FCBB86 100%); 
     background-image: -moz-linear-gradient(bottom, #C34D03 0%, #FCBB86 100%); 
     background-image: -webkit-linear-gradient(bottom, #C34D03 0%, #FCBB86 100%); 
     background-image: -ms-linear-gradient(bottom, #C34D03 0%, #FCBB86 100%); 
     background-image: -webkit-gradient( 
     linear, 
     left bottom, 
     left top, 
     color-stop(0, #C34D03), 
     color-stop(1, #FCBB86) 
     ); 
     background-color: #c34b03; 
     box-shadow:inset 0px 0px 7px #a7551f; 
     color:#333333 !important; 
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}



  3. Also, add the fallback color for background-color for Windows Phone 7

    1. Locate .ui-btn-up-h in styles/aptify.mobile.css
    2. Change the hex-color value in the background-color.

      This will add a fallback, for all devices that don't support gradients.

     

Copyright © 2014-2017 Aptify - Confidential and Proprietary