Blog items tagged with "tutorials"

Where, Oh Where Has My Little Script Gone...

Scripting...oh where, oh where can it be!  Was your web site running a script that has seemed to stop working (or no longer even appears in the content) since your upgrade to v2.3.1 (or one of the v2.1.4 or v2.2.3 security patches)?  Well on the 'plus' side, that means the security fix is working, but that's not what you wanted to hear.  To help eliminate possible site security issues which could be caused by script injections, we now strip all content of any 'script' tags EXCEPT within Code Snippet modules.  Therefore, if you had embedded a script such as Google Analytics or similar within a Text module, it is now stripped out before saving or displaying.  What you'll need to do is either embed the script directly within the theme/subtheme template file (e.g., v2.3.3 now allows calling a script or code directly from the expTheme::foot() call) or use a Code Snippet module on the page.

jQuery and Exponent....sitting in a tree...

jQueryThe jQuery javascript library has been integrated into Exponent since v2.2.0 in an effort to help us move away from the YUI library.  jQuery is more popular and has many more add-ons/plugins/widgets than does YUI.  It is also the javascript library of choice for Twitter Bootstrap.  Just like YUI, Exponent easily integrates the use of jQuery into the Exponent framework.  Here are some tips on using jQuery with your custom theme or view.

Just like YUI, jQuery is NOT automatically loaded, but only loaded if needed on the page.  (However, most every page has some YUI code or widget, therefore it appears that YUI is always loaded).  We load jQuery (or YUI) using the {script} Smarty template tag.  We can either simply load the base jQuery library script, or we can use it to also load add-ons/plugins and associated stylesheets (again just like the YUI module loader).

The {script} block is used within view templates to delineate a javascript script or javascript code (docs found here).  It is recommended that you NOT load your own jQuery library within the view template or theme template, as it will likely conflict with the integrated version.  We ship the latest versions with Exponent and load jQuery v2.x in most browsers and v1.x in Internet Explorer versions less than 9 and Firefox version less than 3.7.  The simplest approach is to use this to embed a jQuery code snippet:

{script unique="myuniqueid" jquery=1}
    $(document).ready(function() {
        // jQuery code goes here
    } );

We can also use the tag to load jQuery add-ons/plugins either in the system or within the custom theme.  To load an addon, just enter its name (sans the .js) into the jquery parameter.  It will first search the theme's /js folder and if found will then look for a like named .less or .css file in the /less or /css sibling folder.  The system jQuery add-ons are located in /external/jquery/addons/.  So to load the jQuery Colorbox (lightbox) addon (jquery.colorbox.js and jquery.colorbox.css), you'd use the following:

{script unique="myuniqueid" jquery='jquery.colorbox'} 

    $('a.calpopevent').click(function(e) {
        target =; $.colorbox({
            href: EXPONENT.PATH_RELATIVE+"index.php?controller=eventregistration&action=show&ajax_action=1&title=",
            maxWidth: 650


We can also use the tag to load a jQuery script just as we would any other script.

{script unique="myuniqueid" jquery=1 src='myjqueryscript.js'} 
    $(document).ready(function() { 
        // jQuery code goes here
        myjsfunction(1, 2, 3); // function contained in myjqueryscript.js
    } ); 

Hopefully this little introduction to using jQuery within Exponent has whetted you appetite for using javascript within your custom theme or view.

Using the new Workflow Feature

Version 2.3.0 includes a new optional feature called 'Workflow'.  This feature allows greater control over a multi-user site, especially where there are many users adding new material which should be edited or approved prior to being visible to the public.  'Workflow' adds 1) Revisions, and 2) Approval.Workflow Revisions

'Workflow' is activated or deactivated using the 'Exponent' 'Super-Admin Tools' menu.  Workflow is currently enabled within the Blog, News, & Text modules.  A 'Workflow' enabled module can be identified on the Manage Modules view. Once 'Workflow' is activated creating or updating module items behaves differently depending on the user's permissions.

Revisions – in a very basic sense, revisioning creates a new copy or revision of a module item each time the item is edited/saved.  This affords an opportunity to ‘roll back’ or ‘undo’ an edit.

  • Revisions are ‘reported’ on the standard view with a badge displaying the revision # next to the ‘Edit’ button/link.
  • Revisions are ‘managed’ in the Edit item view. 
    • Revisions are initially hidden within a collapsed container below the standard edit area…with the most most recent at the top of the stack.Revisions
    • The ‘revision’ being edited will be highlighted
    • A previous revision may be activated by 1) clicking on that revision, and 2) when the display refreshes with the new data, saving the item
  • Currently, old revisions can NOT be manually removed, so you will have a permanent history of all edits to that item.  However, it is possible to set the max number of revisions by manually editing the config.php file (no UI exists yet).

