Skinning Nova - Templates

Template files provide the basic HTML structure of any skin. If your skin requires the DOM to be in a specific order or you need things moved around for your styles, this is where those changes would happen. Content and code used within template files appear throughout a given Nova section and are not specific to any one page of that section.

Location

Template files must be at the root of your skin and must be named in the format template_{section}.php otherwise Nova will not be able to find the template file to use it.

PHP code

At the top of every template file is several lines of PHP code that will tell the template file what the current skin is, where to look for the stylesheet, and more. In general, this can be copied from another template of the same section and placed in your skin without modification.

Include files

The template file for a given section also has a line includes important CSS and JavaScript files for each section. If you remove this line, much of the dynamic behavior of your skin will stop working.

Variables

Nova relies on using "regions" to know where to place different user interface elements and sections. The content of these variables it set from the controller and then rendered in the template. Below are the available region variables and which sections they can be used in:

Variable	Section(s)
$ajax	admin, main, wiki
$content	admin, login, main, wiki
$flash_message	admin, login, main, wiki
$javascript	admin, login, main, wiki
$nav_main	admin, main, wiki
$nav_sub	admin, main, wiki
$panel_1	admin, main, wiki
$panel_2	admin, main, wiki
$panel_3	admin, main, wiki
$_redirect	admin, login, main, wiki
$title	admin, login, main, wiki

Important template regions

Navigation

Nova uses two different navigation menus: the main navigation ($main_nav) and the secondary navigation ($nav_sub). The main navigation is consistent throughout the entire site, but the secondary navigation changes depending on the section the user is currently viewing. From a skinning perspective, you won't need to know what section is showing, only where you want the secondary navigation to be shown on the page.

Navigation elements are rendered as an unordered list (<ul>) with each navigation element being a list item (<li>) containing an anchor (<a>) tag. Both navigations are contained within divs that can be targeted to style each list individually (.nav-main and .nav-sub respectively).

Page content

Each template file contains a section for the page's primary content. The page's content generally appears in a div with the class .content and contains three PHP elements: flash messages, the page content, and Ajax elements.

• The flash messages appear if Nova needs to generate an error or success message, which can be seen when you update a post or submit an application. They are styled as a div element with the class .flash_message, with an additional class of either .flash-success, .flash_error, or .flash_info that give color styles.
• The $content variable displays the page's content, whether it's text defined in a Nova's Site Messages, a custom/static generated through a separate view file, or one of Nova's pre-formatted content pages.
• Ajax can help update a page without a user having to reload, it can receive data after a page has loaded, and it can send data to your server. In general, you won't need to worry about this more than ensuring the $ajax variable is in your template.

User panel

Nova includes a handy user panel that contains quick access to links that users may want to get to quickly. In general most skin developers choose to simply copy the panel from their favorite skin and simply change the look, but Nova does provide you with all of the tools and data to re-structure the user panel however you would like.

There are 3 panes included in the user panel that are represented by 3 different variables: $panel_1, $panel_2, and $panel_3. You can put these in any order you want or anywhere on the page.

There is also a $panel variable that contains the icon for a particular panel pane. (This information is actually set in each individual template, so you're free to change it.)

Triggering the panel is done with some simple jQuery that can also be found in each individual template.