JOOMLA Video Tutorials on Creating Amazing Templates

Here are the Beauty in Design Tutorials, the best ones for learning how to create a template using the latest in techniques from the best. Here they are in FLV on Rapidshare. From: http://beautyindesign.com/tutorial_club

SIX SUBJECTS:
MULTIPLE LESSONS Building a CSS Template for JOOMLA This series will help you get familiar with the routine and not so rountine processes of constructiong a CSS template. The series details the contruction of a two-column, fixed-width layout.

Skill Level: Intermediate/Advanced
The Building a CSS Template Series starts with a photoshop layout and ends with converting a CSS template into a JOOMLA readable template. By the completion of this series, you will have learned how to slice and make ready a photoshop layout for the web, construct the basic structure of an XHTML/CSS document, work through common brower bugs in CSS, and optimize the template for JOOMLA.
Lesson One – Slicing a Photoshop Image
• Planning the Layout
• Slicing Images
• Naming Slices
• Saving for the Web
Lesson Two – Creating the Foundation
• Files and Folders
• Linking the CSS into the PHP Document
• Getting Setup in Style Master
• Creating the DIV tags
Lesson Three – CSS Layout I
• Styling the Body
• Styling the Container
• Styling the Header
Lesson Four – CSS Layout II
• Styling the content DIV
• Working through browser bugs
Lesson Five – Finishing up and JOOMLA Integration
• Install JOOMLA Plug-in from http://www.joomlasolutions.com/
• Placing the Header Code
• Placing the Content Code
• Prepare the XML file
• Zip and Upload

Increasing User Experience With Javascript Using the javascript library MooTools with some other free libraries, this tutorial series teaches how to increase user experience with some simple javascript. Using a fictional "blog" as the test site, subscribers will learn how to enhance the blog with modern web techniques such as:
• LightBox type photo gallery
• Expanding sub-menus
• AJAX loaded pages
• Sliding image menus
• Reflecting images without having to touch Photoshop
• Condensing a web page with Fx.Styles and Sliding Tabs
• ...and more

Recommended Skills for This Series: Basic knowledge of HTML. Many of the javascript techniques used are explained in detail so no javascript background is needed if the user has a decent grasp of basic HTML and a little CSS. Please note that this is a beginner's series of javascript. Experienced users will find the code in this series erratic, though it is simpler for those who know nothing about javascript.


Introduction
• Overview of the series
• Showcasing the javascript effects

Lesson Two - De-Cluttering the Membership Page
• Attaching scripts
• Considering MooTools as a solution to a cluttered layout
• Using the Fx.Styles of Mootools to change element properties

Lesson Three - Using MooTabs to Condense Related Products
• Understanding how MooTabs works
• Implementing MooTabs to condense the related products of a shopping cart

Lesson Four - Using a MooTools 'Light Box' to Create a Friendly Gallery
• Understanding the problem with the existing gallery
• Fixing the gallery with the MooTools Light Box

Lesson Five - Using Fx.Styles to Control Font Size
• Selecting an area to change
• Implementing Fx.Styles to change fonts

Lesson Six - Creating a Sliding Sub Menu with MooTools
• Analyzing the main menu and sub-menu for implementation
• Implement some simple MooTools effects to reveal sub-links

Lesson Seven - Implementing Reflection Javascript for Images
• Downloading and using reflection.js for images

Lesson Eight - Creating a Sliding Image Menu
• Understanding how the Sliding Image Menu works
• Implementing the Sliding Image Menu

Lesson Nine - Using AJAX with the Sliding Image Menu
• Creating an updated area for changing content
• Implementing AJAX links with the Sliding Image Menu

Example Files (Included)

Updated: See this Quick Clips for further lessons!
Credits: • LightBox Clone and Reflection.js created by digitalia.be
• Sliding Menu created by PhatFusion.net
• MooTabs created by SilverScripting.com
• Javascript library MooTools

Joomla Optimization
The JOOMLA Optimization Series will show you how to use validation tools to check your template for the correct web standards, enhance URL generation by using the component ARTIO, optimize module positions with better code, and more. By the completion of this series you will have learned how to get your JOOMLA site leaned down and potential for better standards up.

Skill Level: Intermediate

Lesson One - Validation
• CSS Validation
• XHTML Validation
• Correcting incorrect markup

Lesson Two - Improving Module Output
• Different types of module output options
• Optimizing the template (continued from the JOOMLA Template Series)

Lesson Three - Improving JOOMLA Accessibility
• Better font usage
• Using CSS compression to better file sizes

Lesson Four - Using ARTIO SEF Component
• Getting JOOMLA ready for better URL's
• Around ARTIO

Template Migration for Joomla Tutorial Series The Template Migration for Joomla Series will show you how to take an existing, static template and convert it for use with Joomla. This highly requested series covers every aspect of template conversion: Organizing the file structure for Joomla, insertion of the Joomla PHP tags, matching and re-naming CSS conventions for compatibility with JOOMLA, and more! By the completion of this series you will gain all the know-how necessary to migrate your template for Joomla.

Lesson One - Introduction and Re-Ordering the File Structure
• Introduction to the Template
• Moving the template files to the correct location for Joomla

Lesson Two - Optimizing the Template
• The Dreamweaver extension from Joomlasolutions.com
• Inserting the php tags, header code, and various other code