Approval – in a very basic sense, approval adds a layer of ‘moderation’ before content may be presented to a basic user with no permissions.

  • Without an ‘approve’ permission, the user will only see (interact with) the most recent ‘approved’ item revision (if any).
  • All new/edited items will be saved as un-approved revisions unless the user has 'approve' permission:
    • If a user WITHOUT 'approve' permission edits an item,
      • they will be editing the most recent approved revision which will be saved as an un-approved, but newer revision
    • With an ‘approve’ permission, the user will see the most recent item revision which may then be ‘approved’ using the new ‘Approve’ button/link.
      • Creating/Editing, then saving an item will automatically approve it
      • Turning on ‘Preview Mode’ will display the most recent approved revision (if any)
      • An un-approved item will be ‘displayed’ on the standard view with special highlighting (yellow background and red border) which disappears on ‘hover’.Unapproved Revision
      • Currently, you can NOT un-approve a revision, therefore you are required to either leave it alone (unedited, unapproved), edit it (will be saved as approved), or simply approve it as is.
  • The ‘Approve’ permission is tied to the ‘edit’ and ‘create’ permissions.  It applies to ALL items in the module the user has ‘edit’ permission with…therefore the ‘create’ permission with an ‘approve’ permission only allows (automatic) approval of that user’s items, but not all items in the module, you must also grant them the ‘edit’ permission…e.g., if you can’t edit it, you can’t approve it.
  • As a reminder, Admins and Super-Admins are ALWAYS granted ALL permissions, and a 'manage' permission grants ALL permissions (for that page/module).

One thing to consider before activating 'Workflow'

  • Non-admin users MUST specifically be granted an 'approve' permission to create/edit items for display, otherwise that revision must be approved before it is displayed.  So, until you grant 'approve' permissions, the admin(s) may be busy approving all new content.

And a big caution before de-activating 'Workflow'

  • When you de-activate workflow, ALL revisions except the most recent approved revision will be permanently removed!

In most instances, 'Workflow' may not be of use.  But if you are in a multi-user environment where you need to control what actually is displayed on the site, you now have a new tool.


Preparing to Upgrade to v2.3.0

Version 2.3.0 is the follow-up to version 2.2.3 and was given a version bump due to the many new features added.  It also marks a 'slowing down' of version releases as it's purposely been five months since the last release.  While it doesn't require as many changes as the move to v2.2.0 (which deprecated all the old 1.x code), it would still be wise to note and adhere these following changes.

The navigation showall_Flydown view for a bootstrap based theme now includes all the associated markup in the view instead of in the theme template.  Therefore if you use this view or have based your custom theme on 'bootstraptheme' (it is the default menu for the boostraptheme) you MUST edit your theme templates (including subthemes)

  • The older code looked something like:
    <!-- navigation bar/menu -->
    <div class="navigation navbar <?php echo (MENU_LOCATION) ? 'navbar-'.MENU_LOCATION : '' ?>">
      <div class="navbar-inner">
        <div class="container"> <!-- toggle for collapsed/mobile navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span> <span class="icon-bar"></span>
          <span class="icon-bar"></span> </a>
          <!-- menu header -->
          <a class="brand" href="<?php echo URL_FULL ?>"><?php echo ORGANIZATION_NAME ?></a>
          <!-- menu -->
          <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_Flydown")); ?>
    <div class="navbar-spacer"></div>
    <div class="navbar-spacer-bottom"></div>
  • This is simply replaced by:
    <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_Flydown")); ?>
  • Depending on which exponent version you created your theme from (first shipped w/ v2.2.0), you may not have all those lines above.  In fact, in v2.2.0, the menu was a theme custom menu simply call 'showall'

There may be duplicate Search Engine Friendly (SEF) URLs.  We include an optional upgrade script to correct this issue, but do NOT run it automatically.  Duplicate SEF URLs can cause issues when using the new 'Workflow' feature.

If your pages/content seems to have disappeared for non-admin users, you should first (re)run the 'Fix Sectionrefs' upgrade script.  If that doesn't fix the problem, you need to ensure the 'Disable Privacy Feature' is selected found in 'Confgure Website' Exponent menu item, under the 'Display' tab.

If you have manually loaded the 'jQuery' script, it may be colliding with the auto-loaded jQuery script.  The BEST method to ensure that jQuery is auto-loaded, is to set the theme framework (in the theme template/subtheme templates) to either 'jquery'.  jQuery is also auto-loaded with the bootstrap theme frameworks.  Documentation found here.

Again, not a lot of earth shattering changes required, but we always recommend doing a test before upgrading a production web site, just in case.

Using the new elFinder File Manager

