Post on 30-Jan-2015
description
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