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

Forums / Designing with Sitefinity / Custom Styling for News View

Custom Styling for News View

7 posts, 1 answered
  1. Pierre
    Pierre avatar
    12 posts
    Registered:
    03 Jun 2008
    31 Aug 2009
    Link to this post
    Hi there,

    We are currently working on a site where we require some custom styling to be done to the 'News View' control.
    Basically it is for a page that has two columns
    :

    On the left it displays all "Latest News & Happenings" and on the right it displays "Upcoming Entertainment".

    The layout in each of the items in the columns must be the Title of the Item with text colour & size modifications applied, then the image scaled to be proportional and the body text of the item also with text colour & size modifications applied.

    So the page will then essentially have two news views next to one another flowing vertically with the custom css applied to it. I'm not quite sure how to apply styling to the internal Sitefinity controls, are there examples that I can have a look at?

    Thanks,
    Pierre.

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    31 Aug 2009
    Link to this post
    Hi Pierre,

    Here are the steps that you should follow.

    1. Map the external templates for NewsView control - ListPageMaster and ListPageDetails. More information at
    Working with presentation modes. If you want to have  custom styling for each control please use ItemListTemplatePath and SingleItemTemplate path of NewsView control. The properties are located under Advanced tab of the Control Designer, "Appearance" category.

    2. To add custom css to ContentView based controls as NewsView there are two options - add your custom css classes to the theme that styles your page. The better option is creating several templates and use CssFileLink control which has exposed public property for setting FileName ( the css file with your classes.)

    Bewow is a sample css for NewsView control.

    /* News List */ 
    .sf_newsList  
        margin: 0 0 20px
        padding: 0; 
        list-stylenone
    .sf_newsList li 
        margin: 0 0 20px
        padding: 0; 
        list-style-typenone
    .sf_newsList h2.sf_newsTitle 
        margin20px 0; 
        padding: 0; 
        font-size: 2.2em; 
        font-weightnormal
        line-height: 1.2em; 
    .sf_newsList .sf_newsDate  
        font-size: .9em; 
    .sf_newsList .sf_newsSummary  
    {    
    .sf_newsList .sf_newsSummary img  
        floatleft
        margin-right10px
        margin-bottom10px
    /* News tag list */ 
    dl.sf_newsTagList  
    dl.sf_newsTagList dt, dl.sf_newsTagList dd 
        displayinline
    }/* Comments List */ 
    .sf_contentComments 
        margin: 3em 0 1em; 
        padding: 0; 
    .sf_contentComments .sf_commentsList  
        margin: 1em 0; 
        padding: 0; 
        list-style-typenone
    .sf_contentComments .sf_commentsList li 
        margin: 0 0 10px
        padding: 0; 
        list-style-typenone
    .sf_contentComments .sf_commentAuthor 
        margin: 0; 
        padding: 0; 
    .sf_contentComments abbr  
        font-size: .8em; 
    .sf_contentComments .sf_commentsList .sf_commentAuthor strong  
        font-size: 1.1em; 
    .sf_contentComments .sf_eventSubTitle, .sf_contentComments legend 
        margin: 0; 
        padding: 0; 
        font-weightnormal
        font-size: 1.4em; 
    /* Event */ 
    .sf_contentComments .sf_contentCommentForm  
        margin: 0; 
        padding: 0; 
        border: 0; 
    .sf_contentComments .sf_contentCommentForm ol  
        margin: 0; 
        padding: 0; 
        list-style-typenone
        font-size: 1em; 
    .sf_contentComments .sf_contentCommentForm li  
        margin: 0 0 1em; 
        padding: 0; 
        list-style-typenone
    .sf_contentComments .sf_contentCommentForm label 
        displayblock
    .sf_contentComments .sf_contentCommentForm .sf_commentsValidator strong 
        font-weightnormal
        displayblock
    /* Editor in comments tools toggle */ 
    .formattingOptionsToggleBtn { 
        displayblock
        text-alignrightright
        outline-width: 0;    
    .reToolbarWrapper  
        visibilityhidden
    .formattingOptions .reToolbarWrapper  
        visibilityvisible
    /* 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.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Answered
  3. Pierre
    Pierre avatar
    12 posts
    Registered:
    03 Jun 2008
    08 Sep 2009
    Link to this post
    Hi there Ivan,

    Thanks a lot for your reply. Much appreciated. :)

    Have a great day,
    Pierre.
  4. Tim
    Tim avatar
    10 posts
    Registered:
    09 Nov 2007
    02 Oct 2009
    Link to this post
    Where does the news CSS file ?  I've looked high and low and cannot find it.  (Sitefinity 3.6 )

    is see that the generated News items have class tags like sf_newstitle, but where is the CSS file where is the cSS file where that class is defined ?
  5. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    02 Oct 2009
    Link to this post
    Hello Tim,

    The news control styles, and in fact the styles for all of Sitefinity web controls have been embedded into the dlls. In order to modify the control templates for Sitefinity web controls you will need to download the external templates archive from your Client.Net account. For more information on this topic I would encourage you to take a look at the following articles:
    Introduction to ControlsConfig file
    Mapping a control to use external template
    Mapping multiple templates of control

    Once you have gained better understanding on how to map controls to use external templates you will need to make the News View control use the external templates. The files you will need to modify are ~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx and ~/Sitefinity/ControlTemplates/News/Details.ascx. What you should do with those files is to change the CssFile link to point to your custom css files:
    <telerik:CssFileLink ID="CssFileLink1" FileName="~/Path to your style sheet"  Media="screen" runat="server" /> 

    Then you should map the control to the templates using the following view settings in the ControlsConfig file:
     <viewSettings hostType="Telerik.News.WebControls.NewsView"
          <additionalTemplates> 
            <!--Provides user interface for displaying a list of news items in the NewsView control for the News module.--> 
            <add key="ItemListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx" /> 
            <!--Provides user interface for displaying a single news item in the NewsView control of the News module.--> 
            <add key="SingleItemTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx" /> 
          </additionalTemplates> 
    </viewSettings> 

    For your convenience I am sending you as an attached file the default CSS styles for the news public controls. This will save you some time from building the styles from scratch.

    I hope this will answer your question. If you feel that you need more assistance, you are always welcome to contact us.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Richa
    Richa avatar
    69 posts
    Registered:
    04 Jun 2009
    05 Jan 2010
    Link to this post
    Sitefinity 3.7 - Which ascx do i need to grab from external templates for tags list control?
  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Jan 2010
    Link to this post
    Hello Richa,

    The control template for the Tag List control is located in ~/Sitefinity/ControlTemplates/Generic_Content/TagList.ascx. The common layout for the tag list control can be found in this KB article

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
7 posts, 1 answered