Version 2.3.0 includes a new modern File Manager which (in the long run) will make it much easier to manage and work with uploaded files.  In general, elFinder follows an 'operating system' paradigm, so it should be fairly logical to begin using, but it is much different than the old Exponent File Manager.elFinder File Manager

Some of the (new) elFinder features include:

  • True file folders for easier file organization
  • Drag and Drop file upload and moving (CAUTION: while you can move a file, it may break any references within WYSIWYG text since they are embedded as hard reference links instead of as an expFile object)
  • File cut/copy/paste
  • Single 'pane' file management and upload, instead of the old separate file uploader
  • Command toolbar to access most actions directly
  • ​Item option (context) menus
  • 'Touch' enabled to work with mobile devices
  • Integrated file archive creation and extraction (not available on windows servers)
  • Icon and details folder views

To enable the new elFinder file manager, open ''Configure Website' from the Exponent menu.  Then select the 'File Manger' tab and select 'elFinder' as the system file manager.  For the time being, the elFinder file manager is only an option and not the default file manager.

How to use these new features:

  1. Basic Window Layout
    • As with most modern file mangers there are three basic areas or panes in the elFinder window
      • Toolbar - is located at the top of the window
      • Folder Tree Pane - is located to the left side of the window.  The folder hierarchy can be collapse or expanded and the pane width may be adjusted
      • File Pane - this is the largest area of the window which displays all the file in the current folder or those matching a search request
    • elFinder also uses context menus which appear on folders, files, or the File Pane background
  2. File Uploads
    • ​​The easiest way to upload files into the file manager is to simply drag them from your PC desktop/file manager and drop them on/into the folder you choose.
    • You may also click on the 'Select files to upload' toolbar button, or choose the 'Upload files' context menu item from the file pane.  This will present a window to drag/drop files, to paste a file, or open a file select dialog to choose the files to upload.
  3. File Selection
    • The easiest way to select a file when the file manager is opened from within an editor or edit item dialog, is to simply double-click the file.
    • You may also click on the 'Select files' toolbar button, or choose 'Select' from the context menu for the file(s)
    • You may select more than one file by using the control/shift method or a drag box.
  4. File Operations/Management
    • You may cut, copy, paste, duplicate, rename, delete, or preview a file using the appropriate toolbar button or context menu item
    • You can display the files in the file pane as either large icons or a detailed list
    • You can sort the displayed files by name, size, kind, and date, in ascending or descending order
  5. Image Editing
    • elFinder includes integrated image resizing, cropping, and rotation using the 'Resize & Rotate' command
    • For more advanced editing, we now use an online service called Pixlr to provide full graphics editing features.  
    • As is the case with all commands, you can use the toolbar button or the context menu which will present you with a dialog to select either the full-blown Pixlr editor or Pixlr Express which has fewer features.
  6. Exponent File Management
    • The options to change file sharing, image title, image 'alt' title are now found in the 'Info' dialog of the file which can be displayed via toolbar or context menu
    • The 'sharing' status is changed instantly, but the 'title' and 'alt title' require you click on the 'update' button for the change to take place
    • You'll also see additional details such as file type, size, dimensions, file owner, etc...
    • There are also details about the file/folder found in the 'status' bar at the bottom of the window
    • There is also a 'Preview' command available to display/play images, videos, & mp3 files
  7. File Search
    • There is a built-in search feature using the input box in the toolbar.  Simply enter the phrase, press 'enter' and all the files in the system matching that phrase will be displayed, regardless of their folder location.
    • Click on the 'x' button or select a folder in the folder tree pane to clear the search.
  8. Transfer (back) to the Insert/Modify Link Dialog
    • If you are inserting a 'link' to a page into an editor instead of a link to a file, you can switch to the dialog with a list of pages available, the option to select a module on a page, or to switch back to the file manager.  This button is found on the toolbar to allow you to switch back to the Insert/Modify Link window.  It is located next to the toolbar 'Help' button.

Overall, we think you'll be pleased with the new elFinder File Manager and find it much simpler to use.


Successful Site Upgrade Strategies

Exponent is a very active project and frequently receives new features.  Issues or anomalies are also corrected shortly after being identified.  You'd think those would be great incentives to update to the most recent stable version, just to make managing and maintaining a web site much easier.  Here are some tips to help in upgrading a site, or to prepare to upgrade a site.

