JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Blog and Forum Side By Side - Wide Column

Did anyone ever add this? I've had this question asked several times. I finally spent the time to write it. Hopefully this will work properly:

I don't think I've ever added this tip, because of the potential of a lot of questions for so many different cases. I searched to see if anyone added it, and couldn't find it. I suggest the following:

The Blog and Forum Modules need to be placed in the wide column.
The 2 modules must be one on top of the other. I will provide CSS for either case.
Anyone reading this, and who plans on adding this CSS, please - - only use one block of code, below.

/* Blog and Forums Side by Side (Blogs on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 230px;float: left!important;padding-right:10px;}
.xg_widget_main .module_forum {width: 230px; float:left;clear: none;margin-left: 15px;}

/* Blog and Forums Side by Side (Forums on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 230px;float: left!important;clear: none;}
.xg_widget_main .module_forum {width: 230px; float:left;margin-left: 15px;padding-right:10px;}

I tested this on Creators, my test site, and a couple of other sites. It seemed to work very well. Anyone who tries this code, feedback is always appreciated.

Best Regards,
Jen

Update: Robert brought up the fact that his scroll bars were not working. If you want to add scroll bars to your blogs and forums, try this code instead (either block, not both):

/************* BLOGS ON TOP AND SCROLLING BOTH MODULES *************/

/* Blog and Forums Side by Side (Blogs on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 230px;float: left!important;padding-right:10px;}
.xg_widget_main .module_forum {width: 230px; float:left;clear: none;margin-left: 10px;}
/* Scroll Blog - change height or add more Blog items if scrollbar does not show. */
.xg_widget_main  .module_blog {background: none; height:500px; overflow:auto;  position:relative; margin:4px; text-align:left; border:1px solid  #dadada; padding:2px;}

/* Scroll Forum - change height or add more Forum items if scrollbar does not show. */

.xg_widget_main  .module_forum {background: none; height:500px; overflow:auto;  position:relative; margin:4px; text-align:left; border:1px solid  #dadada; padding:2px;}

/************* FORUMS ON TOP AND SCROLLING BOTH MODULES *************/

/* Blog and Forums Side by Side (Forums on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 230px;float: left!important;clear: none;}
.xg_widget_main .module_forum {width: 230px; float:left;margin-left: 10px;padding-right:10px;}
/* Scroll Blog - change height or add more Blog items if scrollbar does not show. */
.xg_widget_main .module_blog {background: none; height:500px; overflow:auto; position:relative; margin:4px; text-align:left; border:1px solid #dadada; padding:2px;}
/* Scroll Forum - change height or add more Forum items if scrollbar does not show. */
.xg_widget_main .module_forum {background: none; height:500px; overflow:auto; position:relative; margin:4px; text-align:left; border:1px solid #dadada; padding:2px;}

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on February 25, 2011 at 10:08pm

Oh okay, thanks for the feedback. I'll try to make them work together, and post back here.

Have a great weekend Buddy!

Jen

Permalink Reply by JenSocial on February 25, 2011 at 10:32pm

Hi Robert,

I backed off on the module widths for blogs and forums, added the scroll bar code, and this seems to do the trick:

/************* BLOGS ON TOP AND SCROLLING BOTH MODULES *************/

/* Blog and Forums Side by Side (Blogs on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 235px;float: left!important;}
.xg_widget_main .module_forum {width: 235px; float:left;clear: none;margin-left: 10px;}
/* Scroll Blog - change height or add more Blog items if scrollbar does not show. */

.xg_widget_main  .module_blog {background: none; height:500px; overflow:auto;  position:relative; margin:4px; text-align:left; border:1px solid  #dadada; padding:2px;}

/* Scroll Forum - change height or add more Forum items if scrollbar does not show. */

.xg_widget_main  .module_forum {background: none; height:500px; overflow:auto;  position:relative; margin:4px; text-align:left; border:1px solid  #dadada; padding:2px;}

/************* FORUMS ON TOP AND SCROLLING BOTH MODULES *************/

/* Blog and Forums Side by Side (Forums on Top) - - In Wide Column */
.xg_widget_main .module_blog {width: 235px;float: left!important;clear: none;}
.xg_widget_main .module_forum {width: 235px; float:left;margin-left: 10px;}
/* Scroll Blog - change height or add more Blog items if scrollbar does not show. */
.xg_widget_main .module_blog {background: none; height:500px; overflow:auto; position:relative; margin:4px; text-align:left; border:1px solid #dadada; padding:2px;}
/* Scroll Forum - change height or add more Forum items if scrollbar does not show. */
.xg_widget_main .module_forum {background: none; height:500px; overflow:auto; position:relative; margin:4px; text-align:left; border:1px solid #dadada; padding:2px;}

I'll add to main tip.

Thanks for the feedback,

Jen

Permalink Reply by JenSocial on February 26, 2011 at 1:02pm

Robert,

You might want to use the main tip code. I just realized something. I added padding to separate the 2 modules better, and didn't add to the reply for you. I think the difference is the padding-right...

Have a great weekend,

Jen

Permalink Reply by Mujer a los pies de Jesùs on May 21, 2011 at 3:46pm