How to Make Style Preview Thumbnails

[Kier]

XenForo 1.0.0 RC1 sees the debut of style preview thumbnails in the style chooser. By default, you will see a monochromatic section of the default style set against colours from your own style palette, but if you want to provide your own thumbnails to allow your users to see what they are going to get when they choose a style, this is what you need to do.

The first thing to do is to load up your site in a browser using the style for which you want to generate a preview. Take a screengrab of the site using your favorite screen capture application, then load it into an image editor.



Crop a square from the image, then resize it to 64 x 64 pixels and save it as a JPEG or PNG image. I'll call mine 'style-4.png', and upload it to my webserver, into a folder I have created called 'style-previews' inside the styles/default/xenforo/ folder.



Now it's time to edit some CSS. RC1 has a new template called style_chooser.css. This template is empty apart from a comment, so you can edit it safe in the knowledge that XenForo will never require you to revert your changes as part of the upgrade process. You may remove the existing comment text from the template if you wish.

You need to know the style_id of the style for which you are creating a preview. You can find this by hovering over a link to the style, which will have a URL like /styles/my-style.4/, where the style is called 'My Style' and its style ID is 4.

Using this information, we can put it all together with a new rule in the style_chooser.css template as follows:

.styleChooser .icon.style4
{
	background: transparent url('@imagePath/xenforo/style_previews/style-4.png') no-repeat;
}

You can repeat this process for any other styles you have, then save the style_chooser.css template, and view the style chooser on your public pages.

 

[Russ]

I love the fact that we're able to do this, however I think it would be a bit streamlined if we had an option in the style properties to set the style preview image.

Same as the logo path, idea for the preview image so no css editing.

Nevertheless I love this feature

 

[Kier]

I love the fact that we're able to do this, however I think it would be a bit streamlined if we had an option in the style properties to set the style preview image.

Same as the logo path, idea for the preview image so no css editing.

Nevertheless I love this feature

That's a rather good idea. I'll see if that can make the next release candidate.

 

[ragtek]

That's a rather good idea. I'll see if that can make the next release candidate.

Good to know^^
This was my first thought for an add-on, as i saw this "how to".
It's too complicated for the john doe user(is this the right name? )

 

[Kier]

That's a rather good idea. I'll see if that can make the next release candidate.

I appear to have gone mental. There's no way to access the style properties of another style right now, so that approach won't work after all., sorry.

I do have something I'd like to put into a future version to make this much easier, but to do it properly requires more time than we have right now.

 

[dieketzer]

good work.
i had been unhappy with the previous style chooser. i had been hoping for a simple tree, but this is even better.

 

[ragtek]

I appear to have gone mental. There's no way to access the style properties of another style right now, so that approach won't work after all., sorry.

I do have something I'd like to put into a future version to make this much easier, but to do it properly requires more time than we have right now.

oh

 

[bogus]

Very Nice. Its not that complicated. A few trys and this should work well. Thanks Kier

Ok forgot what i wrote

 

[ibnesayeed]

How about going "Convention over Configuration" way specifying a dedicated file name and location by default (overwrite possible)? The way Wordpress handles it is to keep a thumbnail in the respective theme directory.

 

[ragtek]

How about going "Convention over Configuration" way specifying a dedicated file name and location by default (overwrite possible)? The way Wordpress handles it is to keep a thumbnail in the respective theme directory.

that's what i thought for my add-on.

i have a own directory for every style (because of the icons), and there i planed to add a "stylescreen.png" and to link to it...
let's see if it's possible^^

 

[Jeffin]

Wooooooooow.

 

[Kim]

The ability to upload the thumbnail when importing a skin would be brilliant!

Or.. an automatic process whereby the CSS or thumbnail can be written by the Skin author, without relying on the style id # (which will be unique to every install on every different set up)

As it is this relies on the admin having fairly good knowledge to be able to identify and then create the CSS to do this... Whilst most people here right now as early adopters probably have these skills, I am sure this will be too complex/too much hassle for many of the less technical admins who will no doubt fall in love with Xenforo.

 

[Shelley]

Very nice, I did my alterations earlier. I intend in making the previews a little bigger (quite a bit actually) as I intend on only having two style viewable to the public.

​

 

[Shelley]

For those that only have 1 or 2 styles and prefer the larger images i'll post a how-to in this thread seeing as it's very much related. It's not advisable to have such large previews if you have more than 2 style though you can size them up accordingly.

Firstly go into the style_chooser template and find the following code:

<span class="title">{$style.title}</span>

Add it above the following code this will place the style title above the image rather than to the right of it:

<a href="{xen:link 'misc/style', '', 'style_id={$style.style_id}', '_xfToken={$visitor.csrf_token_page}', 'redirect={$redirect}'}">

Now go into your style_chooser.css template and paste in the following:

.styleChooser .icon.style8
{
    background: transparent url('@imagePath/xenforo/styles/style-8.png') no-repeat;
        height: 200px;
        width: 200px;
        border-radius: 10px;
}

.styleChooser .icon.style1
{
    background: transparent url('@imagePath/xenforo/styles/style-1.png') no-repeat;
        height: 200px;
        width: 200px;
        border-radius: 10px;
}

Bare in mind that the title.png will differ and you should title this accordingly as will the path to that image. Also, the css class will differ with the style id so ensure that these comply to that style id. Below is how it looks.

​

 

[kkm323]

lazy people like me would like to upload an image instead of doing all of the editing ...

 

[Erik]

I appear to have gone mental. There's no way to access the style properties of another style right now, so that approach won't work after all., sorry.

I think this functionality needs to be moved into higher level code (like helpers, or whatever the technical term is) rather than being put directly into the templates. Having to edit the CSS for each and every style you have installed to point to the images of the other installed styles is ridiculous.

Each style should define a thumbnail image, either through a fixed style property, or an attribute of the style (similar to the style title and style description that we have now). The higher level PHP code should then output the code for the style selection, so that all the thumbnails are automatically displayed on every style.

The approach you are using now seems backwards.

 

[Shelley]

lazy people like me would like to upload an image instead of doing all of the editing ...

I'm sure it will be improved as time passes but for now it's a good start (not perfect) but with a few tweaks here and there it'll all come together as it's built upon by the developers.

Funny you should say lazy, I used to be lazy, kinda missing it.

 

[Kier]

The approach you are using now seems backwards.

What approach? This is not a XenForo feature, it's a template edit. At this point, I'm not taking an approach at all.

I've already said that doing something friendly and polished is on my to do list, but this is not it, as there is insufficient time to do it for 1.0.0. This thread is simply a how-to for those who want to do something, but I'm not expecting most customers to do it at this point.

 

[motowebmaster]

While this was a bit of a manual effort, if the thumbnails were provided I would have changed them anyway. I made them at the 64x64 size in this tutorial but will likely modify their size as well. The idea of utilizing "style choices" hasn't been something I've usually practiced, but am intrigued by the possibilities that I've been considering on my XF site.

I'm not sure how it could have been done differently.

 

[Kier]

I'm not sure how it could have been done differently.

Done differently, there would be a control to allow you to upload a style preview image when editing a style. We'll have that eventually, but we're too far into the 1.0.0 cycle to do it now.