YOOdrawer - install and usage

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

Author: Igor Mihaljko E-mail: [email protected] Date: 08. April 2008

2

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



3

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.



4

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



5

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.



6

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.



7

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



8

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.



9

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.



10

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 YOOdrawer

Alias yoodrawer

Section choose YOOtheme (defined in Section preparation part of this tutorial)

Published choose Yes

Frontpage choose No

Category 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



11

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.



12

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 A content category which items are used for the YOOdrawer Style The YOOdrawer styling (Default Vertical) Title Displayed title Item size (px) 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) Size of a minimized item. Width/Height depending on the alignment. Ordering Ordering options (Article Order, Recently Added First, Recently Modified First, Most Popular, Randomize) Read More Show/Hide the Read More button No. of Items Maximum no of items to display Module height (px) Module height, only needed for horizontal layout



13

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.



14

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



15

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



16

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.

Date post:	28-Mar-2016
Category:	Documents
Upload:	igor-mihaljko
View:	217 times
Download:	1 times

YOOdrawer - install and usage

Documents