T3 user guide

7,806 views

Published on

Simple user guide to develop template use T3 Framework

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,806
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
113
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

T3 user guide

  1. 1. T3 FRAMEWORK USER GUIDE My Joomla Template Powered by Content compile from http://wiki.joomlart.com/wiki/JA_T3_Framework_2 Copyright http://rusmadi.com 2011
  2. 2. OverviewContents : 1. Introduction 2. JA T3 Blank Template 3. Joomla! 1.6 version 4. What is new in T3 Framework 2.0 5. What is hot about T3 Framework 6. Template Framework Comparison 7. Download 8. Support 9. Changelog and Roadmap
  3. 3. 1. Introduction +JA T3 Framework is the third generation template framework developed by JoomlArt forJoomla! 1.5 and above and brings new improvements and features: a new structure, Layouts,Mobile Ready, Right to Left Language Support and a powerful menu system called Mega Menu.The framework itself is our five years experience providing templates for Joomla!, it wasdeveloped to shorten the website development.JA T3 Framework 2.0 is a new version template framework introducing new features: profiles,plugins, themes.The new framework also comes with a new structure: a light template, a plugin to hold thedefault design and core scripts, a plugin to manage the template typography, but the plugin tohold menu parameters for Mega Menu have been integrated into the core framework plugin tomake the updating easier.2. JA T3 Blank TemplateJA T3 Blank Template is a new clean template design powered by the new framework.Benefits: • Easy to start developing templates from a blank core template • Easy to update the core while customizing the template layout design • Multiple themes with theme mixing capability - this allows you to use multiple themes simultaneously • Template administration panel is now your best friend: it allows you to edit files, upload your themes and customize settings like never before. • Flexibility have never reached this level!3. Joomla! 1.6 versionJA T3 Framework version for Joomla! 1.6 is released! Some important notes:1. JA T3 Framework consists of JA T3 Framework Plugin & JA T3 Blank Template2. To avoid compatibility issues, the plugin for Joomla! 1.6 and the one for Joomla! 1.5 will be
  4. 4. supplied separately as independent plugins.3. The JA T3 Blank template and all JA T3 Framework based templates will be updated forJoomla 1.6. When Joomla! 1.6 is released as Release Candidate, all JA T3 Framework templateswill be updated to work with the new version of the CMS, with very minor CSS/HTMLadjustments (why? read 4.)4. The framework was developed with Joomla! 1.6 vision in mind (at the time of the JA T3Framework 2.0 was developed, there was Joomla! 1.6 Alpha) so now we have a chance to seehow the framework would fit and make the most use of Joomla! 1.6.Also, we develop the framework in a way that users wont have to make many changes to ourtemplate when they upgrade their websites to Joomla! 1.6.5. Our framework is based on semantic HTML/CSS skeleton which is used by both versions forJoomla! 1.5 and for Joomla! 1.6.4. What is new in T3 Framework 2.0 • Introducing Profiles - a new presets feature to control template design and other template settings. • The template administration panel comes with a new look, split into several sections and is AJAX powered. • Modular code makes the template light and fast but also powerful. Scripts that are not used, are not loaded! • New performance features: template cache and CSS&JS compression. • Now the framework support advanced override features to develop a flexible front-end design, user friendly! • The new framework comes with a new structure - meet the new plugins to take over the framework functions! • Control Panel - front-end users can customize the look and feel of the website by switching user tools values: o font-size switcher - allows users to increase / decrease or reset font size; o screen size switcher - allows users to select the template width; o profiles switcher - allows users to switch profiles; o layouts switcher - allows users to change only the layout; o text direction switcher - allows users to change the text direction of the website5. What is hot about T3 Framework • An advanced navigation system upgraded by the Mega Menu, a new menu system to improve the other menu systems by giving them additional class and menu item description or slogan line, but also upgraded the template functions by adding the override capabilities made possible now with the new Profiles feature. • Multiple layout system - index.php no longer hold module positions, layouts do! These layouts are files to manage HTML generating scripts and are built with blocks having distinctive styling, functions and module positions.
  5. 5. • Mobile Ready - made possible with device detection capabilities implemented into the framework to make your website compatible for mobile devices such as Blackberry, Android, Palm, Windows Mobile and also iPhone devices. • Native RTL support powered by ingenious code to switch text-direction and template styling.6. Template Framework ComparisonThe new T3 framework is different than the classic framework. Any usual template has thecapability to manage module positions and styling classes, manage overrides, detect usersbrowser client, interact with the user in a certain manner, and others can give a user thefreedom to chose from multiple colors or font sizes, but they all have the same structure.* The original JA Purity is one of the classical templates that support some of the features built in the T3 Framework.The new T3 framework will add more freedom to the end user by letting him chose thenavigation type and layout that he likes the most. You will be able to create a single layout ormultiple layouts exactly how your users want. The T3 framework will successfully upgrade theway you develop. You can now create a full control panel for your users to customize the webinterface like never before.
  6. 6. 7. DownloadJA T3 Framework is free and you can download it here for Joomla! 1.5 and here for Joomla! 1.6.8. SupportWhenever you need a hand developing with T3 Framework 2.0, feel free to ask for support inour forum.Members have access to professional help, and can submit support tickets online via supportportal and our support team will provide assistance in less than 12 hours!9. Changelog and RoadmapVisit our Project Management portal for Changelog & Roadmap
  7. 7. GuidesContents : 1. Introduction 2. Structure 3. Layouts 4. Themes 5. Profiles 6. Override Priority 7. Template administration
  8. 8. 1. IntroductionIn this section we are going to explore • The Structure & The Extensions - explore the file & folder structure, purpose of most important files; • Layouts & Blocks - explore the concept, features and advanced parameters • Themes - explore the concept, typology, override coding • Profiles - explore the concept, typology, override coding • Template Administration - full usage instructions for all panels2. StructureThe structure of the framework changed since the introduction of the JA Menu ParametersPlugin. Generally, the template is lighter and faster, core scripts are now hold inside JA T3Framework Plugin.The latest release of the JA T3 Framework 1.0 comes with JA Menu Parameters Plugin to solveall SEO related issues and also to make menu management easier.JA T3 Framework 2.0 now incorporates this plugin to easily update the core files separatelyfrom your customized template design.This documentation section is entirely about menu management and usage of the integratedplugin.The new version introduces the new JA Typo Button Plugin to ease the work on editing specialcontent.
  9. 9. ExtensionsStarting the JA T3 Framework 2.0 you will need to have:JA T3 Framework PluginThe core folder
  10. 10. • Template administration - these files manage the template administration panel with all scripts and back-end views. • Device and browser detection scripts - these are the scripts to detect user device (desktop computer, mobile device) and user browser client. • Menu system engines - these scripts power up all the menu systems T3 Framework use. • Parameters and other core files - files to power the AJAX capabilities, caching, override features, and general parameters.The base-themes folderThis is the folder to hold the core default template with default: • blocks to hold all default blocks: IE6warning, header, footer, middle, etc; • css to hold default Core CSS Framework of the template styling; • html content components and modules override; • etc to hold default layouts, themes and profiles; • js to hold default template javascript files;
  11. 11. • page to hold layout generating scripts and others.The sample-themes folderThis is to hold the sample template you will need for creating your own T3 Framework basedtemplate.Coming soon..T3 Framework 2.0 Based TemplateThe Default themeThe latest version of your JA T3 Framework 2.0 Template now incorporates the default layout,and this way it could work as a regular Joomla! template.These files and folders hold the default theme of the template to override the core plugin base-themes styling. As you can see: • can hold block overrides; • styles the menu systems and general styling; • holds own images; • can override javascript code; • it is recognized as a theme because of the info.xml file.
  12. 12. The T3 Framework Specific FilesThe core folder holds: • Template Core Layouts; • Template Core Profiles; • Template Core Themes; • Template Core Themes Variations.The local folder holds: • User Created Layouts; • User Created Profiles; • User Created Themes Variations.
  13. 13. Other filesFolder and files information: • the info folder holds template specific information; • general template files (thumbnail, template details, favicon).JA Typography Button PluginA new plugin to help editors to easily add special typography styles for special content.In your favorite editor, you will notice a new button JA Typo.
  14. 14. Click this button to open the Typography selection window.In this window, hover any of the styling and click to insert it in your content on the fly.3. LayoutsJA T3 Framework 1.0 introduced multiple layouts feature to add more flexibility in design. Alayout is by definition a concept design for content arrangement within a page, but ourdevelopers thought about a template framework to use a simple index.php file to keep only thevery general routers, and never manage layout design, module positions or script calls. Otherfiles can do a better job within a modular design.
  15. 15. Introducing Layouts and BlocksConcepts and ideas behind • Layouts are the files to hold the HTML generation of your front-end design. They load other files called blocks to perform various functions. By using various styles and positions for these blocks you can create unlimited layouts your users can select and use for best convenience. These layouts are then loaded by the new template index.php file. • Blocks are files to hold module positions, perform specific script calls and prepare the HTML generation of the content. As you know, the most popular elements: header, footer, left, right, spotlights, pathway, etc. these are now separate files, no longer HTML elements defined in the index.php file. • The idea is to have a website to use a single template, but having a unique design for your homepage, another custom design for your Blog and another for your forums. In other cases you may want your users to pick the most convenient layout. • Layouts can be switched in front-end from the UserTools Panel. • Layouts can be customized in the back-end using the built in editor. • Layouts and blocks in theme variations or user created themes can override those in the blank core theme. • Blocks typology: o blocks as separate files to hold specific module positions: footer, mainnav, middle; o blocks that are automatically generated according to layout settings: spotlights, left & right, content-mass & column-mass; o blocks that manage specific functions such as a few user-tools, or the IE6warning that cannot be customized inside the layout configuration; o blocks that call for dynamically generated content such as: system messages or content component body; o blocks that call for javascripts and stylesheets.
  16. 16. Default LayoutLayout xml fileLayout information
  17. 17. This holds the very basic layout design of the template with all default blocks supplied by theframework. All blocks have default style, order and positioning. Other layouts may overridethese block settings, without having to use the entire code of the default layout to generate thelayout design.Layout blocks • ie6 blocks set manage the Microsoft Internet Explorer 6 Warning Message; • user-tools blocks set manage the front-end customization tools that front-end users can use to make navigation more enjoyable: o color.php block holds the theme switcher; o cpanel.php block loads all other user-tools mini blocks; o direction.php block manages the text direction of the template: Right to Left or Left to Right; o font.php block manages the font-size of the template; o layouts.php block detects all layouts both core and user created and displayes them in the panel; o layout-switcher.php block manages the layout switch; o menu.php block manages the menu system switch; o profiles.php block manages the profile settings for each page users navigate; o reset.php block provide reset feature to restore all settings to profile defaults; o screen.php block manages the template width switcher; o themes.php block manages the theme switch when required by the profile; o tools-mega.php block loads megamenu parameters; • desktop blocks set are used for desktop devices designated layouts o content.php holds the content component body call; o css.php block manages the Google Font for text logo text, module titles, content titles. page titles; o fixheight.php holds a script to force usage of the same height of the left, main and left, and a fixed height for content mass and column mass positions; o footer.php block holds module positions for copyright notices, other menus and other advertising; o head.php block is used for system CSS file calls; o header.php block holds websites logo and a module position for search modules; o mainnav.php block holds the main navigation of the template; o message.php block holds the system message body to display system messages; o middle.php block is where your content actually is displayed: articles, products, galleries, and this block also incorporates left and right blocks previously designed as separate block files; o module.php and modules.php are block generators used to create blocks for special module positions needed by advertising modules, content sliders, etc; o navhelper.php block holds the pathway module position;
  18. 18. o spotlight.php is a block generator script to be used as top spotlight or bottom spotlight, no matter how much spotlight blocks you may want to use.Layout VariationsIn this section we are going to explore methods on how to develop layout variations.Different block positions
  19. 19. Two columns left layoutLayout xml fileLayout informationThis layout inherits blocks and their settings from the default layout, but overrides the positionfor left and right blocks. See more information below.Layout blocks • left block is using left1 layout position (default was right1); • right block is using left2 layout position (default was right2);
  20. 20. Different block order within the layoutTop menu & Left-Body-Right LayoutLayout xml file
  21. 21. Layout informationThis example layout loads all blocks of the default layout, but overrides the order for headerand mainnav, and also overrides the position of the left block. Please note that whenever youuse a Left-body-Right layout, the left-mass and right-mass positions are hidden. See moreabout just below.Layout blocks • mainnav block moved to top; • header block moved below the mainnav block; • left block is using left1 layout position; • right block is using right2 layout position;Different block styles
  22. 22. Square LayoutLayout xml fileLayout informationThis layout also loads all of the blocks coming with the default layout, but this time, the rightblock uses a different style.Layout blocks • right block is using style="square" style, and you can customize this styling in the template.css file, but you will need to customize the modules.php in the HTML folder and add your desired code for this style.Mobile Ready LayoutsMultiple layouts feature is also powering the Mobile Ready feature. These layouts have theirown blocks sets optimized and developed according to specific standards. In the Profiles tab ofthe template administration panel, you can assign these layouts for each mobile device type.
  23. 23. The Handheld layout • handheld specific blocks override the default blocks and they are optimized for fast loading: o footer holds the website copyright information; o head holds the scripts; o header holds the template logo; o main holds the main content body; o mainnav block holds a special designed main navigation; o toolbar block is in charge to allow user to show / hide the main navigation.The framework uses this handheld layout when it detects devices such as: • Windows Mobile devices • Android powered mobile devices • Blackberry mobile devices • Palm mobile devices • and other mobile devices
  24. 24. The iPhone layout • iphone blocks set override the default blocks and they are designed according to iPhone standards: o footer holds the website copyright information; o head holds the scripts; o header holds the template logo; o main holds the main content body; o mainnav block holds a special designed main navigation; o menu block generates iPhone specific navigation system.Block attributes and parametersJA T3 Framework 2.0 comes with advanced layouts feature. Blocks that form layouts can bemanipulated with a series of parameters and settings to easily change the HTML renderingbehavior.General block parametersBlock nameExpression: <block name="top" ...>Purpose: this attribute serves as an identifier for the blocks, as there is always a chance some ofyour blocks to be the same type, so the framework needs to know how to identify them. Theidentifier refers to the layout position within the layout.
  25. 25. Example: <block name="left1">left</block>Block typeExpression: <block name="header" type="header" ...>Purpose: this parameter sets the behavior and the functionality of the block as there areseveral files to manage behavior of these blocks: • head.php • header.php • middle.php • footer.phpBlock styleExpression: <block name="top" style="JAxhtml" ...>Purpose: this parameter sets a module style for all modules inside a block. These styles aredefined in the modules.php located in the your_site/plugins/system/jat3/base-themes/default/html folder, so this way Joomla! can understand how to show the content ofthe modules. The styles list is: • no style - the default block setting with no block style defined, only provide support for module class suffixes; • raw - provides a blank design for modules, no div, no classes; • xhtml - mostly used for macro blocks like header, middle, footer; • JAxhtml - provides a clean design for modules; • JArounded - provides support for rounded corners design for modules.Generate additional divBlock markupExpression: <block name="left" name="top" markup="2" ...>Purpose: a new parameter to generate some additional div tags within the left or rightcolumns. The idea is to provide more flexibility to designers. Values of this parameter: • markup="1" - default value, no effect;
  26. 26. • markup="2" - advanced markup, will add a div class="l" (l is for left) above the column and one div class="r" (r is for right) below, see example below.. • markup="3" - complex markup, will add two div tags: class="tl" (tl is for top left) and class="tr" (tr is for top right) above the column and two div tags: class="bl" (bl is for bottom left) and class="br" (br is for bottom right), and a two middle div tags. See example below...Block innerExpression: <block name="right" block-inner="3" ...>Purpose: this parameter will add a number of inner div tags to wrap the block. The value you
  27. 27. set here is actually how deep the div structure will be. The additional div tags will haveclass="block-inner1", class="block-inner2", .. class="block-innerX". See image below..Main innerExpression: <block name="right" main-inner="2" ...>Purpose: this parameter will add a number of inner div tags to wrap the block. The value youset here is actually how deep the div structure will be. The additional div tags will haveclass="main-inner1", class="main-inner2", .. class="main-innerX".Wrap innerExpression: <block name="right" wrap-inner="3" ...>Purpose: this parameter will add a number of inner div tags to wrap the block. The value youset here is actually how deep the div structure will be. The additional div tags will haveclass="wrap-inner1", class="wrap-inner2", .. class="wrap-innerX".
  28. 28. Remove divNo wrapExpression: <block name="header" no-wrap="1" ...>Purpose: removes the div with class="wrap" that wrap the block for any macro block that fillsthe entire width of the template (header, mainnav, middle, footer, etc).No mainExpression: <block name="header" no-main="1" ...>Purpose: removes the div with class="main" that wrap the block for any macro block that fillsthe entire width of the template (header, mainnav, middle, footer, etc).Middle column widthColumn general widthExpression: <block name="middle" type="middle" colwidth="20" ...>Purpose: this parameter sets a default column width for the left, component body and rightblocks inside the middle block. Left and right blocks use a column width of 20%, and main bodywill use the remaining 60%.Custom column widthExpression: <block name="right" width="25" ...>Purpose: this setting will override the default column width of 20% set for all blocks in themiddle block. A higher value of this parameter will increase the width of left and / or rightblocks, and will decrease the width of the main body block.Middle PositionsStandard ColumnsPurpose - middle.php macro block can render a column for each of the left, content-body(known as main) and right blocks, but can also render a column for the content-body and left &right joined into second column. Each column have distinctive class rules to be styled separatelyfor each layout.Variations • left + body + right <blocks name="middle" colwidth="20" fixheight="1"> <block name="left1/left2">left</block>
  29. 29. <block name="right1/right2">right</block> </blocks> • left + right + body <blocks name="middle" colwidth="20" fixheight="1"> <block name="left1">left</block> <block name="left2">right</block> </blocks> • body + left + right <blocks name="middle" colwidth="20" fixheight="1"> <block name="right1">left</block> <block name="right2">right</block> </blocks> • other variations o right + left + body <block name="left2">left</block> <block name="left1">right</block> o body + right + left <block name="right2">left</block> <block name="right1">right</block> o left + body + right <block name="left2">left</block> <block name="right2">right</block> o other variationsEnabling mass positionsPurpose: enables you to use content-mass-top and / or content-mass-bottom, left-mass-topand / or left-mass-bottom, right-mass-top and / or right-mass-bottom positions as additionalmodule positions. You can enable the content-mass positions anytime, but column-mass (left-mass-top, right-mass-bottom, etc) can be enabled only when left and right blocks join to forma column.Variations • left + body - all additional positions<blocks name="middle" colwidth="20" fixheight="1"><block name="left-mass-top">left-mass-top</block><block name="content-mass-top">content-mass-top</block><block name="left1">left</block>
  30. 30. <block name="left2">right</block><block name="content-mass-bottom">content-mass-bottom</block><block name="left-mass-bottom">left-mass-bottom</block></blocks> • body + right - top additional positions<blocks name="middle" colwidth="20" fixheight="1"><block name="right-mass-top">right-mass-top</block><block name="content-mass-top">content-mass-top</block><block name="right1">left</block><block name="right2">right</block></blocks> • body + right - various additional positions<blocks name="middle" colwidth="20" fixheight="1"><block name="right-mass-top">right-mass-top</block><block name="right1">left</block><block name="right2">right</block><block name="content-mass-bottom">content-mass-bottom</block></blocks>Inset ColumnsExpression: - <block name="inset1">left</block>Purpose: allows you to group the main-body with left and/or right blocks to form a columnwith special div structure and styling classes.Values • inset1 - groups main body with left / right block, and sets the position of the left / left block to the LEFT side of the main-body; • inset2 - groups main body with left / right block, and sets the position of the left / left block to the RIGHT side of the main-body.Variations • (left + body) + right <block name="inset1">left</block> <block name="right1">right</block> • left + (body + right) <block name="left1">left</block> <block name="inset2">right</block>
  31. 31. • (left + body + right) <block name="inset1">left</block> <block name="inset2">right</block> • left + (right + body) <block name="left1">left</block> <block name="inset1">right</block> • (body + left) + right <block name="inset2">left</block> <block name="right1">right</block> • other variationsSpotlight parametersTotal widthExpression: <block name="bottom-spotlight" type="spotlight" totalwidth="95"...>user6,user7,user8,user9,user10</block>Purpose: this setting will override the default width of the entire spotlight (100%) with thevalue you set here. In the expression above you can see a 95% width for the bottom-spotlightblock.Custom widthExpression: <block name="top-spotlight" type="spotlight" special="left"specialwidth="25">user1,user2,user3,user4,user5</block>Purpose: - this will override the default 20% width for a single position within the layout, itcould be the one in the right side, it could be the one in the left side, but lets examine theseparameters closer: • special="left" - this defines where is the module we want to use the custom width: left or right • specialwidth="25" - this defines the new width value for this module within the spotlight block.4. Themes • Themes are in charge of filling a template with color and give your template a new look and feel. • Themes can hold CSS and image files to override everything in the core plugin styling, and also basic template styling. • Themes can also hold html content components and modules overrides. • Usually they override the default theme. • They can also override layout blocks for customization purposes.
  32. 32. • In Profiles tab of the template administration panel you can use multiple themes for a single profile, and set an order of priority.Base Theme • This is the base theme to hold very basic layout design. • This theme has no graphics, no colors, just dimensions, padding and margins. • Additional styling should be added in theme variations to override this default layout design.Theme Variations • Theme variations override the base theme and have highest priority to style the template. • They can be used to create unlimited color themes, with contrasting colors and graphics.
  33. 33. The Default ThemeThis is the default theme supplied with the T3 Framework based template. This theme willoverride the base theme in the core plugin. Lets have a closer look at the files and folders: • blocks folder to hold the blocks you want to override; • css folder to hold template.css to override general template styling and menu folder to override menu systems styling; • html folder to override same files in the core plugin for content components and modules views; • images folder to override the logo and generally all graphics needed to have a custom theme design; • info.xml file to hold theme information.
  34. 34. Color Contrast ThemesThis is a theme variation to override the default theme supplied with the T3 Framework basedtemplate. Lets have a closer look at the files and folders: • css folder to hold template.css to override general template styling and menu folder to override menu systems styling; • info.xml file to hold theme information.
  35. 35. Graphics Rich ThemesThis is graphics rich theme supplied with the JA Anion T3 Framework 2.0 based template. Letshave a closer look at the files and folders: • css folder to hold template.css to override general template styling and menu folder to override menu systems styling; • images folder to override the logo and generally all graphics needed to have a unique theme design; • info.xml file to hold theme information.Important noticeThe framework will load all CSS files, images, and layouts for: • 1st: plugin base-themes • 2nd: default themes of the template with: layouts, css, images • 3rd: other theme variations and user created templates
  36. 36. You must ONLY use additional files to override what is supplied by default, and keep allsimple and optimized. No need to use same code in all template.css files.5. ProfilesWhat is a profileBasically it is a new presets feature to hold all template settings. These settings are hold in filesinside the template folders.You can create unlimited unique profiles, combining all template settings to achieve severaldesign goals, and these profiles you create are stored in your template local folder.You can manage profiles in the Profiles Panel of the template administration.What do they bring to the framework • Profiles have taken over the menu & layout override options used in the previous version of the framework. • When switching the layout in front-end does not redirect to home page anymore because of the improved User Tools panel. • No more template parameters in the links! User can always customize some profile settings in front-end and reset to default profile settings, even if overrides are set for specific pages.Default ProfileThis is the file for the default profile. It holds default values for all template settings:your_site/templates/jat3_blank/core/etc/profiles/default.inilogoType=imagesetting_font=3setting_screen=fixedsetting_screen-fixed-screen_width=950pxhide_content_block=0setting_direction=ltrgfont_global=gfont_logo=gfont_slogan=gfont_moduletitle=gfont_pageheading=gfont_contentheading=menutype=mainmenusetting_menu=mega
  37. 37. startlevel=0endlevel=-1ja_menu-mega-animation=slideja_menu-mega-duration=300option_t3logo=1option_font=1option_screen=1option_profiles=1option_layouts=1option_direction=1option_menu=1themes=core.lightdesktop_layout=defaulthandheld_layout=handheldiphone_layout=iphoneProfile VariationsOther profiles can only override some settings defined within the default profile. Example:your_site/templates/jat3_blank/local/etc/profiles/your_profile.inithemes=orangeThis profile will only override the default theme used by the template with the orange theme,so as you can see, there is no need to repeat the entire profile code if the other settings are notchanged.6. Override PriorityTemplates have the ability to override everything coming by default with the Joomla!distribution package: content components or modules front-end views, styles, language strings,etc.The template default settings are hold in the default profile. Other profiles will then overrideevery setting in the default profile.You can assign a unique settings profile for your homepage, one for your online shop, one foryour forum and another one for your blog. This way you can override the default profile forevery single page or content component with your desired profile.Lowest Priority
  38. 38. As you can see in the JA T3 Framework Plugin structure: • it holds the default styling and code of the blank theme in the base-themes folder: o CSS styling, o layouts, o HTML template overrides, o images, o themes.Medium PriorityThe T3 Framework based template default theme: • holds its own general styling to override the default general styling in the blank theme • it does not hold javascript files of any kind, but it can also override javascript, • will override everything in the blank theme: o CSS styling, o layouts and blocks, o HTML template overrides, o images.High PriorityA high priority have theme variations coming with the templates powered by the T3Framework 2.0, as they can hold CSS styling, layouts and blocks inside, HTML templateoverrides and images. • will override everything in the default theme: o CSS styling, o blocks, o HTML template overrides, o images.Highest Priority • Priority zero have user created themes to hold custom layouts, images, stylesheets. • When using multiple themes simultaneously, the theme priority can always be changed in the Theme Settings section of the Profiles Panel • Front-end users can always customize everything in a profile that was loaded for a specific page: layouts, menu system, other profile settings. • All styling marked as !important have highest priority.
  39. 39. Graphic representation7. Template administrationThe template administration was improved to make customization work easier via internaleditors and upload features, but also faster via AJAX implementations. The administration isnow split into five sections: • Global Panel - general template settings and system settings • Profiles Panel - template design settings and presets • Layouts Panel - template layouts management • Themes Panel - template color themes management • Help & Update Panel - help resources and version informationThe administration panel is now your best friend as each section comes with a quick guide, andevery setting provide hints and usage instructions.
  40. 40. Global PanelGlobal Panel OverviewThis panel controls the general behavior of the template and also the system and compressionsettings. With all its sections minimized, this panel looks like this:Profile Override SettingsThis section allows you to set profile overrides for specific pages or content components. Thedefault profile is used for all pages and content components by default, but you can createunlimited profile overrides.
  41. 41. In case you want to change the template settings for one or more pages or contentcomponents, here is a quick guide: • Step 1 - Click the arrow to maximize the Profile Override Settings section. • Step 2 - Select one or more menu items or components in the the left drop down list (click and hold the Ctrl key for multiple selection) and then click the Select button in the selection box. • Step 3 - Select the profile you want to use for these pages. • Step 4 - Click the Apply button.Please note!There could be several reasons why profile override settings dont work when using SEF. Why?Within a Joomla! website, there could be several links to route to certain internal pages, andthese links dont always carry an Itemid value, but other SEF components like sh404SEF cansolve the problem because it makes sure to route all these links with no Itemid value to thecorresponding ones having Itemid=5 value. So having Itemid, T3 Framework will load theproper profile.
  42. 42. System SettingsThis section manages the cache feature for the template. Have a look at the picture below: • Enable Development Mode - if you set this setting to Yes, it will completely disable all cache, so that you can always see instantly your customizations on page refresh. Setting this setting to No is recommended for production websites with huge traffic that need cache. • Cache Mode - Enables / Disables template cache to lower all PHP queries generating the front-end HTML of your website (component/module template override views, layout files, etc). • Cache Exclude - Option to exclude the cache feature for specific components or positions. Example: o position=user1,user2 - will exclude cache for these positions, o component=com_virtuemart,com_fireboard - will exclude these components from using cache.This feature was developed to avoid script conflicts for AJAX content.
  43. 43. Compression SettingsOptimize CSS - This this feature will optimize all the CSS files used in your website.Options: • No - Disables the CSS compression features. • Linked files - Uses the @import function to import all CSS files into a single CSS file to have a single file call and reduce browser requests. This will fix the IE related issues caused by the maximum 30 CSS files limit. • Join & Minify - Combines Minify and Join (file merging) optimization. Minify is an optimization technique to eliminate blank spaces and other unnecessary characters (comments usually) without changing the functionality of the code. Join will merge the content of the minified files into a single file to be stored in the folder you can configure below. • Join & Minify & Compress - will compress the CSS file created by Join & Minify using Joomla! gZIP compression scripts.Optimize JS - This this feature will optimize all the JS files used in your website.Options: • No - Disables the JS compression features. • Join - Will only merge all JS files into a single JS file to be stored in the folder you can configure below. • Join & Minify - Combines Minify and Join (file merging) optimization. Minify is an optimization technique to eliminate blank spaces and other unnecessary characters (comments usually) without changing the functionality of the code. Join will merge the content of the minified files into a single file to be stored in the same folder you can configure below. • Join & Minify & Compress - will compress the JS file created by Join & Minify using Joomla! gZIP compression scripts.
  44. 44. Optimize Folder - Folder where optimized css/js files are stored. By default it is t3-assets in theweb root.Please note: This folder must be writable.Optimize Exclude - Not recommendedAdd the JS / CSS files name (without location path) you do NOT want to optimize, one per row.Example:template-rtl.cssmega.jsPlease note • The CSS & JS Compression feature can work with JA Compress Plugin enabled. • Minify Script reguires PHP 5.x.Profiles PanelProfiles Panel OverviewIn this panel you can manage profiles: create, clone, edit, delete (your own) profiles. For eachprofile you can customize all template settings: logo, font-size, layouts, menu system, colortheme, text-direction, etc. All these settings are split into several sections as you will see in the
  45. 45. next chapters.Profiles TypologyThere are 2 types of profiles: • default profiles - cannot be deleted as they are part of the framework core, but can be customized / reset to default;
  46. 46. • user created profiles to load user layouts, themes and other custom settings.Editing ProfilesAll user created profiles (clones of the defaults or created by user) override the settings of thedefault profile. To edit a user created profile, please proceed with this quick guide: • Step 1 - select a profile you created or cloned out of any other default one; • Step 2 - click the checkbox to enable the customization of any setting and change the values or options; • Notice - the Profiles tab detected a user customization that will require to save the settings; • Step 3 - click the Apply button to save settings.
  47. 47. Please note that settings that are not checked cannot be changed and will not override thedefault values.Please note - when editing core template profiles, the framework will create profile overrides inthe local profiles folder (user setup).General SettingsIn the general profile settings you can customize: • the logo - image / text (just like in the screenshot) • the font size - select from six font-sizes: from 10px to 15px • the template width - SPECIFIED PIXEL (default), SPECIFIED PERCENTAGE, AUTO, WIDE • text direction - RTL or LTR • you can also choose to show/hide the main content block. • T3 Logo setting comes with 5 options: o Dont show - will hide the T3 Framework logo o Light Logo - show default T3 Framework logo o Dark Logo - show dark T3 Framework logo o Light Logo - show a small T3 Framework logo with default colors o Dark Logo - show a small T3 Framework logo with dark colors.
  48. 48. Google Font API SettingsJA T3 Framework 2.0 comes with a built in font-replacement solution: Google WebFonts. In thefont settings you can customize: • Global Font - a special font to be used generally for all text content in the front-end • Logo Font - a font to be used when you are using Text Logo setting • Slogan - a font to be used for slogan line under the Text-Logo • Module Title Font - a font to be used for all module titles in your website • Page Heading Font - a font to be used for Menu Item Pages • Content Heading Font - a font to be used for content articles or itemsFor each of the elements above, you can also add custom CSS styling, one style per row.Example:font-size:18px;font-weight:bold;
  49. 49. Menu SettingsThe menu settings allow you to configure the main navigation for your website: • the menu to be loaded (mainmenu is the default setting) • menu system: Split Menu, CSS Menu, Mega Menu, Dropline Menu • starting & ending points of menu rendering • if Mega Menu is selected, you can customize the animation settings: o Animation type: none, slide, fade, slide and fade o Animation duration - time in milliseconds for the animation o Delay hide time - time in milliseconds for the hide time delay.User Tools SettingsIn this section you can set what tools you allow your users to use, so you can show or hide anyof the user tools for each of your profiles:
  50. 50. • Font-size switcher • Screen-size switcher • Profiles-switcher - This switcher shows up when you have at least 2 PROFILES. • Layouts-switcher - This switcher shows up when you have at least 2 LAYOUTS. • Text-direction switcher • Menu-system switcherThemes SettingsTheme Settings allow you to override the styling of the default theme. To do that, please followthe steps described below: • Step 1 - click the Edit icon to open the theme selection box; • Step 2 - check one or more themes to be used to override the default theme; • Step 3 - click the Apply button; • Step 4 - click and drag the themes and set your favorite order: the first in the left will override all in the right, and the last is the default theme that is locked and cannot be dragged. • Step 5 - click the Apply button in the template administration panel to save the new theme settings.
  51. 51. Layout SettingsThe layout settings allow you to set the default layout to be used as default for each user devicetype, for each specific profile.You can set here: • a default layout for desktop computers • a default layout for Handheld devices: BlackBerry, Android Mobile, Windows Mobile, etc • a default layout for iPhone devices
  52. 52. Layouts PanelLayouts Panel OverviewIn this panel you can manage layouts used by the template.Layouts TypologyAs you can see, there are two types of layouts: • default layouts - supplied by the template developer and stand as samples end-users can use to create their own layouts. These cannot be deleted as they are part of the template core files. • user created layouts - are created by the end-user to use his desired styling.
  53. 53. Editing layoutsJA T3 Framework 2.0 comes with an internal editor to easily customize layouts. To edit a layout,please follow this quick guide:
  54. 54. • Step 1 - In the Layouts panel click the Edit link for any of the layouts you would like to edit. This opens the layout editor you can see below. • Step 2 - Customize the layout using the internal editor. • Step 3 - Click the Save button in the internal editor to save the layout.Please note: By editing core template layouts, the framework will create layout overrides in thelocal layouts folder (user setup).Themes PanelThemes Panel OverviewThis panel was developed to ease your work managing multiple themes. You can create yourcustom color themes, pack them and upload them to the template themes folder right in theback-end, just like installing a template extension.
  55. 55. There are two type of themes: • Core Themes - default themes supplied by the template, cannot be deleted as they are part of the template core files. • Local Themes or User Created Themes.Uploading themesBased on default core themes, you can create your own themes and upload them right in theback-end of your website. For instance you would like to design a green theme, please followthis quick guide:
  56. 56. • Step 1 - Create your theme. • Step 2 - Pack your theme into a zip file. • Step 3 - Click the Choose File button to browse for the green theme. • Step 4 - Click the Upload File & Install button.The newly uploaded theme will be listed in the Local Themes section of the Themes Panel.
  57. 57. Help and Update PanelThis Panel allows you to:
  58. 58. • View the current version information. • Check or upgrade to the new version with our JA Extensions Manager.Also this panel provides help and documentation resources.
  59. 59. T3 Framework FAQsContents : 1. Developing a T3 Framework Template 2. End-user Customization 3. Updating T3 Framework 4. JA Purity III Demo
  60. 60. 1. Developing a T3 Framework TemplateIntroductionIn this section we are going to cover all about developing a T3 Framework 2.0 Template:ja_purity_iii with the very same design as ja_purity_ii. Generally we are going to explain thedevelopment steps, style customizing basics, file & folder management and principles.This section explores the template developer development procedures on how to create a newtemplate with core layouts, themes and settings. All these developer created files and themesshould use the core folder, as end-user can use them as examples for their design goals.Video TutorialsIf you need further assistance, please watch our video tutorials on User Theme: • Part 1 - preparation, customizing header and spotlights • Part 2 - customizing Mega Menu, links, HTML overrides, suffix class,etc.PreparationTechnical RequirementsTo be able to develop your own template, you will need to prepare: • the software tools o Adobe Photoshop CS3/CS4 or Gimp for graphics; o Adobe Dreamweaver or Notepad++ for code editing; o Mozilla Firefox with Firebug plugin for CSS play around; o FileZilla or any other FTP client; • the enviromnent o localhost xampp, wamp or any Apache with PHP and MySQL server; o or o livesite preferably on a subdomain. o Joomla! 1.5 installed on your development server, check server requirements here; o other resources will be added to this section shortly.Create template folderIf you are developing on localhost, create a ja_purity_iii folder inside the templates folder. Todo that on your livesite, you will need to use your FTP client.
  61. 61. Copy general template filesThe new template will need the basic files to be able to work as a Joomla! template. To do thatplease follow these steps: • Browse the ja_t3_blank folder in your templates folder; • Copy the following files from this folder to your new template folder: o component.php o favicon.ico o index.php o template_thumbnail.png o templateDetails.xml o params.iniCreate template file and folder structureTo override the basic design of the core framework, you will need to have a correct file andfolder structure. To do that, you can simply copy the files and folders from the ja_t3_blank intothe ja_purity_iii folder as follows:As you can see in this image, the template files and folders are grouped so you can easily followand suggest copying only the default theme, layout, profile and general template files.
  62. 62. Edit the default theme XML fileNext, we are going to enable the default theme of the ja_purity_iii template. • Find file your_site/templates/ja_purity_iii/info.xml • Edit this file accordingly, here is an example:<?xml version="1.0" encoding="utf-8"?><theme><name>default</name><description>Default theme for JA Purity III Template</description><date>July 2010</date><version>1.0.0</version><author>JoomlArt</author><copyright>JoomlArt</copyright></theme>Adjust templateDetails XML fileThe new template is ready to go, it only needs to have its own information. To do that, youhave to adjust the templateDetails.xml file as follows: • replace "ja_t3_blank" to "ja_purity_iii" • replace all other information to your convenience, see our example below<?xml version="1.0" encoding="utf-8"?><install version="1.5" type="template"><name>JA_Purity_III</name> // update the template name here, no spaces are allowed<version>1.0.0</version> // remember to update the template version<creationDate>02/07/10</creationDate> // update the creation date here<author>JoomlArt.com</author> // update the author of the template as you wish<authorEmail>webmaster@joomlart.com</authorEmail> // update the contact details as youwish<authorUrl>http://www.joomlart.com</authorUrl> // update the author website as you wish<copyright>J.O.O.M. Solutions Ltd.</copyright> // update the copyright owner of the templateas you wish<license>GNU/GPL version 2</license> // update the licence type: commercial or GNU/GPL 2.0<description>Clean and beautiful template powered by T3 Framework 2.0.</description> //update the template description as you wish<engine>t3</engine> // update the framework version if necessary<files>......common code deleted.....</files>
  63. 63. <languages><language tag="en-GB">en-GB.tpl_ja_purity_iii.ini</language> // create these language filesand update here accordingly</languages><administration><languages folder="admin"><language tag="en-GB">en-GB.tpl_ja_purity_iii.ini</language> // create these language filesand update here accordingly</languages></administration><positions>......common code deleted.....</positions><params addpath="/plugins/system/jat3/core/element">......common code deleted.....</params></install>Create language filesNow your template will need language files. This is not mandatory if you create a template foryou, the framework will use the core plugin default language files, but if you are a templatedeveloper, you might want to deliver fully functional templates. Here is what you have to do: • create back-end language file o open your template folder ja_purity_iii, and create a folder called admin o copy & paste inside the file from same folder of the ja_t3_blank template folder o rename the file from en-GB.tpl_ja_t3_blank.ini to en-GB.tpl_ja_purity_iii.ini o open the file and edit it accordingly; • create front-end language file o open your template folder ja_purity_iii, and copy & paste inside the en- GB.tpl_ja_t3_blank.ini file from same folder of the ja_t3_blank template folder o rename the file from en-GB.tpl_ja_t3_blank.ini to en-GB.tpl_ja_purity_iii.ini o open the file and edit it accordingly.Install your new template in Joomla! 1.6With Joomla! 1.6, you have to Discover the new template, so please follow this quick guide: • Go to the "Extensions" menu, and click "Extensions Manager" • Click to open the "Discover" tab
  64. 64. • Click the "Discover" button in the top-right toolbar • Select your template and click the "Install" button.Set the new template as defaultTo be able to customize the template, you will have to set it as default template, so to do so,please go to your site back-end, and follow these steps: • Step 1 - select the JA Purity III template; • Step 2 - click the Default button.Enable Development ModeNow you have to make sure your customizations are applied instantly every time you changethe code or images, so you have to disable the framework core cache and enable developmentmode. To do that, you must browse the JA_Purity_III template administration, and then follow
  65. 65. these steps: • Step 1 - select Yes for the Enable Development Mode option; • Step 2 - click the Apply button.Now you can start customizing your new template so go to your front-end, and refresh thepage to to make sure new template works.Building the default layoutLayouts are stored in ja_purity_iii/core/etc/layouts folder. Firstly, we will build the defaultlayout having 3 columns: Left - main - Right in main content.For this design, we could have this configuration:
  66. 66. • TOP: oheader omainnav ospotlight • MIDDLE: o left o main content body o right (rounded) • BOTTOM: o spotlight o navhelper o footerWith these blocks, the default layout XML file (default.xml) will look like this:<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><!--Extra css load for this layout--><stylesheets></stylesheets><blocks name="top" style="xhtml"><block name="header" type="header" main-inner="1"></block><block name="mainnav" type="mainnav" main-inner="1"></block><block name="cpanel" type="usertools/cpanel"></block><block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block></blocks><blocks name="middle" colwidth="20"><block name="left1">left</block><block name="right1" style="JArounded">right</block></blocks><blocks name="bottom" style="xhtml"><block name="botsl" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block><block name="navhelper" type="navhelper" main-inner="1"></block><block name="footer" type="footer"></block></blocks></layout>Save above XML into ja_purity_iii/core/etc/layouts/default.xml, then check it in your front-end (refresh the page to test the layout change).Calling additional files into layoutIn some cases you might want to call for additional stylesheets or js files, here is an example onhow to do that:
  67. 67. • Create new folders called js or css (if none) in your template root folder; • Copy the files into the new folders; • Edit the default (or any other) layout like in the example below:<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><!--Extra css load for this layout--><stylesheets><file>css/your-file-name.css</file></stylesheets><scripts><file>js/your-file-name.js</file></scripts><blocks name="top" style="xhtml"><block name="header" type="header" main-inner="1"></block><block name="mainnav" type="mainnav" main-inner="1"></block><block name="cpanel" type="usertools/cpanel"></block><block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block></blocks><blocks name="middle" colwidth="20"><block name="left1">left</block><block name="right1" style="JArounded">right</block></blocks><blocks name="bottom" style="xhtml"><block name="botsl" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block><block name="navhelper" type="navhelper" main-inner="1"></block><block name="footer" type="footer"></block></blocks></layout>Building the default themeThe default theme of the template has a higher priority than the core styling. The best thing todo is to use the default theme from the ja_t3_blank template and customize it for your needs.For our example here, we are going to modify this theme to recreate the ja_purity_ii templatedesign, so in the following sections we are going to show you a step by step guide on thecustomization techniques.
  68. 68. Default theme infoFirst thing to do is to update the your-site-root/template-name/info.xml file. Here is anexample:<?xml version="1.0" encoding="utf-8"?><theme><name>Default</name><description>Default theme for JA Purity III Template</description> Please update the ThemeDescription<date>April 2010</date> Please update the Theme Creation Date<version>1.0.0</version> Please update the Theme Version<author>JoomlArt</author> Please update the Theme Author<copyright>JoomlArt</copyright> Please update the Theme Copyright Information<stylesheets></stylesheets></theme>Calling additional files into the themeYou can also add additional files to be used for the default theme (or any other). Here anexample:<?xml version="1.0" encoding="utf-8"?><theme><name>Default</name><description>Default theme for JA Purity III Template</description><date>April 2010</date><version>1.0.0</version><author>JoomlArt</author><copyright>JoomlArt</copyright><stylesheets><file>css/your-file-name.css</file></stylesheets><scripts><file>js/your-file-name.js</file></scripts></theme>
  69. 69. Main styleThe main style of the new template is in theyour_site/templates/ja_purity_iii/css/template.css file now.To reproduce the ja_purity_ii design we are going to modify this file as it holds the styling forthe default theme of the ja_purity_iii template. All other core or local theme variations areonly going to override just a few stylesheets.Please note that we are not insist on all design details, we are only going to show you the filesyou need to edit, and explain how.The HeaderTo customize the header, please follow these steps:find line 158 in file your_sitetemplatesja_purity_iiicsstemplate.css#ja-header .main { border-bottom: 1px solid #ccc; }and replace with#ja-header {background:#333; border-bottom: 1px solid #555;}#ja-header .main { padding:0; }Changes previewThese changes also need you to customize the logo and the search module.Customizing the logoYou will need the default logo from JA Purity II Template, and copy it inside theyour_sitetemplatesja_purity_iiiimages folder. Then you will have to edit the same CSS file,so..find lines starting 163
  70. 70. h1.logo { width: 184px; height: 28px; }h1.logo a {background: url(../images/logo.gif) no-repeat left;display: block;width: 209px;height: 30px;}replace withh1.logo { width: 205px; height: 78px; }h1.logo a {background: url(../images/logo.png) no-repeat left;display: block;width: 207px;height: 80px;}Customizing the search moduleThis code change is so easy, we are only going to change text color, background color andborder-color, so..find line 51 of the same file your_sitetemplatesja_purity_iiicsstemplate.css/* Search ---*/and add after it#ja-search .inputbox { background: #444444; border-color: #555555; color: #CCCCCC; }Navigation bar stylingIn the same file your_sitetemplatesja_purity_iiicsstemplate.cssfind line 203#ja-mainnav .main { border-bottom: 1px solid #ccc; }and replace with
  71. 71. #ja-mainnav {background:#333; border-bottom: 1px solid #ccc;}#ja-mainnav .main { }Changes previewThe spotlightsIn the same file your_sitetemplatesja_purity_iiicsstemplate.cssTOP SPOTLIGHTfind line 245#ja-topsl .main { padding: 10px 0; border-bottom: 1px solid #ccc; }replace with#ja-topsl {border-bottom: 1px solid #ccc; background:#f6f6f6;}#ja-topsl .main { padding: 10px 0; }BOTTOM SPOTLIGHTthen find line 248#ja-botsl .main { padding: 10px 0; border-bottom: 1px solid #ccc; }replace with#ja-botsl {border-bottom: 1px solid #ccc; background:#e6e6e6;}#ja-botsl .main { padding: 10px 0;}
  72. 72. Changes preview for Top SpotlightThe pathwayIn the same file your_sitetemplatesja_purity_iiicsstemplate.cssfind line 205#ja-navhelper .main { text-transform: uppercase; border-bottom: 1px solid #ccc; }and replace with#ja-navhelper {border-bottom: 1px solid #ccc; background:#f6f6f6;}#ja-navhelper .main {text-transform: uppercase;}
  73. 73. Changes previewStyling custom block stylesWe have previously setup to use JArounded style for the right block, and this will need someadditional styling the default theme of our new template. Please openyour_site/templates/ja_purity_iii/css/template.css and find line 149/* Rounded Module*/and add after it the following code:.ja-box-br {background: url(../images/b-br.gif) no-repeat bottom right #fff;}.ja-box-bl {background: url(../images/b-bl.gif) no-repeat bottom left;
  74. 74. }.ja-box-tr {background: url(../images/b-tr.gif) no-repeat top right;}.ja-box-tl {background: url(../images/b-tl.gif) no-repeat top left;padding: 0 15px 10px;}Next, we are going to correct the module title border-bottom, so find these lines 169-175div.ja-module h3, div.module h3 {font-size: 100%;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;border-bottom: 1px solid #ccc;}and replace withdiv.ja-module h3, div.module h3 {font-size: 100%;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;border-bottom: 1px solid #ccc;margin:0 -15px;padding:5px 15px;}Files needed for this customization can be found in the images folder of JA Purity II template.You will have to copy these files in the your_site/templates/ja_purity_iii/images folder.
  75. 75. The next case of block style is JAxhtml (block style="JAxhtml"). This will generate the HTMLcode for modules different than the JArounded style, and can be styled this way:div.ja-moduletable, div.moduletable {/* your CSS code goes here */}Customizing module class suffixesIf you want to create a blue class suffix to use for your modules, just open the template.css ofyour default theme. Find modules styling and add this code:/* blue */div.moduleblue {background: url(../images/bb-br.gif) no-repeat bottom right #2C77B6;}div.moduleblue .ja-box-bl {background: url(../images/bb-bl.gif) no-repeat bottom left;}div.moduleblue .ja-box-tr {background: url(../images/bb-tr.gif) no-repeat top right;}div.moduleblue .ja-box-tl {background: url(../images/bb-tl.gif) no-repeat top left;}You will have to find these images in the images folder of the JA Purity III template and copythem into the images folder of your default theme.Please note: color fill module class suffixes only work for block style="JArounded".Customizing the menu systemsMega MenuIf you have copied the CSS folder from the default theme, you only have to adjust some lines tomake its design similar to the one from JA Purity II.
  76. 76. Please find this file your_sitetemplatesja_purity_iiicssmenumega.css and replace itscomplete content with this code:.ja-megamenu a.active { background: #069 !important; color: #fff !important; }.ja-megamenu a.over {background: #555; color: #fff !important;}.ja-megamenu ul.level0 li.mega a.mega { color:#ccc;}/* lv - 1 and below*//* Styling ---*/.ja-megamenu ul.level1 li.mega { border-top: 1px dotted #777; }.ja-megamenu ul.level1 li.first { border-top: 0; }.ja-megamenu ul.level1 li.mega a.mega {border: 0;}/* CHILD CONTENT*/.ja-megamenu .childcontent-inner {background: #555;border: 1px solid #777;border-top: 0;color: #ccc;}.ja-megamenu .level1 .childcontent-inner { border-top: 1px solid #777; }.ja-megamenu .childcontent .ja-moduletable { color: #ccc; }.ja-megamenu .childcontent .ja-moduletable a {color:#ccc;}.ja-megamenu .childcontent .ja-moduletable a:hover {color:#fff;}.ja-megamenu .childcontent .ja-moduletable h3 {background: none;border-bottom: 1px dotted #777;text-transform: uppercase;}
  77. 77. /* Grouped --- */.ja-megamenu .group-title { border-bottom: 1px solid #777; }.ja-megamenu .group-title .menu-title {color: #ccc;text-transform: uppercase;font-weight: bold;font-size: 115%;}.ja-megamenu .group-title .menu-desc {color: #ccc;padding-left: 0 !important;}Lets preview the changes!Split MenuTo style the Split Menu please find this fileyour_sitetemplatesja_purity_iiicssmenusplit.css and replace its complete content withthis code:#ja-splitmenu li a {color:#ccc;}#ja-splitmenu li a:hover {color:#fff; background: #555;}#ja-splitmenu li.active a,#ja-splitmenu li.active a:hover,#ja-splitmenu li.active a:active,#ja-splitmenu li.active a:focus {background: #069;color: #FFF;
  78. 78. }/* Sub Nav ---*/#ja-subnav {background: #069;}#ja-subnav ul li a {color:#ccc;}#ja-subnav ul li a:hover {color:#fff;}/* Sub Nav (lv2) ---*/#ja-subnav ul li ul {background: #333;border: 1px solid #555;}#ja-subnav ul li ul li {border-top: 1px solid #555;}#ja-subnav ul li ul li:first-child {border: 0;}Lets preview the changes!CSS MenuTo style the Split Menu please find this fileyour_sitetemplatesja_purity_iiicssmenucss.css and replace its complete content withthis code:/* STYLING THE MENU*/
  79. 79. /* 1st level */#ja-cssmenu li a.active,#ja-cssmenu li a.active:hover,#ja-cssmenu li a.active:active,#ja-cssmenu li a.active:focus {color: #fff;}#ja-cssmenu li .active,#ja-cssmenu li .active:hover {background:#069;}#ja-cssmenu li:hover,#ja-cssmenu li:active,#ja-cssmenu li:focus {background:#555;}#ja-cssmenu li a {color:#ccc;}#ja-cssmenu li a:hover {color:#fff;}/* 2nd level and above */#ja-cssmenu li ul {border: 1px solid #777;border-top: 0;background: #555;}#ja-cssmenu li ul ul {border-top: 1px solid #777;}#ja-cssmenu li ul li {border-bottom: 1px solid #777;background: none;}
  80. 80. Lets preview the changes!Dropline MenuTo style the Split Menu please find this fileyour_sitetemplatesja_purity_iiicssmenudropline.css and replace its complete contentwith this code:/* Main Nav ---*/#jasdl-mainnav a {color: #ccc;}#jasdl-mainnav a:hover {color:#fff; background:#555;}#jasdl-mainnav li.active a,#jasdl-mainnav li.active a:hover,#jasdl-mainnav li.active a:active,#jasdl-mainnav li.active a:focus {background: #069;color: #fff;}/* Sub Nav ---*/#ja-subnav { background-color: #069; }#ja-subnav ul.active li a {color:#ccc;}#ja-subnav ul.active li a:hover {color:#fff;}/* Sub Nav (lv2) ---*/#ja-subnav ul li ul {background: #444;border: 1px solid #555;}#ja-subnav ul li ul li {
  81. 81. border-top: 1px solid #555;}#ja-subnav ul li ul li:first-child {border: 0;}#ja-subnav ul li a {color:#ccc;}#ja-subnav ul li a:hover {color:#fff;}Create your own module/component HTML overrideT3 Framework 2.0 based template themes have the ability to manage component and modulesHTML overrides. These themes can override the default overrides from the core plugin, so weare going to show you an example on how to style the leading frontpage article by using HTMLoverrides. Here are the steps: • Step 1 - Create a new folder html folder inside your ja_purity_iii template folder; • Step 2 - Create a new folder com_content folder inside your ja_purity_iii/html folder; • Step 3 - Create a new folder frontpage folder inside your ja_purity_iii.html/com_content folder; • Step 4 - Browse the your_site/plugins/system/jat3/base- themes/default/html/com_content/frontpage folder and copy the default.php file; • Step 5 - Now browse the your_site/plugins/system/jat3/base- themes/default/html/com_content/frontpage/ folder and paste the default.php file into your_site/tempaltes/ja_purity_iii/html/com_content/frontpage folder; • Step 6 - Open the your_site/templates/ja_purity_iii/html/com_content/frontpage/default.php file and find line 18<div class="leading<?php echo $this->params->get(pageclass_sfx); ?> clearfix">replace with<div class="leading-frontpage<?php echo $this->params->get(pageclass_sfx); ?> clearfix"> • Step 7 - Finally we are going to style this new class, so please open the your_site/templates/ja_purity_iii/css/template.css file and find line 71.leading { border-bottom: 1px solid #ccc; }and add after it
  82. 82. .leading-frontpage {padding: 10px 15px; border:1px solid #ccc; background: #f6f6f6; border-top:none;}Lets see the frontpage now!Create your own blocksT3 Framework 2.0 themes have the ability to also override blocks used by layouts. You canoverride every block supplied by default and coming with the T3 Framework plugin: • header.php • mainnav.php • middle.php • footer.php • other blocks.Possible goals of these user customized blocks: • Create / remove module positions. • Modify module order or position within the block. • Modify block parameters: style, width, type, inset, etc.You can override blocks using: • the blocks folder of the template. Example: your_site/templates/ja_purity_iii/blocks. • the blocks folder inside any core / local theme. Example: your_site/templates/ja_purity_iii/core/themes/variation_theme/blocks
  83. 83. Extra layoutsMain-Left-Right LayoutTo create a new core layout, please follow these steps: • Step 1 - Browse the your_site/templates/ja_purity_iii/core/etc/layouts folder. • Step 2 - Create a empty file called main-left-right.xml. • Step 3 - Edit it and paste inside this code<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><blocks name="middle" colwidth="20"><block name="right1">left</block><block name="right2">right</block></blocks></layout>As you can see, this layout only needs to override the layout positions for left and right blocks,no need to duplicate the rest of the layout code.Left-Right-Main LayoutTo create a new core layout, please follow these steps: • Step 1 - Browse the your_site/templates/ja_purity_iii/core/etc/layouts folder. • Step 2 - Create a empty file called left-right-main.xml. • Step 3 - Edit it and paste inside this code<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><blocks name="middle" colwidth="20"><block name="left1">left</block><block name="left2">right</block></blocks></layout>Just like the example above, this layout only needs to override the layout positions for left andright blocks.Main-Right-Rounded Layout
  84. 84. To create a new core layout, please follow these steps: • Step 1 - Browse the your_site/templates/ja_purity_iii/core/etc/layouts folder. • Step 2 - Create an empty file called 2cols-right-round.xml. • Step 3 - Edit it and paste inside this code<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><blocks name="middle" colwidth="20"><block name="right1" style="JArounded">left</block><block name="right2" style="JArounded">right</block></blocks></layout>As you can see, this layout overrides the default style of the left and right layout and also theirpositions.Left-Main-Rounded LayoutTo create this layout, please follow these steps: • Step 1 - Browse the your_site/templates/ja_purity_iii/core/etc/layouts folder. • Step 2 - Create a empty file called 2cols-left-round.xml. • Step 3 - Edit it and paste inside this code<?xml version="1.0" encoding="utf-8"?><layout name="desktop"><blocks name="middle" colwidth="20"><block name="left1" style="JArounded">left</block><block name="right1" style="JArounded">right</block></blocks></layout>As you can see, this layout overrides the default style of the left and right layout and also theirpositions.Extra themesTo create a new theme, you only need to override the code or images, so please follow thesesteps:
  85. 85. • Step 1 - create a green theme folder in your_site/templates/ja_purity_iii/core/themes folder; • Step 2 - create a file&folder structure inside this theme like this: Please note that files must be empty. • Step 3 - edit the info.xml file and paste this code inside<?xml version="1.0" encoding="utf-8"?><theme><name>green</name><description>Green theme for JA Purity III Template</description><date>July 2010</date><version>1.0.0</version><author>JoomlArt</author><copyright>JoomlArt</copyright></theme> • Step 4 - open template.css file of this theme and paste this code inside:/* Normal links ---*/a { color: green;}/*-- Cpanel --*/a#ja-cpanel-toggle:hover, #ja-cpanel-toggle.open {background: green;}
  86. 86. • Step 5 - Paste this code inside css.css#ja-cssmenu li .active, #ja-cssmenu li .active:hover {background: green;} • Step 6 - Paste this code inside dropline.css#jasdl-mainnav li.active a,#jasdl-mainnav li.active a:hover,#jasdl-mainnav li.active a:active,#jasdl-mainnav li.active a:focus {background: green;}#ja-subnav {background-color: green;} • Step 7 - Paste this code inside mega.css.ja-megamenu a.active { background: green !important;} • Step 8 - Paste this code inside split.css#ja-splitmenu li.active a,#ja-splitmenu li.active a:hover,#ja-splitmenu li.active a:active,#ja-splitmenu li.active a:focus {background: green;}#ja-subnav {background: green;}
  87. 87. You can repeat these steps to create multiple themes with your desired colors. Now you canassign this theme to a profile, so follow instructions below.Building the default profileYour new template now needs a default profile to save everything that is default. You can copythe default profile from ja_t3_blank template or you can create it yourself following thesesteps: • Step 1 - browse the your_site/templates/ja_purity_iii/core/etc/profiles folder; • Step 2 - create a default.ini file; • Step 3 - paste this code inside:logoType=imagesetting_font=3setting_screen=fixedscreen_fixed_width=hide_content_block=0setting_direction=ltrsetting_t3logo=t3-logo t3-logo-lightgfont_global=||gfont_logo=||gfont_slogan=||gfont_moduletitle=||gfont_pageheading=||gfont_contentheading=||menutype=mainmenusetting_menu=megastartlevel=0endlevel=-1ja_menu_mega_animation=slideja_menu_mega_duration=300ja_menu_mega_delayhide=option_font=0option_screen=1option_profile=1option_layouts=1option_direction=1option_menu=1themes=desktop_layout=defaulthandheld_layout=handheld
  88. 88. iphone_layout=iphoneandroid_layout=iphoneBuilding profile variationsNow your new layouts and themes can be assigned to new profiles. Profile variations willoverride the default profile, and will not require the entire code for same settings.To create a new profile, follow these steps: • Step 1 - Open your your_site/templates/ja_purity_iii/core/etc/profiles folder. • Step 2 - Create a new profile empty file called for instance green-content-left.ini • Step 3 - Paste inside this file the following code:themes=core.greendesktop_layout=main-left-rightAs you may guessed, this profile will override the default profile themes setting anddesktop_layout setting.2. End-user CustomizationThis section explores the end-user template customization process. Generally here you willlearn how to customize the logo, modules styling, user created layouts, user created themesand user custom settings. You will be introduced to the techniques, procedures of editing filesto achieve a custom design, outside the core code of the template.All user created themes and uploaded via the administration panel, and all user created customlayouts and blocks must use the local folder, so users can easily update the core plugin andtemplate, without losing any customizations.Before you go, you may want to check color schemes so click here to see some samples.End user theme developmentIn order to prepare the template for production website, end users are going to create theirown themes to override the default theme, and upload them to the local folder, then assignthem to various profiles. The reason for using local themes is the ease of updating the core andgeneral template files without losing end user customization.We are going to fill the blank CSS files with styling for most known elements, to get closer tothe JA Purity II template design.
  89. 89. How to use FirebugPreparationIn order to customize the style of your template, we find a good idea documenting the bestpractices using Firebug extension for Mozilla Firefox. • First we are going to download and install Mozilla Firefox, so please click here to download. • Next click here to download and install Firebug.Firebug OverviewA - The web pageThis is the output of the code, the front-end of Joomla! powered website.B - The HTML sourceThis is the HTML code of the page rendered by all scripts and front-end view of componentsand modules.C - The computed stylingThis is where the magic happens as this is where we are going to play around to change thedesign of various template elements.Please note that computed style may look different than it looks in your CSS files.
  90. 90. Firebug Usage Example • Step 1 - click the Inspect element button. • Step 2 - hover any element of the template that you want to style, and click it, lets say we want to style the links. • Info 1 - after you have selected a link, the C - The computed styling section will instantly display the element specific styling, in our case a:hover, a:active, a:focus {color:#333333; text-decoration: underline;} but you can always switch to :hover / :active anytime. • Info 2 - on mouse out (when you are not hovering the link), the C - The computed styling will instantly display normal links styling a {color:#006699; text-decoration:none;}. • Info 3 - when you are watching a computed style, Firebug also shows you the file and line number where you can find the style. • Step 3 - click the computed style for this element and add your styling. Click here to read a good CSS reference. • Step 4 - copy any additional style you have added to the CSS code (template.css in our case).Preparing files and folders
  91. 91. In order to create your own theme ready for your production website, you can create a new file& folder structure in your computer similar to this one:Please note • these files must be empty (blank). • this theme is going to override the default theme, this means you dont have to use all the default styling, just the style for the elements you override.Editing theme info fileYour new theme will need to be recognized as unique by the framework so you can alsorecognize it. Notice the info.xml file in the newly created theme structure? Please open it withyour favorite code editor, and paste this code inside and customize to your needs.<?xml version="1.0" encoding="utf-8"?><theme><name>user-theme</name><description>User theme for user website</description><date>July 2010</date><version>1.0.0</version><author>mySite.com</author><copyright>mySite.com</copyright></theme>Customizing logoGetting started with logoTo use your own logo, you can either create your own, use the one you already have, or letothers do it for you. We are going to show you a quick and simple guide on how to customizethe logo for your production website.
  92. 92. All commercial JoomlArt templates come with full PSD sources used for template design, andthis guide you are going to read applies for them as well.Editing logo • Using your favorite graphics tool, create your own logo. • Wrap it in a slice (please write down the dimensions of the slice, you are going to need them for CSS edits). See our example below: • Export it as transparent PNG-24 file, • Rename it to your convenience. Example: website-name.png, (we used user-logo.png in our example) • Copy the new logo to your_site/templates/ja_purity_iii/local/user-theme/images/ folder.Editing CSSThe new logo will need proper CSS in order to override the logo of the default theme. Open theuser-theme/css/template.css file and paste this code inside:/* Logo Image ---*/h1.logo { width: 118px; height: 28px; padding:20px 0; margin-left:0;} // change here the widthand height of the logo according to yoursh1.logo a {background: url(../images/user-logo.png) no-repeat left; // change here the file-name accordingto your logowidth: 118px; // change here the width of the logo according to yoursheight: 28px; // change here the height of the logo according to yours}User design for the search module
  93. 93. We are going to modify the search module to look even closer to JA Purity II design by addingan icon and some padding. Here are the steps: • Step 1 - find ja_purity_ii/images/icon-search.gif image and copy it into ja_purity_iii/local/themes/user-theme/images folder; • Step 2 - open the user-theme/css/template.css file and add this code/*--- Search module ---*/#ja-search {top:25px;}form.search {background: url(../images/icon-search.gif) no-repeat left;padding-left: 20px;}Customizing linksYour links will need your own color theme, so open the user-theme/css/template.css file andpaste this code inside:/* Normal links ---*/a { color: #e38600;}Customizing Read-more linkNow we are going to style the Read-more link, so in the same file user-theme/css/template.cssadd this code at the bottom:/* Read-more link ---*/a.readon {background: #FFFFFF;border: 1px solid #E38600;padding: 0 5px;}a.readon:hover, a.readon:active, a.readon:focus {background: #E38600;color: #fff;text-decoration: none;}Starting JA T3 Blank v1.1.4, the Read-more class rule has changed into p.readmore a so thecode will be:
  94. 94. /* Read-more link ---*/p.readmore a {background: #FFFFFF;border: 1px solid #E38600;padding: 0 5px;}p.readmore a:hover, p.readmore a:active, p.readmore a:focus {background: #E38600;color: #fff;text-decoration: none;}User design for the menu systemsNext we are going to customize the menu systems to look exactly like JA Purity II design.User design for Mega MenuPlease open user-theme/css/menu/mega.css, and paste this code inside:/* root (level0) menu items border */.ja-megamenu ul.level0 li.mega {border-left:1px solid #555;}.ja-megamenu ul.level0 li.last {border-right:1px solid #555;}/* active and hovered content links */.ja-megamenu a.active {background: #e38600 url(../../images/grad1-mask.png) repeat-x centertop !important;}.ja-megamenu a.over {background: #555 url(../../images/grad1-mask.png) repeat-x center top;}/* root (level0) hovered menu items*/ul.level0 li.over, ul.level0 li.haschild-over {background: url(../../images/grad1-mask.png) repeat-x top #666666;}/* root (level0) active menu items */ul.level0 li.active {background: url(../../images/grad1-mask.png) repeat-x top #e38600;}/* level1 and above hovered menu items */.ja-megamenu ul.level1 li.over, ul.level1 li.haschild-over {background:#777;}
  95. 95. /* level1 and above active menu items */ul.level1 li .active {background: #E38600 !important;color:#333 !important;}User design for Split MenuPlease open user-theme/css/menu/split.css, and paste this code inside:/* forcing the height of the items*/#ja-splitmenu li a { height: 34px; }/* Level0 (root) menu items borders */#ja-splitmenu li {border-left: 1px solid #555;}#ja-splitmenu li.last-item {border-right: 1px solid #555;}/* Level0 (root) active menu items */#ja-splitmenu li.active a,#ja-splitmenu li.active a:hover,#ja-splitmenu li.active a:active,#ja-splitmenu li.active a:focus {background: url(../../images/grad1-mask.png) repeat-x scroll center top #e38600;}/* Level0 (root) hovered menu items */#ja-splitmenu li a:hover {background: url(../../images/grad1-mask.png) repeat-x center top #555555;}/* Subnav background */#ja-subnav {background: #444;}/* Level1 only */#ja-subnav li {margin:0 10px 0 0;}#ja-subnav li a {border-left:1px dotted #999999;padding-left:15px;}
  96. 96. /* Level2 and above menu items */#ja-subnav li ul li a {border-left: none;padding-left: 5px;}/* Level2 and above active menu items */#ja-subnav ul li.active a.active,#ja-subnav ul li.active a.active:hover,#ja-subnav ul li.active a.active:active,#ja-subnav ul li.active a.active:focus {color:#fff;}User design for Dropline MenuPlease open user-theme/css/menu/dropline.css, and paste this code inside:#jasdl-mainnav a {height:34px;}#jasdl-mainnav li {border-left: 1px solid #555;}#jasdl-mainnav li.last-item {border-right: 1px solid #555;}#jasdl-mainnav li.active a,#jasdl-mainnav li.active a:hover,#jasdl-mainnav li.active a:active,#jasdl-mainnav li.active a:focus {background: url(../../images/grad1-mask.png) repeat-x center top #e38600;}#jasdl-mainnav a:hover {background: url(../../images/grad1-mask.png) repeat-x center top #555555;color:#FFFFFF;}#ja-subnav {background-color: #444;}#ja-subnav li {
  97. 97. margin:0 10px 0 0;}#ja-subnav li a {border-left: 1px dotted #999999;padding-left: 15px;}#ja-subnav li ul li a {border-left: none;padding-left: 5px;}#ja-subnav ul li.active a.active,#ja-subnav ul li.active a.active:hover,#ja-subnav ul li.active a.active:active,#ja-subnav ul li.active a.active:focus {color:#fff;}User design for CSS MenuPlease open user-theme/css/menu/css.css, and paste this code inside:#ja-cssmenu li .active, #ja-cssmenu li .active:active, #ja-cssmenu li .active:hover, #ja-cssmenu li.active:focus {background: #e38600;}#ja-cssmenu li {border-left: 1px solid #555;}#ja-cssmenu li.last-item {border-right: 1px solid #555;}#ja-cssmenu li ul li {border-left:none;}#ja-cssmenu li ul li.last-item {border-right: none;}#ja-cssmenu li a:hover,#ja-cssmenu li a:active,#ja-cssmenu li a:focus,#ja-cssmenu li a.sfhover {color: #fff;}#ja-cssmenu li:hover,#ja-cssmenu li.sfhover,#ja-cssmenu li.havechildsfhover,
  98. 98. #ja-cssmenu li.havechild-activesfhover {background: url(../../images/grad1-mask.png) repeat-x top #555;color: #fff;}#ja-cssmenu li a.active,#ja-cssmenu li a.active:hover,#ja-cssmenu li a.active:active,#ja-cssmenu li a.active:focus {background: url(../../images/grad1-mask.png) repeat-x top #e38600;color: #fff;}#ja-cssmenu li ul a:hover,#ja-cssmenu li ul a:active,#ja-cssmenu li ul a:focus,#ja-cssmenu ul li:hover,#ja-cssmenu ul li.sfhover,#ja-cssmenu ul li.havesubchildsfhover,#ja-cssmenu ul li.havesubchild-activesfhover,#ja-cssmenu ul ul li:hover,#ja-cssmenu ul ul li.sfhover,#ja-cssmenu ul ul li.havesubchildsfhover,#ja-cssmenu ul ul li.havesubchild-activesfhover {background: #777;color: #fff;}#ja-cssmenu ul li a.active,#ja-cssmenu ul li a.active:hover,#ja-cssmenu ul li a.active:active,#ja-cssmenu ul li a.active:focus {background: none !important;color: #fff;font-weight: bold;}Customizing user layoutsUsing custom width for LEFT and RIGHT blocks

×