February 2010: Customize Your Joomla! Template
Š Copyright 2010 - Kendall Cabe
Ever asked yourself any of these... How do I change the logo of my template? Where is the logo at in the site? The header is too small. How do I make it bigger? How do I change the font size, color, style, etc. for my site? How do I make my modules look cool? Š Copyright 2010 - Kendall Cabe
What do I need to know? Some useful things to know or understand HTML / XHTML CSS PHP Graphic Design (artwork)
Š Copyright 2010 - Kendall Cabe
Some Useful Tools Windows Firefox Firebug CSS add-on (free) Web Developers Toolbar
IE with IE Developers Toolbar (free)
Mac CSS Edit (paid software) Xyle Scope (free) Firefox with Firebug / Web Developers Toolbar Š Copyright 2010 - Kendall Cabe
Where to start.... Step 1 READ THE INSTRUCTIONS!!!!!
Step 2 Look at the template parameters
Step 3 Modify your template
Only do Step 3 after you have done step 1 and 2
Š Copyright 2010 - Kendall Cabe
Step 1 – Template Instructions What’s In the Documentation Module Positions Module Styles Typography Artwork Themes Framework Docs © Copyright 2010 - Kendall Cabe
Template Frameworks* Morph from JoomlaJunkie / Prothemer Gantry from RocketTheme Warp5 from Yootheme Zen Grid from JoomlaBamboo (based on 960 Grid CSS Framework) Etc., Etc., Etc‌. * Many developers have built their own frameworks for their templates to speed up development and for ease of use by customers Š Copyright 2010 - Kendall Cabe
Step 2 – The Parameters
© Copyright 2010 - Kendall Cabe
Step 3 Modifying Your Template
Š Copyright 2010 - Kendall Cabe
Key Parts of the Template Index.php CSS Images Other Code and Extensions i.e. Javascript, installed modules, etc.
Š Copyright 2010 - Kendall Cabe
Editing Methods On Site with Template Manager* Locally / Remotely Using text editor or css editor for changes FTP for uploading
* Access to template folders not available through admin panel Š Copyright 2010 - Kendall Cabe
Examples For Your Viewing Pleasure Identifying What to Change Change the Logo Change the Logo and Resize Header Change the Font Style or Size Change the Header Background Color Cool Modules!!! © Copyright 2010 - Kendall Cabe
Commercial Template Developers JoomlaBamboo JoomlaPraise Yootheme RocketTheme Shape 5 And Many, Many More…. © Copyright 2010 - Kendall Cabe
Your Turn… Final Questions?
© Copyright 2010 - Kendall Cabe
Presented by
Kendall Cabe InfoTeam and InfoTeam Coaching kendall@infoteam.com
Š Copyright 2010 - Kendall Cabe