AJAX Search

The built-in search engine utilises AJAX and MySQL's powerful FULLTEXT feature to rapidly return, in real-time, any pages that match your search query.

When you click on a returned result, the visited page will highlight the search terms until one of them is clicked on. Try searching for 'ajax' and clicking on a returned result.

Search results appear here in real-time.
PHP Sidebar

Embed PHP Code

Sidebars can also contain raw PHP code, enabling you to hook into any script, function or include file. This provides limitless scope for extensibility.

The server date and time below is created on the fly using PHP's gmdate() function.

Date and Time: 23/05/13 06:51:33

Code is locked down and secured via multiple mechanisms.

The Theme Engine

Yet another template-like feature of Vanilla is the Theme Engine - a system similar to WordPress themes whereby the whole look and feel of the site is contained within its own folder on the server.  Themes can be applied across all pages (global), on a per-page basis, or as the links below show, overridden via a query string value.

Click a link below to load this page with a different theme:

Revert to default theme.

What's Makes a Theme?

Each theme consists of:

  • A config.php file - to tell Vanilla about the theme (name, number of layouts etc.)
  • Any number of 'layout' files (similar to a template)
  • A 'css' directory
  • An 'images' directory
  • A 'js' directory (for additional JavaScript beyond the core files)

What are Layouts?

Each theme can have any number of different layouts - 'single column', 'two columns' or 'newspaper' for example - you can call them whatever you want.  Layouts are defined in the config.php file and take the form of an array containing:

  • ID - should start at zero and increment by 1 for each layout
  • Title - the title of your layout design - e.g. 'My Layout'
  • File - the actual name of the physical file - e.g. 'my_layout.php'
  • NavCSS - the navigation css file for this layout
  • CSS - the main CSS file for this layout
  • Logo - the name of the logo image file for this layout - e.g. 'logo.gif'

Note - Every theme should have at least one layout defined in its config.php file.

Adding New Themes

The system comes with a few themes already built-in.  To add a new theme to the system, simply upload your files into a new directory within the 'themes' folder.  If anything goes wrong, you should receive various helper messages explaining what the problem might be.

The__Syntax__

We've used a simple syntax to denote placeholders within theme engine layout files: __example__.  This allows users to combine themes with other Vanilla placeholder types such as {Smart Tags}, [Mail Form], [Media Gallery], [List Directories] and FooBank™ variables.

PHP Theme Support

All theme layout files are written in PHP. This means that you can include extra server-side code into your theme files, along with JavaScript, to manipulate page elements at runtime.  For example, in this alternative theme, we've added jQuery to change the menu behaviour (animation), hide the breadcrumbs and accessibility toolbar and change the positioning of the logo.  The majority of the styling is achieved via the theme's CSS file.

Failover Support

If a theme file cannot be found or loaded, the system falls back to the default theme.  If this too fails, the system will quit the Theme Engine and attempt to serve up regular, non-themed pages.

Last updated: 16/05/2012