Joomla! Theming

Russell SearlePrincipal Consultant, Psicom

Melbourne Joomla! User Group27 March 2013

Melbourne Joomla! User Group27 August 2014

AgendaProcess•The theming processTheming options•Build from native templates•Configurable templates•Framework template builders• Bootstrap (Joostrap)• YJSG (You!Joomla)• Gantry (RocketTheme)• T3 (JoomlArt)• Warp (YOOTheme)

•Standalone template builders• Template Creator• Artisteer

Theming Joomla! sites• ‘Theming’ is about selecting and adapting a template for a given Joomla! site. Can be hard, frustrating work.

1. Select main business extensions• Nature of client’s business -> purpose of site, e.g. blog, shop, ads

directory, membership, social, media, gaming, custom app etc• Select extensions to support the client’s business process

2. Prototype business extensions against template options• Objective: select a template that copes with main extensions with

minimum mods in template overrides• Build a prototype site and then try out template options• Business extension must work 100% in Protostar• Test templates in rough order below. Use templates from your own

library, or free versions of template frameworks where available. • Make sure your chosen template option supports custom CSS overrides

Theming Joomla! sites3. Colour scheme• Use client’s logo or corporate identity kit if appropriate• Dominant colour = primary theme colour• Match secondary colours to determine colour scheme type:

mono, analogous, complementary, triad, tetrad, custom• Adjust contrast, brightness, purity, pastel etc• Test for accessibility• Also consider portability (web safe, colour space etc)

• No logo or identity kit?• Define the target customer profile, demographic and emotional

tone• Compose a colour scheme to reflect the site’s mood

• Good resources• ColorSchemeDesigner 3 -> Palleton• ColourLovers

Theming Joomla! sites4. Typography• Common, platform-native or web fonts:

Google web fonts, FontSquirrel, DaFont• Match header and body font family, styles, weight, slant• WhatTheFont may help with mystery fonts in logos and identity

kits

5. Layout• Figure out client’s information structure• Map out menu structure and related modules• Sketch or wireframe page layouts

6. Icons• May be required if not provided with template and/or framework

7. Build the site• Have a checklist and follow it

Build from native templates• Start with Protostar / Beez3 (J3.x) or Beez2 / Beez5 (J2.5)• You need knowledge of template structure and design skills• Add your own features to base template• Module positions• Styles: use LESS• Template overrides, if required

• It takes an effort to make Protostar look like anything other than standard Bootstrap, but it can be done• Tips:• Use Bootstrap customizer to get a head start on custom LESS

and/or custom Bootstrap library• You can install Protostar on J2.5 using JBootstrap from YouJoomla

Configurable templates• … as opposed to templates based on full frameworks• Countless template foundry sites• TemplateMonster, Joomla24, Shape5, SiteGround,

ThemeForest etc.• Just search for ‘Joomla templates’

• Best solution if they fit your brief and budget is tight• Often include component and module overrides• Often sold individually

Framework template builders• Framework-based templates have many features of WYSIWYG design builders, but may still have limitations• Best solution if they fit your brief and you need flexibility• Often sold by periodical subscriptions• Subscription costs may be expensive relative to sites you build• Ongoing maintenance costs for template upgrades• Can still be frustrating to find or make a template to fit a brief

• Major frameworks usually offer an installer in the form of a free demo site installer or base template• Use this to prototype your business component and site design• Base template is often good enough to adapt for a finished site, so

long as you don’t require a unique style

Joostrap templates• Specialist Bootstrap v2 and v3 templates• Largely relies on Bootstrap for framework facilities• Use module suffixes to call out Bootstrap classes, including

module sizes and positions

• Good range of configuration options• Support for wireframing• CSS compiler• Social media icons• Custom code and Google Analytics support

• No free version of base template

You!Joomla YJSimpleGrid framework• Full-page design options, including:• Packaged access to main LESS variables• LESS compiler• Extensive layout and responsive options• Mega menu• Custom code and GA support• Support for multiple styles within each template• Extensive range of configuration options

• Free Eximium base template and demo installer

RocketTheme Gantry framework• Full-page design options, including:• Packaged access to main LESS variables• LESS compiler• Extensive layout and responsive options• Mega menu• Custom code and GA support• Support for multiple styles within each template

• Free Gantry base template and demo installer

JoomlArt T3 framework• Partial page design options, including:• Packaged access to main LESS variables• WYSIWYG customiser• LESS compiler• Extensive layout and responsive options• Mega menu• Custom code and GA support• Support for multiple styles within each template• Supports several major business extensions• The logo / headline and some other positions are not fully

configurable

• T3 framework used by partner sites, e.g. JoomlaBamboo• Free Purity III base template and demo installer

YOOTheme Warp framework• Full design options, including:• Packaged access to all LESS variables• WYSIWYG customiser• LESS compiler• Extensive layout and responsive options• Mega menu• Custom code and GA support• Packaged with and supports UIKit style artifacts

• Free Master 2 base template and demo installer

Standalone template builders• Full WYSIWYG template builders• Customise all page assets• Best solution if:• You need a unique style or layout• Customer approves custom development• Nothing else fits the brief and/or your business extensions

• Often sold by periodical subscriptions• Subscription costs usually reasonable relative to sites you

build

• No free demo versions, but plenty of free sample themes• Can be used for prototyping or wireframing

Template Creator standalone builder• Installed in Joomla!, builds Joomla! templates (all versions)• 14 quick start patterns but no fixed layout, drag / drop your own

layout• Consistent styling for all blocks and modules• Instant preview• Extensive responsive options• Import web fonts from FontSquirrel, Google web fonts• Supports ColourLovers palettes• 5 sample templates / gabarits provided• Extensible favourite styles pallete• Save / restore gabarits (internal definition of template)• Custom code supported anywhere• Standard menu is OK but consider separate Maximenu CK• Builds only standard template files and CSS, no system overrides

Artisteer standalone builder• Extremely powerful and highly granular• Instant preview and random suggestions• Extensive gallery of visual assets and templates• Export to a dozen CMS and IDE targets• Fixed but flexible module layout, two naming schemes• Can build boilerplate content as well as styles• Colour palette system is painful, very hard to match colours• Native Artisteer menus barely acceptable• Consider a mega-menu extension

• Latest beta (4.3.0.60728) supports Bootstrap• New stock media sites BillionThemes and BillionPhotos:• 700+ Artisteer projects on Billion Themes (130 free)• Licenced Artisteer users currently get 75% discount on

subscriptions

Q&A