+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Customizing the Display of Lists

Customizing the Display of Lists

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:
    09 Dec 2016
    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