Posts by "David Leffler"

Offline Blog Post Editing

Writing Blog ArticlesExponent provides an excellent environment for writing and sharing articles or 'blogs'.  A site where the 'back-end' is on the front-end and a variety of what-you-see-is-what-you-get WYSIWYG editors take away some of the creative hassles with writing.  Another nice convenience for writing articles which is found on other blog applications (like WP), is editing the articles offline by using an application to manage and edit multiple blog articles.  Though there was preliminary support for this feature in the v0.99beta1 release (before v2.x), it has not been available to the v2.x code line...until now.  

Why would you want to use a desktop application to edit articles instead of simply using the browser?

  • Submitting the same or similar articles to multiple blogs or sites
  • Simultaneously working on many draft articles (beginning a new article while have several unfinished articles)
  • Not having immediate, unrestricted access to a reliable high-speed internet connection, but you have your PC

The new offline blog editing feature will be available in the next release (currently at v2.3.4patch1).  It will be turned OFF by default, but can be turned on using 'Site Configuration' under the 'Security' tab.  It has been tested with several offline blog applications (mostly Windows based) such as Windows Live Writer, Zoundry Raven, Blog2Post, Windows 2007+, and ScrybeFire running in the Chrome browser.  Most of these interface with the blog site by adding an account.  This account creation process attempts to determine the type of blog, but all require the following information.

  • user logon name (with create/edit permission to a blog module)
  • user password
  • url to the blog web page - www.mysite.org/my-blog
  • url to the blog xmlrpc interface (blog post url) - www.mysite.org/xmlrpc.php
  • type of blog - Metaweblog API (NOT WordPress, nor Blogger, etc...)
  • image/picture uploading handled by - the blog provider

During the process, the offline application attempt to determine the type of blog, but will likely need some assistance in completing the process.  You should be shown the list of all the blog modules on the site.  Most applications will require a separate account be created for each blog module on the site, where others may only display the first blog module listed from the site.

Many of these applications provide support for publishing the article or posting it as a draft, tags (adding new tags or selecting from existing tags), categories (adding new categories or selecting from existing ones), setting the article publish date, inserting graphics, boilerplate templates, downloading the site 'theme' for better offline previews, and turning off user comments.  Some of these features require they be turned on within that blog module.  You may even be able to pull down recent or all blog posts from that blog to edit or archive.

All-in-all, another tool in the Exponent CMS arsenal to assist you in maintaining and managing your web site.

Windows Live Writer

eCommerce Payments

BillingThe goal of this article is to help better understand how 'payments' operate within the Exponent eCommerce system.  'Payments' are used to virtualize an online cash transaction for goods (products) or services (event registration or donation).  There are basically two (2) types of payment systems called 'billing calculators' within Exponent:

  1. Those which handle the entire transaction online through a 3rd party which charges for their service (such as Authorize.net, WorldPay, and PayPal)
  2. Those which record a payment due where the transaction must be accomplished outside of Exponent...which may or may not charge for their service (such as cash/check, credit card, and bill me)

In most cases, we would only want to offer one (1) online payment option if we conduct all our business online, or perhaps a 2nd option if we also handle business directly with a customer at a brick-and-mortar location where the customer can pay when they arrive at the location for the event or to pick up the product.

Though no explanation should be necessary for handling and processing cash or checks, the 'cash/check' and 'pass-thru' payment options are designed for 'point of sale' type transactions by an employee of the merchant.  Perhaps the best method to allow customers to pay by cash or check possibly by mail, or to use a credit card when they show up is to use the 'bill me later' payment option.  If we wish to allow payment online by credit card and already have a service for processing credit card transactions, we could use the 'credit card' payment option.

