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

Forums / Designing with Sitefinity / newsView css issue

newsView css issue

4 posts, 0 answered
  1. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    28 May 2010
    Link to this post
    Hi..

    I am trying to modify the newsView appearance and am using the css in my theme company.css file.

    In another forum post I saw where I was supposed to use the following types of classes:
    /* News List */
    .sf_newsList 
    {
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
    }
    .sf_newsList li
    {
        margin: 0 0 20px;
        padding: 0;
        list-style-type: none;
    }
    .sf_newsList h2.sf_newsTitle
    {
        margin: 20px 0;
        padding: 0;
        font-size: 10em;
        font-weight: normal;
        line-height: 1.2em;
    }
      
    .sf_newsList .sf_newsDate 
    {
        font-size: 1em;
    }
    .sf_newsList .sf_newsSummary 
    {   
    }
    .sf_newsList .sf_newsSummary img 
    {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    My questions are regarding the fact that using these classes dont seem to change the appearance any of the newsView.

    A. I have to add explicitly the ul tag to the beginning of these classes for them to work. eg:
    ul.sf_newsList 
    {
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
    }
    ul.sf_newsList li
    {
        margin: 0 0 20px;
        padding: 0;
        list-style-type: none;
    }
    ul.sf_newsList h2.sf_newsTitle
    {
        margin: 20px 0;
        padding: 0;
        font-size: 1.2em;
        font-weight: normal;
        line-height: 1.2em;
    }
      
    ul.sf_newsList .sf_newsDate 
    {
        font-size: 1em;
    }
    ul.sf_newsList .sf_newsSummary 
    {   
    }
    ul.sf_newsList .sf_newsSummary img 
    {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    Should I have to do this?   I have no other defined list tags in my css, so I was assuming it should pick the less explicit tags up.

    B. for the .sf_newsSummary tag, I do not see this class listed when I view Source on the web page.  The news summary portion is just in a normal <p> tag.  see below:
    <ul class="sf_newsList">
        <li>
                <h2 class="sf_newsTitle">
                    <a id="ctl00_leftbarph_NewsView1_ctl00_repeater_ctl01_fullContent1" href="News/10-05-10/Josh_has_a_multicolored_shirt_on.aspx">
                        Josh has a multicolored shirt on!
                    </a>
                </h2>
                <p class="sf_newsDate">
                    May 10, 2010
                </p>
                <p>
                    summary text
                </p>
                <p class="sf_readMore">
                    <a id="ctl00_leftbarph_NewsView1_ctl00_repeater_ctl01_fullContent2" href="News/10-05-10/Josh_has_a_multicolored_shirt_on.aspx">
                        Full story
                    </a>
                </p>
                  
                <p class="sf_newsAuthor">
                        Josh Waters
                </p>
                <p>
                      
                </p>
                <p class="sf_postCategory">
                      
                </p>
                <p class="sf_postTags">
                      
                </p>
            </li>

    I want my normal ul and ol lists to have one type of appearance on the pages, but the newsView ul to have a different appearance.

    Any advise would be appreciated!

    Thanks,
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    31 May 2010
    Link to this post
    Hello Michael Waters,

    Thank you for using our services.

    The News View control and other Sitefinity controls load their CSS from embedded resources. In the case that you wish to modify the CSS rules you should either make the News View load your custom styles only, or put !important on the rules which are not applying. More information on this topic, as well as a download of all embedded CSS files for public controls can be found here: How to apply custom style sheets to Sitefinity Content View controls.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Eric Tangedahl
    Eric Tangedahl avatar
    12 posts
    Registered:
    11 Aug 2009
    28 Sep 2010
    Link to this post
    I want to reduce the size of the News module title font.  I'm thinking this should be done in the newsCommonLayout.css in the \Sitefinity\ControlTemplates\News location.  I've found the style below but changing the font size doesn't seem to take affect.  Do I need to do something else to reduce the news title size? 


    .sf_newsList h2.sf_newsTitle
    {
     margin: 20px 0;
     padding: 0;
     font-size: 2.1em;
     font-weight: normal;
     line-height: 1.2em;
    }
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    28 Sep 2010
    Link to this post
    Hi Eric,

    You can add the style with an important stantement in your Theme stylesheet, otherwise you have to map external template and use CssFileLink control to make a reference to your stylesheet.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered