Grid layout on the forums homepage

M3lvin

Registered
Hi there,

I just purchased the Awesome Flat+ theme for XF 2.0 and I was wondering how I could get a grid layout on the forum homepage. From what I remember there is an option to do so on invision forums, and was wondering if for XF this was directly linked to the theme or if XF would allow me to do so as well.

Just so you got a better idea, here is what I mean by grid layout :
gridlayout.jpg


In Node/Forum list I chose the "Dual Column" Node layout, which seems like a pretty good start, as I got this now :

gridlayou2.jpg


Is it what I should use and if so, how can I get a specific picture as a background for each forum node ?

Feel free to point me at the documentation if any, I like to read :), just new to XF in general, many thanks !
 

Russ

Pixel Exit Staff
No built-in way to do it but you can use the extra.less template, these are random images I found on google.

Code:
.block-body
{
    .node--id2 { background: url(https://png.pngtree.com/thumb_back/fw800/back_pic/03/83/88/1057c98c8b1a6f8.jpg) no-repeat center center / cover; }
    .node--id3 { background: url(https://img00.deviantart.net/dc70/i/2012/169/1/d/fantasy_cave_by_leandrojvarini-d53y01s.jpg) no-repeat center center / cover; }
    .node--id4 { background: url(https://i.kinja-img.com/gawker-media/image/upload/s--dRzAD6CX--/c_scale,f_auto,fl_progressive,q_80,w_800/936201286805587266.jpg) no-repeat center center / cover; }
    .node--id5
    {
        background: url(https://media-diablofans.cursecdn.com/attachments/20/980/banner1.jpg) no-repeat center center / cover;
        .node-title a { color: pink; }
    }
    .node-title a
    {
        color: #FFF;
    }
}

Result:
Screenshot_4.png


You can enable Node helper via Style properties -> Node/forum list, they only show to you but you can easily grab the node id by seeing the: --id# in the blue line. The CSS portion itself, the bottom: node-title a: color #FFF will change all the links to that color. If you wanted a specific node to have a color to stand out, look at the node example 5. I can help further if you need it.
 

M3lvin

Registered
Hi Russ,
Many thanks for your quick reply.
Ok got it, I should be fine from there ;).
Just curious : is extra.less "the" template to use in case I want to override the default style in general and keep my customized style the way it is with the next updates (ie. without having to repeat the customization again with next upgrade) ?
 

Russ

Pixel Exit Staff
Hi Russ,
Many thanks for your quick reply.
Ok got it, I should be fine from there ;).
Just curious : is extra.less "the" template to use in case I want to override the default style in general and keep my customized style the way it is with the next updates (ie. without having to repeat the customization again with next upgrade) ?

Yep, any changes should go inside a child style, never edit the parent that says DO NOT EDIT :D, anything inside the child style will be kept upon upgrading.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.