Chapter 4 [ 97 ] What just happened? Uncategorized arcles are a perfect soluon to place content on your site that doesn't t the categories structure. You've added two arcles and menu links. On the frontend of your website, the output is as follows: Two new menu links are displayed as the last item in the Main Menu. Clicking on the Mission Statement link or the Ugly Painngs link reveals a single arcle page. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 98 ] Have a go hero – clean up the Main Menu You'll have noced that Main Menu items are shown in the order that you've created them. The last two menu items you've just added, are displayed at the boom of the menu. You can change the order of items in the main menu by navigang to Menus | Main Menu and clicking on the arrows in the Order column to move things up or down. Try this out now. For example, try to move the Ugly Painngs arcle link to the second posion: Put some content on the home page—at last! Now that you've stued your site with content, there's one essenal page to take care of. As we haven't added anything to the home page yet, its main content area is sll empty. It may seem strange that you do not start with the home page when adding content; aer all, it's the ocial entrance to the site. However, you do need to have the actual content—arcles—before you can start publishing anything on your home page. Aer all, the home page usually is a selecon of content items—teasers, images, or hyperlinks—drawn from the rest of the site. Add items to the home page How do you control which pieces of content are shown on the home page? When you write a new arcle (Content | Arcle Manager | New), or edit an exisng arcle in the Arcle Manager, you can choose whether you want the arcle to be displayed on the home page. In the Arcle : [Edit] screen, click on the Front Page : Yes radio buon. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 4 [ 99 ] Another way to quickly add items to the home page (or remove them) is to use the Arcle Manager overview screen (Content | Arcle Manager). A check mark in the Front Page column means the arcle is displayed on the home page. Clicking on the check mark changes it to a cross. This indicates the arcle will not be displayed on the home page. We'll try this out right now. Time for action – adding items to the home page Let's add some stu to the home page through the Arcle Manager. 1. Navigate to Content | Arcle Manager. 2. In the Front Page column, click on the red cross of four arcles: Deplorable Sll Lifes, Ugly Art Lecture, The Art of Bob Ross, and This Years Meeng. The red cross turns into a green check mark. The results are shown in the following screenshot. Four arcles are set to show on the Front Page: Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 100 ] 3. Click on Preview. You've got a home page lled with content! Four arcles are displayed on the home page as intro texts with Read more links: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 4 [ 101 ] What just happened? By clicking on the icon in the Front Page column in the Arcle Manager you have added four arcles to the home page. On the frontend, these four arcles are now shown in the default Joomla! Front Page layout; the rst intro text is displayed in the full mainbody width, the intro texts below that are presented in two columns. We'll leave this for now—but rest assured, you'll learn how to tweak these display opons to your heart's content in the later chapters. Remove the "Welcome to the Front Page" heading By default, a Joomla! home page shows the headline "Welcome to the Front Page". We don't want to keep that message. To remove it, we'll have to tweak the sengs of the Home link in the Main Menu: 1. Navigate to Menus | Main Menu. 2. Click on Home. 3. In the Parameters (System) secon, delete the text in the Page Title box. 4. Click on Save. The Page Title has now been removed. It's not enough to just leave the welcome message and change Show Page Title to No. In that case, the page tle would eecvely disappear from your home page. However, it would sll show in the browser Title Bar. The Front Page is not the home page (or is it?) Are you in for a lile confusion on Joomla! jargon? You'll noce Joomla! uses the word Front Page instead of home page. Technically, these two are not the same:  The home page is the full page the user sees when clicking on Home in the Main Menu; it's the top level page of your site.  In Joomla!, the Front Page is the main content area (the mainbody) within the home page. The home page can feature other items—modules—around the mainbody. In other words, there is more to the home page than just the Front Page in the form of modules. As modules aren't part of the Front Page, you cannot control them through the Front Page sengs. You'll use the sengs of the modules themselves to control whether they appear on the home page. We'll see an example of that when we add a Poll module later in this chapter. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 102 ] Step 3: Add extras through components and extensions You've just taken a few giant leaps! You have customized the layout of your new site, framed a structure, and have created and published the contents to match. If this were a stac HTML site, this would be about it. This would be all there was to a website. In Joomla!, however, the fun has just begun. You can now add funconal or even just plain cool extras. For this, you'll use Joomla!'s components and extensions—that's where the Joomla!'s real magic power lies. Components and extensions, what's the difference? To manage Joomla!'s extended funconality, you'l l nd yourself working with b oth the Components and the Extensions menu in the backend. The main dierence between these two is that components are more powerful and more complex; they're applicaons within the Joomla! applicaon. Modules are smaller add-ons that can contain all sorts of dynamic informaon. Somemes, components and modules are designed to work together. So, in spite of the dierences between components and extensions, behind the scenes, they generally serve the same purpose. Both enhance your site's funconality. For now, we'll be using components and extensions that are included in the default Joomla! setup. Later, you'll probably want to add other extensions. There are thousands of them available on the Web, providing whatever funconality you might want to add to your site. You'll learn more about adding extensions in Chapter 10. Add a contact form Let's take care of one of the last items on your client's wish list and enable site visitors to get in touch through a contact form. Adding this form will take two steps. First, we'll create a contact; aer that, we'll create a menu link that displays a contact form. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 4 [ 103 ] Time for action – create a contact Let's add a contact, that is, someone whose (mail) address and other contact details can be displayed on the form page and who will receive the form data in their mailbox. 1. Navigate to Components | Contacts. The Contact Manager opens. Click on New. 2. In the Contact : [New] screen, enter the details for the contact. In the Name box, enter SRUP Sta. 3. In the Category drop-down list, select Contacts. 4. In the Informaon secon, enter the contact informaon details you want to display. In this case, just ll out the E-mail box and the Telephone box. It is important to specify a valid e-mail address, because this is where the form data will be sent to. 5. None of the other items in the Informaon secon are mandatory. However, you should add some text in the Miscellaneous informaon box. This will be displayed as an introductory text on the form page. You might want to add text such as: Would you like to know more? Call us or ll out the form below. We'll get in touch as soon as possible. 6. In the Contact Parameters secon you can specify whether you want to show or hide specic contact details on the contact form page. In this case, we want to display only Name, Telephone, and Miscellaneous Informaon. You could, of course, display more contact details to oer visitors various ways to respond. 7. In the E-mail Parameters secon, it's important that E-mail form is set to Show. This will add the contact form to the contact informaon page—just like we want to. 8. Click on Save. What just happened? To be able to create a contact form, you have to rst creat a contact. Using the Jo omla! Contact Component, you can build a comprehensive system of contacts organized by contact categories. For our goal, just one contact name and e-mail address will suce. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 104 ] Time for action – create a Contact Form menu link Now that a contact exists you can add a link to a contact form to the main menu: 1. Navigate to Menus | Main Menu. 2. Click on New. 3. In the Select Menu Item Type list, select Contacts | Standard Contact Layout. 4. Enter a Title for the menu item (for example, Contact). 5. In the Parameters-Basic secon, in the Select Contact drop-down box select the contact you just created: SRUP Sta. 6. In the Parameters (System) secon, add a Page Title (for example, Get in touch). This will be displayed at the top of the form. 7. Click on Save. The site now has a Contact menu link that displays a contact form: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 4 [ 105 ] What just happened? You have used the Contacts Component to create a contact and added a menu link to a contact form. Again you have experienced how powerful menu links are in Joomla!. Just by selecng the Menu Item Type: Standard Contact Layout you have created a menu link that takes the visitor to a contact form page. Add a Poll The SRUP people would like to enable a bit of user interacon on their site. They suggest adding a poll, a simple survey of one mulple-choice queson. In Joomla!, the polling funconality is built-in. Time for action – create a Poll First, let's create the Poll queson and the set of possible answers: Navigate to Components | Polls. In the Poll Manager screen, click on New. 1. Click on Published: Yes to make sure the poll will be displayed in the frontend. 2. Leave Lag unchanged. A visitor may vote only once a day (the standard Lag of 86,400 seconds, i.e., 24 hours). 3. In the Poll: [Edit] screen, enter the details of the survey. In the Title box, enter What would you like to read about on our site? 4. In the Opons secon, add four possible answers: Painng Tutorials, Museum and Gallery Tips, History of Bad Painngs,and The World's Worst Painters. 5. Click on Save. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 106 ] Time for action – display the Poll The Poll component uses the Poll module. This module tells Joomla! on what pages the Poll should appear and on what posion it should be displayed: 1. Navigate to Extensions| Module Manager. Click on New. 2. In the Module: [New] screen, click on the Poll module. Click on Next. 3. In the Title box, type Vote!. 4. Click on Show Title: Yes. 5. Select Posion: right. The survey will appear in the right-hand side column. 6. In the Menu Assignment secon, click on Select Menu Item(s) from the List. Select mainmenu: Home. You can have the survey appear on any page; in this case, it will appear only on the home page. 7. In the Module Parameters secon, select the poll you've created. 8. Click on Save and click on Preview. The Poll is displayed on the frontend: What just happened? Your site now shows a simple poll on the home page. The site visitor can select one opon, click on the Vote buon, and view the results. The results are shown in the main content screen. Download at Wow! eBook WWW.WOWEBOOK.COM . Joomla! , however, the fun has just begun. You can now add funconal or even just plain cool extras. For this, you'll use Joomla! 's components and extensions—that's where the Joomla! 's. Front Page is not the home page (or is it?) Are you in for a lile confusion on Joomla! jargon? You'll noce Joomla! uses the word Front Page instead of home page. Technically, these two. 4 [ 105 ] What just happened? You have used the Contacts Component to create a contact and added a menu link to a contact form. Again you have experienced how powerful menu links are in Joomla! .