Styling Forums
I recently installed the 6.1.460 version of Sitefinity and testing out the forums. I noticed that we have the ability to set a thread as an "Announcement", "Sticky", "Standard" and "Closed". There is a change in the icons when this happens, but it would be nice to have a wrapper class that allows us to target that thread and have it appear differently. Like adding a different background color, or target other classes based on the type of thread. I want the ability to make more changes then just an icon.
I also noticed, a similar issue when replying to a specific post or mark a post as answered. It would be nice to have a wrapper class that is applied that allows us to style these differently. This way we can distinguish the selected answered post from others.
Finally, the ability to have a tree structure for the forum posts. This way, when a user replies to specific post, it appears under the parent post. Right now, we only see them in order of replies. Now if you reply to the entire thread (using the reply to post button at the top or bottom) then the new post should appear in order.
Hi Jeremy,
Sitefinity already has a built in out-of-the-box functionality that enables you to style the forum widget in every way you like. In the backend go to Design->Widget templets and there you have the ability to change the Template of every aspect of the Forums widget. The templates are normal ascx files that get applied to the coresponding widget. You can also find the CSS classes of the widget here:Forums widget
Regards,
Ivan D. Dimitrov
Telerik
Ivan,
I understand that the I can edit the widget template and add classes to change the display of the forums. However, how do I add a class to appear only when a forum or thread is set as an "Announcement", "Sticky", "Standard" or "Closed"?
I am looking for some logic in the code to add a class to the tr or td tag that enables me to style the Announcement thread differently than a standard or closed thread.
Hello Jeremy,
Thank you for your clarification.
This functionality is a tad tricky. You already mentioned that the only thing that differs in style as far as forum thread status goes is the little picture next to the thread. Unfortunately this is also the only thing that is differentiating the css as well. The little picture consists of a <span class="sfAnnouncmentThread"></span> and this class is the thing that we need to get. It refers only to the child tag so in order for us to style the whole table row ( I assume this is the output you are requesting) we need to find the parent tags.
The way I managed to do this is with Sitefinity's Script Widget. I added some JQuery logic that styles the whole table row. Please refer to the code below:
$(".sfAnnouncmentThread").closest('tr').css("background-color","yellow");Thank You Ivan!
Would it be possible to submit this as a css enhancement for future releases?
Hi Jeremy,
Sure! I have filed this as a feature request. You can vote for it to raise its priority in our PITS.
Regards,
Ivan D. Dimitrov
Telerik
Unless I'm missing it...wouldn't just editing the template be a better solution?
From
tr> <td class="sfforumThreadWrp"><tr class='<%# (ForumThreadType)Eval("ThreadType").ToString().ToLower() %>'> <td class="sfforumThreadWrp">Good Idea Steve!
I will give that a try and see if that works for me.
Just wanted to follow up with the solution we ended up going with. Steve's idea was close, but we needed to add the class on the tr tag like this:
<tr class='<%# (ForumThreadType)Eval("ThreadType") == ForumThreadType.Announcement ? "sfAnnouncmentThread" : (ForumThreadType)Eval("ThreadType") == ForumThreadType.StickOnTop ? "sfStickyThread" : "sfThread"%>'>