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

Forums / Suggestions / Styling Forums

Styling Forums

9 posts, 0 answered
  1. Jeremy
    Jeremy avatar
    33 posts
    Registered:
    22 Apr 2010
    23 Aug 2013
    Link to this post
    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. 

  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    28 Aug 2013
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Jeremy
    Jeremy avatar
    33 posts
    Registered:
    22 Apr 2010
    29 Aug 2013 in reply to Ivan D. Dimitrov
    Link to this post
    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.
  4. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    03 Sep 2013
    Link to this post
    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");
    This produced the output in the picture I have attached. I suppose you can manage more threads in this fashion. Just inspect the picture and place its class in the code above to style any other types of thread. Be sure to click the Before the closing body tag on the Script widget in order for it to initialize properly.

    I hope this information was helpful to you. Feel free to ask any follow up questions.

    Regards,
    Ivan D. Dimitrov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Jeremy
    Jeremy avatar
    33 posts
    Registered:
    22 Apr 2010
    03 Sep 2013 in reply to Ivan D. Dimitrov
    Link to this post
    Thank You Ivan!

    Would it be possible to submit this as a css enhancement for future releases? 
  6. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    05 Sep 2013
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 Sep 2013 in reply to Ivan D. Dimitrov
    Link to this post
    Unless I'm missing it...wouldn't just editing the template be a better solution?

    From
    tr>
                    <td class="sfforumThreadWrp">


    To
    <tr class='<%# (ForumThreadType)Eval("ThreadType").ToString().ToLower() %>'>
                    <td class="sfforumThreadWrp">


    Puts the "Type" on the row, so therefore your main CSS file could style anything below them custom.

    I mean jQuery works too, but depending on the page you might see some "Pop" or "Flash of unstyled text" if it doesn't run fast enough.
  8. Jeremy
    Jeremy avatar
    33 posts
    Registered:
    22 Apr 2010
    05 Sep 2013 in reply to Steve
    Link to this post
    Good Idea Steve!

    I will give that a try and see if that works for me.
  9. Jeremy
    Jeremy avatar
    33 posts
    Registered:
    22 Apr 2010
    25 Sep 2013
    Link to this post
    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"
    %>'>

    Once we added the entire line, then the tr class was set based on the type of thread.
9 posts, 0 answered