1. 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?

Discussion in 'Styling and Customization Questions' started by SiteOwner, Dec 10, 2013.

  1. SiteOwner

    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?
     
  2. Shelley

    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
     
  3. Brogan

    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.
     
  4. SiteOwner

    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>
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

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

Share This Page