Theming Joomla! can be hard work. Choosing the right template for a site involves balancing a wide range of style, structure and function factors. The choice often involves compromises and modifications. This is an overview of the theming and customization process, and a showcase of the broad spectrum of template options and tools, including reviews and demos of the most important ones. Presented to the Melbourne Joomla! User Group on 27 Aug 2014.

1. Joomla! Theming
Russell Searle
Principal Consultant, Psicom
Melbourne Joomla! User Group
Melbourne Joomla! User Group
27 March 2013
27 August 2014

2. Agenda
Process
• The theming process
Theming 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

3. 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

4. Theming Joomla! sites
3. 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

5. Theming Joomla! sites
4. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. YOOThemeWarp 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

14. 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

15. 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

16. 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

17. Q&A