Dave Burke : Online Community and Social Business Specialist

Styling individual Community Server sidebar widgets

I do so much weird stuff in Community Server, like today when I needed to style selected sidebar widgets different from others.  Sidebar CS Widgets share the same CSS classes in a single ContentFragmentList control <LeaderTemplate />, like so.
 

<CSControl:ContentFragmentList runat="server" Property="WikiWidgets">
<ItemTemplate>
    <CSControl:ContentFragment runat="server">
        <LeaderTemplate>
           
<div class="CommonContentBox">
                <CSControl:ContentFragmentData Property="FragmentHeader"
                runat="server" Tag="H4" CssClass="CommonContentBoxHeader" />
                <div class="CommonContentBoxContent">
        </LeaderTemplate>

 

As you can see, there simply isn't a way to style widget containers individually without getting our hands on the "CommonContentBox" DIV tag.  What we'll do to regain control is create a dynamically-named class for the DIV based on a common ContentFragmentData property, like FragmentName.  "List of Uno Urls," "Dave's Wacky Links," and so on. 
 

<CSControl:ContentFragmentList runat="server" Property="WikiWidgets">
    <ItemTemplate>
        <CSControl:ContentFragment runat="server">
            <LeaderTemplate>
               
<DRIVE:ContentFragmentData Property="FragmentCSS"
                Text="&lt;div
                   class=&quot;CommonContentBox {0}&quot;&gt;" runat="server" />
                    <CSControl:ContentFragmentData Property="FragmentHeader"
                    runat="server" Tag="H4" CssClass="CommonContentBoxHeader" />
                    <div class="CommonContentBoxContent">
            </LeaderTemplate>

 

You'll notice a "FragmentCSS" property which I added to the custom ContentFragmentData class.  It returns a stripped down version of the FragmentName property that we can work with.

case "fragmentcss":
    return ((IContentFragment)DataSource).FragmentName.Replace(" ", "")
        .Substring(0, 5).ToLower();


Which we can style in a .CSS class.


.CommonContentBox.categ, .CommonContentBox.daver
{
    background-color: #FFD9AA;
    border-top-color: #f93;
}


I have to give proper recognition to Afscrome who suggested this sort of approach on a CS Forums thread, or I would have never considered it.  That guy is a CS Maniac!  (That's a compliment. :-)

Comments (0) | Post RSS RSS comment feed

Posted on 2/12/2009 8:37:41 PM by Dave Burke
Categories: Community Server
Tags:

Related posts


Powered by BlogEngine.NET 2.0.0.36
Theme by Dave Burke

Copyright © 2013 Dave Burke.  All Rights reserved.