TabNews module Installation, configuration and usage This tutorial will show you how to install, configure and use TabNews module from YouJoomla
Author: Igor Mihaljko Date: 28. April 2008
TabNews module
Table of Contents Preface..................................................................................................................................................... 3 Introduction............................................................................................................................................. 3 TabNews module installation .................................................................................................................. 4 Section preparation ................................................................................................................................. 6 Category preparation .............................................................................................................................. 8 Content preparation .............................................................................................................................. 10 TabNews module configuration ............................................................................................................ 10 Conclusion ............................................................................................................................................. 16
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
2
TabNews module
Preface Welcome to the tutorial that will try to explain how to install, configure and use YouJoomla’s TabNews 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 TabNews, configuration and customization.
Introduction The clean and simple TabNews is Joomla module which uses nice tabs to show content from specific category or from all categories from specific section. You can choose to change tabs on mouse click or on mouse over. TabNews uses the articles to display its content. All articles can display any kind of HTML formatted content like text/images. TabNews module supports both Joomla 1.0 and Joomla 1.5 natively. Colors of TabNews 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. TabNews 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 TabNews module configuration only for Joomla version 1.5. Let start tutorial by installing TabNews 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
TabNews module
TabNews module installation Click “Extensions” -> “Install/Uninstall”:
Picture 1: Install new extension
Click “Browse” button and choose TabNews module archive on disk to install.
Picture 2: Click “Browse” button
Click on “Upload File & Install” button to install TabNews module.
Picture 3: Install TabNews 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
TabNews module
Picture 4: Successful installation of module
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
5
TabNews module
Section preparation Now that we successfully installed TabNews module we have to prepare Joomla section and categories that will contain articles which will be shown in TabNews 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 Top Headlines 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
TabNews 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
TabNews 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 Business 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
TabNews module
Picture 11: New category details
If you want to show TabNews 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 TabNews module. Set this category to Publish state. I have chosen to name this category Business because we could have more categories for content that will be show in TabNews 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
TabNews module
Content preparation With section and category prepared we can now add some articles that we will show in TabNews 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 TabNews module go on reading following section where I will explain how to configure and customize this module.
TabNews module configuration Now that we prepared section, categories and articles for TabNews 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 two 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 TabNews 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
TabNews module
Picture 14: Start configuring TabNews module
Fill in Details for TabNews 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 TabNews 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 two 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
TabNews module
Picture 16: First part of TabNews module parameters
Author: E-mail: Date:
Tab method – choose to switch between tabs on mouse click or mouse over Source of content –choose here which section will you show articles from Read more link – choose to show “Read more” link with news or not Show intro image – choose if you want to show intro image or not. Intro image is first image that appears in article Intro image height/width – set height and width of image that will be shown with intro text on frontend of this module Image align – where intro text image will be aligned (left, right, top) regarding to intro text Image links to content item – choose if you want intro image to be linked to that specific content article or not Show links in a column – choose if you want to show additional links to category content in row or in columns 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
Igor Mihaljko mihha@inet.hr 28. April 2008
12
TabNews module
Picture 17: Second part of TabNews module parameters
Author: E-mail: Date:
Show n-links in a category – set how many links to articles from specific category will be shown beneath first article with image Shows links intro image – choose if you want to show small intro images next to links to additional content 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 Links image width/height – choose width and height of small intro images next to links to additional content 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
Igor Mihaljko mihha@inet.hr 28. April 2008
13
TabNews module
There is just one thing to do before saving customized settings and that’s defining on which menus this module will be shown.
Picture 18: Menu assignment for TabNews module
When you are finish with module configuration click on “Save” button in upper right corner of Joomla administration screen.
Picture 19: 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
14
TabNews module
Picture 20: TabNews module on frentend of Joomla site
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 28. April 2008
15
TabNews module
Conclusion This concludes my tutorial about installation, configuration and usage of TabNews 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
16