Warning: The author of this contribution does not provide support for it anymore.

Topic Preview

Frequently Asked Questions

How to Customize the look of Topic Preview 2 jQuery Theme

Topic Preview 2 comes with a really nice and modern tooltip style for topic previews with the jQuery Theme option. The appearance and behavior of the jQuery theme can be customized to look and behave just right, for each style on your forum.

The Default Themes: We have two basic themes: "Light" and "Dark". You can choose whichever one looks best on your board's styles by opening each style's template/overall_footer.html file and look for "theme" and change its value to either "light" or "dark". Save and purge your cache.


Custom Theming: If the light or dark themes are not to your liking, you can easily create your own color themes. Open the file: styles/topic_preview_assets/topic_preview.css. At the very bottom is a custom theme block that has been commented out. You can un-comment it, change its color definitions to your liking, and then set the "theme" setting to "custom" in your style's template/overall_footer.html. Or, you can create multiple custom themes by copy-pasting the custom theme css block. Just remember to replace the use of the word "custom" in the CSS file and in the overall_footer.html file to whatever name you want to give each of your unique custom themes.


Adjusting the Behavior and/or Placement:
Delay: By default, the tooltip waits 1.5 seconds before appearing. You can increase/decrease this wait time by adjusting the "delay" setting in each style's template/overall_footer.html.

Position: The default setting should be good, but if the tooltip needs to be shifted further left or right on the horizontal axis, adjust the "left" setting in the style's template/overall_footer.html

Animation: The tooltip will appear to drift up and away as it disappears and this effect can be enhanced, reversed in direction or disabled by adjusting the "drift" amount setting in each style's template/overall_footer.html.

Size: Tooltips can be made bigger or smaller if desired by adjusting the "width" setting in each style's template/overall_footer.html. Combined with the "Length of topic preview text" setting in the ACP, you can make some really nice big topic previews or really compact ones.

Missing Avatars: Topic Preview will display a generic No Avatar image (when the Avatar feature is enabled) if a user does not have an avatar or if the user's avatar could not be found (i.e.: broken image links). If you already have a No Avatar image you prefer to use, you can adjust the "noavatar" setting to point to the location of your preferred No Avatar image.