If we want to have the entire payment not only recorded but processed online, we'd need to use one of the other payment options.  All of those options charge a fee for their services, though PayPal Express only charges per transaction instead of a monthly fee like the others.  ALL types of credit card or bank debit payments are transacted using several steps:

  1. Authorization - places a hold on a specified amount of funds, usually the total cost of the order (+- 15%) for 3 days.  However, the money is not transferred from the customer to the merchant.  You may have seen this occur when you make a purchase which initially appears as a $1 charge, but later changes to the full amount.
    • Void - cancels out the remainder of a funds 'authorization'.  If the authorization has already be partially 'captured' (or paid out), the 'void' action will simply close the authorization out.
  2. Capture - moves a specified amount of funds from the customer to the merchant.  This amount may or may not be the total of the entire order, such as a segmented shipment of an order due to some items being out of stock requiring two shipments.  Each 'capture' must usually be specifically authorized, and in most cases, the amount captured may or may not equal the amount originally authorized.  E.g., the shipping cost of the order was slightly more/less than what appeared at checkout and the exact cost was charged to the customer.
    • Refund - transfers previously 'captured' funds from the merchant back to the customer
  3. Others - there are some other actions which can take place such as:
    • Order - simply earmarks a future 'Authorization' by collecting the customer information, no 'hold' is placed on the funds and they may not exists.
    • Reauthorization - allows extending an 'Authorization' by 3 days (to a maximum of 30 days) or allowing a 2nd 'Capture' against the 'Authorization.

We'll primarily use the PayPal Express (PPE) payment option as an example here since it's the easiest full-featured one to use, which offers a good place to start.  PPE offers three (3) 'Processing Modes'.  1) Sale, 2) Authorization, and 3) Order.  

The recommended mode is 'Sale' which automatically authorizes and immediately captures the entire amount of the order when it is submitted.  This works well since it doesn't require additional actions or monitoring on the part of the merchant, but it also implies the merchandise is 'in stock' and will be shipped very quickly.  However in larger companies, it might be more prudent to only charge the customer (capture funds) once the merchandise is shipped, and then only for those items actually shipped.  The 'Sale' mode doesn't allow for this although you could simulate it by issuing a partial refund.  When managing the order, you'll note the 'Refund' button with an area to enter the amount on the invoice 'Billing' area.

A better approach might be to use the 'Authorization' or 'Order' modes where the funds are manually 'captured' when the items are shipped.  Since we can't initiate an 'Authorization' from within Exponent (in the current release), we don't currently recommend using the 'Order' mode (Though this can be accomplished on the PayPal site).  In 'Authorization' mode, the amount is 'authorized' when the order is submitted.  If you pull up the order, you note a 'Capture' button with an area to enter the amount and 'Void' button on the invoice 'Billing' area.  The order processing sequence would work like:

  • new order submitted/received (funds are 'authorized' and placed on hold for 3 day)
  • order review begins (status set to 'processing' with a optional email sent to the customer)
  • order is sent to 'warehouse' for packaging, order items are retrieved and boxed, and the box weighed (status set to 'sent to warehouse')
    • package data used to create/purchase shipping label and get a shipment tracking id
    • shipping label applied to package, then picked up by carrier
  • total cost of the order is 'captured' from the order invoice, since the funds were previously authorized (placed on hold)
    • shipping date & tracking id entered into the invoice (status set to 'order has been shipped' with an optional email set to the customer)
  • the order has been 'fulfilled' at this point
  • if a 'return' is required, a full or partial 'refund' can be issued from the order invoice (once the returned item is received?)

Though perhaps not a full-fledged 'how to conduct e-commerce article, this information may help you better understand how ecommerce billing works and encourage you to 'take the plunge' into the icy waters of e-commerce.

Theming with Twitter Bootstrap version 3 - Part 3

Twitter Bootstrap 3(Corrected May 5, 2014) Recently, Google changed the way they rank search hits by elevating those from 'mobile friendly' web sites and lowering those which are not mobile friendly.  To be 'mobile friendly' your web site must conform to modern standards (HTML5) AND must be small device and 'touch friendly' ...meaning the page is viewable on a small screen and the buttons/links have some space/distance between them for 'fat fingers.  The easiest way to make your Exponent CMS site 'mobile friendly' is to switch or update to a Twitter Bootstrap 3 based theme.  Exponent CMS allows you to do this in just a matter of minutes.

The easiest (and most obvious)  method is to simply switch to the included 'bootstrap3theme'.  This would immediately ensure your web site is 'mobile friendly.'  In most cases, the content of you web site will remain unchanged, though some custom theme elements in the header, footer, and sidebar may not appear if you were using a non-standard 'source' name within the previous custom theme.  In its stock form, the bootstrap3theme is well, plain.

