Custom JavaScript

Tender recently introduced "Custom JavaScript" and "Custom HTML Header" for our customers on the some plans (if you do not currently have Customization available, you would need to upgrade to the current Ultimo plan to enable it). This offers a new world of possibilities, so I'd like to show a few ways in which this can be leveraged to create an amazing Tender experience.

You can find these customization by going to:

• Account & Settings in the main menu
• then Appearance & Text on the left sidebar

Technical Notes

The JavaScript runs on both the dashboard view and the forum view. This allows you to customize the experience for your customers, but also for your staff.

On the dashboard/admin side, you will have access to jQuery.
On the forum/public side, you will have access to Prototype (but not jQuery).

Example: Syntax Highlighting

Tender does not support syntax highlighting for pre blocks. Fortunately highlight.js is a JavaScript library that offers syntax highlighting with advanced heuristics: you can simply drop it on a page and it will find all code blocks, detect the language used in each, and add highlighting. Let's add it using the Yandex CDN.

In Custom HTML Header:

<link type="text/css" rel="stylesheet" href="//yandex.st/highlightjs/6.2/styles/default.min.css">
<script type="text/javascript" src="//yandex.st/highlightjs/6.2/highlight.min.js"></script>

In Custom JavaScript:

hljs.initHighlightingOnLoad();

And BAM! Syntax Highlighting! You can customize the CSS directly by starting from one of the numerous themes provided, but this is a simple way to start.

Other Examples

Added a great functionality to your Tender? Let us know! We can add it here so that everyone can profit :)