As a quick overview, an Exponent web site consists of five (5) components:

  1. the Exponent software, which gives you an empty site and is the starting place for all sites whether being built from scratch, moved to a new server, or restored after a server failure. This is the part of the update that we provide for you.
  2. the custom theme, which gives your site a unique character apart from all other web sites.  While we provide some sample themes (either in the package or additional ones on the download site), most users want to customize their own theme.  The user must maintain (update?) the custom theme and ensure it does not contain obsolete commands or calls.  It is stored/contained in the '/themes' folder.
  3. the site's configuration settings, which hold the basic information about the site.  It is stored in the 'config.php' file which is created and updated by the Exponent software.  It is unique to each web server.
  4. the site's content, which is the majority all you see on the web site.  This is stored in the database and is updated automatically during the 'upgrade' process.
  5. the site's support files, which includes all the images used on the site, and any files made available though the site.  These are stored in the '/files' folder and are not affected by upgrades.

The first step in preparing to upgrade a site (and preventing disaster in general), is always maintain a BACK UP of your site.  In order to back up the five (5) components:

  1. The Exponent software is always available on Sourceforge and through GitHub, so there's no need to keep a local copy.
  2. The custom theme was created by you and in most cases you'll already maintain a copy.  However in v2.2.0+, there is a new 'Export Theme' command available in the Theme Manager to easily package and download your custom theme for restoration, or to move to a new site.  The theme may be restored/added to a site using the 'Install Extension' command.
  3. The 'config.php' file is located in the '/conf' folder (v2.0/2.1) or the '/framework/conf' folder (v2.2).  The easiest way to quickly get 'back up and running' is to restore a copy of the config.php file.  For security reasons Exponent provides no automated method to retrieve nor restore the config.php file.  However, we highly recommend you use cPanel or ftp to obtain a copy.
  4. The site's content (database) is easily saved or restored using the Import/Export EQL (Exponent Query Language) File commands. The export command allows you to tailor which information/tables are saved, while the import command replaces any database tables with the ones stored in the EQL file.
  5. Lastly, the site's support files are easily saved using the Import/Export Files commands.

So once you have a backup of your site, especially the site's content (EQL file), you may proceed.

In a very simplistic sense, upgrading to a new version of Exponent is an easy two (2) step process.

  1. Install the new software version on your server by either extracting the .zip file to the root folder/subfolder, or using 'git pull' from ssh or a shell.
  2. Browse to your site and follow the instructions in the 'upgrade' notice which now appears.

That sounds so simple, what could go wrong?  Well, here are some common issues or problems which might prevent a smooth upgrade:

  • Your custom theme (or a custom view) is outdated and uses obsolete commands.  Though the basic format of an Exponent theme hasn't changed much from the v0.9x days, many of the 'commands' have been updated and streamlined.  Here's the documentation on the theme template format to check/update your theme.  Here's a good article on checking for and updating themes to be v2.2.0+ compliant.  As we move into version 2.2.0+, many of the obsolete calls will no longer work.  The easiest way to confirm the problem lies in the custom theme is to switch your site to a 'shipped' theme and see if it works as expected.  If for some reason you can't log onto the site, the current theme is stored in the 'config.php' file on the line with DISPLAY_THEME_REAL.
  • Your site crashed in the middle of an upgrade and now is 'broken'.  While this rarely occurs with the 'stable' software, it can exist after a test with pre-release software.  Your best bet is to run the upgrade again by manually kicking it off with a browse to your site via  In many cases this will detect and correct a half-upgraded site which may also correct the issue.

While we realize that many Exponent users are actually providing a paid service to clients and their 'time is money.'  Therefore, if a site is up and running, why 'donate' your valuable time to a paying customer.  However, if YOU are the one doing most of the site content, it sure helps to have access to the 'user suggested' new features and have those annoying quirks and bugs fixed.

Prepping Your Site for v2.2.0 (or how to deal with a major update)

(Update: we HAVE reverted to the name 'container' instead of 'container2' for release candidate1!)  Here are some tips and tutorials to help ensure your site is 'v2.2 ready'!  While there is really no show-stopping change moving from v2.1.1 to v2.2.0, the move to v2.2.0 will reveal any themes or custom views which haven't been updated to 2.0 standards.  In a pragmatic sense, though the upgrade must be run and completed to convert the database for use in v2.2.0, your site would continue to work using one of the shipped or add-on themes which are 2.2 ready.

