Chapter 4 [ 97 ] What just happened? Uncategorized arcles are a perfect soluon to place content on your site that doesn't t the categories structure. You've added two arcles 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 Painngs link reveals a single arcle page. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 98 ] Have a go hero – clean up the Main Menu You'll have noced 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 boom of the menu. You can change the order of items in the main menu by navigang 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 Painngs arcle link to the second posion: Put some content on the home page—at last! Now that you've stued your site with content, there's one essenal page to take care of. As we haven't added anything to the home page yet, its main content area is sll empty. It may seem strange that you do not start with the home page when adding content; aer all, it's the ocial entrance to the site. However, you do need to have the actual content—arcles—before you can start publishing anything on your home page. Aer all, the home page usually is a selecon 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 arcle (Content | Arcle Manager | New), or edit an exisng arcle in the Arcle Manager, you can choose whether you want the arcle to be displayed on the home page. In the Arcle : [Edit] screen, click on the Front Page : Yes radio buon. 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 Arcle Manager overview screen (Content | Arcle Manager). A check mark in the Front Page column means the arcle is displayed on the home page. Clicking on the check mark changes it to a cross. This indicates the arcle 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 Arcle Manager. 1. Navigate to Content | Arcle Manager. 2. In the Front Page column, click on the red cross of four arcles: Deplorable Sll Lifes, Ugly Art Lecture, The Art of Bob Ross, and This Years Meeng. The red cross turns into a green check mark. The results are shown in the following screenshot. Four arcles are set to show on the Front Page: Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang a Site in an Hour [ 100 ] 3. Click on Preview. You've got a home page lled with content! Four arcles 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 Arcle Manager you have added four arcles to the home page. On the frontend, these four arcles 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 opons 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 sengs of the Home link in the Main Menu: 1. Navigate to Menus | Main Menu. 2. Click on Home. 3. In the Parameters (System) secon, 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 eecvely disappear from your home page. However, it would sll show in the browser Title Bar. The Front Page is not the home page (or is it?) Are you in for a lile confusion on Joomla! jargon? You'll noce 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 sengs. You'll use the sengs 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: Creang 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 stac 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 funconal 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 funconality, you'l l nd yourself working with b oth the Components and the Extensions menu in the backend. The main dierence between these two is that components are more powerful and more complex; they're applicaons within the Joomla! applicaon. Modules are smaller add-ons that can contain all sorts of dynamic informaon. Somemes, components and modules are designed to work together. So, in spite of the dierences between components and extensions, behind the scenes, they generally serve the same purpose. Both enhance your site's funconality. 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 funconality 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; aer 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 Informaon secon, enter the contact informaon 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 Informaon secon are mandatory. However, you should add some text in the Miscellaneous informaon 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 secon you can specify whether you want to show or hide specic contact details on the contact form page. In this case, we want to display only Name, Telephone, and Miscellaneous Informaon. You could, of course, display more contact details to oer visitors various ways to respond. 7. In the E-mail Parameters secon, it's important that E-mail form is set to Show. This will add the contact form to the contact informaon 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 suce. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang 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 secon, in the Select Contact drop-down box select the contact you just created: SRUP Sta. 6. In the Parameters (System) secon, 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 selecng 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 interacon on their site. They suggest adding a poll, a simple survey of one mulple-choice queson. In Joomla!, the polling funconality is built-in. Time for action – create a Poll First, let's create the Poll queson 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 Opons secon, add four possible answers: Painng Tutorials, Museum and Gallery Tips, History of Bad Painngs,and The World's Worst Painters. 5. Click on Save. Download at Wow! eBook WWW.WOWEBOOK.COM Web Building Basics: Creang 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 posion 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 Posion: right. The survey will appear in the right-hand side column. 6. In the Menu Assignment secon, 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 secon, 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 opon, click on the Vote buon, 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 funconal 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 lile confusion on Joomla! jargon? You'll noce 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! .