XF 1.2 List subforums in 2 or 3 columns -How to?

[SiteOwner]

I want to create 2 - 3 columns of subforums to save space and make the forum more orderly. Are there any add-on or a good XF style that makes community tighter and not so lengthy?

 

[Shelley]

I'm sure @Brogan did this a better way.

Add a width to the following in your EXTRA.CSS template (adjust and set the value accordingly.

.nodeList .node .subForumList {
width: 200px;
}

And you'll have to set the values of the the width for the following depending on how many columns you want. Again this would go in your EXTRA.CSS template (though there might be a setting for it in style properties.

.node .subForumList li {
width: 48%;}

 

[Paul B]

I did it using width: 31% but I have a fixed width style so that won't work for fluid styles.

 

[SiteOwner]

I'm lost.
Here is my EXTRA.CSS

#header #logoBlock #logo img
{
max-width: 200%;
padding-left: 5px;
}

.breadBoxTop .breadcrumb{
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.breadBoxBottom .breadcrumb{
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.breadBoxTop .topCtrl {
margin-top: 10px;
margin-right: 3%;
}

#big-container .breadBoxTop.withTopCtrl{
margin-bottom:-20px;
}

.PanelScrollerOff .panel
{
margin-bottom: 0 !important;
}

.forum_list .nodeInfo.forumNodeInfo.primaryContent{
border-bottom: none !important;
}

.node .nodeInfo.primaryContent {
padding: 2px 0 !important;
}


.node .subForumList {
background: @primaryLightest;
border-radius: 3px;
border-bottom: 1px solid #E2E2E2;
padding: 7px 1% 7px 3%;
margin: 0px 10px 10px 46px !important;
}

.node .subForumList li {
width: 50% !important;
margin: 3px 0 !important;
}

.node .subForumList .nodeTitle a:before
{
content: "";
background: @primaryLighter;
border-radius: 4px;
margin-right: 5px;
display: inline-block;
height: 4px;
width: 4px;
vertical-align: middle;
}

#QuickSearch .textCtrl {
border-top-color: rgb(233, 233, 233) !important;
border-bottom-color: rgb(210, 210, 210) !important;
}

.button.primary
{
background-colorprimaryLighterStill;
}

.button:hover, .button[href]:hover, .buttonProxy:hover .button
{
background-colorprimaryLighter;
}

.messageUserBlock .extraUserInfo {
background: none !important;
padding: 0px 6px 8px !important;
}

.messageUserBlock .extraUserInfo .pairsJustified dd {
float: none !important;
text-align: left !important;
}

.messageUserBlock .extraUserInfo dl {
font-size: 11px !important;
margin: 0 !important;
}

.messageUserBlock .extraUserInfo dd, .messageUserBlock .extraUserInfo dt {
color: @dimmedTextColor !important;
}


.pageNavLinkGroup .Popup .arrowWidget {
margin-left: 2px !important;
}

.pageNavLinkGroup .linkGroup {
font-size: 12px;
}


/* add-on specific fixes */

.WidgetFramework_WidgetRenderer_FeedReader_Entry {
margin-top: 10px;
text-align: left !important;
}

.sidebar .lnblogRecentIndexEntry {
padding-bottom: 5px;
}

.wikiPage .tabs.controlTabs {
margin-bottom: -24px !important;
}

div[class*='xfa_groups'] .sidebar dl {
margin-top: 10px;
}


/* Fixes for xfa groups add-on */
.xfa_groups_home .groupsList .stats {
width: 20% !important;
}
.xfa_groups_home #big-container-padding {
padding: 30px 30px !important;
}
.xfa_groups_home .categoryBlock {
max-width: 170px !important;
width: 17% !important;
}
.xfa_groups_home .groupList {
margin-left: 22%;
}
.groupsListItem .description {
font-size: 12px !important;
color: @mutedTextColor !important;
}
<xen:if is="@enableResponsive">
@media (max-widthmaxResponsiveWideWidth)
{
.xfa_groups_home .groupsList .stats {
display: none;
}
}
</xen:if>

 

[Paul B]

You already have it set to 50%:

.node .subForumList li {
width: 50% !important;
margin: 3px 0 !important;
}