Since this upgrade only affects a custom theme and/or custom views, that's where we'll need to look:

  • Theme 1.0 compatibility removed
    • This one is the easiest to spot and correct.  It will occur in the main theme template (/themes/mytheme/index.php) and the subthemes (found in the subthemes folder)
    • Calls to the deprecated 1.0 theme subsystem look like 'exponent_theme_method' instead of 'expTheme::method'  And moreso there are only three mandatory calls with a fourth recommended call for hard-coding other modules
      • expTheme::head(...) in the <head>...</head> section, this method is used in place of the deprecated exponent_theme_headerInfo(...) call
      • expTheme::main() in the main content area in the <body>...</body> section, this method is used in place of the deprecated exponent_theme_main() call.
      • expTheme:foot() at the bottom of the <body>...</body> section, this method is used in place of the deprecated exponent_theme_footerInfo() call.
      • expTheme::module(...) within the main content area for hard-coding (embedding) modules, this is THE single multi-purpose method to display a module in place of many deprecated calls: 
        and expTheme::showController(...)
        • A big difference between the expTheme::module(...) call and the others (except the last two) is that it is called with a single parameter of an associative array of named parameters, whereas the deprecated ones were called with simple (sequential) parameters.
        • Likewise most of these various calls were to either deal with a 1.0 module or 2.0 controller, or to hard-code a module with a specific 'scope' (global, sectional, or top-sectional), which is now simply a 'scope' named parameter with 'global' being the default.  The expTheme::module(...) call is 'smart' in being able to to it all!
        • Deprecated call - expTheme::showModule($module,$view,$title,$source,$pickable,$section,$hide_menu,$params);
        • 2.0 call - expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_mega","source"=>"mega","chrome"=>true));
  • Old School (1.0) modules no longer exist
    • Another fairly easy thing to spot and correct are hard-coding an old school module within the main or subtheme template.  In many cases, these old school modules have been disappearing and references to them as hard-coded modules may have already been exposed.  However some were replaced with like named 2.0 modules (controllers)
    • A big difference between the old and 2.0 modules is old school modules only required a 'view' parameter, whereas the 2.0 modules require an 'action' parameter (with the default view implied).  The old school default (view) was 'Default' whereas the 2.0 module default action is 'showall' and the default view is also 'showall'. Therefore to locate old school modules, they were typically called using a 'module' parameter instead of 'controller' (however each are interchangeable).  Specifically, 2.0 modules need to have an action parameter, whereas the old school modules only pass a 'view' parameter (with NO action parameter).  If the old school view was something other than 'Default', please see the next area of discussion.
    • Here's a list of old school modules and their 2.0 counterparts:
      • simplepollmodule or simplepoll => simplePoll
      • navigationmodule or navigation => navigation
      • calendarmodule or calendar => events
      • formmodule or form => forms
      • containermodule or container => container (this has changed to simply 'container' in release candidate 1)
      • headlineController or headline => text (this is a 2.0 controller which has been deprecated)
    • Here's an example of an update required since most themes include a hard-coded container
      • Deprecated call - expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@left"));
      • 2.0 call - expTheme::module(array("controller"=>"container","action"=>"showall","view"=>"showall","source"=>"@left"));
    • ​​If you've kept up to date through v2.1.1, the only NEW upgrade involves the 'container' module.  
    • The deprecated call may continue to work, but is unsupported.  If it fails to work because this is a module name change, your custom themes will not seem to work (will say that containermodule is unavailable) until it is corrected.
  • Old School Module Custom Views must be updated to work with their 2.0 module counterpart
    • The most complex of the changes will likely be required for any old school module custom views.  These would be found in the //themes/mytheme/modules/ folder using any of the above full module named folders.  In many cases, the custom view could be upgraded by a couple of simple renames.
      • Rename the 'module' folder into its 2.0 counterpart...e.g., 'navigationmodule' into 'navigation'
      • Within the newly renamed folder, enter the 'views' folder and create a new folder with the name of the module, such as 'navigation'
      • Move all the other files (.tpl files) within that 'views' folder into that newly created folder
      • Enter the folder with the moved templates, then rename the view template(s) into a 2.0 suitable name which includes the action:
        • 'Default.tpl' would become 'showall.tpl'
        • 'YUI Top Nav.tpl' would become 'showall_YUI Top Nav.tpl'
    • Any configuration or form files (.config or .form) would need more complex editing.
      • .config files are no longer used as these details must now be handled within the controller itself
      • .form files are now templates within the 'configure' subfolder of the views folder.  They are named by the associated view name with a .config suffix.  The files are now formatted just like a view instead of using the shorthand notation to create controls.  You should look at a system module like 'events' or 'blog' to get an idea of how view specific configurations work.
  • (Updated) Some YUI constants and file names/locations have been deprecated
    • Both of these issues tend to be revealed as improper formatting such as misaligned columns or font styles.
    • The 'Reset' stylesheet names have been deprecated for quite some time (apparently) and were finally removed in YUI v3.10.0.  Since many of the older themes use YUI reset(s) instead of the new 'normalize' standard, here's the changes you'll need to look for and make in the expTheme::head() call at the top of your theme templates (and subthemes) (note the additional 'css' at the beginning of the filename!)
      • cssreset/reset-min.css has become cssreset/cssreset-min.css
      • cssreset/fonts-min.css has become cssfonts/cssfonts-min.css
      • cssreset/grids-min.css has become cssgrids/cssgrids-min.css
    • We have finally removed the deprecated YUI path constants for consistency with other path constants.  These were typically used to load scripts or stylesheets in the theme templates (also subthemes) and custom views)
      • JS_FULL is now JS_URL
      • JS_PATH is now JS_RELATIVE
      • YUI3_PATH is now YUI3_RELATIVE
      • YUI2_PATH is now YUI2_RELATIVE

