Responsive Design for the Sitefinity Forums

The styles from this blog post are created and tested for version 6.2 of Sitefinity.

In my previous blog post I showed you how to extend the responsive design feature in Sitefinity CMS by styling the Dashboard for devices with higher dimensions. In this blog post I have prepared for you some more cool responsive styles. This time for the Forums module. The styles you will see here are an addition to the Basic front-end theme, so you can add them to the page with a css widget, with a link on a master page, or in your theme respectively.

Our stylesheet starts with some general styles for the body and the wrapper. We set the width and padding of the sfPublicWrapper div in percents, to make sure they will adjust, depending on the parameters of the device you're using to view the forum.


 Then we increase the font-size a bit:

 
The forums widget practically consists of three views - Forum list, Thread list and Posts list. All of them contain tables, displaying basic information about the content type. Since we don't want to flood the mobile screen with too much information, we will remove some columns, as well as the RSS feed link. The best way to remove the columns is not only to declare display:none, but also to set the width to 0 and reset the paddings and margins:


You will notice a significant change in the Forum posts view, where the text doesn't stand on the right side of the page anymore, but it falls under the avatar and the user information. We achieve this by floating the sfforumThreadPostContentWrp and clearing the float with clear both. This way no elements will stand on the right or the left side of the content.


We order the content of the .sfforumThreadPostUser div (the avatar image, username and and post information) with positioning by setting position:relative to the parent .sfforumThreadPostUser and position:absolute to the avatar.


Also, to make sure that our design won't break when the user name is long, we set overflow:hidden and text-overflow:ellipsis to the user name div.

When an answer to a forum thread is found a user can set the post to "Answered". In the mobile version we replace the "Answered" link with a check icon.

There is a grayed out image beside each post that wasn't marked as Answered and a bright green icon for the answers. For this functionality we use a sprite, containing the green and the grey images.

We also add some fresh styles to all forum buttons with the following css.


Notice the lines:


These declarations reset the default styles of inputs on mobile devices and allows us to style them the way we want.

Another important change that should be mentioned is how the new thread and new post dialogs look like. With the Basic theme these dialogs are set fixed to the browser screen and you are able to scroll the list of posts/threads behind them. In our responsive design we expand the dialogs to the whole width and height of the device with this css:


There are some other small modifications that you will find in the responsive design css file, attached to this post, but hopefully they'll be easy to figure out. Here are a few images, demonstrating how the forums look like with my style. Hope you'll like it!

 

Limitations: Because of a bug with the RadEditor, scroll bars will not appear under iOS when you have a large post to edit or submit. The bug is logged for fixing by our colleagues from the RadControls team. You can track its status here. This problem doesn't get reproduced on devices running Android.