SlideShare a Scribd company logo

Joomla! theming

•Download as PPT, PDF•
•
Russell Searle
Russell Searle

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 of 17
Joomla! Theming Russell Searle Principal Consultant, Psicom Melbourne Joomla! User Group Melbourne Joomla! User Group 27 March 2013 27 August 2014
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
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! 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
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
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
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
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

More Related Content

Joomla! theming

  • 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