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. 🙂

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.