The next level of customization would be to 'customize' the shipped theme using the 'Configure' button found with the theme on the 'Manage Themes' page.  

  • We offer a dozen or so different theme styles which offer a variety of colors, fonts, and styles
  • You could spice up the look with some 'flair' to the widgets by selecting the 'Bootstrap v2 Styles' setting which will give them a slight 3d effect
  • You could choose a 'fluid' width which would make the content fill almost the entire width of the display or browser width.  'Fixed' width limits the overall width of the content.
  • You can also select the 'size' of the buttons, location of the main menu (navbar), whether the navbar is aligned to the left or right side of the page, whether the flyout sidebar container is displayed, and a couple of tweaks to adjust how the main navbar is displayed.

The only drawbacks thus far are: 1) the theme and its 'configuration' will be overwritten the next time you update the site software with a new version since you are using a 'shipped theme', and 2) the basic Twitter Bootstrap themes are somewhat lacking in 'flash'.

Therefore the next level of customization would be to create a custom version of the shipped bootstrap3theme.  The documentation for creating a custom theme is found here.  A quick overview would be  to copy the entire /themes/bootstrap3theme folder into a new folder with a different name.  We'll say 'customtheme' for example and ensure we update the new custom theme's 'class.php' file to reflect the new theme's real name.  Once this complete, you'll need to select your new 'customtheme' from the Manage Themes page.  At this point your site will be identical to the previous step, but will not longer be in jeopardy of replacement when updating the site software version.  If you want to place the custom theme swatch files within your custom theme for further customization, you will need to:

  • Copy the .less files from the selected theme style which is found in /external/bootstrap3/less/'theme style name'.  You should find two files here...variables.less and bootswatch.less
  • WARNING! You MUST edit the new variables.less file which will fill in any missing, but essential variables:
    • Add the following line to the TOP of the new custom variables.less file
      • @import "../../../external/bootstrap3/less/variables.less";
    • The 'merge' the contents of the existing 'variables.less' file to the BOTTOM of the custom theme variables.less file to ensure any custom navbar 'collapse' width is followed.  
  • NEXT you MUST also insert the following line at the top of the 'bootswatch.less' file to get it to compile correctly
    • @import "variables.less";
  • Then if you want to make some subtle color changes, you can use a site like bootswatchr.com which will let you copy in your 'variables.less' file and allow you to edit it with instant feedback on color changes.

That's it, you now have a custom 'mobile friendly' web site.  Next time we'll dig a bit more deeply (and spend more time) to customize the theme to look 'less plain.'

Basic Theme Framework Concepts

Bootstrap 3A 'theme framework' is a tool or library of stylesheets and javascript code which help a web designer more efficiently create a stylish web site. In most cases they allow for effectively sectioning off a page using styles instead of tables. They also include code to easily create the different user interface 'widgets' and utilities which would otherwise take a lot of code (e.g. time) to produce.  Exponent CMS currently contains built-in support for two (2) different theme frameworks: 1) Yahoo User Interface (or YUI), and 2) Twitter Bootstrap (or Bootstrap).  And within each of these frameworks we include two (2) versions.  The question is 'which one to use?'

First, we'll cover some definitions which relate to the goals of each of these theme frameworks:

  • Fixed - this term relates to a section (page, column, etc...) having a 'fixed' width in terms of pixels.  Regardless of the size of the display (this includes the width of the browser window when resized), the section is the same size.  A fixed section may have to be 'zoomed' in order to be fully displayed on the screen, and then the size of the text may be unreadable.
  • Fluid - this term relates to a section having a 'fluid' width in terms of percentage of the parent section.  When the size of the parent container changes, the 'fluid' section will change.  A fluid section inside a fixed section would appear to be fixed, but could adjust based on the style used for that parent section.
  • Grids - this term relates to using html 'div' containers to section off a web page layout, instead of having to use html tables (which at this point in time is an ancient concept).  Most web pages have many grids, especially to make headers, columns, navigation areas, etc... for the page layout.  In other words, to keep the entire page from acting as if it were a single block of text.
  • Responsive - this term relates to the page layout (automatically) adjusting itself based on the size of the display (whether due to the physical size of the screen or width of the browser window).  Of these four definitions, this is 'the goal' for being able to present content to a visitor to your web site.  Imagine browsing to a web page on your smart phone, where the entire page is displayed but it is so small it is unintelligible...enter 'responsive' web site styling.  In days past, web designers were required to create two different web sites to provide content to both small handheld devices and desktop pc's.  Exponent provides built-in support for using two different types of sub-themes  based on whether a device is small or large (mobile theme variations), but that still requires creating two page layout designs.  'Responsive' styling allows a single page layout to provide the best information display to the user regardless of the size of display being used.

