Grid layout

[Ehren]

If you'd like to display your forums in a grid layout, browse to Style Properties > Xenfocus: Grid layout and enable Grid view.

A toggle will appear in the front-end Theme Editor, allowing your members to switch back to a table layout if they wish (assuming you've given them permission under Xenfocus: Theme Editor).

If you've enabled the "Wallpaper design" setting under the "Grid layout" style properties, you can now add background-images to your nodes.

To do this, you'll first need to know the id of your node. If you don't know the id, you can find it by browsing to ACP > Forums > Nodes. Click on a node, and the URL will show you the id. For example:

admin.php?forums/tutorials.33/edit

With this in mind, add the following to your extra.less file, replacing 33 with your own node id and change the URL to your own image.

.focus-grid .block--category .node--id33 .node-body {
    background-image: url('styles/xenfocus/global/node-wallpapers/33.jpg');
}

Repeat that code for each node/background image and you're done!

 

[Ehren]

To enable the grid layout when viewing subforums on a topic list:

1. Open the forum_view template file and find:

    <xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
    <div class="block">

2. Change to:

    <xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
    <div class="block block--category">

 

[i0n]

Size of image?

 

[Ehren]

Size of image?

Images are scaled using css, so technically any size will work. But resize them to an appropriate file-size if possible, to prevent your visitors from downloading huge images.

 

[Escanor]

Hello, I don't see the option of Xenfocus: Grid layout on Style properties, please help!

 

[Ehren]

Hello,

The grid settings are available in every Xenfocus theme. Make sure you're not trying to achieve the same thing on a theme from a different designer since the settings won't be there.

 

[Escanor]

These are the style properties I have, I guess I did something wrong when installing my Theme? I have the Uniform Pro theme, thank you!

 

[Ehren]

Have you installed Uniform Dark as a child theme of Uniform? You can't simply install Uniform Dark by itself as it won't work.

There's a tutorial for installing Pro themes which may be helpful.

 

[AlteredFancy]

Heyy!

I was wondering how to set an external link (ex: https://contenu.poissondore.fr/img/wallpaper/) since Im using the cloud option and have no access to the xenforo files.
Also is there any way to set a different one per forum or are we forced to use the default system?

 

[Ehren]

Heyy!

This is untested, but does adding this to extra.less help?

// Assign node wallpapers
<xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')">

    @supports (display: grid){
        .focus-grid{
            .block--category{               
                .node--id5 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
                .node--id9 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
                .node--id15 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
            }
        }
    }

</xf:if>

 

[AlteredFancy]

Heyy!

This is untested, but does adding this to extra.less help?

// Assign node wallpapers
<xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')">

    @supports (display: grid){
        .focus-grid{
            .block--category{              
                .node--id5 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
                .node--id9 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
                .node--id15 .node-body {
                    background-image: url('https://site.com/image.jpg');
                }
            }
        }
    }

</xf:if>

// Assign node wallpapers
<xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')">

    @supports (display: grid){
        .focus-grid{
            .block--category{               
                .node--id15 .node-body {
                    background-image: url('https://contenu.poissondore.fr/img/wallpaper/1.jpg');
                }
                .node--id6 .node-body {
                    background-image: url('https://contenu.poissondore.fr/img/wallpaper/2.jpg');
                }
            }
        }
    }

</xf:if>

For some reason it does not work

 

[Ehren]

Did you update the id's from the above code, so they match your own id's?

 

[AlteredFancy]

Did you update the id's from the above code, so they match your own id's?

Yes that's why I don't get it

 

[Ehren]

I just added the code to the web inspector (and converted the less to css) and it's working fine. I used id's 17 and 18.

 

[AlteredFancy]

I just added the code to the web inspector (and converted the less to css) and it's working fine. I used id's 17 and 18.

View attachment 2794

Hey,

If you want, Im willing to pay you for fixing it with the admin logins I gave you earlier in DMs since I cannot figure out the ongoing issue.

 

[Ehren]

All fixed

If possible, I'd recommend using smaller images for your backgrounds. They're currently 1500x844 pixels in size, but the actual node is only 560x66.

 

[AlteredFancy]

All fixed

If possible, I'd recommend using smaller images for your backgrounds. They're currently 1500x844 pixels in size, but the actual node is only 560x66.

Thank you so much Give me a paypal address, Ill give you a tip! How did you managed to fix it by the way?
EDIT: I've seen that you've just removed the xf & support lines

 

[Ehren]

Yeah, one of the <if> statements wasn't true because the Style Property was empty/disabled causing the code to never run. Removing the if statement is the easiest way

I'm happy to help for free, but donations are always appreciated! My paypal address is payments@xenfocus.com

 

[PokerChipper.com]

@Ehren I've been looking for exactly this but have no idea how can you help me too?? LOL I als tip well!!!!!

 

[Ehren]

@Ehren I've been looking for exactly this but have no idea how can you help me too?? LOL I als tip well!!!!!

Sure, what would you like help with exactly?