Lesson Three - The Template Details XML File
• How the template_details.xml works
• Assigning files, images, css, etc.

Lesson Four - Re-naming and Styling the Main Menu
• Understanding how the Main Menu is styled
• Re-assigning existing menu styles with the Joomla selectors

Lesson Five - Migrating Styles for Use with Modules
• Latest news module changes
• Main menu module stylings in other positions

Lesson Six - Custom Module Styling Using Class Suffixes
• Styling the Newsflash module similar to the static template Using class suffixes in Joomla

Lesson Seven - Styling Various Joomla Elements
• Style matching the titles, paragraphs, etc. in the template
• News component styling

MooTools for the Rest of Us Tutorial Series

Interested in how the JoomlaOS template was made?
"MooTools for the Rest of Us" is a series of tutorials that demonstrates, by example, implementation of basic MooTools effects into a template. Using the JoomlaOS template as a reference point, you will learn how to find the effect you're looking for, create drag-able windows, make them resize-able, fade and adjust DIV's (including live text resize), and implement ajax links (Links that need no page refresh!).

Skill Level: Intermediate
Lesson One - Ideas and Resources
• The Purpose and Format of this series
• Where to get ideas from/documentation
• Getting MooTools

Lesson Two - Setting up the Document
• Javascript insertion
• Testing out an effect

Lesson Three - Creating a Drag-able/Resize-able Window
• Finding ideas
• Implementing an idea
• Duplicating several windows

Lesson Four - Opacity Fades for various windows
• Recognizing windows to fade
• Implementing the code
• Custom Options

Lesson Five - Using Moo.Ajax for the JoomlaOS Template
• Some benefits
• Creating an Ajax link for the JoomlaOS Template

Code:
http://rapidshare.com/files/71616960/Building_a_CSS_Template_for_JOOMLA_LessonFiveFinal.rar http://rapidshare.com/files/71617316/Building_a_CSS_Template_for_JOOMLA_LessonFourFinal.rar http://rapidshare.com/files/71616501/Building_a_CSS_Template_for_JOOMLA_LessonOneFinal.rar http://rapidshare.com/files/71617107/Building_a_CSS_Template_for_JOOMLA_LessonThreeFinal.rar http://rapidshare.com/files/71616899/Building_a_CSS_Template_for_JOOMLA_LessonTwoFinal.rar http://rapidshare.com/files/71617283/Template_Migration_for_Joomla_Tutorial_Series_lessonSeven.rar http://rapidshare.com/files/71617321/Template_Migration_for_Joomla_Tutorial_Series_lessonThree.rar http://rapidshare.com/files/71617228/Template_Migration_for_Joomla_Tutorial_Series_lessonSix.rar http://rapidshare.com/files/71616972/Template_Migration_for_Joomla_Tutorial_Series_lessonOne.rar http://rapidshare.com/files/71617035/Template_Migration_for_Joomla_Tutorial_Series_lessonFive.rar http://rapidshare.com/files/71617143/Template_Migration_for_Joomla_Tutorial_Series_lessonFour.rar http://rapidshare.com/files/71617099/Template_Migration_for_Joomla_Tutorial_Series_lessonTwo.rar http://rapidshare.com/files/71617286/MooTools_for_the_Rest_of_Us_Tutorial_Series_LessonFour.rar http://rapidshare.com/files/71617426/MooTools_for_the_Rest_of_Us_Tutorial_Series_LessonThree.rar http://rapidshare.com/files/71617400/MooTools_for_the_Rest_of_Us_Tutorial_Series_LessonTwo.rar http://rapidshare.com/files/71617263/MooTools_for_the_Rest_of_Us_Tutorial_Series_LessonOne.rar http://rapidshare.com/files/71617267/MooTools_for_the_Rest_of_Us_Tutorial_Series_LessonFive.rar http://rapidshare.com/files/71616282/Increasing_User_Experience_With_Javascript_lessonFive.rar http://rapidshare.com/files/71616325/Increasing_User_Experience_With_Javascript_lessonFour.rar http://rapidshare.com/files/71616382/Increasing_User_Experience_With_Javascript_lessonSix.rar http://rapidshare.com/files/71616419/Increasing_User_Experience_With_Javascript_lessonNine.rar http://rapidshare.com/files/71616354/Increasing_User_Experience_With_Javascript_lessonEight.rar http://rapidshare.com/files/71616236/Increasing_User_Experience_With_Javascript_lessonSeven.rar http://rapidshare.com/files/71616252/Increasing_User_Experience_With_Javascript_lessonOne.rar http://rapidshare.com/files/71616685/Increasing_User_Experience_With_Javascript_lessonTwo.rar http://rapidshare.com/files/71616513/Increasing_User_Experience_With_Javascript_lessonThree.rar http://rapidshare.com/files/71617297/Joomla_Optimization_LessonTwo.rar http://rapidshare.com/files/71617110/Joomla_Optimization_LessonOne.rar http://rapidshare.com/files/71617347/Joomla_Optimization_LessonThree.rar http://rapidshare.com/files/71617387/Joomla_Optimization_LessonFour.rar
_________________
Template Collection TM + Boxedart...
http://rapidshare.com/users/EHNTEC.
OSC Template http://rapidshare.com/users/2I7YG0
Korean Template http://rapidshare.com/users/ECHNQY

Print this post