• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

#1
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
#2
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
 
#4
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
#5
You already have it set to 50%:
Code:
.node .subForumList li {
width: 50% !important;
margin: 3px 0 !important;
}