CODEWITHSUNDEEP
htmlcssjquery-mobile
speedracer2003
speedracer2003

Reputation: 171

Formatting listview items color and text with CSS

I would like to format my listview item like the picture below but I am horrible with CSS. As you can see with my code below I have an image titled "menu_icon" but I don't want that and whenever I try to remove it the formatting goes crazy. As you can see, I would also like to change the gear color to green and keep the text area on both sides white. Thank you in advance =)

enter image description here

<html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <div data-role="page" id="page1">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
             <h1>My page</h1> 
        </div>

        <div role="main"  class="ui-content">
           <ul data-role="listview" data-inset="true">
              <li>
                 <a href="./menu_icon.png"></a>
                 <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
              </li>
              <li>
                 <a href="#"></a>
                 <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
              </li>
           </ul>
        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
           <h1>My page footer</h1>
        </div>
   </div>
</html>

Upvotes: 1

Views: 1193

Answers (1)

svlasov
svlasov

Reputation: 10455

Try something like this:

<style>
.ui-header, .ui-footer,
.ui-btn-icon-notext:after {
    background-color: #23B14D !important;
    color: #fff !important;
    text-shadow: none !important;
}
.ui-btn {
    background-color: #fff !important;
}
.ui-li-has-alt a:first-child {
    border-top: #FFC90F 8px solid !important;
}
.ui-li-has-alt a:last-child {
    border-top: #00A3E8 8px solid !important;
}
</style>

enter image description here

Upvotes: 2

Related Questions