Other articles of interest:

Tutorials: How to Convert a Generic Theme to Exponent

Here is a tutorial that will be appearing on the docs site which walks you through converting a generic web theme/template found on the internet into an Exponent theme.

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.

The template we've chosen can be found at and we'll use the 3 Column (Blog Style) Liquid Layout which can be downloaded here.  Most themes are very easy to convert EXCEPT for the menu.  In this case the menu is an easy drop in replacement since the basic template doesn't really feature a menu,  Other templates might require custom styles to make it look similar, where others might require a near rewrite to create a duplicate menu.

Extract the template package to a new subfolder within the /themes folder.  Rename the folder to 'blogtheme'.  ALL themes MUST use a folder name that ends with the 'theme' phrase!  Inside the folder you'll note several files, one of which is 'index.htm.'  Open it in your browser to see what we've got.  You'll also note several graphics and a single stylesheet file in the folder.

Next we'll need to reorganize the folder to conform to Exponent theme requirements.  Create a 'css' folder and place all the stylesheets there (in this case only screen.css).  Create an 'images' folder and place all the images there (in this case none of the images are really used in the theme).  Next edit the index.htm and css/screen.css files to update the references to the new locations.

  • In index.htm, you'll need to change the stylesheet and image references (this isn't necessary, but a good troubleshooting step).
    • <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />


      <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
    • <img src="mjt-125x125.gif"


      <img src="images/mjt-125x125.gif"

      there are several of these.

  • In css/screen.css, you need to change the references to graphics.  This is NOT necessary in this tutorial since there are NO graphics referenced by this particular css file, HOWEVER this is not simply a trouble shooting step!

    • Search for every instance of 'background : url(' and correct the url.  In this sample if there were any images, we could add an '../images' prefix to point to the new location of images.

  • Refresh the sample page in the browser and you should see NO changes if everything went well.  Otherwise you need to check your edits.