A basic rundown of the five (5) available frameworks (we'll count 'NO' theme framework as one) included in Exponent are:

  • YUI2 - has been deprecated since 2011 and was the primary framework used in Exponent v0.9x..  The styles allow for both fixed and fluid grids, but they are not responsive.  It also provides many widgets from its own javascript code library.  
    • YUI3 based widgets are automatically displayed, since we've replaced all the YUI2 javascript code (as of about v2.3.0)
    • To use the YUI2 grids, you must specially load the stylesheet 'YUI2_RELATIVE."yui2-reset-fonts-grids/yui2-reset-fonts-grids.css"' in your expTheme::head();. YUI2 grids typically use a class name with a 'yui-' prefix and provide both fixed and fluid variations
    • Though we don't recommend creating new custom themes based on YUI2, there is an example theme named 'basetheme'  based on YUI2 available here.  
  • YUI3 - is no longer supported by Yahoo, but is still being maintained.  It was the primary framework used in Exponent v2.x until v2.2.0.  The styles allow for both fixed, but mostly fluid grids, and more recently (since v2.2.0) allows for minimal 'responsive' support.
    • YUI3 based widgets are automatically displayed.  To display jQuery library based widgets (if they are available instead of YUI3), you can set the theme framework to 'jquery' in your expTheme::head(); (which also automatically loads the jQuery javascript library).  You can also display Bootstrap 3 based widgets (including the Exponent and module menus) by setting a config.php constant named 'NEWUI'.
    • To use YUI3 grids, you must specially load the stylesheet 'YUI3_RELATIVE."cssgrids/cssgrids-min.css"' in your expTheme::head();.  YUI3 grids typically use a class name with a 'yui3-u-' prefix.
    • Though we don't recommend creating new custom themes based on YUI3, we ship an example theme named 'simpletheme'  based on YUI3.  
  • Bootstrap 2 - was originally shipped with Exponent v2.2.0.  The styles allow for both fixed and fluid grids with some responsive support.  The typical grid system uses 12 columns.  To use the Bootstrap 2 theme framework, set it to 'bootstrap' in your expTheme::head();
    • Bootstrap 2 based widgets are automatically displayed (using jquery or YUI3 widgets if Bootstrap 2 ones are not available).  The Exponent and module menus are still YUI based.  Bootstrap 2 widgets use the jQuery library, but are written to support Bootstrap 2 styling.
    • Bootstrap 2 grids are automatically available with responsive support and columns typically use a class name with a 'span' prefix.
    • We also automatically provide Font Awesome v3.x support with icons having an 'icon-' prefix.
    • Since Bootstrap 2 has reached 'end of life', we don't recommend it for new custom themes, however we ship an example theme named 'bootstraptheme' based on Bootstrap 2.
  • Bootstrap 3 - is the current recommended theme framework for Exponent and has been available since v2.3.0.  Like Bootstrap 2 it's grid system uses 12 columns, but allows for fully 'responsive' web designs since it is 'mobile first'.  Each grid may be 'classed' as to how it should display on various sized devices (large widescreen desktops, medium desktops, tablets, and smart phones).    To use the Bootstrap 3 theme framework, set it to 'bootstrap3' in your expTheme::head();
    • Bootstrap 3 based widgets are automatically displayed (using Bootstrap 2, jquery, or YUI3 widgets, in that order if Bootstrap 3 ones are not available).  Bootstrap 3 widgets use the jQuery code library, but are written to support Bootstrap 3 styling.
    • Bootstrap 3 grids are automatically available with responsive support and columns typically use a class name with a 'col-' prefix.
    • We also automatically provide Font Awesome v4.x support with icons having an 'fa-' prefix.
    • Bootstrap 3 is the recommended theme framework and we ship an example theme named 'bootstrap3theme' based on Bootstrap 3.
  • No framework - you are not required to use a theme framework for a custom theme in Exponent CMS.  In fact most web theme templates can be converted for use in Exponent (see this article)
    • YUI3 based widgets are automatically displayed.  To display jQuery library based widgets (if they are available instead of YUI3), you can set the theme framework to 'jquery' in your expTheme::head(); (which also automatically loads the jQuery javascript library).

If you have already developed a custom theme for Exponent, you may want to stick with a known quantity and use that familiar theme framework.  However, if your just starting a custom theme, we'd recommend using Bootstrap 3.  Though we will continue to include, support, and fix the YUI2, YUI3, and Bootstrap 2 theme frameworks, in the future most of the new features will emphasize Bootstrap 3.

NOTE: For details about building a custom theme for Exponent CMS or about how themes work, please visit our help/documentation pages found here.  Details about the expTheme::head() method are found here.

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.

Theming with Twitter Bootstrap version 3 - Part 2

Mobile FirstIn the first article, I explained some of the basics of creating a Twitter Bootstrap 3 (BS3) based theme for Exponent.  In this article I'll attempt to alleviate some of the myths or quirks associated with BS3 that may be delaying your move to use this versatile framework for your next custom theme.

Myth #1 - BS3 themes are limited to a one page design - NOT TRUE.  While many of the examples found across the internet are limited to one (possibly) long page with a menu of relative links on the page, you can still use the multi-page approach Exponent has used in the past.

Myth #2 - BS3 themes must have the fixed menu (navbar) always displayed at the top of each window - NOT TRUE.  Again, while many examples on the internet follow this approach, our sample BS3 theme (bootstrap3theme) provides the option of 'static top' (stays at the top of the content and will scroll out of view), 'fixed bottom' (always displayed at the bottom of the window), or 'fixed top' (always displayed at the top of the window).

Additionally, you may place a banner above the navbar using one of the techniques found here.  You are not limited to generic sort of layout.  Some example non-Exponent themes can be found at:

Quirk #1 - BS3 navbars are limited to children only (depth of two) and no grandchildren (depth of three or more) - While we support multi-level navbars of any depth, this will NOT work with touch devices (grandchildren are only displayed on 'hover'), nor with the 'collapsed' menu provided on small devices (or small width browser windows)

Quirk #2 - Not everything is 'touch' enabled - Though we're working inside Exponent to alleviate (work-around) this, some elements like the 'carousel' are not 'touch' enabled, in addition to the aforementioned multi-level menus.

Quirk #3 - The site looks slightly different on different sized devices or different browser widths - This is actually a feature, NOT a problem.  With BS3 you won't need to develop a complex stylesheet based on media queries, nor have separate mobile subthemes (a feature of Exponent documented here).  Since BS3 is 'mobile first' it makes it simpler to desing a web site style and layout which works equally well on large (desktop) or small (smartphone) displays.

Hopefully, this has alleviated some of your fears in pressing forward into the Bootstrap era.  I do still plan to write another article/tutorial on converting an open-source/free BS3 theme (from one of the sites listed above) into an Exponent theme, which may be a greater incentive to take the plunge.

Theming with Twitter Bootstrap version 3

Twitter Bootstrap 3 - MObile FirstTwitter Bootstrap version 3 (BS3) is becoming the user interface framework library of choice for Exponent CMS.  Though initially shipped with Exponent v2.3.0, that BS3 implementation was still lacking some refinement, and wasn't fully implemented across the entire user interface.  This has been somewhat remedied by the first three patches to v2.3.0, and will be even more-so in the upcoming patch #4 release.  In this article I'll attempt to share some of the basics of how to create a Twitter Bootstrap 3 custom theme.

First off, this is NOT an introduction to using Twitter Bootstrap 3 or it's grids, nor understanding what 'mobile first' or 'responsive' means.  There are several tutorials on the web including this one.  However, we won't avoid those topics as we focus on Exponent CMS theming specifics as they apply to using BS3.

We ship a BS3 sample theme with Exponent v2.3.0 appropriately named 'bootstrap3theme'.  Since the release of v2.3.0 we have tweaked this theme (as we said we would), therefore the one being included in v2.3.0 patch #4 has some changes from the one included in the initial release.  This article assumes you have access to those sample theme files and can use it as a starting point.  Eventually I may also publish a second part to this article to walk you through converting an existing open source BS3 theme template for use as an Exponent template (with the purpose of it being added to the help/doc site).

When you examine the /themes/bootstrap3theme/index.php default theme template, you'll note several Exponent specific things in the 'head' section with the expTheme::head() parameters: 

  • the 'framework' parameter is set to 'bootstrap3'.  This automatically ensures we are loading the BS3 stylesheets, jQuery script, and 'prefer' the '.bootstrap3' view template variation (which includes any form control or template engine plugin variations) if available.
    • BS3 scripts are never automatically loaded, but must be requested by the expJavascript::pushToFoot() call or the theme template {script} smarty function using the 'bootstrap=' parameter.  This parameter works just like the 'yui3mods' and 'jquery' parameters.
  • there are no 'reset' scripts being loaded.  The new standard css reset script, 'normalize.css' is automatically loaded by BS3.
  • we can optionally load the BS3 'theme' stylesheet which gives a BS2 appearance to BS3 styles, if that setting was saved within the theme configuration.
  • though the 'viewport' parameter is optional since we always set the minimum defaults, it is in this theme template as a point to deviate from.
  • we account for two (2) less stylesheet compiler variables (lessvars) we pull from the theme configuration settings which are mandatory for this theme's .less stylesheets.  Most (but not all) stylesheets used with a BS3 theme are in the .less format to allow custom configuration by the end user.  For example, the bootstrap3theme allows selecting from the entire set of 'BootSwatch' themes.  

Now a short sidebar on some BS3 basic concepts...there is a hierarchy of three (3) basic components for the BS3 grid system: 1) container, 2) row, and 3) column.  

  • The 'container' class element is mandatory as the highest level element for the grid system.  It may NOT be nested as this will create anomalies with display of the page.  The classname used for a container element is 'container'.
  • The 'row' class element MUST be placed within a 'container' class element, however unlike the container, they may be nested if the nesting occurs within a column.  In a basic sense, the row is a placeholder for up to 12 equal-width columns of data.  The classname used for a row element is 'row'.
  • The 'column' class element MUST be placed within a 'row' class element, and like the container may NOT be nested...except when found within a nested row.  The classname for a column element is more complex and composed of at least three (3) parts:
    • 'col-' to signify that this is a column
    • a designator for the device size the column setting applies to (more or this later).  But in our example we'll use the size for a small device or tablet with a max-width of 768 pixels which is 'sm-'.  Grid column classes are divided into device sized groupings:
      • 'lg' for large devices such as wide-screen monitors (max width 1200 pixels)
      • 'md' for medium sized devices such as desktop monitors (max width 992 pixels)
      • 'sm' for tablet sized devices
      • 'xs' for extra small devices such as phones (max width 640 pixels
      • These can be mixed within the same element to provide for a different layout on different devices.  E.g., a 4 column wide layout on a desktop would become a 2 column layout on a tablet (2 rows high) or a single column layout (4 rows high) on a smartphone.
    • and a digit to set the number of column units of width this column is to fill (from 1 to 12)
    • so the simplest column element would be 'col-sm-12' for a single column the entire width of the row.  A equal-width 2-column layout would be two elements each with a class of 'col-sm-6' (6 + 6 = 12).

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
               This is a full width column, 12 units wide.
               A row with columns could also be placed within this element.
            </div>
        </div>
    </div>
</body>

Therefore, in Exponent, the template theme/subtheme template MUST hold any 'container' element(s).  There must NEVER be an element with the class of 'container' found within a view template.  A BS3 styled view template can ALWAYS assume it is being loaded within a 'container' and/or a 'column' element.  Therefore, the view template should be wrapped within a 'row' element if it will be subdividing its display using the grid system with 'column' elements.  The only exception to this is the navigation menu (navbar) which in most examples (including the main BS3 site) is simply wrapped within a 'container' element without rows nor columns.

So within the 'body' section of the /themes/bootstrap3theme/index.php default theme template, you'll note:

  • We have two (2) containers: one for the menu and one for the content
  • Within the menu container we have NO rows or columns, so the menu 'template' view can assume it's within a container
  • Within the content container we have two rows: one for the actual page content, and one for the page footer area
  • Within the actual page content row we have two columns: one for the main content, and one for the sidebar

For the Exponent theming system to work correctly with several UI frameworks, we allow for view templates to also have theme framework variations.  These system view templates are denoted by a framework type suffix before the file type.  So a system 'showall.tpl' view template with a BS3 variation would be named 'showall.bootstrap3.tpl'.  In the absence of a BS3 specific view template, the system would fallback and choose a BS2 template with that framework suffix...in this example if the BS3 variation template did not exist but a BS2 variation template existed named 'showall.bootstrap.tpl, it would be used instead of the base 'showall.tpl' file.  Since a custom theme can only use one UI framework, ALL custom template views use the root name without any framework variation.

A note about the /themes/bootstrap3theme/config.php theme configuration settings file.  You MUST include a variable named 'SWATCH' or the .less stylesheet compiler will crash when compiling the BS3 stylesheets. 

There MUST always be a file /theme/customthemename/less/variables.less, even if it's an empty flle. This file is ALWAYS compiled by the bootstrap.less file and overrides any bootstrap 3 and swatch variables as needed.  A failure to include this file (it may be empty) WILL result in a .less compiler crash.  This file should ONLY contain .less 'variables' as it will also always be compiled as a theme stylesheet and any 'styles' included within in it will also create a theme stylesheet named /css/variables.css.

In summary:

  • The theme/subtheme template MUST include the un-nested BS3 'container' element.  The theme/subtheme template is the only place the 'container' element will be found.  It may optionally contain 'row' elements' so long as it also contains 'column' elements within the 'row'.
  • The view template can always assume it's being displayed within a 'container' and/or also a 'column' element.
  • Any 'custom' view templates must only have the '.tpl' file type suffix and can NOT contain the '.bootstrap3.tpl' framework variation suffix.
  • Failure to follow these guidelines will cause horizontal margin anomalies and prevent theme custom views from loading

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}
{literal}
    $(document).ready(function() {
        // jQuery code goes here
    } );
{/literal}
{/script}

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'} 
{literal} 

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

