How do I show my page into two columns

Brogan

XenForo moderator
Staff member
That would do it, although I'd probably go 85px to allow for the bottom padding.
 

AndreaMarucci

Well-known member
You guys are fantastic. Added that code with a value of 85 and everything is correct now. Thanks again for your support... I've also get the code for responsive design from the developer...
 

Jeff Fuqua

Well-known member
Add this to EXTRA.css:

Code:
.node .nodeText {
margin-right: 0 !important;
}
 
.node .nodeLastPost,
.node .tinyIcon {
display: none !important;
}
 
.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2 {
width: 49%;
float: left;
min-height: 70px;
}
 
.nodeList .node.level_1 {
clear: both;
}
The CSS will need to be adapted to suit, this may mean adding other node types, changing the min-height, etc.
Further tweaks can be made in Style Properties.

The result of the above simple code is as follows:

View attachment 27746
This is very cool. Would the same code worth with a responsive forum?
 

EQnoble

Well-known member
Assuming you did this mod in EXTRA.css

find: .node .nodeLastPost, .node .tinyIcon
Remove: display: none !important;

Replace with this.
Code:
.node .nodeLastPost, .node .tinyIcon {
    position: relative !important;
}
____________________________________
Add this

Code:
.node .nodeControls {
    right: 295px !important;
    top: 42px !important;
}
 

xIsabel38

Well-known member
Assuming you did this mod in EXTRA.css

find: .node .nodeLastPost, .node .tinyIcon
Remove: display: none !important;

Replace with this.
Code:
.node .nodeLastPost, .node .tinyIcon {
    position: relative !important;
}
____________________________________
Add this

Code:
.node .nodeControls {
    right: 295px !important;
    top: 42px !important;
}
I don't understand your instructions.
So I'm supposed to have this?

Code:
.node .nodeLastPost,
.node .tinyIcon {
.node .nodeLastPost, .node .tinyIcon {
    position: relative !important;
}

.node .nodeControls {
    right: 295px !important;
    top: 42px !important;
}
EDIT: Okay I got it now.

And I mean how did you do that, where you changed it on my site without actually changing it on my site?
 
Last edited:

EQnoble

Well-known member
Well I assumed you were using Brogans instructions from the first page of this thread...and then from there I showed one change and one addition that would achieve what you were looking for.

I see you reverted all changes including the base of the two column changes...put that back first and then apply the changes...they should look something like this.
Code:
.node .nodeText {
    margin-right: 0 !important;
}
.node .nodeLastPost, .node .tinyIcon {
    position: relative !important;
}
.node .forum.level_2, .node .page.level_2, .node .category_forum.level_2 {
    width: 49%;
    float:left;
    min-height: 70px;
}
.nodeList .node.level_1 {
     clear: both;
}
.node .nodeControls {
     right: 295px !important;
    top: 42px !important;
}
I did that with firebug (addon for firefox)
 

xIsabel38

Well-known member
Yeah I got it, your instructions said to find that one line and then replace the one below it with your CSS stuff, so I did. But I didn't remove that one line you said to find so that resulted in duplicate CSS and didn't work. I got it working good now. Thanks so much for the help!
 
Top