Themes and frontend features

OTF comes equipped with the ability to theme an application, and also reuse that theme in other instances of OTF.

By default, OTF comes with a base twitter bootstrap theme. Twitter bootstrap will be used throughout the OT admin sections, but you may also load any other CSS or Javascript theme you like. jQuery is also loaded by default.

Creating a new theme

Creating a new theme is a bit complicated. The easiest way to get started is to copy the base theme and start customizing. The themes live in the /public/themes directory and should have some kind of unique name.

All themes matching the correct structure will get loaded automatically and can be changed from the "App Config" section of the admin section.

Loading site-wide CSS or JS

There is a CSS and JS registry for loading site-wide CSS and JS files that are separate from those loaded by the theme.

$hr = new Ot_Layout_HeadRegister();

// append a CSS file
$hr->registerCssFile('css/myfile.css', 'append');

// prepend a JS file
$hr->registerJsFile('scripts/myfile.js', 'prepend');

These exist so that you can skin main themes without having to make a copy. For example, you could download a custom Twitter Bootstrap css file, use the base Twitter Bootstrap theme that comes with OTF, and just load the CSS file.

Autoloading CSS and JS

OTF autoloads CSS and JS files based on the action called. As long as the file structure matches the module/controller/action.css scheme, the css or js file will be loaded automatically and the developer will not have to do anything. This is just for convenience.