YOOtools – YOOdrawer module Installation, configuration and usage This tutorial will show you how to install, configure and use YOOtheme YOOdrawer module
Author: Igor Mihaljko Date: 08. April 2008
YOOtools – YOOdrawer module
Table of Contents Preface..................................................................................................................................................... 3 Introduction............................................................................................................................................. 3 YOOdrawer module installation .............................................................................................................. 4 Section preparation ................................................................................................................................. 6 Category preparation .............................................................................................................................. 8 Content preparation ................................................................................................................................ 9 YOOdrawer module configuration ........................................................................................................ 12 Conclusion ............................................................................................................................................. 16
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
2
YOOtools – YOOdrawer module
Preface Welcome to the tutorial that will try to explain how to install, configure and use YOOtheme’s YOOdrawer module. Tutorial will cover all the steps that are needed to go through to module installation, creation of needed sections/categories for content representation in YOOdrawer, configuration and customization.
Introduction The clean and simple YOOdrawer is a vertical aligned module which uses nice sliding transitions during items hovering. When you hover item with your mouse the item will expand to show additional information while all other items will be shrinked. The YOOdrawer uses the articles to display its content. All articles can display any kind of HTML formatted content like text/images/flash and you can even use the "loadposition" Joomla plugin to display a another module inside an article. The YOOdrawer module comes with a lot of different styles. All styles are working out of the box and can be use with YOOtheme templates or any other template. YOOdrawer module supports both Joomla 1.0 and Joomla 1.5 natively. It uses Mootools Javascript framework for transition effects and can be used for displaying articles content and other modules inside its display content area. YOOdrawer, out of the box comes with two color variations, white and black which can be choosen from module configurations. If user wants to additionally customize look and feel of this module, Fireworks CS3 sliced image source file is provided. This gives possibility to further customize this module to specific user needs. YOOdrawer is compatible with Firefox, IE6, IE7, Safari, Opera and Camino web browser and it passes XHTML&CSS Validation. This tutorial will cover installation, article preparation and YOOdrawer module configuration only for Joomla version 1.5. Let start tutorial by installing YOOdrawer module. Log in to Joomla backend and follow the steps to install module.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
3
YOOtools – YOOdrawer module
YOOdrawer module installation Click “Extensions” -> “Install/Uninstall”:
Picture 1: Install new extension
Click “Browse” button and choose YOOdrawer module archive on disk to install.
Picture 2: Click “Browse” button
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
4
YOOtools – YOOdrawer module
Picture 3: Choose YOOdrawer module archive on disk to install
Click on “Upload File & Install” button to install YOOdrawer module.
Picture 4: Install YOOdrawer module
After few moments (this depends on your network and internet speed) the screen with message that installation was successful should appear.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
5
YOOtools – YOOdrawer module
Picture 5: Successful installation of YOOdrawer module
Section preparation Now that we successfully installed YOOdrawer module we have to prepare Joomla sections and categories that will contain articles which will be shown in YOOdrawer module on frontend of Joomla site. Click “Content” -> “Section manager” from main administrator menu.
Picture 6: Section manager
When section manager loads up, click on “New” button in the upper right corner of Joomla administrator screen.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
6
YOOtools – YOOdrawer module
Picture 7: New section
Fill in Details pane on new section screen that will show up. Let’s name our section YOOtheme for this tutorial. Input name of new section in Title field. Also, input some alias in Alias filed. Choose access level for this section. I choose Public here. If you want to show YOOdrawer module only to registered users of Joomla site, you can do that later in module configuration or if you choose to show only certain content to public users and the rest to registered users, you will do that in article management during creation of content that will be show in YOOdrawer module. Set this section to Publish state.
Picture 8: New section details
When you are finished with input click button “Save” in the upper right corner of Joomla administrator screen.
Picture 9: Save new section details
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
7
YOOtools – YOOdrawer module
Category preparation Now that we have section for YOOdrawer content we have to prepare category for that section in similar way. Click “Content” -> “Category manager” from main administrator menu.
Picture 10: Category manager
When category manager loads up, click on “New” button in the upper right corner of Joomla administrator screen.
Picture 11: New category
Fill in Details pane on new category screen that will show up. Let’s name our category YOOdrawer (Default) for this tutorial. Input name of new category in Title field. Also, input some alias in Alias filed. Choose access level for this category. I choose Public here. Choose section this category will belong to. In case of this tutorial I choose YOOtheme. If you want to show YOOdrawer module only to registered users of Joomla site, you can do that later in module configuration or if you choose to show only certain content to public users and the rest to registered users, you will do that in article management during creation of content that will be show in YOOdrawer module. Set this category to Publish state.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
8
YOOtools – YOOdrawer module
I choose to name this category YOOdrawer (Default) because we could have more categories for content that will be show in YOOdrawer module. This is because we can copy this module in module manager for as many times as we want and assign different categories to different modules on frontend of our Joomla site. That way we have unlimited possibilities to show our content to website visitors and users.
Picture 12: New category details
When you are finished with input click button “Save” in the upper right corner of Joomla administrator screen.
Picture 13: Save new category details
Content preparation With section and category prepared we can now add some articles that we will show in YOOdrawer module on frontend of our Joomla website. All articles can display any kind of HTML formatted content like text/images/flash and you can even use the "loadposition" Joomla plugin to display a another module inside an article. Let’s start article manager by clicking on “Content” -> “Article manager” from main administrator menu.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
9
YOOtools – YOOdrawer module
Picture 14: Article manager
When article manager loads up, click on “New” button in the upper right corner of Joomla administrator screen.
Picture 15: New article
Fill in details for new article. To recreate exact YOOdrawer content and look as you can see on YOOtools website, input the following data in input boxes: Title Alias Section Published Frontpage Category
YOOdrawer yoodrawer choose YOOtheme (defined in Section preparation part of this tutorial) choose Yes choose No choose YOOdrawer (Default) (defined in Category preparation part of this tutorial)
Since we are trying to achieve the same result for our article as we can see on YOOtools demo page for YOOdrawer module we will insert the same HTML code in HTML editor as found on YOOtools website. HTML editor can be launched by clicking HTML icon on default WYSIWYG editor in Joomla.
Picture 16: Launch HTML editor
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
10
YOOtools – YOOdrawer module
When a new window opens with HTML editor ready for our input, copy and paste the following code in it: <a href="http://www.yootools.com" target="_blank"> <img class="correct-png" src="images/yootheme/yoodrawer/yoodrawer.png" border="0" alt="YOOdrawer" title="YOOdrawer" width="150" height="110" /> </a> <h3>YOOdrawer</h3> Keep playing with the new <br />YOOdrawer module. <br /> <a href="http://www.yootools.com" target="_blank">Learn more...</a>
Of course, you have to replaces source path to image on your server and insert your preferred URL in <a> tag but this can give you brief overview how to prepare your content. Be advised that YOOdrawer module will have limited width (if placed horizontally) or height (if placed vertically) so keep that in mind when creating content. Based on previous code I achieved the following result as seen in WYSIWYG editor:
Picture 17: Sample content for YOOdrawer module
When you are finished with content editing and you are satisfied with result click on “Save” button in upper right corner of Joomla administrator screen.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
11
YOOtools â&#x20AC;&#x201C; YOOdrawer module
Picture 18: Save sample content for YOOdrawer module
In similar way prepare other content that will be show in YOOdrawer module. For this tutorial I prepared three more articles that will be later shown on frontend of Joomla site.
Picture 19: Sample articles for YOOdrawer module
We have prepared articles and content for YOOdrawer module. Now we can configure this module.
YOOdrawer module configuration Now that we prepared section, categories and articles for YOOdrawer module we must configure this module to be able to show it on frontend of Joomla site. Here is the list of parameters that can be configured with this module: Category Style Title Item size (px) Item minimized size (px) Ordering Read More No. of Items Module height (px)
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
A content category which items are used for the YOOdrawer The YOOdrawer styling (Default Vertical) Displayed title Size of a displayed item. When aligned vertical it's the items height. When aligned horizontal it's the items width. Size of a minimized item. Width/Height depending on the alignment. Ordering options (Article Order, Recently Added First, Recently Modified First, Most Popular, Randomize) Show/Hide the Read More button Maximum no of items to display Module height, only needed for horizontal layout
12
YOOtools – YOOdrawer module
To start configuring YOOdrawer module click “Extensions” -> “Module manager” from main administrator menu.
Picture 20: Start module manager
When module manager shows up click on YOOdrawer item in list of installed modules to start configuring module and customizing it to your specific needs.
Picture 21: Start configuring YOOdrawer module
Fill in Details for YOOdrawer module. You can see example on next picture. Choose Title for this module. Since it is recommended that this module doesn’t show it title on frontend of Joomla site, you can insert title which ever you like. Choose one that will help you distinguish this module in the list of other installed modules in module manager. Enable this module by choosing Yes option next to Enable radio box on details pane. You can choose position where on frontend will this module show up. List of possible positions depends on the template that you use for your site. Choose Access level to choose this module to certain group of website users and visitors.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
13
YOOtools â&#x20AC;&#x201C; YOOdrawer module
Picture 22: Details for YOOdrawer module
Set parameters acoringly to previously defined list of parameters.
Picture 23: List of YOOdrawer parameters
As stated before: Category parameter defines category which contains articles that you want to show in module Style parameter defines how will this module be presented on frontend, horizontally or vertically. Title parameter is where you put title which will be show on top of first drawer
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
14
YOOtools – YOOdrawer module
Item size (px) parameter defines size of a displayed item. When aligned vertical it's the items height. When aligned horizontal it's the items width. Item minimized size (px) parameter defines size of a minimized item. Width/Height depends on the alignment. Ordering paramter define ordering options (Article Order, Recently Added First, Recently Modified First, Most Popular, Randomize) Read More parameterdefines Show/Hide the Read More button No. of Items parameter defines maximum number of items to display Module height (px) parameter defines module height, only needed for horizontal layout
There is just one thing to do before saving customized settings and that’s defining on which menus this module will be shown.
Picture 24: Menu assignment for YOOdrawer module
When you are finish with module configuration click on “Save” button in upper right corner of Joomla administration screen.
Picture 25: Save module configuration
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
15
YOOtools â&#x20AC;&#x201C; YOOdrawer module
We are finished with articles preparation and module configuration. Now we can see the final result on frontend of Joomla site. If you followed this tutorial step by step the final result would have to look like this:
Picture 26: YOOdrawer module on frentend of Joomla site
Conclusion This concludes my tutorial about installation, configuration and usage of YOOdrawer module. I hope that this tutorial will be useful to some of you. If you have any questions regarding this module, please, leave message on support YOOtheme forum which supplies important information and helps you with installing or customizing your YOOtheme templates and tools in order to make it as easy as possible for you.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 08. April 2008
16