CODEWITHSUNDEEP
jquery-mobile
bmurmistro
bmurmistro

Reputation: 1080

How do you change the background color of a jquery mobile list view 1.40?

I'm having trouble changing the background on a list view in jqm... I can't change it to tranparent. What is the jqm class inheritance structure for this?

Upvotes: 0

Views: 2648

Answers (1)

imaginethepoet
imaginethepoet

Reputation: 864

I had a lot of problems with this. There are some high level class inheritances to overcome and they are not easily found. Here is an example with jquery mobile 1.40. This is a sample allowing you to create a fully custom listview.

The trickiest ones are the ones that deal with the first-child and the button li.ui-first-child a.ui-btn - it took me a few hours to track this done. Hopefully this helps others as 1.40 is now final.

The following example is a very common necessity creating a custom menu on an overlay panel.

        <ul data-role="listview" class="primary-menu">
        <li data-icon="false">
  <a href="#product" class="ui-btn ui-nodisc-icon ui-btn-icon-left ui-icon-myicon" >
       View Products </a>
        </li>
     </ul>




    /* Menu Classes */

.ui-btn-close-panel {
    background-color:#b4316c !important;

}


ul.primary-menu {
    margin-top:10px;
    border-top:none;
}

ul.primary-menu li a{
    font-size: 1em;
    line-height: 1.3;
    color:#ffffff !important;
    font-family: 'ramblabold', Arial, sans-serif;
    background-color:transparent !important;
    border-bottom:1px solid #f2e3ea !important;
    background-image:none !important

}



ul.primary-menu.ui-listview  li.ui-first-child a.ui-btn {
    color:#ffffff !important;
    background-color:transparent !important;
    border-bottom:1px solid #f2e3ea !important;
    background-image:none !important
}


ul.primary-menu.ui-listview  li a.ui-btn {
    color:#ffffff !important;    
    background-color:transparent !important;
    border-bottom:1px solid #f2e3ea !important;
    background-image:none !important

}

Upvotes: 1

Related Questions