• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

How to Make Style Preview Thumbnails

Kier

XenForo Developer
Staff member
#1
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.

Screen shot 2011-01-20 at 16.59.24.png

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.

style-4.png

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:
HTML:
.styleChooser .icon.style4
{
	background: transparent url('@imagePath/xenforo/style_previews/style-4.png') no-repeat;
}
Edit template.png

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.

Style Preview.png
 

Russ

Well-known member
#2
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

XenForo Developer
Staff member
#3
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.
 
R

ragtek

Guest
#4
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?:D )
 

Kier

XenForo Developer
Staff member
#5
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.
 
R

ragtek

Guest
#7
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:(
 
B

bogus

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

Ok forgot what i wrote ;)
 

ibnesayeed

Well-known member
#9
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.
 
R

ragtek

Guest
#10
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^^
 

Kim

Well-known member
#12
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

Well-known member
#14
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:
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:
Code:
<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:
Code:
.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.

modded_stylechooser.png
 

Erik

Well-known member
#16
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

Well-known member
#17
lazy people like me would like to upload an image instead of doing all of the editing ... :oops:
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

XenForo Developer
Staff member
#18
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.
 
#19
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.