Theming in Exponent CMS

Theming an Exponent Website and customizing it to your needs is only limited by your knowledge of HTML and CSS if you know your way around the system. In this section, you’ll discover the process of taking a design and implementing it into an Exponent installation, highlighting tips, tricks, and best practices to help assist you in making the most out of your Exponent Project.

Understanding Exponent Themes

Theme Template Structure

Overview

This guide will show how to set up a theme in Exponent CMS 2.0. It covers how to best interact with the system, and make the most out of your Exponent project. ...

The Header Configuration Array

Overview

The Header configuration array works in conjunction with a call to expTheme::head(); This allows you to pass certain configurations to the CSS Engine, as well as letting exponent know what doctype you're using. ...

Exponent Theme Main

Overview

expTheme:::main() is in charge of the main page content. It is what displays all the modules found in the main container on the selected page.  Because it is a 'sectional' container/module, the content is different for every page. ...

Hard Coding Modules

To give your theme a unique appearance and still take advantage of the dynamic nature of pages within Exponent, you may 'hard-code' a module into a theme.  Some examples typically used might be the menu, a search form, a site log in or a footer with information about the copyright.  Most had-coded modules MUST have a 'source' to reference the stored data, however some modules without configuration settings do not require a source such as login and simple navigation views.  Hard-coded modules may NOT be nested within other hard-coded modules (only one level deep), however a hard-coded container may nest other containers or modules. ...

Hard Coding Images

If you want to be able to embed an image directly in your theme you can use the img tag with a php THEME_RELATIVE path which points to your theme directory. ...

Footer Info

This is how Exponent closes out the page in your theme.  This required call is the one which actually parses the css styling and places information about javascript onto the page. ...

Theme Assets

You may further customize a theme by placing specialized graphics in the theme folder...favicons and touch-icons. ...

Updating a Theme to 2.x

Though early versions of 2.x supported older theme functions, the move to v2.2.0 and later requires using the v2.x expTheme functions.  (in early iterations such as v2.2.0patch5 or V2.2.1, compatibility still exists and will display warning messages with details of how to correct the obsolete/deprecated calls with error reporting turned on and logged in as an admin user)  Additionally all the 'old school' modules have been upgraded to the 2.0 'controller' format (though they are called 'modules'.  Here are some specific things to look for and update. ...

Custom Theme Tutorial #1

Here's how you can create a custom theme using an existing Exponent theme as a guide.  This could also serve as a basis for building custom themes from scratch, but we have another tutorial for that here. ...

Custom Theme Tutorial #2

Here's how you can create a custom theme using a generic web theme template.  There are countless free and paid web templates available on the internet.  You may search one of the template collection web sites to locate a 'theme' you would like to incorporate into Exponent.  For the purposes of this tutorial, we'll select a simple 3-column liquid template. ...