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

SiteOwner

Member
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

Well-known member
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.

Code:
.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.

Code:
.node .subForumList li {
width: 48%;}
Screenshot_2.png
 

Brogan

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

SiteOwner

Member
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-color:mad:primaryLighterStill;
}

.button:hover, .button[href]:hover, .buttonProxy:hover .button
{
background-color:mad:primaryLighter;
}

.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-width:mad:maxResponsiveWideWidth)
{
.xfa_groups_home .groupsList .stats {
display: none;
}
}
</xen:if>
 

Brogan

XenForo moderator
Staff member
You already have it set to 50%:
Code:
.node .subForumList li {
width: 50% !important;
margin: 3px 0 !important;
}
 
Top