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

Forums / Developing with Sitefinity / Tagslist - Dynamic Inline Style

Tagslist - Dynamic Inline Style

4 posts, 0 answered
  1. Steven
    Steven avatar
    15 posts
    Registered:
    05 Jun 2008
    20 Oct 2009
    Link to this post
    When we recently upgraded to Sitefinity 3.7 the Tagslist style changed dramatically. It appears that now an inline style is being inserted and a value is being set. Previously, a css class was set dynamically which made it possible for us to style the control, but this new inline style is overriding any class styles we set. See code below.
     
    <li><a id="ctl00_SideInfo_TagsList1_ctl00_ctl00_tagsRepeaterCloud_ctl03_tagLink" class="tagCloudItem" href="/News.aspx?NewsTagID=75f6b0da-877e-4ff0-99d7-d5cef4aa36de" style="font-size:300%;">Economy</a></li>

    I have tried using and altering the External Templates but the style is still inserted. Is there any way for us to alter the font-size values, or to have it set a css class again instead of an inline style?
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    20 Oct 2009
    Link to this post
    Hi Steven,

    Thank you for using our serveices.

    In the external template for the Tag List control, for the tag items instead of assigning them a CSS Class tagCloudItem, can you try to set them your CSS class:
    <asp:Repeater ID="tagsRepeaterCloud" runat="server">
        <HeaderTemplate><ul class="YourClass"></HeaderTemplate>
        <ItemTemplate>
            <li><asp:HyperLink ID="tagLink" runat="server" CssClass="YourClass"></asp:HyperLink></li>
        </ItemTemplate>
        <FooterTemplate></ul></FooterTemplate>
    </asp:Repeater>

    This should do the trick.

    All the best,
    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.
  3. Hamza
    Hamza avatar
    8 posts
    Registered:
    20 May 2008
    01 Dec 2009
    Link to this post
    Hi Radoslav,

    I've tried the approach you mentioned. "MyClass" is appearing but without any incremental number appended to it as it used to previously and the inline style is still appearing as follows:

    <style="font-size: 300%;" href="..." class="MyClass" id="...">Tag text</a> 

    Please suggest how I can:
    a) Get rid of the inline style
    b) Get different classes for the different levels of tags. Previously, it used to be MyClass1, MyClass2... and so on.

    Thank you
    Hamza
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Dec 2009
    Link to this post
    Hello Hamza,

    Please take a look at the following code snippet on how to apply different levels of css class on the TagsList control (the snippet should be added to the control template):
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            tagsRepeaterCloud.ItemDataBound += new RepeaterItemEventHandler(tagsRepeaterCloud_ItemDataBound);
        }
     
        void tagsRepeaterCloud_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            Telerik.Cms.Engine.ITag tag = e.Item.DataItem as Telerik.Cms.Engine.ITag;
            HyperLink tagLink = e.Item.FindControl("tagLink") as HyperLink;
            if (tagLink != null)
            { if (tag.ContentsTagged>5)
                tagLink.CssClass="MyClass5";   
            
        }
    </script>

    The default styles for the TagList control can be found in the default themes that ship with Sitefinity. For example ~/App_Themes/Blue with right sidebar/blue_right.css has the bellow CSS rules for the tags list:
    ul.tagCloud {
        margin: 0;
        padding: 0;
    }
    ul.tagCloud li {
        margin: 0;
        padding: 0 10px 0 0;
        background: none;
        border-bottom: 0;
        padding: 0;
        display: inline;
        line-height: 36px;
    }
    ul.tagCloud li a.s6:link, ul.tagCloud li a.s6:visited, ul.tagCloud li a.s6:hover, ul.tagCloud li a.s6:active {
        font-size: 9px;
    }
    ul.tagCloud li a.s5:link, ul.tagCloud li a.s5:visited, ul.tagCloud li a.s5:hover, ul.tagCloud li a.s5:active {
        font-size: 12px;
    }
    ul.tagCloud li a.s4:link, ul.tagCloud li a.s4:visited, ul.tagCloud li a.s4:hover, ul.tagCloud li a.s4:active {
        font-size: 16px;
    }
    ul.tagCloud li a.s3:link, ul.tagCloud li a.s3:visited, ul.tagCloud li a.s3:hover, ul.tagCloud li a.s3:active {
        font-size: 21px;
    }
    ul.tagCloud li a.s2:link, ul.tagCloud li a.s2:visited, ul.tagCloud li a.s2:hover, ul.tagCloud li a.s2:active {
        font-size: 29px;
    }
    ul.tagCloud li a.s1:link, ul.tagCloud li a.s1:visited, ul.tagCloud li a.s1:hover, ul.tagCloud li a.s1:active {
        font-size: 36px;
    }
     
    dl.taggedWithList {
        margin: 0;
        padding: 0;
    }
    dl.taggedWithList dt, dl.taggedWithList dd {
        margin: 0;
        padding: 0 5px 0 0;
        display: inline;
    }


    Regards,
    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
4 posts, 0 answered