Documentation

Custom HTML, CSS and JavaScript

Customizing ThoughtFarmer using HTML, CSS, and JavaScript

Certain desired customizations may go beyond the default options available on the Theme page. ThoughtFarmer is able to inject any custom HTML, CSS, and JavaScript directly into key portions of the page to get the customization that you want. Add these customizations on the Theme page, under the Custom HTML, CSS and Javascript tab.

In addition to style customizations, you can also use this section to add references to third party libraries (e.g. LightboxSyntaxHighlighter), or embed tracking code such as Google Analytics. Customizations using ThoughtFarmer CSS hooks are not guaranteed to be maintained after version upgrades. It is recommended that any customizations be tested after upgrades and modified if necessary.

How to add custom HTML

  1. Go to the Admin panel > User interface section > Theme page.
  2. Click on the theme you want to add custom HTML to.
  3. Select the Custom HTML, CSS and JavaScript section.
  4. Enter custom HTML in the appropriate fields as described below.

<HEAD> tag content

References to third party libraries as extensions to ThoughtFarmer should be added here.

Custom header HTML

If you wish to add content to the header section of your ThoughtFarmer intranet then you can insert it in the Custom Header HTML section. This is the ideal location for adding custom buttons for navigation.

Custom footer HTML

To add content to the footer of every ThoughtFarmer page you can add it in the Custom footer HTML section of the Theme page. This is also the ideal location for extra scripts like Google Analytics or any DOM manipulation scripts that require elements to be loaded and ready.

For example uses of the above fields, see How to add custom content to header.
 

How to add custom CSS and JavaScript

You can make modifications to your ThoughtFarmer intranet using extra CSS and Javascript code. These modifications are made in the Custom CSS and Custom JavaScript areas, found under the Custom HTML, CSS and JavaScript tab of the Theme page.

You can add custom CSS to your intranet from the Theme page, allowing you to customize your intranet's visual elements. You do not have to surround your code in <style> tags in this area. You are able to add CSS either directly inline or through link references to CSS pages available externally or uploaded to another ThoughtFarmer page. If you want to make any external <link> file references, add those to the <HEAD> tag content section of the tab.
  1. Go to the Admin panel User interface section > Theme page.
  2. Click on the theme you want to add custom CSS to.
  3. Select the Custom HTML, CSS and Javascript section.
  4. Enter custom CSS in the Custom CSS field.

Add custom JavaScript

You can add custom JavaScript to your intranet from the Theme page. ThoughtFarmer uses jQuery and it is included on every page, so it does not need to be re-referenced to be used. Similar to the CSS tab, you are not required to surround your code with a <script> tag in this area. If you want to make any external <script> file references, add those to the Custom footer HTML section of the tab.
  1. Go to the Admin panel > User interface section > Theme page.
  2. Click on the theme you want to add custom JavaScript to.
  3. Select the Custom HTML, CSS and Javascript section.
  4. Enter custom JavaScript in the Custom JavaScript field.