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

Forums / Designing with Sitefinity / News View Control

News View Control

6 posts, 1 answered
  1. Daniel
    Daniel avatar
    62 posts
    Registered:
    20 Apr 2009
    05 Nov 2009
    Link to this post
    Hi Support,

    I have created a custom theme for my sitefinity website I have managed to implement this across the website and seems to be working ok except for one aspect!

    I have added a news view control but I dont know how to reference this in the skin file to apply a skin to it.

    Any help would be greatly appreciated

    Thanks Dan
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    05 Nov 2009
    Link to this post
    Hello Daniel,

    NewsView control does not expose Skin property. You can add your css classes to the style sheet of the theme

    example:

    /*-------------------------------------News---------------------------------*/
        
    /*----------newslist-----------*/
            .newslist {
                list-style:none;
                margin:0;
                padding:0;
                }
            .newslist li {
                margin-bottom: 20px;
                border-bottom: 1px dashed #ededed;
                }
            .newslist p.summary {
                margin:0;
                font-size: 0.9em;
                }
            .newslist h4, .newslist h5 {
                margin: 0;
                padding: 0;
                font-size: 1.0em;          
                }
            .newslist h5 {
                font-weight: normal;
                }
            .newslist span.date {
                font-style: italic;
                font-size: 0.8em;
                }
            .newslist a.more {
                font-size: 0.8em;
                }
     
            /*---------singlenews---------*/
     
            .singlenews h2 {
                font-size: 1.5em;
                margin-bottom: 0;
                }      
            .singlenews h3 {
                margin: 0;
                padding: 0;
                font-weight: normal;
                font-size: 0.9em;
                }      
            .singlenews span.date {
                font-style: italic;
                font-size: 0.8em;
                line-height: 3em;          
                }
            .singlenews p.summary {
                font-weight: bold;
                font-size: 0.9em;
                }
            .singlenews div.newsbody {
                margin-top: 20px;
                font-size: 0.9em;
                }
            .related h3 {
                font-size: 1.2em;
                margin-top: 30px;
                margin-bottom: 10px;
                }
            .related h4 {
                margin: 0 0 10px 0;
                font-size: 1.0em;           }
            .related ul {
                margin:0 0 20px 0;
                padding:0;                     
                }
            .related li {
                padding: 0 0 0 0;
                margin-left: 20px;
                }
            .related li.more {
                font-size: 0.8em;
                line-height: 2.5em;
                list-style-type: none;
                }

    Greetings,
    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.
  3. Daniel
    Daniel avatar
    62 posts
    Registered:
    20 Apr 2009
    05 Nov 2009
    Link to this post
    Hi Ivan

    Thanks for the speedy reply!

    I have added in the styles you created and modified them so I can tell that it has worked i.e. adding in a bright blue background!

    Unfortuantly it still hasnt worked I have set the CssClass property on the newsview but when I view source the class of the newsview is sf_newslist?!

    I have tried clearing the cache of Internet Explorer and FF but the problem still exists!

    Dan
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Nov 2009
    Link to this post
    Hello Daniel,

    You can take an alternative approach to this, which is described bellow.

    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.

    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.
  5. Daniel
    Daniel avatar
    62 posts
    Registered:
    20 Apr 2009
    05 Nov 2009
    Link to this post
    Hi Radoslav

    I should have mentioned I am using Sitefinity 3.5 will this solution still work?

    Also if I should wish to carry on with the original idea of using the Theme CSS File how could I do that?

    Dan
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Nov 2009
    Link to this post
    Hi Daniel,

    In 3.5 we do not use embedded templates. So all control templates are already available in the website. No need for mapping. So skip paragraph one from my previous post. Just go to ~/Sitefinity/ControlTemplates/News/ and edit the control templates so that they do not contain the CSS file link control, just comment it out. Then add the css in the theme. This should be enough.

    Greetings,
    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.
    Answered
Register for webinar
6 posts, 1 answered