How do I show my page into two columns

xIsabel38

Well-known member
I tried this with a different style that I bought a while back called Animate from Xenfocus and it too overlapped. I'm not really sure what the issue is. Probably some style change you or an add-on made?
 

xIsabel38

Well-known member
I love the 2 column look as well, especially cause my main board has a long list of forums. This reduces scrolling and all that. Unfortunately it doesn't look nice on the Animate style but meh, I think I'm going to simply use Aurora, buy brand free, and pay for some cosmetic development.

If you look at a blizzard forum they actually use two columns too and have it like a block that's clickable. This is kind of nice too. Now to find a developer that can customize styles.
 

Jeff Fuqua

Well-known member
Wow. Very close. You have skillz.

The only thing I'd want to do is get the latest block to slide over to the right and align with the left edge of the rest of the text and the rss icon appear to the right of it.
 

EQnoble

Well-known member
@Jeff Fuqua : try thishttp://xenforo.com/community/members/jeff-fuqua.17313/

Code:
.node .nodeText {
    margin-right: 0 !important;
    min-height: 88px;
}

.node .nodeLastPost, .node .tinyIcon {
    left: 36px;
    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: 74px !important;
    top: 97px !important;
}
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    min-height: 156px;
}
.nodeStats.pairsInline dd {
    margin-right: 53px;
}
 

Jeff Fuqua

Well-known member
What is this CSS dark magic you use? ;)

It's great! Except a bit less space above the latest block. I'd love for the rss symbol to sit just a little off the lower right of the lastest block.
 

EQnoble

Well-known member
I have it on my site now. I'm just playing around with some details like trying to widen the latest post block.

I see you made another change as well...before you go any further...make these changes..
Change the altered values in these blocks:
Code:
.node .nodeControls {
    right: 91px !important;
    top: 71px !important;
}

.node .nodeText {
    margin-right: 0 !important;
    min-height: 60px;
}
Remove this entire block:
Code:
.nodeStats.pairsInline dd {
  margin-right: 53px;
}


____

To widen the latest post block
change the width of this...
.node .nodeLastPost

if you are adding it in EXTRA.css you will need to use important to override the default width
 

EQnoble

Well-known member
I think I have all the changes in. Widening that caused the rss icon to go behind the latest block.

First remove the adjusted width you made for .node .nodeLastPost, .node .tinyIcon

(.node .nodeLastPost, .node .tinyIcon) is two classes and you only need the first one to adjust the width of the last post block: .node .nodeLastPost


Because it ( .node .tinyIcon) uses a spritesheet for the background image...widening it will display more than the rss icon.. to just move the thing around you can use top, bottom, left, or right...just remember that when you use those you need to have position: declared.
 

AndreaMarucci

Well-known member
Assuming you did this mod in EXTRA.css
Good idea. I've applied and this is the result

Screenshot 2013-07-30 alle 10.02.40.png

That's good but I'm asking if it's possible to

1 - Not show the little RSS icon
2 - Have just one row in the little blue box with the latest thread and the name and date of the latest poster side by side.

This is what I've in my extra.css before applying your mod to have also the info and the RSS icon...

Code:
/* Home page forum su due colonne */
.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;
}

.node.category {
    min-height: 85px;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2 {
width: auto;
float: none;
min-height: 0;
}
}
/* fine Home page forum su due colonne */

Thanks!
 

JMEWLS

Active member
I didn't really use a different css (I'm pretty bad at html/css etc. myself) but I've been able to manipulate it via if statements. Try go by:

Code:
 <xen:if is="in_array({$forum.node_id}, array(x,y,z))">
manipulate your forum code to how you like it.

      <xen:else />
paste the original code here
      </xen:if>

It's probably a bad way to go about it, but I was able to get what I wanted.
 

EQnoble

Well-known member
I'm asking if it's possible to

1 - Not show the little RSS icon
2 - Have just one row in the little blue box with the latest thread and the name and date of the latest poster side by side.
1 -
Code:
.node .nodeControls {
display: none;
}

2 - It is possible to do but I would really need to test it before I pasted it here, if you go side by side with those you end up with a very long nodelastpost (the blue) box which is fine because for the most part even long thread titles will display no problem, but if you have responsive enabled it will probably become a mess when you make your browser width narrow. I just woke up so I try it out once I am a little more awake.
 

AndreaMarucci

Well-known member
Thanks EQnoble. I understand what you're saying. I've asked this since many of our members would like to see some stats about each forum like the ones displayed in the blue box...
 
Top