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 Wallpaper design, each grid item can be assigned a background image or hex color. The hex color can be defined by the two color settings under the Wallpaper design setting. To assign an image, first find out the id of your node. To do this, simply visit your index page and hover over the forum title. The link (which generally appears at the bottom of your browser) will show you the id at the very end. This example uses 2.

Next, create your image, name it 2.jpg, and upload it to /styles/xenfocus/images/node-wallpapers/
Finally, enter 2 in the Wallpaper images field. If you need to apply images to multiple forums, repeat this process for each image, and separate the id's with a comma in the Wallpaper images field, like so:

2,8,17

 

[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?