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

Forums / Designing with Sitefinity / CSS Formatting News - repeat horizontally (2 items)

CSS Formatting News - repeat horizontally (2 items)

3 posts, 0 answered
  1. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    30 Jun 2008
    Link to this post
    Hi

    I need to display news items horizontally from left to right. (2 per line)

    like this:

    (News 1)  (News 2)
    (News 3)  (News 4)
    (News 5)  (News 6)

    Is this possible
    If so how would i acheive this in 3.2 SP2?

    thanks
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    30 Jun 2008
    Link to this post
    Hi Quade,

    To do this first you need to change news list template — ~/Sitefinity/ControlTemplates/News/Modes/ListPageMaster.ascx

    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 
     
    <sf:CssFileLink ID="CssFileLink1" FileName="~/Sitefinity/ControlTemplates/News/newsCommonLayout.css" Media="screen" runat="server" /> 
     
    <asp:HyperLink ID="backLink" runat="server" Text="<%$Resources:GoBack %>"></asp:HyperLink> 
    <asp:Repeater ID="repeater" runat="server">  
        <HeaderTemplate> 
            <ul class="sf_newsList">  
        </HeaderTemplate> 
        <ItemTemplate> 
            <li class="even">  
                <h2 class="sf_newsTitle">  
                    <asp:HyperLink ID="fullContent1" runat="server">  
                        <asp:Literal ID="Title" runat="server"></asp:Literal> 
                    </asp:HyperLink> 
                </h2> 
                <class="sf_newsDate">  
                    <asp:Literal ID="Publication_Date" runat="server" Text="{0}" /> 
                </p> 
                <p> 
                    <asp:Literal ID="Summary" runat="server" Text=""></asp:Literal> 
                </p> 
                <class="sf_readMore">  
                    <asp:HyperLink ID="fullContent2" runat="server">  
                        <asp:Literal ID="LiteralFS" runat="server" Text="<%$Resources:FullStory %>"></asp:Literal> 
                    </asp:HyperLink> 
                </p> 
                <asp:PlaceHolder ID="ThumbnailHolder" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "Thumbnail").Substring(DataBinder.Eval(Container.DataItem, "Thumbnail").LastIndexOf("/")+1).Length %>'>  
                    <asp:Literal ID="Literal1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Thumbnail").Substring(DataBinder.Eval(Container.DataItem, "Thumbnail").LastIndexOf("/")+1).Length %>'></asp:Literal> 
                    <class="sf_newsThumbnail"><asp:Image ID="Image1" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Thumbnail")%>' runat="server" /></p>  
                </asp:PlaceHolder> 
                <class="sf_newsAuthor">  
                        <asp:Literal ID="Author" runat="server"></asp:Literal> 
                </p> 
                <p> 
                    <asp:Literal ID="Source" runat="server"></asp:Literal> 
                </p> 
                <class="sf_postCategory">  
                    <asp:HyperLink ID="Category" runat="server" /> 
                </p> 
                <class="sf_postTags">  
                    <asp:Repeater ID="Tags" runat="server">  
                        <ItemTemplate> 
                            <asp:HyperLink ID="tagLink" runat="server" /> 
                        </ItemTemplate> 
                    </asp:Repeater> 
                </p> 
            </li> 
        </ItemTemplate> 
        <AlternatingItemTemplate> 
        <li> 
                <h2 class="sf_newsTitle">  
                    <asp:HyperLink ID="fullContent1" runat="server">  
                        <asp:Literal ID="Title" runat="server"></asp:Literal> 
                    </asp:HyperLink> 
                </h2> 
                <class="sf_newsDate">  
                    <asp:Literal ID="Publication_Date" runat="server" Text="{0}" /> 
                </p> 
                <p> 
                    <asp:Literal ID="Summary" runat="server" Text=""></asp:Literal> 
                </p> 
                <class="sf_readMore">  
                    <asp:HyperLink ID="fullContent2" runat="server">  
                        <asp:Literal ID="LiteralFS" runat="server" Text="<%$Resources:FullStory %>"></asp:Literal> 
                    </asp:HyperLink> 
                </p> 
                <asp:PlaceHolder ID="ThumbnailHolder" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "Thumbnail").Substring(DataBinder.Eval(Container.DataItem, "Thumbnail").LastIndexOf("/")+1).Length %>'>  
                    <asp:Literal ID="Literal1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Thumbnail").Substring(DataBinder.Eval(Container.DataItem, "Thumbnail").LastIndexOf("/")+1).Length %>'></asp:Literal> 
                    <class="sf_newsThumbnail"><asp:Image ID="Image1" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Thumbnail")%>' runat="server" /></p>  
                </asp:PlaceHolder> 
                <class="sf_newsAuthor">  
                        <asp:Literal ID="Author" runat="server"></asp:Literal> 
                </p> 
                <p> 
                    <asp:Literal ID="Source" runat="server"></asp:Literal> 
                </p> 
                <class="sf_postCategory">  
                    <asp:HyperLink ID="Category" runat="server" /> 
                </p> 
                <class="sf_postTags">  
                    <asp:Repeater ID="Tags" runat="server">  
                        <ItemTemplate> 
                            <asp:HyperLink ID="tagLink" runat="server" /> 
                        </ItemTemplate> 
                    </asp:Repeater> 
                </p> 
            </li> 
        </AlternatingItemTemplate> 
        <FooterTemplate> 
            </ul> 
        </FooterTemplate> 
    </asp:Repeater> 
    <sf:Pager ID="pager1" runat="server">  
        <LayoutTemplate> 
            <asp:Repeater ID="PageRepeaterLinkButton" runat="server">  
                <HeaderTemplate> 
                    <ol class="sf_pager">  
                    <li><asp:LinkButton ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:LinkButton></li>  
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:LinkButton ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:LinkButton ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:LinkButton></li>  
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
            <asp:Repeater ID="PageRepeaterHyperLink" runat="server">  
                <HeaderTemplate> 
                    <ol class="sf_pager">  
                    <li><asp:HyperLink ID="PreviousPage" runat="server" Text="<%$Resources:PreviousPage %>"></asp:HyperLink></li>  
                </HeaderTemplate> 
                <ItemTemplate> 
                    <li> 
                        <asp:HyperLink ID="SingleItem" runat="server" /> 
                    </li> 
                </ItemTemplate> 
                <FooterTemplate> 
                    <li><asp:HyperLink ID="NextPage" runat="server" Text="<%$Resources:NextPage %>"></asp:HyperLink></li>  
                    </ol> 
                </FooterTemplate> 
            </asp:Repeater> 
        </LayoutTemplate> 
    </sf:Pager> 

    After that you need to add the CSS from below in your site theme or in ~/Sitefinity/ControlTemplates/News/newsCommonLayout.css

    .sf_newsList

    li
    {
        
    width: 49%;
        
    float: left;
        
    clear: none;
    }
    .sf_newsList li.even
    {
        
    clear: left;
    }


    Sincerely yours,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    01 Aug 2008
    Link to this post
    You should also be able to do this by just applying the float left to the LI in the CSS without editing the code.  If you wanted to limit it to two columns you can specify the width of the UL and then also specify the width of the LI to be half of that width. 

    If you want to control just that list and not other ones throughout your site, make sure the control ends up inside of a containing element with an ID.  For instance if you wrapped it with a DIV that had an ID of  "quade" you could specify the UL in your CSS like this:

    #quade ul
    {

       
    width: 400px;
     

    }

    #quade ul li
    {
        
    width: 200px;
        
    float: left;

    }



    Hope that helps!

Register for webinar
3 posts, 0 answered