Next we'll create the theme class file.  Copy the 'class.php' file from the simpletheme folder.

  • Change the following line:
    if (class_exists('simpletheme')) return;
    if (class_exists('blogtheme')) return;
  • and change the following line:
    class simpletheme extends theme {
    class blogtheme extends theme {
  • Change the string in the name() function to "3-Column Blog Theme", you could also eidt the author() and description() strings as desired.

Now we'll convert the index.htm file into a theme template.

  • Rename index.htm to index.php
  • Replace the contents of <head>...</head> with expTheme::head() since Exponent handles this for us:
  • We'll also need to add the mandatory Exponent footer just above the closing </body></html> tags since this is what actually places the css and javascript on our pages

    <?php expTheme::foot(); ?>

You should now be able to select your new (useless) theme in Exponent, so log on to your site and Manage Themes and select your new "3-Column Blog Theme".  Don't expect too much just yet as we have NO dynamic content.  If you can select the theme and the site displays properly with the Exponent menu, we can proceed.  Otherwise you'll need to check the above steps and your editing for accuracy.

Next we'll clean the dead wood (static content) out of our template, index.php and replace it with dynamic content code.

  • Delete all the lines between <div id="header"> and its closing </div> tag, about 13 lines and replace it with our header and menu 
        <a href="<?php echo URL_FULL; ?>" title="<?php echo SITE_TITLE; ?>"><?php echo ORGANIZATION_NAME; ?></a> <sub><?php echo SITE_HEADER; ?></sub> 
    <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_YUI Top Nav","source"=>"@top")); ?>
  • Look for the <!-- Column 1 start --> comment and delete all the lines to the <!-- Column 1 end --> comment and replace it with our main container

    <?php expTheme::main(); ?>
  • Look for the <!-- Column 2 start --> comment and delete all the lines to the <!-- Column 2 end --> comment and replace it with our left column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@left")); ?>
  • Look for the <!-- Column 3 start --> comment and delete all the lines to the <!-- Column 3 end --> comment and replace it with our right column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@right")); ?>
  • Finally, replace all the lines between <div id="footer"> and it's closing </div> with our footer text module
    <?php expTheme::module(array("controller"=>"text","action"=>"showall","view"=>"single","source"=>"@footer","chrome"=>1)) ?>

We're almost done, but need to add some styling to the .css file to ensure Exponent menus, etc.. are always in front of other items.

  • The easiest way to do this is to create a 'base-styles.css' file in the /css folder.  We'll need to ensure the <div> id's match the one's used in the template.  Here's what our's would look like
    #header, #bd, #footer {
    #header {
    #header {
    #bd {
    #footer {

At this point we should have a fully functioning theme suitable for use.  In most cases you may need to tweak the theme styles to override system styling or other conflicts resulting from the theme's styles.  This may be as simple as too much/little spacing to the menus don't work because most menus are actived by css styling or javascript which rests on using css styling.

The last thing we might want to do is to create a CKEditor css file.  You can find those details here.

Tutorials: How to Insert an Image into an Exponent CMS Text Module

To insert an image from the Exponent CMS File Manager into a Text module, you must first click the edit icon on the text module to begin editing the module.

Exponent CMS Text Editor

Once you've clicked the edit icon, you will be directed to Exponent's text editor:

Exponent CMS Text Editor

To insert an image into a text module, you must first place your cursor before the sentence in which you want the photo to flow.

Exponent CMS Text Editor

Once you've selected where in the text you want the image to flow, you can then go and select the image you want by clicking on the Insert/Edit Image button in the text editor tool bar.

Exponent CMS Insert/Edit Image Button

Once you've clicked the Insert/Edit Image button, you will be prompted with an Insert/Edit Image dialogue box. To select the image you want to insert into the module, you must then click the “Browse Server” button.

Exponent CMS Insert Image Configuration

After you click the “Browse Server” Button, the Exponent CMS File Manager will open, allowing you to navigate to the image you want to insert (Read more information on how to upload new files to the Exponent CMS File Manager):

Exponent CMS File Manager

To select the image you wish to insert into the text module, you must find the image in the File Manager and then click on the Green arrow next to the image underneath the “Actions” Column of the File Manager:

Exponent CMS Insert Image Configuration

After you've selected your image, the Exponent CMS File Manager will automatically close and your image will be inserted into the Insert/Edit Image dialogue box where you can select positioning, linking and padding for your image as well as giving your image an Alternative text title:

Exponent CMS Insert Image Configuration

The Image properties dialogue box also has two tabs called "Links" and "Advanced" where you have other image configuration options. If you want to embed a link into the image, click on the "Link" tab. Here you can define the URL you'd like to link to and also determine whether that link should open up into a new window.

Exponent CMS Insert Image Configuration

On the Advanced tab, you have the option to type in a pre-determined CSS style class for your image such as "border" if there has been a CSS style sheet created that puts a border around your images. Here you can also add an Advisory title for the search engines to let them know what the image is that's being displayed.

Once you've finished configuring your image, click the “OK” button. You will now see the image pop into your text editor in the position you've defined:

Exponent CMS Text Editor

After you've clicked save, you're all done! Your image has successfully been inserted into the module and will appear on the page:

Exponent CMS Image Editing

Tutorials: How to Create Password Protected Pages on your Exponent CMS Website

Exponent CMS offers a robust permissions system giving Site Administrators the power to easily grant Viewing and Editing rights on a granular level. It is very easy to create these Password Protected pages using any combination of usernames, passwords, and group rights.

The permission system for Exponent CMS allows Site Administrators to create both User and Group accounts with varying levels of administrative and viewing privileges.

For example, Site Admins have the ability to create a “Members Only” group and grant that group permission to view a certain set of Password Protected pages on your website. It is also possible to grant that same group of people or an individual user on the website the right to administrate a particular page or piece of content on the website.

The process Site Administrators must follow in order to achieve this powerful feature in Exponent CMS is:

  1. Create the Individual User Accounts necessary
  2. Create the Group Account that will receive the special Viewing or Editing permissions
  3. Assign the Individual Users to the Group Account
  4. Configure the Page or Set of Pages that you want protected to allow these permissions

Creating Individual User Accounts

The first step in creating Password Protected pages on your website is creating Individual User Accounts for users to login with.

Site Administrators can access Exponent's User Account Manager by clicking on the Exponent CMS logo on the Administrative Tool Bar at the top of the website. After clicking on the Exponent CMS logo, one of the drop down menu options is “User Management”. When hovering your cursor over “User Management” there are additional flyout menut options, one called “User Accounts”. To create an Individual User Account, select this menu item.

Exponent CMS User Accounts

Once Site Administrators have clicked “User Accounts” they will be redirected to the “Manage Users” page. Here, the Site Administrator can not only create new user accounts but can also:

  1. Reset passwords
  2. Edit Usernames and Email Addresses
  3. Delete User Accounts

Exponent CMS User Management Page

For the purposes of Creating Password Protected Sections on your Exponent CMS Website, this tutorial will highlight how to Add a new User Account. To do this Site Administrators must first click the “Add” link above the User Accounts table.
Once the Site Administrator selects the “Add” link, they will be directed to the “Create New User Account” form. Here, the Site Administrator will configure the new account with:

  1. A Username
  2. A Password
  3. An Email Address
  4. A First and Last Name
  5. Whether or not the new Account has Full Administrator Privileges.

Create New User Account Exponent CMS

The Site Administrator will need to create an Individual User Account for all users who will need to be assigned to the Group Account to view the Password Protected Section on the website.

Creating User Group Accounts

After creating each of the Individual User Accounts, the next step in creating Password Protected pages on your website is creating a User Group Account for the Individual Users to be assigned to.

Site Administrators can access Exponent's User Group Account Manager by clicking on the Exponent CMS logo on the Administrative Tool Bar at the top of the website. After clicking on the Exponent CMS logo, one of the drop down menu options is “User Management”. When hovering your cursor over “User Management” there are additional flyout menut options, one called “Group Accounts”. To create a User Group Account, select this menu item.

Exponent CMS Group Accounts Management

Once Site Administrators have clicked “Group Accounts” they will be redirected to the “Manage User Groups” page.

Here, the Site Administrator can not only create new User Group Accounts but can also:

  1. Manage Group Membership
  2. Edit Group Names, Descriptions and Settings
  3. Delete User Groups

Exponent CMS Group Management Page

For the purposes of Creating Password Protected Sections on your Exponent CMS Website, this tutorial will highlight how to Add a new User Group Account. To do this Site Administrators must first click the “Create a New User Group” link above the User Group Accounts table.

Once the Site Administrator selects the “Create a New User Group” link, they will be directed to the “Create User Group” form. Here, the Site Administrator will configure the new Group with:

  1. A Group Name
  2. A Description of the Group
  3. Whether or not new Individual User Accounts should automatically become members of the group with their new account is created.

Create New User Group Account Exponent CMS

Once the Site Administrator has created the new User Group, they must next Manage Group Membership.

To manage Group Members, Site Administrators must click on the Member Management icon next to the particular Group they want to Manage:

Exponent CMS Manage Group Membership

Once the Site Administrator has selected to manage the membership of a particular group, they will be directed to the Group Management Page.

Here, the Site Administrator can select Individual User Accounts to be members of that group, or grant certain Individual Users permission to Manage Users for that Group.

Manage User Group Members Exponent CMS

Now that Individual Users have been assigned to the Group Account, the Group account can now be assigned permission to View a section of Password Protected pages.

Assigning Group Permissions to a Page

The first step when assigning Groups with permissions to view or edit a page or set of pages on a website is for Site Administrators to go to Exponent's Page Manager.

To access the Page Manager, click on “Pages” on the Administrative Tool Bar at the top of the Website. Once “Pages” has been selected, click on “Manage All Pages.”

Exponent CMS Manage All Pages

This will direct Site Administrators to the Page Manager. Once the Site Administrator has arrived at the Page Manager, they must first make sure that the page(s) they wish to Password Protect is marked as “Non Public” and is not able to be viewed by just any site visitors.

To configure a page as “Non Public”, the Site Administrator must Edit the page configuration for that page by right clicking on the page and selecting “Edit this Page.”

Edit Pages Exponent CMS

After the Site Administrator has selected “Edit this Page” they will be redirected to the page configuration form where they can uncheck the Public box and resave the page so it is no longer available to the general public.

Make Pages Non-Public Exponent CMS

Next, the Site Administrator must then go back to the Page Manager and again right click on the page they want to assign the permissions to. This time after right clicking on the page, the Site Administrator will select “Manage Group Permissions.”

Assign Group Permissions to Exponent CMS pages

Once “Manage Group Permissions” has been selected, the Site Administrator will be directed to the Group Permission Management form where they can select which group has Viewing or Management rights on that particular page.

Assign Group Permissions

The Site Administrator also has the ability to assign Individual User Accounts the ability to View or Edit a particular section on the site by Assigning User Permissions to that page.

To do so, the Site Administrator must go to the Page Manager and right click on the page they want to assign the permissions to. After right clicking, the Site Administrator will select “Manage User Permissions.”

Manage User Page Permissions Exponent CMS

Once “Manage User Permissions” has been selected, the Site Administrator will be directed to the User Permission Management form where they can select which Users have Viewing or Management rights on that particular page.

Assign User Permissions to Exponent CMS Page

Once the appropriate permissions have been assigned to their pages, the Users will be able to login to the Website with the Individual User Accounts created by the Site Administrators and will be able to View or Edit those select pages.