1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Tips and Guides [Archive]' started by Kier, Jan 20, 2011.

  1. Kier

    Kier XenForo Developer Staff Member

    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.


    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;
    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
  2. Russ

    Russ Well-Known Member

    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 :)
    Iversia, Kim and Allan like this.
  3. Kier

    Kier XenForo Developer Staff Member

    That's a rather good idea. I'll see if that can make the next release candidate.
    Iestyn, Russ and (deleted member) like this.
  4. ragtek

    ragtek Guest

    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 )
  5. Kier

    Kier XenForo Developer Staff Member

    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.
    Mikey likes this.
  6. dieketzer

    dieketzer Well-Known Member

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

    ragtek Guest

  8. bogus

    bogus Guest

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

    Ok forgot what i wrote ;)
  9. ibnesayeed

    ibnesayeed Well-Known Member

    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.
    1 person likes this.
  10. ragtek

    ragtek Guest

    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^^
    ibnesayeed likes this.
  11. Jeffin

    Jeffin Well-Known Member

  12. Kim

    Kim Well-Known Member

    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.
    Kier and (deleted member) like this.
  13. Shelley

    Shelley Well-Known Member

    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. :)

    ibnesayeed, John, Kier and 1 other person like this.
  14. Shelley

    Shelley Well-Known Member

    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.

    Pro, Skeletor, Rob Fritz and 5 others like this.
  15. kkm323

    kkm323 Well-Known Member

    lazy people like me would like to upload an image instead of doing all of the editing ... [​IMG]
  16. Erik

    Erik Well-Known Member

    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.
  17. Shelley

    Shelley Well-Known Member

    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. [​IMG]

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

    Kier XenForo Developer Staff Member

    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.
    Shelley likes this.
  19. motowebmaster

    motowebmaster Active Member

    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.
  20. Kier

    Kier XenForo Developer Staff Member

    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.
    EQnoble likes this.

Share This Page