{/literal} 
{/script}

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'} 
{literal} 
    $(document).ready(function() { 
        // jQuery code goes here
        myjsfunction(1, 2, 3); // function contained in myjqueryscript.js
    } ); 
{/literal} 
{/script}

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

Are you having a Facelift letdown?

You've unwrapped (installed) v2.3.0, and much to your dismay it looks the same!  Where are all these major new features?  One of the goals of the Exponent CMS project is to provide seamless or transparent upgrades to newer versions.  While this isn't always true (1.x code deprecation, etc...), we do try to keep your web site looking the same after an upgrade, while offering new features and improving the site management tools.  In this article, I'll attempt to show you how to activate the 'new' interface options and work around a couple minor issues.

First off, some issues which may require some editing or settings changes on your part are:

  • We moved the bootstraptheme navbar/menu code from the theme template file into the navigation view template file.  Here is an article describing needed changes if you have built a custom theme based on 'bootstraptheme' (the Twitter Boostrap v2 theme)
    • This article also describes how to fix a 'jQuery' script crash/collision and solve a 'disappearing content' issue.
  • If the WYSIWYG editor (CKEditor) doesn't appear, there may be a conflict between 'Minification' and CKEditor.  Several different ways to work around this issue are:
    • Turn Minification OFF using the Exponent, Super Admin Tools, System Cache menu
    • Leave Minification ON, but turn off 'Minify and Combine linked js scripts' using the 'Minify' tab of the Configure Website command found on the Exponent menu
    • Switch to begin using the new optional TinyMCE WYSIWYG editor (see below)
  • Some settings/input forms may not save or close because we've added better validation of entries.  Specially, this would apply to 'url' (link) and 'email' (address) type input.  Though this is NOT the case in every place Exponent asks for a url or email, some of them require specific entry formats.  The 'url' entry may be rejected if it doesn't begin with a protocol such as 'http://'.  And an 'email' entry may be rejected if it doesn't contain the '@' sign, or it contains more than one email address (a comma is included).  We have a fix for the multiple email address entry.
  • We now correctly load style sheets in an expected sequence.  The main framework library stylesheets (YUI, Bootstrap, etc...) are always loaded first, then the Exponent system stylesheets (core styles and those in the module views), and finally the theme stylesheets.  This ensures the styles cascade correctly and that the theme custom styles have 'final' say on the styling.  However, you may discover some display anomalies exposed by the correct loading order we now use, but they should easily be fixed by a custom theme style update.
  • You may notice the .less stylesheet compiler takes a bit longer than before, but it is also faster than before.  As before, we ONLY compile .less files into .css stylesheets once, or when updated, so like any caching option, the first time to the page is a bit slower.  We've had to switch to a new 'less' compiler which is compatible with Twitter Bootstrap v3 (TB3), and in turn, TB3 also has some very complex stylesheets.  However, we've now sped up the less compilation cache checking.  So if you have Error Reporting turned OFF, the .less file will only be compiled/checked if the corresponding .css file is missing.  If Error Reporting is turned ON, it will operate as in the past few versions where the cache is checked for each .less file and it will be (re) compiled if the .css file is missing or any of the .less files (including those being @import'ed) or the less variables have changed.

Now, here's how to use some of the new features:

  • The new 'elFinder' File Manager is activated by changing the setting on the 'File Manager' tab of the Configure Website command found on the Exponent menu.  Here is an article describing it.
  • The new 'TimyMCE' WYSIWYG editor is activated changing the setting on the 'WYSIWYG' tab of the Configure Website command found on the Exponent menu.  Here is an article describing it.  Just like the CKEditor, you can create a custom configuration with an alternate skin, plugins, or toolbar, etc...
  • The new 'Workflow' feature is activated using the Exponent, Super Admin Tools, Turn Workflow On/Off menu item.  Here is an article describing it.
  • We've provided an initial implementation of a TB3 based theme (bootstrap3theme) which also includes a new TB3 based admin user interface (new slingbar and chrome)!  Designers can begin to develop their own custom TB3 theme(s) based on this one, though we will probably tweak the bootstrap3theme over the next six months.  We strongly recommend you move away from any Twitter Bootstrap v2 (TB2) theme development as it has been deprecated and no new features or updates to TB2 support are planned for Exponent.  However, we will still continue to support YUI3 based themes (YUI2 compatibility has been deprecated by YAHOO and is subject to breaking in the future).  We will also continue to support non-Bootstrap/non-YUI based themes (which inherit YUI2/3 widgets, etc.. at this point).
    • TB3 is the 'new interface' direction we are moving toward, and away from YUI2/3 as the primary/only user interface.  This interface is called 'NewUI'.  These themes are identified by a head config setting of 'framework=bootstrap3'.
    • TB2 development is suspended, but uses TB2 buttons and controls (though some widgets are still YUI2/3 based/styled) with YUI2/3 slingbar and chrome.  Since there are conflicts between TB2 and TB3 it will not receive any NewUI interface elements.  These themes are identified by a head config setting of 'framework=bootstrap'.
    • YUI and other non-Bootstrap themes are based on YUI2/3 (styled) buttons, controls, slingbar and chrome.  These themes are identified by a head config setting of 'framework=yui',  'framework=jquery', or no 'framework' setting.  However, these themes may be 'upgraded' to use the 'NewUI' by changing a system setting.  Once this setting is turned on, the theme will use the NewUI (TB3) slingbar, chrome, controls/buttons, and other widgets.  Since this feature is not yet fully robust/implemented, there is no user interface to turn it on or off.  However, it can be activated within your non-Bootstrap based theme by adding 'define("NEWUI",'1');' to your theme's 'config.php' file (found in the custom theme folder).
            <?php
                define("NEWUI",'1');
            ?>
  • There is a new 'church web site' sample database which may be selected during installation.  This is in addition to the general site, blog site, and eCommerce site sample databases.  If you've already installed Exponent, but want to use one of these samples to 're-initialize' your site (will NOT affect current users/groups, but may affect their permissions), you can locate the /install/samples folder in the Exponent package file and do a 'Restore Database' (which will wipe-out/overwrite all/most current site content).
  • If you need to move some blog, news, or portfolio items to another site, you can now export and import them, by module and by item.  Importing the export file will add them to your content instead of overwriting it as would occur with a 'Restore Database.'
  • There are many more new features, most of which can be found on the module configuration setting views.  Look for a future article describing some of these.

And finally, here are some new features which are automatically implemented:

  • Out of the box, you should have better Search Engine Optimization (SEO) since we now provide better, more specific meta data to the search engines.  This should appear as greater search hit detail (event & product data such as dates, cost, reviews, etc...).
  • If you use a Twitter Bootstrap based theme, you should immediately notice better response on mobile and handheld devices, or even on desktops when the browser window size changes.
  • On some of the management views (manage users/groups/permissions, display form data, and event registrations) we now use a 'widget' which provides for much faster paging and column sorting, better filtering (search), and options to copy/print/export.

As mentioned in previous articles the next upgrade, v2.3.1 shouldn't be expected until around the end of 2014.  What this means is that only patches will be released to address issues with v2.3.0 such as bug fixes or a 'proper' or 'broader' implementation of existing features.  Now go have fun with your 'NEW' web site!

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.