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

Forums / Designing with Sitefinity / Changing the CSS styles for NewsView

Changing the CSS styles for NewsView

5 posts, 0 answered
  1. David
    David avatar
    9 posts
    Registered:
    09 Jul 2008
    14 May 2009
    Link to this post
    How can I over-ride or change the styles of the fonts used in the NewsView? I am using my own masterpages and want to change the "default" look of the news items shown in the NewView control.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 May 2009
    Link to this post
    Hi Todd,

    Thank you for using our services.

    By default the control uses some styles from the theme css file. There are three options for styling the appearance of the control.

    1. Add css classes to your theme css file.
    2. Map the presentation mode of the Control - ListPageMaster or ListPageDetails external templates and use telerik:CssFileLink control to specify your css file.
    3. Use css class propery of the NewsView control >> Advaced mode >> Appereance section.

    I am sending you a sample css file with defined classes.

    Let us know if there is anything else that we can do for you.

    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.
  3. Paul
    Paul avatar
    4 posts
    Registered:
    26 Aug 2004
    14 Jul 2009
    Link to this post
    Hi Ivan,

    I've been trying to adjust the css for the news view. Really all i want to do is make the title smaller when it is in the lists of news article. see current version here: http://www.1300record.com.au/newsroom. I'm trying to follow your instructions below.

    1. I've added the style to my theme file that i want to change: (/App_Themes/recordBlue/recordBlue.css)

    1 .sf_newsList h2.sf_newsTitle  
    2 {  
    3     font-family: "Lucida Grande" , "Lucida Sans Unicode" ,Arial,Verdana,sans-serif;  
    4     font-size: 24px;  
    5     color: #231f20;  
    6    font-weight:normal;  
    7       
    8

    Now 2 and 3 i'm not %100 sure which field i need to adjust in the newsView advance tab. (Are these 2 points relating to the advanced tab)? Are there or do you have more detialed instructions on how to change a simple title css value?

    Also I've using version 3.6 where is the newsView module located in the source? I han't been able to find it as i was just going to overide the CSS. Is that possible?


  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Jul 2009
    Link to this post
    Hi Andrei Papay,

    Your fond weight does not apply because you in recordBlue you should use !important statements to override the default size.

    Now 2 and 3 i'm not %100 sure which field i need to adjust in the newsView advance tab. (Are these 2 points relating to the advanced tab)? Are there or do you have more detialed instructions on how to change a simple title css value?

    ListPageMaster and ListPageDetails are properties of NewsView control. When you open the control in Sitefinity UI edit mode there you will find RadTab with text Advanced. Click on this tab and go to "Appearance" category where you will find the properties.

    Also I've using version 3.6 where is the newsView module located in the source? I han't been able to find it as i was just going to overide the CSS. Is that possible?

    NewsView is a control. It uses built in templates. You can map the external templates( as described above) and modify the appearance of the presentation mode control.

    I hope this helps.

    All the best,
    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.
  5. Paul
    Paul avatar
    4 posts
    Registered:
    26 Aug 2004
    14 Jul 2009
    Link to this post
    Thanks for the quick response Ivan.

    using the !important statement worked perfectly.

    thanks again
Register for webinar
5 posts, 0 answered