YouJoomla – My Frontpage Slider 2 module Installation, configuration and usage This tutorial will show you how to install, configure and use My Frontpage Slider 2 module from YouJoomla
Author: Igor Mihaljko Date: 28. April 2008
YouJoomla – My Frontpage Slider 2 module
Table of Contents Preface..................................................................................................................................................... 3 Introduction............................................................................................................................................. 3 My Frontpage Slider module installation ................................................................................................ 4 Section preparation ................................................................................................................................. 6 Category preparation .............................................................................................................................. 8 Content preparation .............................................................................................................................. 10 My Frontpage Slider module configuration .......................................................................................... 10 Conclusion ............................................................................................................................................. 17
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
2
YouJoomla – My Frontpage Slider 2 module
Preface Welcome to the tutorial that will try to explain how to install, configure and use YouJoomla’s My Frontpage Slider 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 My Frontpage Slider, configuration and customization.
Introduction The clean and simple My Frontpage Slider is a horizontal or vertical aligned module which uses nice transitions to show content from specific category or from all categories from specific section. You can choose from three different types of transitions, sliding, fading and combination of those two. My Frontpage Slider uses the articles to display its content. All articles can display any kind of HTML formatted content like text/images. My Frontpage Slider module supports both Joomla 1.0 and Joomla 1.5 natively. It uses Mootools Javascript framework for transition effects. Colors of My Frontpage Slider can be adjusted to suite your specific needs. Every aspect of this module can be customized (link color, title and category title color, module width, intro image width and lots more. My Frontpage Slider is compatible with IE7, IE6, Firefox for Windows, Firefox for MAC 1.5+, Opera, Safari, Netscape, Camino 1+ web browser and it passes XHTML&CSS Validation. This tutorial will cover installation, article preparation and My Frontpage Slider module configuration only for Joomla version 1.5. Let start tutorial by installing My Frontpage Slider module. Log in to Joomla backend and follow the steps to install module.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
3
YouJoomla – My Frontpage Slider 2 module
My Frontpage Slider module installation Click “Extensions” -> “Install/Uninstall”:
Picture 1: Install new extension
Click “Browse” button and choose My Frontpage Slider module archive on disk to install.
Picture 2: Click “Browse” button
Click on “Upload File & Install” button to install My Frontpage Slider module.
Picture 3: Install My Frontpage Slider 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 28. April 2008
4
YouJoomla – My Frontpage Slider 2 module
Picture 4: Successful installation of module
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
5
YouJoomla – My Frontpage Slider 2 module
Section preparation Now that we successfully installed My Frontpage Slider module we have to prepare Joomla sections and categories that will contain articles which will be shown in My Frontpage Slider module on frontend of Joomla site. Click “Content” -> “Section manager” from main administrator menu.
Picture 5: Section manager
When section manager loads up, click on “New” button in the upper right corner of Joomla administrator screen.
Picture 6: New section
Fill in Details pane on new section screen that will show up. Let’s name our section News 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 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 module. Set this section to Publish state.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
6
YouJoomla – My Frontpage Slider 2 module
Picture 7: New section details
When you are finished with input click button “Save” in the upper right corner of Joomla administrator screen.
Picture 8: Save new section details
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
7
YouJoomla – My Frontpage Slider 2 module
Category preparation Now that we have section for content we have to prepare category for that section in similar way. Click “Content” -> “Category manager” from main administrator menu.
Picture 9: Category manager
When category manager loads up, click on “New” button in the upper right corner of Joomla administrator screen.
Picture 10: New category
Fill in Details pane on new category screen that will show up. Let’s name our category Latest news 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 News.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
8
YouJoomla – My Frontpage Slider 2 module
Picture 11: New category details
If you want to show My Frontpage Slider 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 My Frontpage Slider module. Set this category to Publish state. I have chosen to name this category Latest news because we could have more categories for content that will be show in My Frontpage Slider module. 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. We have unlimited possibilities to show our content to website visitors and users. When you are finished with input click button “Save” in the upper right corner of Joomla administrator screen.
Picture 12: Save new category details
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
9
YouJoomla – My Frontpage Slider 2 module
Content preparation With section and category prepared we can now add some articles that we will show in My Frontpage Slider module on frontend of our Joomla website. I won’t explain here how to make new content to your Joomla site. Instead I will give a link to Joomla 1.5 Quick Start Guide where you can learn how to add content and many other Joomla related stuff. This guide can be found by following Joomla 1.5 Quick Start Guide link. When you prepare articles and content for My Frontpage Slider module go on reading following section where I will explain how to configure and customize this module.
My Frontpage Slider module configuration Now that we prepared section, categories and articles for My Frontpage Slider module we must configure this module to be able to show it on frontend of Joomla site. List of parameters that can be configured is quite long so I will break it on three parts. To start configuring module click “Extensions” -> “Module manager” from main administrator menu.
Picture 13: Start module manager
When module manager shows up click on My Frontpage Slider item in list of installed modules to start configuring module and customizing it to your specific needs.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
10
YouJoomla – My Frontpage Slider 2 module
Picture 14: Start configuring My Frontpage Slider module
Fill in Details for My Frontpage Slider module. You can see example on next picture. Choose Title for this module. 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.
Picture 15: Details for My Frontpage Slider module
Now that we have basic details defined let’s take a look on module parameters that can be configured. As I said before, list of parameters is quite long so I will split it into three parts. I will list parameters and explain briefly every one of them.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
11
YouJoomla – My Frontpage Slider 2 module
Picture 16: First part of My Frontpage Slider module parameters
Author: E-mail: Date:
Source – choose source of content, Category or Section Section Name – if you choose to show articles from section, choose here which section will that be Category Name – if you choose to show articles from specific category within section choose it here. Otherwise, leave it on default value to show articles from every category within chosen section Category title – choose whether to show category title on frontend of this module or not. This can be useful if you choose to show articles from more than one category. In that way your visitors can easily see to which category news belongs Read more link – choose to show “Read more” link with news or not Intro image height/width – set height and width of image that will be shown with intro text on frontend of this module Image links to content item – choose if you want intro image to be linked to that specific content article or not
Igor Mihaljko mihha@inet.hr 28. April 2008
12
YouJoomla – My Frontpage Slider 2 module
Picture 17: Second part of My Frontpage Slider module parameters
Author: E-mail: Date:
Amount of characters in introtext – set how many characters will you allow showing in intro text on frontend. This can be helpful to limit intro text length on frontend Show n-links in a category – set how many links to articles from specific category will be shown beneath first article with image Image align – where intro text image will be aligned (left, right, top) regarding to intro text CSS-suffix class of the module – set module class suffix defined in your template’s main CSS. Please, consult your template’s manual to find correct class suffix Title link color– set both category and article title link color to be shown on frontend Title hover link color – set both category and article title hover link color to be shown on frontend Intro text color – set intro text color to be show on frontend. With this parameter you can make difference between text color in news module and actual text color in full article Read more link color – if you choose to show “Read more” after intro text, you can set here it’s link color Read more link hover color – if you choose to show “Read more” after intro text, you can set here it’s hover link color Additional news items links color – set link color for additional news items that will be show beneath main intro text on frontend Additional news items hover links color – set hover link color for additional news items that will be show beneath main intro text on frontend
Igor Mihaljko mihha@inet.hr 28. April 2008
13
YouJoomla – My Frontpage Slider 2 module
Picture 18: Third part of My Frontpage Slider module parameters
Slide width/height (px) – set width/height of news slider on frontend. You can set this value to best suite your template and your needs Show n-links in a category – set how many links to articles from specific category will be shown beneath first article with image Slide orientation – choose to slide content horizontally or vertically Type slider – choose type of effect that will switch content on frontend. This can be scroll, fade and combination of those two, scrollfade Start slide on page load – choose to start sliding content immediately when the page is loaded. If you choose “No” content will begin to change after time defined in “Slide time” parameter Advert image – you can show advert image in left lower corner of this module. Enter here URL (absolute or relative) of the image to be shown. Height of this image can be 30px maximum Advert link – insert URL of the web page for advert image Advert title – put here the text of tooltip that will show up when you hover advert image Advert Tip Title – put here title of tooltip that will show up when you hover advert image Slide time – how much time (in milliseconds) will one page of this slider be show before new on shows up Duration slide – how much time(in milliseconds) will transition from one content to another last Show slide navigation options – choose to show quick navigation arrows on frontend or not
There is just one thing to do before saving customized settings and that’s defining on which menus this module will be shown.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
14
YouJoomla – My Frontpage Slider 2 module
Picture 19: Menu assignment for My Frontpage Slider module
When you are finish with module configuration click on “Save” button in upper right corner of Joomla administration screen.
Picture 20: Save module configuration
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:
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
15
YouJoomla – My Frontpage Slider 2 module
Picture 21: My Frontpage Slider module on frontend of Joomla site
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
16
YouJoomla – My Frontpage Slider 2 module
Conclusion This concludes my tutorial about installation, configuration and usage of My Frontpage Slider 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 YouJoomla forum which supplies important information and helps you with installing or customizing your YouJoomla templates and tools in order to make it as easy as possible for you.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
17