locked
Can you style items in a ListView via CSS? (Updated for CP)

    Question

  • I'm mainly concerned with the animation of the ListView when you tap an item, there's an ugly black line I'd like to remove, and on mouse over there's a background color I'd like to remove. Image below shows the states.

    I found styles in the ui-light.css like:
    .win-listView .win-item.win-selected.win-hover {}

    ...but changing all these win-item things don't seem to affect background colours, etc. Any tips, or styles I should be overriding?


    • Edited by Harlequin Tuesday, March 6, 2012 4:46 PM Topic title change for CP
    Wednesday, January 25, 2012 8:59 PM

Answers

  • Hi Harlequin,

    Within your own .css page file add the following overrides. To ensure the override remains you can add !important on each attribute line, just before the closing ';'.

    /* remove focus shadow */
    .win-listView .win-item:focus
    {
        box-shadow: none; 
    }
    /* remove background color */
    .win-listView .win-item.win-hover
    {
        background-color: transparent;
    }

    Hope this helps!

    -Ed

     

    • Marked as answer by Harlequin Thursday, January 26, 2012 3:30 PM
    Thursday, January 26, 2012 6:39 AM

All replies

  • Hi Harlequin,

    Within your own .css page file add the following overrides. To ensure the override remains you can add !important on each attribute line, just before the closing ';'.

    /* remove focus shadow */
    .win-listView .win-item:focus
    {
        box-shadow: none; 
    }
    /* remove background color */
    .win-listView .win-item.win-hover
    {
        background-color: transparent;
    }

    Hope this helps!

    -Ed

     

    • Marked as answer by Harlequin Thursday, January 26, 2012 3:30 PM
    Thursday, January 26, 2012 6:39 AM
  • Good stuff, thanks. Never noticed that focus one in the ui-light .css :)
    Thursday, January 26, 2012 3:30 PM
  • Update: Looks like in the Consumer Preview it looks like you need to change this in order to remove the grey box shadow on hover.


    Before I think the win-listview/win-item used to do it, now it seems to be on the parent win-container.

    My example of removing the mouseover grey effect on ListView items:

    .win-listview .win-container:hover {
      background-color:transparent;
      outline-color:transparent;
      outline-width: 0px;
    }


    • Edited by Harlequin Tuesday, March 6, 2012 4:46 PM
    Tuesday, March 6, 2012 4:45 PM