Frontpage Pro Installation and usage This tutorial will show you how to install and use JoomlaMarket component Frontpage Pro
Author: Igor Mihaljko Date: 24. December 2007
Frontpage Pro
Welcome to the tutorial that will try to explain how to install and use JoomlaMarket Frontpage Pro component. Tutorial will cover all the steps that are needed to go through to install component, prepare sections and categories, publish content and show component on the site. Let start tutorial by installing Frontpage Pro component. Log in to Joomla backend and follow the steps to install component. Click “Installers” -> “Components”:
Click “Browse” button:
and choose component install package.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
Follow by clicking on “Upload File & Install” button.
After few moments (depends on component – Success” message.
connection
speed)
you
will
“Upload
Next, we have to prepare Sections and Categories within sections that will contain news for Frontpage Pro to show. Choose “Section manager” like shown on the following picture.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
Section manager with already defined list of section will be loaded. We will create new section so click on “New” button.
Fill in the following data: 1. Title 2. Internal section name (choose the name that will best represent the type of news that will be contained within this section) 3. Click on the “Save” button
After that, new section will be listed in the “Section manager”. Write down “Section ID” of newly created section. We will use this information later for Frontpage Pro configuration options.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
The next step will be to define new category within section defined in previous step. Choose “Category manager” from the main menu.
Category manager will appear with the list of already defined categories. Click on the “New” button to define new category that will contain news for Frontpage Pro to show.
Fill in the following data: 1. 2. 3. 4.
Category title Category internal name Choose the section that this category will belong to Click on the “Save” button to confirm creation of new category
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
Write down “Category ID” of newly created category. We will use this information later for Frontpage Pro configuration options.
It is time to configure Frontpage Pro component. Choose “FrontpagePro Ajax” from component menu on the mainmenu toolbar.
List of Frontpage Pro options will appear. Fill in the data like shown on the following picture: 1. Count – number of news that will be shown on the front page of Frontpage Pro component 2. Category ID – you did write this information before, right? 3. Section ID – you did write this information before, right? 4. Frontpage items – choose if you would like to show regular Frontpage items or not 5. Method – choose the method that will be used to sort news (“Latest” or “Most popular”) 6. Language – choose language (only English for now) 7. Image width – input the width of images that will be shown in the news (you have to use {mosimage} tag in your content to fully utilize this option)
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
8. Template – input the name of the template that will e use to represent the content. Leave the default one for now. In the tutorial that will follow this one I will explain how can you define new template for Frontpage Pro component 9. Page title – input the text that will be used as title of this component on the frontpage of your site 10.Click on the “Save” button to confirm configuration changes
Let’s add some news content to show with Frontpage Pro component in the frontend of site:
I won’t explain how to add content. I guess that Joomla users know that by now.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
After adding news content it’s time to put Fromtpage Pro component in a menu so we can show it in the frontend. Open menu manager and add new item to our mainmenu:
Click on a “Component” to add Frontpage Pro component to menu.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
Fill in the following data: 1. Name – item tilte that will appera on a menu 2. Component – choose FrontpagePro Ajax component 3. Save – click “Save” button to save newly added item
This is the result as seen on a frontend of site:
When we click on Frontpage Pro item on a mainmenu the content will be shown represented with light template as we choose few steps before.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
You can see that image in the news content is resized to the dimensions that we choose in Frontpage Pro configuration in the backend of Joomla site.
If you click on a picture it appears in a lightbox. You can browse all the pictures from all the news shown with Frontpage Pro on the frontend by hovering mouse to the left or right side of the picture and clicking on a text that appear under mouse cursor.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007
Frontpage Pro
When you click on Read more text in the footer of every news the full text of that news will be loaded in a Graybox.
You can also browse every other news published to Frontpage Pro by clicking left and right arrows on a Graybox. When you are finished with reading news, close Graybox by clicking an X icon in the upper right corner.
This concludes my tutorial about installing and using Frontpage Pro component. If something wasn’t clear in this tutorial, you can always ask about features and ask for help on JoomlaMarket support forum and I will try to solve your problems.
Author: E-mail: Date:
Igor Mihaljko mihha@inet.hr 24. December 2007