More in this section
Forums / Designing with Sitefinity / Customizing the Display of Lists

Customizing the Display of Lists

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
2 posts, 0 answered
  1. Armysniper
    Armysniper avatar
    126 posts
    Registered:
    03 Mar 2005
    21 May 2009
    Link to this post
    What styles are used to set the display of Lists in SiteFinity?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    21 May 2009
    Link to this post
    Hello Armysniper,

    By default the Lists control is styled by the theme css. You can create a custom styling of this control using css.

    Here is a sample of the css classes:

    * Simple List */  
    .sf_simpleList, .sf_pageList, .sf_expandedList, .sf_expandableList, .sf_anchorList  
    {  
        margin: 0 0 20px;  
        padding: 0;  
        list-style-positionoutside;  
    }  
    .sf_simpleList li, .sf_pageList li, .sf_expandedList li, .sf_expandableList li, .sf_anchorList li  
    {  
        margin: 0 0 10px 25px;  
        padding: 0;  
    }  
    .sf_listTitle   
    {  
        margin20px 0 10px;  
        padding: 0;  
        font-size: 1.35em;  
    }  
    .sf_ItemTitle   
    {  
        margin: 0;  
        padding: 0;  
        font-size: 1.8em;  
        line-height: 1.2;  
    }  
    .sf_listItemTitle, .sf_listItemTitleexp  
    {  
        margin: 0;  
        padding: 0;  
        font-size: 1.2em;  
    }  
    .sf_listItemBody   
    {  
        margin: 0 0 10px;  
    }  
    .sf_controlListItems  
    {  
        margin: 0;  
        padding: 0;  
        font-size: .9em;  
    }  
    .sf_backToList   
    {  
        margin: 0 0 20px;  
        padding: 0;  
        font-size: .9em;  
    }  
    /* Pager */ 
    ol.sf_pager   
    {  
        margin10px 0;  
        padding: 0;  
        width: 100%;  
        floatleft;  
        list-stylenone;  
        clearboth;  
    }  
    ol.sf_pager li  
    {  
        margin: 0;  
        padding: 0 10px 0 0;  
        widthauto;  
        floatleft;  
    }  
    ol.sf_pager li a  
    {  
        padding3px 5px;  
    }  
    ol.sf_pager li a[disabled="disabled"], ol.sf_pager li a.sf_PagerSelItem  
    {  
        color#666;  
        text-decorationnone;  
        cursordefault;  


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
2 posts, 0 answered