Side By Side Nodes

[Gabby]

Hello,
Can one of you fellas help me out with this? gailsault.com/ourcommunity style two column.


I have no idea what I'm doing wrong. I've pasted everything correctly I think.

Thank you.

Gabby

 

[CFodder]

Hello,
Can one of you fellas help me out with this? gailsault.com/ourcommunity style two column.


I have no idea what I'm doing wrong. I've pasted everything correctly I think.

Thank you.

Gabby

Have you put the specified code in your Extra.css template??

 

[Gabby]

Yes, thank you CFodder I have.

 

[Travis]

While not speciffically related to this modification, it only arose after I followed this guide, so I thought I would ask here. It works great, but is there a way to align the name of the poster and the date of the post to the right?

 

[CFodder]

Yes, thank you CFodder I have.

Okay, not tryingto be a smartarse here, but have you copied them into the Extra.css for the correct style? Only ask that having looked at your forums nothing seems to have changed and it's a mistake I've made by changing the wrong style .

 

[Gabby]

CFodder. You're not being a smartarse because I've done that before. LOL But yes, I have pasted everything into extra css. Did you check my "two column" style?

 

[CFodder]

CFodder. You're not being a smartarse because I've done that before. LOL But yes, I have pasted everything into extra css. Did you check my "two column" style?

Yep I have, what version of XF you running? Am unsure why some forums have gone to the 2 column where others haven't.

 

[Gabby]

I am running 1.2. I don't know what I'm doing wrong.

 

[CFodder]

I am running 1.2. I don't know what I'm doing wrong.

Will pay to see if Audentio can help you, unfortunately I don't know enough abotu it all to be of much use .

 

[Wing]

Saw this AFTER I implemented it... which was 2 days ago.

Appreciate releasing this guide. This is something that helps any board. Especially the ones with larger amount of nodes!

 

[DJ XtAzY]

Let's say I've setup the 2 column node correctly and I have 3 nodes. Is is possible to span the last one node?

[node][node]
[my last node]

so like that above

 

[AndreaMarucci]

Work perfectly. Just one thing. As you can see from the attach, the title of forums with new messages are bolder and spaced differently between the letters. I've applied method 2. Before inserting this in extra.css I've not noticed this strange fonts effect. It's a consequence of your method or something other? In case how can I come back and use the same font as before?

Thanks!

 

[japersonal]

Let's say I've setup the 2 column node correctly and I have 3 nodes. Is is possible to span the last one node?

[node][node]
[my last node]

Perhaps you already found out... but just in case: Yes, you can. It's all explained there, in the final steps, after this bit:

Now, if you want to make the last odd child fluid width, regardless of which method, you'll have to explicitly tell it to.

 

[Dad.]

Let's say I've setup the 2 column node correctly and I have 3 nodes. Is is possible to span the last one node?

[node][node]
[my last node]

so like that above

Hi there,

Yes it is, this is how UI.X handles this situation. I didn't include this in the guide, because the way I'm doing it isn't very elegant. I could use style properties more, as well.

.nodeList .node.category .node:last-child:nth-child(odd) {width: 100%;float: left;}
.nodeList .node.category .node:last-child:nth-child(odd) .nodeLastPost {width: 210px; position: absolute;margin-top: 12px;padding: 5px 5px 5px 10px;}
.nodeList .node.category .node:last-child:nth-child(odd) .nodeControls {right: 242px;}
.nodeList .node.category .node:nth-child(odd) .nodeText {margin-right: 270px;}

This is for nodes under categories, not category nodes just to be clear. The first line tells the last odd child to span the whole width. The rest just repositions everything back where its supposed to go.

Work perfectly. Just one thing. As you can see from the attach, the title of forums with new messages are bolder and spaced differently between the letters. I've applied method 2. Before inserting this in extra.css I've not noticed this strange fonts effect. It's a consequence of your method or something other? In case how can I come back and use the same font as before?

Thanks!

View attachment 60560

Hmm, I don't really do anything with fonts in this tutorial, in fact I don't think anything at all.

 

[Dad.]

By the way, I don't seem to be getting notifications of what people are posting in this thread even though I am following it. Very strange. Will try to be more careful, can direct any questions you still have to me.

 

[japersonal]

Hi @Andrea Marucci,

Did you solve your issues?

I've just found out that if I use the first method, it works fine:

    .nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }

But if I use the second method, the alignment goes like crazy

    .nodeList .node.level_2:last-child:nth-child(odd) .nodeLastPost {
        width: 210px;
        margin-top: 10px;
        position: absolute;
        padding-right: 10px;
        }
    
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeControls {right: 242px;}

Perhaps @Audentio will chime in and let us know what might be wrong.

 

[Dad.]

Do you have a live demo @japersonal ?

 

[japersonal]

No, sorry @Audentio, and I have just modified the site to hide the whole "Last Post" thing.

 

[japersonal]

@Audentio, I might add that if you enable the subforums to be fully displayed instead of the drop-down menu, something similar (but not exactly the same) happens.

Style Properties: Forum / Node List -> Show sub-forums popup (disable)

Hope it helps for you to troubleshoot such issues.

By the way, THANKS A LOT for providing such guide!

 

[Dad.]

@Audentio, I might add that if you enable the subforums to be fully displayed instead of the drop-down menu, something similar (but not exactly the same) happens.

Style Properties: Forum / Node List -> Show sub-forums popup (disable)

Hope it helps for you to troubleshoot such issues.

By the way, THANKS A LOT for providing such guide!

Good suggestion, Ill take a look at that and add that to the resource.