JoomlArt T3 v2.0 Template Framework for Joomla
•Download as PPT, PDF•
1 like•7,218 views
3rd generation template framework for Joomla!
Recommended
More Related Content
Similar to JoomlArt T3 v2.0 Template Framework for Joomla
Similar to JoomlArt T3 v2.0 Template Framework for Joomla (20)
Recently uploaded
Recently uploaded (20)
JoomlArt T3 v2.0 Template Framework for Joomla
- 1. 3rd generation template framework for Joomla! JA T3 Framework 2.0
- 2. 1. Introducing JA T3 Framework 2.0 Overview, main features.. 2. Template Administration Panel Introducing the reforged administration panel.. 3. Screenshots See it to believe it! Topics to be covered
- 6. Introducing JA T3 Framework 2.0 Let's meet these features!
- 8. Introducing JA T3 Framework 2.0 1.3 JA Typography
- 9. Introducing JA T3 Framework 2.0 1.4 Cache - The Settings
- 10. Introducing JA T3 Framework 2.0 1.4 Cache - Where is it anyway? Works with Joomla! core cache!
- 11. Introducing JA T3 Framework 2.0 1.5 CSS & JS Compress
- 12. Introducing JA T3 Framework 2.0 1.5 CSS & JS Compress
- 13. Introducing JA T3 Framework 2.0 1.6 Multiple Themes & Layouts One template, multiple layouts and color themes.
- 14. Introducing JA T3 Framework 2.0 1.6 Multiple Themes & Layouts Image of how the site is looked via Iphone
- 15. Introducing JA T3 Framework 2.0 1.7 Menu systems Lightweight, no JS required 1.7.1. CSS Menu
- 16. Introducing JA T3 Framework 2.0 1.7 Menu systems Tiny code, combines both horizontal and vertical layout display for the menu structure 1.7.2. Split menu
- 17. Introducing JA T3 Framework 2.0 1.7 Menu systems One of the most powerful menu system, can load modules as menu items 1.7.3. Mega menu
- 18. Introducing JA T3 Framework 2.0 1.8 Menu Parameters Plugin While editing menu items, you will notice a new parameters section called (JA Extended).
- 21. Introducing JA T3 Framework 2.0 1.10 The New Framework Structure
- 22. Template Administration Panel 2. Template Administration Panel - Overview What changed? What's new? What more?
- 23. Template Administration Panel 2.1 Global Panel
- 25. Template Administration Panel 2.2 Profiles Panel
- 26. Template Administration Panel 2.2 Profiles Panel
- 33. Template Administration Panel 2.3 Layouts Panel
- 34. Template Administration Panel The internal editor allows you to easily edit your layouts on fly 2.3 Layouts Panel
- 35. Template Administration Panel 2.4 Themes Panel
- 36. Template Administration Panel 2.4 Themes Panel
- 37. Template Administration Panel 2.5 Update & Help Panel
- 39. The JA T3 Blank Template
- 40. In this example the profile is using a three columns layout Red color theme Layout & Themes variations
- 41. In this example the profile is using a two columns left layout and Red color theme Layout & Themes variations
- 42. In this example the profile is using a three columns layout and Red color theme The iPhone Ready Layout
- 44. Theme Preview
- 45. Say it out loud!
- 46. Hung Dinh CEO, JoomlArt.com
Editor's Notes
- Welcome Friends. - We introduced the first T3 framework during Joomla! Day, Bangkok in August 2009. - At that time, T3 Framework has been a big hit. Our members still love it today. - Now we are releasing Version 2 of T3, which we can assure you it is much more than the previous framework concept. ================== Presentation goals: * we wish 100% of our audience here to understand the general concepts of the new framework * 80% should get interested to find out more about the framework * 60% should consider using the framework in the future * maybe 40% should use the framework
- 1. Introducing JA T3 Framework 2.0 First we will present an overview with the new framework, the features concepts behind. Then we will have a closer look at the features, explain functionalities and the new framework structure. 2. Template Administration Panel Next, we are going to present the new template administration panel, a new look, split into several sections. 3. Screenshots At the end of our presentation we are going to see screenshots. ++++ 1. Introducing JA T3 Framework 2.0 1.1 Overview 1.2 Main Features 1.3 Typography 1.4 Caches 1.5 CSS & JS Compress 1.6 Multiple Themes & Layouts 1.7 Menu Systems 1.8 Menu Parameters Plugin 1.9 Profiles 1.10 The New Structure 2. Template Administration Panel 2.1 Global Panel 2.2 Profiles Panel 2.3 Layouts Panel 2.4 Themes Panel 2.5 Help & Update Panel 3. Screenshots 3.1 The JA Blank Template 3.2 Design Variations 3.3 RTL Language Preview
- What is T3? JA T3 Framework 2.0 is the third generation template framework for Joomla! 1.5 and above, introducing new concepts: themes, layouts, profiles. Benefits are: * 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! Who develops with T3? Well, it's difficult to estimate! * almost 60.000 views for our T3 documentation pages * hundreds of daily downloads * For JA Purity II we estimate 40.000 downloads so far. * All templates count more than 100.000 downloads.
- Let's have a short look at the T3 Features! Mega Menu System First version of the framework introduced the Mega Menu to provide MEGA space for content right in the main navigation! This means you can load modules as menu items. Multiple Layouts Feature The template index.php file no longer hold module positions, other files can do it better. Users can manage layouts directly in the template administration panel. Mobile Ready The framework scripts can detect user's device and load a designated layout that is lightweight, simple and clean design. RTL Language Support The T3 Framework allows you to set a default text-direction in the back-end, and front-end users can switch to RTL or LTR mode anytime. The RTL mode loads a special stylesheet to override the template text-direction and layout design.
- New Performance Features : Cache and compression provide options to speed up the page load. Compression is about 60-70% in most cases but the page load is incredibly fast. New Feature: Profiles hold all template settings: logo, layouts, font-size, and others. Easy to manage the profiles right in the back-end New Framework Structure: New plugins have taken over the framework engine. First there was the Menu Parameters Plugin and the template, but now there is one more plugin holding the framework and another one to hold typography. The result is: a faster & lighter template, and updating the core is easier. Improved overrides: Menu system and layout overrides are now implemented in the profile override feature. The result of this improvement: users browsing pages with overrides can still customize everything or reset to default profile settings. We are going to explore each of these features as we continue with our presentation, so first, let's meet the new... (go to next slide)
- Hehe ok ROBO!
- .. typography features We have moved the typography styles from the template core and it is now a content plugin. JA typo button can now be accessed right from the editor window and you can easily insert the desired typo styles. Main benefit: * if the content does not use any special styling, the plugin will load no CSS, and the result is a loading speed gain.
- This is the typography plugin in action. You can preview each formatting on mouse hover, or preview all (see the tiny button at the bottom?) To add a special styling for your content, simply click your desired format, and it will be inserted on the fly.
- The new framework comes with cache features to lower the PHP queries. This is actually a screenshot with the template system settings. The cache system can skip specific blocks you set here. (usually AJAX content) We are going to explain later what blocks are. For websites in development stage, we recommend disabling both Joomla! cache and T3 Framework cache.
- This is a screenshot with the Joomla! front-end cache folder. T3 Framework cache can be found in this folder, and stores all HTML formating of the template layout files. The T3 cache can be cleared once Joomla! cache is cleared.
- JA Compress is a system plugin to use several compression methods (or scripts - the widely known Minify, smart optimizer,..) and produces amazing results for CSS & JS files. JA Compress Plugin will be integrated into the framework to provide CSS & JS compression capability. The feature will work with both core files and user created (user created themes).
- The plugin allows you to configure the compression level, select the CSS or JS files to be compressed In this example, the JA Teline III template JS file size decreased 70% with an 8 compression level. You can imagine the load speed when using both compression and cache.
- =========== -T3 Framework 2.0 introduces multiple layouts and color themes features. Easy to manage in the back-end, flexible customization in the front-end. -For the first time, the "Themes" concept was introduced into Joomla! templates just a few years ago. =========== Well, these are the files to hold the HTML generation of your front-end design. They load other files called blocks, and these blocks finally hold module positions. As you know, the most popular elements: header, footer, left, right, spotlights, pathway, etc. these are now separate files, no longer inside template index.php . -So, for a website, you can use only one template, but you may want to have a unique design for your homepage, another custom design for your Blog and another for your forums.. -These layouts are then loaded by the new template index.php file and can be switched in front-end from the UserTools Panel, and can be customized in the back-end.
- Multiple layouts feature is also powering the Mobile Ready feature. This is an iPhone ready layout designed to be used when iPhone devices are detected by the framework. The framework also detect handheld devidces such as * Windows Mobile devices * Android powered mobile devices * Blackberry mobile devices * Palm mobile devices * and Other mobile devices This is what we call mobile ready!
- T3 Framework 2.0 comes with FIVE menu systems, we are going to present only the most important ones, so let's start with CSS Menu System. This one is the lightest, uses no JS, and provides a simple cascade design for the menu structure.
- The Split Menu System is similar with another of our menu systems called Dropline Menu. This menu system uses tiny code to combine both vertical and horizontal design for the menu structure. Menu items from the root menu are displayed horizontally, the second level uses same design, but the level 2 and above uses a cascade design, similar with CSS Menu we have discussed in the previous slide.
- This is the Mega Menu. One of the most powerful menu systems that can display your menu structure with whatever design idea you may have. Horizontal, vertical, columns, again vertical, again columns.... MAXIMUM FLEXIBILITY! This menu system can load modules as menu items. What can you do with this feature? (let users reply) * Advertising? * Showcase best content? Yes! * A complex and efficient navigation system!! The Mega Menu will bring new features in the future releases.
- This is where a regular navigation system turns to WOW! This is the Menu Parameters plugin used to edit additional menu item parameters to customize the behavior and styling of the Mega Menu. Some parameters apply to other menu systems as well: * slogan/description and.. * additional style class. As you can see, at the bottom of this screenshot the plugin has an option to load modules as menu items. This is what we call MEGA space for your content, right in the main navigation!
- ** What is a profile? Well it is a new feature to hold all template settings. Now you can create unlimited unique profiles, combining all template settings to achieve several design goals. ** How can you manage profiles? The new administration panel allows you to manage the profiles: create you own profiles, apply your customizations on the fly. To be able to do all of these, you will find a Profiles panel in the template administration, and we will talk more about it as we continue with our presentation. * 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 profiles in front-end and reset to default profile settings, even if overrides are set for specific pages. -And now it's a good time to understand all about overrides.
- * What are these Overrides? Joomla! templates have the ability to override everything coming by default with the 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 override everything in the default profile. * What is profile assignment about? You can assign a unique settings profile for your homepage, one for your online shop, one for your forum and another one for your blog. This way you can override the default profile for every single page or content component with your desired profile. Just a few clicks and 2 of your minutes to do it. We will talk more about this a little later, now let's talk about the...
- T3 Framework is now a real CORE! In this screenshot you can see an example of the framework structural changes. * In the left column, is the general structure of the previous framework, with all scripts, themes, layouts, stylesheets, graphics, all inside the template. * In the middle column there is the general structure of the new system plugin to hold absolutely all scripts, default layouts and themes. Our wiki documentation pages are going to present a more detailed structural change. * In the right column there is the new template general structure: only template specific stylesheets, images, themes, and small scripts to communicate with the core. ============ The great benefit: easy to update the core scripts outside the template folders! Another benefit is: create unlimited templates all using the same core.
- What changed? The administration panel is split into FIVE panels and generally re-forged to provide more control over the front-end. What's new? The new panel allows you to upload additional files such as themes and edit layout files right in the back-end using the internal editors. The template administration got AJAX technologies to speed up the administration. What more? Each panel and every single setting provide hints and usage instructions. Also: each section comes with documentation resources links. This framework is documented as we speak.
- Manages the general behavior of the template and allows you to set profile overrides for specific pages or content components. The default profile is used for all pages and components by default, but you can create unlimited profile overrides. Manages the cache for the template and also provide compression options for stylesheets and javascript files.
- In case you want to change the template settings for one or more pages or content components, here is a quick guide. * Select one or more menu items or components in the the left drop down list (click and hold the Ctrl key for multiple selction) * Select the profile you want to use for these pages * click apply After this configuration is applied, this will produce a profile override so go ahead in the frontend and browse that page you created profile override for.
- Here you can manage profiles (create, clone, edit, delete profiles) Customize settings for each profile: logo, font-size, layouts, menu system, color theme, text-direction, etc.
- Here are all template settings inside profiles. As you can see in this screenshot, there are 2 types of profiles: * default profiles (these cannot be deleted as they are part of the framework core) * user created profiles to load user layouts, themes and other settings.
- In the general profile settings you can customize: * the logo * the font size * the template width * text direction * you can also choose to show/hide the main content block.
- The 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.
- Next, you can show or hide any of the user tools for your profiles: * font-size switcher * screen-size switcher * themes-switcher * layouts-switcher * text-direction switcher * menu-system swicher
- This is a screenshot with the front-end usertools. Front-end users can customize the loaded profile and even reset these settings to default profile settings, NOT switch to default profile. There's an important difference here.
- Theme Settings allow you to add additional styling and override the default theme. What was that? You can use several themes simultaneously! You can drag the additional themes to the left or right and change the override priority. The first is the one to override them all.
- The layout settings allow you to set the default layout to be used as default for a specific profile. You can set here: * a default layout for desktop computers * a default layout for Handheld devices * a default layout for iPhone devices
- In this administration panel you can manage layouts used by the template. Remember that a layout is a file to load a set of other files called blocks and controls the general design of the template. Each layout can load different blocks with default or custom width settings and custom style classes. Two types of layouts: * default layouts (cannot be deleted as they are part of the framework core) * user created layouts to use user created styling.
- This is the internal editor to help you customize your layouts. We recommend using the clone function to make sure you have the complete code.
- This panel helps you to create your custom color themes, pack them and upload them to the template themes folder right in the back-end, just like installing a template extension. There are two type of themes: * Core Themes (cannot be deleted as they are part of the framework core) and * Local Themes or User Created Themes.
- Based on default core themes, you can create your own themes and upload them right in the back-end of your website.
- This Panel allows you to: * 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.
- This is the T3 Blank Template and will be the first to introduce the new version of the framework. As you can see: * No graphics, * no styling, * just the plain text in a good layout! As you may guessed this is the default profile, default theme, default layout.
- Allow images to speak for themselves!
- Allow images to speak for themselves!
- Allow images to speak for themselves!