O'Reilly logo

Using Joomla!, 2nd Edition by Jennifer Gress, Ron Severdia

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4. Setting Up the Basics of Your Website

In this chapter, we’re going to set up the basic structure we planned in Chapter 2. The very first step to get Joomla Pet Center set up is to install Joomla. See Appendix A to accomplish this if you need to and then come back here to dive in.

For setting up Joomla Pet Center, we will start from a blank site with no sample content loaded. You may have chosen to install the sample content during the Joomla installation and you can follow along using that (for information about sample data, see Appendix A. If you did not, then have your own planning sketches available so that you can set up your website structure while we do Joomla Pet Center.

The order of creating content for your website is as follow:

  1. Create Categories
  2. Create Articles
  3. Create Menu Items

Content Categories

One of Joomla’s strengths is its simplicity and that’s reflected in how it manages content using its article content: Categories and Articles. It really is as simple as relating categories to “buckets,” and articles to “rocks.” You can’t have the same rock in multiple buckets, but you can have many rocks and buckets.

The Category Manager displays the categories of your site. These are the “buckets” for your articles. If your site is small, you may only need one or two categories. You’ll organize your articles within them. But most sites will have a number of categories (e.g. About, Products, Services, Blog) to give more control and flexibility over how your articles are displayed. The Category Manager enables you to copy, edit, create, and delete categories. Before you can create articles, you’ll need to first create a category.

Creating Categories

You must create at least one category before you create any articles. For example, in Joomla Pet Center, we will be creating the categories we planned in Planning Categories.

Joomla Pet Center Categories:

  • Blog
  • How to
  • About
  • Testimonials
  • Legal

Blog and How To nested Categories:

  • Dogs
  • Cats
  • Reptiles
  • Birds

Hands-on Exercise: Create Your Categories

  1. Login to the backend of your website.
  2. Click on Content and hover over Category Manager and click on Add New Category. This opens the Category Manager: Add A New Articles Category (Figure 4-1) screen.
  3. Enter a title for the category. We will start with the category Blog.
  4. Leave the alias blank and Joomla will fill it in for you.
  5. Optionally, you may also enter a description of the category in the text box. This information will show up on category pages when the appropriate menu item parameter is enabled. See Category Blog Layout further along in this chapter for more information about this parameter.
  6. Another option is to associate an image that displays with the category. Simply click on the Images button at the bottom of the text editor to add an image to the category.
  7. On the details panel on the right, select a parent category if the category you are creating is to be a nested category. In our case, it is not.
  8. Leave the Tags field for now. We will be setting this up in Chapter 8 when we set up our Blog.
  9. Leave the Category Published.
  10. Choose an access level, either Guest, Public, Registered, Special or a custom access level if you have created any. Most often this will be set to Public. If set to Registered, registered users or higher will have access. Special means only Administrators will have access. Custom ACLs (Access Control Lists) will have different access permissions. (See Access Control Lists (ACL) for more information about ACL’s.)
  11. For other Publishing Options, Options, Metadata Options and Category Permissions, click the tabs next to the Category Details tab and fill them in as desired.
  12. Click Save & Close to return to the Category Manager or Save & New to create an additional category or nested category.
Create a new category
Figure 4-1. Create a new category

We have added all the categories and nested categories for Joomla Pet Center. When complete, our Category Manager will look like Figure 4-2. Yours should look similar.

Joomla Pet Center Categories in Category Manager view
Figure 4-2. Joomla Pet Center Categories in Category Manager view

If you installed Joomla with the sample data, you can use the existing categories and change the title and alias and any other settings to utilize what was already installed with your site. Or you can follow the instructions above to create new categories and then unpublish or trash the sample data categories.

Note

You will not be able to delete categories unless you first move or delete any articles within those categories. This includes articles that may be in the article trash or archived articles.

Publishing & Unpublishing Categories

In the Category Manager, you also have control over the published state of each category or nested category. To publish or unpublish a category, click the icon in the Status column Figure 4-3.

Publish or unpublish a category in the Category Manager.
Figure 4-3. Publish or unpublish a category in the Category Manager.

You can also unpublish a category in the Category Editor to hide it from website visitors.

  1. Go to the Category Manager and click the category name to open it in the Category Editor. You can also click the checkbox by the category name and select the Edit button in the toolbar.
  2. On the Details panel on the right, click the drop-down for Status and set its status from Published to Unpublished Figure 4-4.
  3. Click Save & Close.
Publish or unpublish a category in the Category Editor.
Figure 4-4. Publish or unpublish a category in the Category Editor.

Copying Categories

There are times when you may want to duplicate a category. To copy a category:

  1. Go to the Category Manager and open the category you want to duplicate.
  2. Click the Save as Copy button in the toolbar.
  3. This will open a copy of that category which you can now give a new title and alias. You can simply erase what is in the alias field after copying and Joomla will assign a new alias upon saving the new category.

    Note

    The Alias field is used to manage how a page’s URL is constructed. Each Category must have an original alias (each article and menu item must have original alias’ as well). If in doubt, empty the alias field and Joomla will fill it in for you. For more on how to work with the alias field, see SEF URLs.

  4. Make any other changes to the items in the Details panel on the right or in the additional tab items next to Category Details as appropriate.
  5. Click Save & Close.

You may copy multiple Categories (or Articles) at a time using the Batch function. Simply check the categories you want to copy (or move) and click the Batch button in the top toolbar. Select where you want to copy them to and make sure the Copy radio button is selected. Then click Process. The Batch functionality is available in multiple instances of your Joomla website.

Uncategorized Category

You may have noticed the option of using the Uncategorized Category when creating new articles. Uncategorized articles are limited in how they can be displayed on your website so we don’t recommend keeping finished articles in this Category.

If you do use the Uncategorized category, it should be limited. The only articles that may be appropriate to have in the uncategorized category are:

  • The home page
  • Custom 404 page
  • Thank you page for form submission
  • Draft articles submitted by site authors

Aside from those, a category should be created for your articles to go into. This reduces heartache down the road when you want content to display a certain way and the articles need to be moved into categories which then breaks links and is just a pain overall.

Now that our categories are all set up, we can create articles.

Creating Articles

The Article Manager is the tool for creating and managing articles.

Creating a new article is as simple as clicking the Add New Article link on the left sidebar of the Control Panel. You can also create a new article by clicking on Content, hovering over Article Manager and clicking Add New Article. If already in the Article Manager, simply click the New button in the Article Manager toolbar. All of these ways open up the Article Editor screen (Figure 4-5) where you can add text, images, or other content. Once you click Save, your article is saved and keeps your article open for editing. If you are done editing your article, Click Save & Close and you’ll be taken back to the Article Manager. Save & New will save the article you are working on and open a new article to be added to the system.

The Article Editor
Figure 4-5. The Article Editor

In setting up the basics of your website, we will first create all of our articles at one time without adding content to them. We will add content in Chapter 5.

Hands-on Exercise: Create your Articles

We will be using our spreadsheet we created when planning our website to create our articles. You will use your planning sketch of your website and create yours.

Joomla Pet Center will have the following Articles which we decided in Planning Articles:

  • Helen
  • Diana
  • Mark
  • Testimonial 1
  • Testimonial 2
  • Testimonial 3
  • Blog 1
  • Blog 2
  • Blog 3
  • How to 1
  • How to 2
  • How to 3
  • Privacy Policy
  • Terms & Conditions
  • Home

Follow these steps:

  1. Click on Add New Article from the Control Panel.
  2. Enter the Title - we’ll start with Helen.
  3. Leave the Alias blank and Joomla will fill it in for you.
  4. Select the Category from the drop-down - in our case the category is About.
  5. For the time being, we are going to leave everything else as is and click Save & New to create the rest of our articles.

The Featured button is what tells Joomla to display any Featured articles on a page set up to be a Featured Article Menu Item Type - most commonly, the home page. While “home” is the most popular use of Featured articles, it is not the only way they can be used. Featured articles are associated with the Featured Menu Item Type which is installed by default by Joomla as the Home menu item in the Main Menu.

None of our articles will be Featured articles except our Home page which we will mark as Featured and leave in the Uncategorised category. This will be denoted by a yellow star in the Status column of the Article Manager.

When complete with adding articles for Joomla Pet Center the Article Manager will look like Figure 4-6.

Joomla Pet Center Articles
Figure 4-6. Joomla Pet Center Articles

You can see in the Article Manager that we have a list of Articles. At the bottom of the list, you can navigate to a second page of Articles. You can select the number of Articles to show in the list in the top right corner. There is a red box around it.

There are a number of tools including filters that can save you time in looking for your articles to edit them in the future. You can type a portion of the title into the search box at the top of the article manager. You can select Search Options at the top of the Article Manager which will toggle the display of several filters that you can set when looking for Articles in a certain Category, Status, Access Level and more. You may also click on any of the column headings to sort by each heading. Clicking twice will reverse the results. For example, clicking on the Title column heading once will sort alphabetically with the letter A first. Clicking the Title heading again will sort reverse alphabetically with the letter Z first.

Note

Once you set your filters, the system will remember they are set, visit other pages, and return. You will want to clear the filters by choosing the “Select..” from the drop-down in order to display your entire Article Manager list again.

Article Publishing & Unpublishing

New articles are set to Published by default—meaning they are visible to your site users. Unpublishing an article removes it from view. Publishing and unpublishing articles is straightforward, but there are a number of ways to do it and customize the process. The first (and most common) way is clicking the publish/unpublish icon in the Article Manager.

Find the icon in the Status column. A green checkmark means the article is already published on your site. A red circle with a white x in the center means the article is unpublished and not viewable on your website. The star icon denotes that the article is both published and Featured.

The second way to toggle the published state is in the Article Editor where you edit the article. Go to the Article Manager and click the name of the article you want to edit. Find the Status drop-down under the Details column at the far right of the screen. Select either Published, Unpublished, Archived, or Trashed from the drop-down as seen in Figure 4-7.

Editing an article, publish or unpublish
Figure 4-7. Editing an article, publish or unpublish

Click the Save button or Save & Close button to save your changes.

Now that we have added our Categories and Articles, if you were to check the frontend of your website you will see that there is no difference in how the site looks. Creating the categories and articles had to happen first. Now that we have our categories and articles created, we get to move to the fun part of having them display on the frontend of the website by creating Menu Items.

Menu Items are the primary tools for navigating to and controlling the display of content in Joomla. Joomla Pet Center has a lot of menu items that will depend on an extension to display content stored in the extension itself. Since we are only setting up the basics of our site structure right now, we will create placeholders for menu items that will be utilizing extensions.

We will be focusing on the most popular menu item types for Joomla Pet Center; the Category Blog and Single Article along with our placeholders which utilize the Text Separator Menu Item type.

For now, we are working with the Main Menu which was installed with Joomla.

Let’s start by taking yet another look at our sketch, spreadsheet, or file that we created of our menu in Chapter 2 so that we can create our menu items.

Text Separator Menu Item type

Aside from Home, our first five menu items are extensions. Thus, we will create placeholders for them using the Text Separator menu item type until we install and configure the extensions in future chapters.

The Text Separator menu item type is also used often as a main “tab” or Parent menu item with sub-menu items or Child menu items as drop-down menu items. This forces a visitor to choose from the drop-down as the Text Separator isn’t clickable.

Hands-on Exercise: Create Text Separator Menu Items

  1. Click on Menus from the backend Control Panel, hover over Main Menu, and click on Add New Menu Item as seen in Figure 4-8.

    Add a new menu item to the main menu
    Figure 4-8. Add a new menu item to the main menu
  2. In the Menu Manager: New Menu Item screen, enter the Menu Title
  3. The Alias will auto-generate when you save the Menu Item. See more about using an alias in SEF URL Settings & SEO Basics.
  4. Click the blue Select button to the right of the Menu Item Type field to select the type of Menu Item as seen in Figure 4-9.

    Enter the title and click select to choose the menu item type
    Figure 4-9. Enter the title and click select to choose the menu item type
  5. Click on System Links from the accordion and click on the Text Separator Menu Item type as seen in Figure 4-10.

    Select Text Separator from the System Links menu item types
    Figure 4-10. Select Text Separator from the System Links menu item types
  6. Click Save & New from the top toolbar and repeat for the next menu items that have the Text Separator Menu Item type. When you get to the last one, click Save & Close.

You may not have the same menu items next to each other as we do. Feel free to create your menu items in order with the different types. Items can be ordered after they are entered.

We are going to continue and add our Text Separator Menu Item types for events, gallery, community, and forum. Forms and Contact will also be extensions and so we will create Text Separator Menu Items for those when we get to the About portion of the Menu Items.

Creating Single Article Menu Item Types

The Privacy Policy and Terms & Conditions for Joomla Pet Center are both simple Single Article menu item types. Single Article Menu Item types are by far the most commonly used Menu Item type. We just happen to be using a lot of extensions and Category Blog (following hands-on exercise) layouts in Joomla Pet Center. Chances are good that you will have more Single Article Menu Item Types than we do.

Let us create a couple of Single Article menu items.

Hands-on: Single Article Menu Item Types

Have a new Menu Manager: New Menu Item up on your screen. Then just follow along.

  1. Enter the Title of your menu item. Ours will be Privacy Policy.
  2. Leave the Alias blank as Joomla will fill it in for you.
  3. Click the Select button for the Menu Item Type.
  4. Click the Articles accordion and then click the Single Article menu item type. (Figure 4-11.)

    Select single article from the articles accordion to choose the menu item type
    Figure 4-11. Select single article from the articles accordion to choose the menu item type
  5. Click the Select button next to the Select Article field.
  6. A list of articles will appear in a pop-up window. You can filter by Access, Status, Category, or Language. You may also type a portion of the title of the article into the Filter field at the top and press enter. Articles Matching your search will appear in the box. Click on the article desired. See Figure 4-12 to see articles in the Legal category.

    List of articles using the category filter for single article menu item type
    Figure 4-12. List of articles using the category filter for single article menu item type
  7. Leave the Link field alone unless you really know what you are doing. It will be automatically populated for you for most menu item types.
  8. Leave the Target Window as Parent.
  9. Leave the Template Style as Use Default unless you are using a different template for specific pages.
  10. Leave the Menu Location as Main Menu.
  11. Click the Parent Item drop-down and select About as the Parent Item. This means that the Privacy Policy menu item will be a drop-down item under the About tab in the main menu.
  12. Leave the Status to published.
  13. Leave the Default Page set to No. Only one Menu Item will be Yes on your website. That menu item will be the main page that your domain directs to. Typically, this is the home page.
  14. Leave the Access to Public unless it is intended for registered users or content to display to a specific Access Level.
  15. Click Save & New to save and move on to creating a new menu item or Save & Close if complete.

It is possible to change Menu Item types. If you create a Single Article Menu Item type and then decide you want to make it Category Blog you may do so simply by clicking the Select button next to the Menu Item Type and selecting a new menu item type. Keep in mind however that the system will then erase whatever settings you had created for the original menu item type. So if you decide to go back to Single Article you will have to input your original settings again. You may want to take a screen capture of your original settings so they are easy to access and remember should you want to revert back.

You may want to use the Save as Copy button to test a new menu item type before changing menu item types. Just remember that whichever you choose, you may need to change the alias and title so that the original title and alias is reflected in the new menu item type that may be a copy.

We have left most all of the settings alone while creating this basic structure of the site. The reason for this is because once we change our template, the look and feel will change. After we have the template we are going to use installed and configured, we will be better able to decide how we want things to display. Adding content to the articles may also change what we want to display and how. Just getting the basics in place helps us. Then we will go back and fine tune.

Category Blog Layout

Blog, About, and Testimonials are our next Menu Item types and they are all going to be Category Blog Menu Item types. We will configure each one differently so that you can see the flexibility of this Menu Item type.

We are going to skip some aspects of the Menu Item settings and leave them as we could write an entire book just about menu items if we were to go through every field. Hovering over any field will provide you with a tooltip describing what that field does.

Note

Global settings for some parameters of the Category Blog layout can be found in the Global Article Options which we cover in Joomla Pet Center Article Options Hierarchy.

Hands-on Exercise: Category Blog

We’ll start with our Category Blog menu item for our Blog. Start by having a Menu Manager: New Menu Item up on your screen.

  1. Enter the Title, in our case, the title is Blog.
  2. Leave the Alias blank. For more information on how to work with the alias field, see SEF URLs.
  3. Click the Select button for the Menu Item Type.
  4. Click the Articles accordion and then click the Category Blog menu item type. (Figure 4-13.)

    Select category blog from the articles accordion to choose the menu item type
    Figure 4-13. Select category blog from the articles accordion to choose the menu item type
  5. Choose the appropriate category from the Choose a category field. We will choose the category Blog which will include all our nested categories within the Blog category.
  6. Leave the Link field alone unless you really know what you are doing. It will be automatically populated for you for most menu item types. It just states what the internal link will be to that menu item minus the Itemid parameter.

    Warning

    Changing the default value can cause broken links and unexpected results if you’re not sure how Itemid parameters work.

  7. Leave the Target Window as Parent for most cases.

    Note

    As a guideline, if you are linking to a page on the same website, you should open it in the Parent window (which refers to the browser window or tab you are currently viewing). If you are linking to a different website, you should almost always open that page in a new window so you don’t take the user away from your website.

  8. Leave the Template Style as Use Default unless you are using a different template for specific pages.
  9. Leave the Menu Location as Main Menu.
  10. Leave the Parent Item as Menu Item Root. This means that it will be a parent menu item having a main “tab” or “button” in the main menu. If it was to be a drop-down item (a child item), then clicking the drop-down of the Parent Item will give you the opportunity to select which parent item to have the new item drop-down under.
  11. Leave the Status to published.
  12. Leave the Default Page set to No. Only one menu will be Yes on your website. That menu item will be the main page that your domain directs to. Typically, this is the home page.
  13. Leave the Access to Public unless it is intended for registered users or content to display to a specific Access Level. See Figure 4-14 to see the Details tab.

    Category Blog detail tab for Joomla Pet Center blog
    Figure 4-14. Category Blog detail tab for Joomla Pet Center blog
  14. Click on the Blog Layout tab.
  15. Enter the following and see Figure 4-15 to see the Blog Layout fields of this tab.

    • 1 in the Leading Articles field
    • 4 in the # Intro Articles field
    • 2 in the # Columns field
    • 10 in the # Links field

      Category Blog Layout tab for Joomla Pet Center blog
      Figure 4-15. Category Blog Layout tab for Joomla Pet Center blog
  16. For now, leave the rest of the fields to read Use Global. We will go over what this means in Chapter 5.
  17. Click Save & New to create another menu item or Save & Close if you are done creating menu items.

What we have done in this menu item is tell the Blog menu item to show 1 Leading Articles in its entirety. We want 4 articles to show only the Intro and then folks can “Read more” by clicking on the title or the “Read more” button. At the bottom of the main Blog page, there will be a list of up to 10 links to additional articles in the Blog category or any of its nested categories.

The About Category Blog menu item will be created the same way as the Blog menu item except we’ll choose About as the category and in the Blog Layout tab we will select the following:

  1. # Leading Articles = 3
  2. # Intro Articles = 0
  3. # Columns = 1
  4. # Links = 0

This will cause the articles for Helen, Diana, and Mark to appear one after another in their entirety on the about page of the website.

We’ll do it again with the Testimonials Category Blog menu item by choosing the Testimonials category and clicking the Parent Item drop-down and selecting the About category. In the fields on the Blog Layout tab we will choose the following:

  1. # Leading Articles = 0
  2. # Intro Articles = 100
  3. # Columns = 3
  4. # Links = 0

This will create a display that appears to be three columns of testimonials. We want them all to show so we have set the number of Intro Articles pretty high and said to display zero links.

Category List Menu Item Type

The How to Menu Item we will set up differently as typically people who are interested in cats don’t want to see How to articles about dogs. This is a change from the original spreadsheet we did. A Category List menu item type will be ideal for this area of the site so that people can easily find the How to article that mean the most to them.

We’ve created the menu item similarly to the Category Blog except selected Category List from the Articles accordion for the menu item type.

We have left it entirely default for now. Once the template is installed, we will be able to fine tune it and get it looking the way we want it to look displaying the correct information.

Mastering Backups

We have added a lot of information to our site now. Before we install our template, we want to take a backup of our website and the database.

Note

It is highly recommended to run a backup of your site before you install or uninstall any extension, do any update or after you do any work on your site. If an unlikely problem were to occur, you would need to either start over or restore an earlier backup and have to do your work over again. Backup!

The easiest way to run a backup of your site and database is with a brilliant extension called Akeeba Backup. Jenn (and thousands of others) is extremely impressed with the developer of Akeeba Backup as a result of his witty sense of humour, excellent documentation, stellar products, and brilliant mind.

Thanks to the new Install from Web feature of Joomla 3.x, we can install Akeeba Backup from the Extension Manager.

  1. Click on Extensions in the top menu and then on Extension Manager.
  2. You will see a blue bar across the top of the screen with a button to Add “Install from Web” tab.
  3. Click that button and wait while the system installs the appropriate plugin to add the Install from Web tab. You will now see a list of categories and a number of pretty, colourful icons for different popular extensions from the Joomla Extensions Directory (JED). Being that Akeeba Backup is one of the most popular if not the most popular Joomla extension available, it will be listed on one of these boxes. Scroll down until you find it.
  4. Click on the Akeeba Backup Core box. Core implies that it is the non-commercial (aka “free”) version of Akeeba Backup.
  5. You will now see the rating, what version of software, the type of extension (component, module, plugin) and buttons for download, directory listing and developer website.
  6. Click the Download button and you will be taken to the appropriate page of the Akeeba Backup website to download the Akeeba Backup package.

    Warning

    The Install from Web feature giving you access to extensions from the backend of your website is not something that should make you feel safe. You still need to do research on extensions and only install the extensions you need on your website. If you install an extension you do not need, uninstall it immediately (after taking a backup). Any extension installed needs to be maintained and updated. Extensions (scripts) not being updated are one of the top reasons that sites get hacked. See Chapter 14 and Appendix C for more information on extensions.

  7. Once you download the latest stable version of Akeeba Backup and save it to your computer, go back to your Extension Manager.
  8. Click on the Upload Package File tab.
  9. Click the Browse button and navigate to where you saved the Akeeba Backup package and double click on it.
  10. Click the Upload & Install button.
  11. When complete, you will see the Installing component was successful message. See Figure 4-16. It is highly recommended that you spend some time watching his videos and reading the documentation for Akeeba Backup and how to restore backups. The documentation is so thorough that it isn’t necessary to cover it here. He’s done better than we ever could.

    Akeeba Backup installing component was a success screen
    Figure 4-16. Akeeba Backup installing component was a success screen
  12. Click on Components and on Akeeba Backup.
  13. Since this is our first time accessing Akeeba Backup, it wants to run us through the configuration wizard and make sure we know a few important things. Leave the two boxes checked to run the configuration wizard and update all profiles to ANGIE. Then, read all three boxes under Mandatory Information and be sure you understand them. It is very important!
  14. When complete, click Apply these preferences.
  15. Akeeba Backup will perform a bunch of scans and do its magic to configure itself on your server. Do not browse away from the page while processing.
  16. You will see a “Finished” message and from here you can click the Backup Now button.
  17. On this screen, you can simply click the Backup Now button or you can enter a note in the Backup comment field. In our case we will type “before template install.” This comment appears in our Manage Backups tab of the extension and can be helpful.
  18. Click Backup Now and the site will backup. Do not navigate away from this page until it is complete.
  19. When complete, use an FTP client such as FileZilla and copy the backup file off the server and onto your local device or an external drive or DVD. The default location of the backup file is public_html(httpdocs)/administrator/components/com_akeeba/backup. You very well may and should have your default backup location be elsewhere, yet that is the default location until you do.
  20. After you have downloaded your backup file off of your server, make sure you delete the backup file from your server. If someone gets ahold of your backup, they can find ways to hack your site easier. Don’t keep backups on your server!

Note

A backup is useless unless you test that it restores. Thus, it is recommended to create a subdomain or subdirectory on your server and test restoration of your backup. Full documentation can be found at Akeeba Backup.

Note

With the Pro version of Akeeba Backup, there are many more features including automated backup and storage in an external location like Amazon S3. This is highly recommended. As humans, we have great intentions of keeping our site regularly backed up and then guess what? It doesn’t happen. The Pro version is worth every penny.

Now that you have your backup, we can safely install the template.

Template Parameters

We’ve decided on the Afterburner2 template by RocketTheme. The first step is to download the package from RocketTheme’s website. We are downloading the Afterburner2 Template bundled with Gantry. You may be using a different template company or a custom template. Once you have the package (typically a .zip file format) follow these steps to install your template:

  1. Login to your backend administrator Control Panel.
  2. Click on Extensions and then on Extension Manager.
  3. Click the Browse button and navigate on your computer to where you saved the template installation package and select it. This will fill in the file name to replace the No file selected text.
  4. Click the Upload & Install button (Figure 4-17) and wait for the success (or failure) message (Figure 4-18).
After selecting the file package, click the Upload & Install button
Figure 4-17. After selecting the file package, click the Upload & Install button
Success message after installing the template package
Figure 4-18. Success message after installing the template package

With our template installed, we will now set it to be the default template and set up the parameters for it.

  1. Click on Extensions and then click on Template Manager.
  2. Click the button with the star to the right of the Style called Afterburner2 - Default. This action makes the Afterburner2 template the default template for our website (See Figure 4-19).
Set Afterburner2 as the default template
Figure 4-19. Set Afterburner2 as the default template

At this point, we can go to the frontend of our website and see the structure we have planned and built thus far. See Figure 4-20.

Frontend of Joomla Pet Center after installing template and setting it to default
Figure 4-20. Frontend of Joomla Pet Center after installing template and setting it to default

There are several things we want to change and customize in the template for Joomla Pet Center. We want to change the logo, the “Designed by RocketTheme” in the footer, and we will change the color from the pink accent color to a lovely green.

We make these changes in the parameters of the template. From the Template Manager, click on the Style Afterburner2 - Default to access the configuration of the template. Upon entering, you will see the Overview tab. See Figure 4-21.

Overview tab of the Afterburner2 Template
Figure 4-21. Overview tab of the Afterburner2 Template

The overview tab gives you just that - an overview of the template and the Gantry Framework that the template runs on top of. There are links to get more help and a notification as to whether the installed version of Gantry needs to be updated or if it is up to date. For more on third-party extension updates, see Updating Third-Party Extensions.

There are further tabs for the Afterburner2 configuration. They are:

  • Style
  • Features
  • Menu
  • Layouts
  • Advanced
  • Assignments

Each template company has a different way that their template will allow you to make changes to the parameters of the template. We will be going through each of our tabs and changing what is required to give us the look and configuration we are looking for on Joomla Pet Center. You will want to do the same thing with your template. The template company should have documentation and tutorials to assist you through making the template “your own.”

The Style Tab

The Style tab starts with the ever important logo. Currently, the template is pulling the Afterburner2 logo and we want it to pull our logo instead. To do this, we need to have our logo image uploaded to the site in the Media Manager. We will be covering media in detail in Media Manager, yet for now, we want to see our logo on the site.

  1. Click Close in the Template Manager / Edit Style screen (unless you have made changes in which case click Save & Close).
  2. Click on Content and then on Media Manager. By default, you will see a screen like Figure 4-22.

    Media Manager screen in thumbnail view
    Figure 4-22. Media Manager screen in thumbnail view
  3. Create a new folder for logos by clicking the Create New Folder button in the top toolbar as seen in Figure 4-23.

    Add a folder for logos in the Media Manager
    Figure 4-23. Add a folder for logos in the Media Manager
  4. Click on the new logos folder just created.
  5. Click the green Upload button in the top toolbar.
  6. Navigate on your computer to where your logo file is located and select it.
  7. Click the Start Upload button.

Now we’ll go back to our template parameters by clicking Extensions and again on Template Manager. Select the Afterburner2 template and then click the Style tab.

We will be making a number of changes to this tab to address the logo and the accent color.

To change out the logo:

  1. Leave the Show to On.
  2. Leave the Position to top-a.
  3. Click the Type dropdown and select Custom. This creates a new line where you can select your logo that was just uploaded to the Media Manager.
  4. Click the Select button which will open a new window in a popup box with the folders and files in your Media Manager.
  5. Scroll down to your folder called logos and click on it.
  6. Click on the logo file you just uploaded which will force the Image URL to appear below in the Image URL field.
  7. Click the blue Insert button. See Figure 4-24.
Insert your own logo to the template
Figure 4-24. Insert your own logo to the template

Note

Some templates will require you to create a Custom HTML module to display your logo. If this is the case with your template, simply create a new Custom HTML module as described in Hands-on Exercise: Create Custom HTML placeholder modules and insert an image as described in Hands-on Exercise: Adding Folders and Uploading Images from the Editor. To hyperlink the image of your logo, follow the directions in Hands-on Exercise: Hyperlinking an Image.

Now the rest of the parameters on the Style tab:

Header Style: Leave as Dark. You may want to change it to light if your logo has dark text that wouldn’t otherwise show up on a dark background. The light header style will create a different look that might be preferable to you.

Menu Style: Leave as Light. You may want to change it to dark or grey. This is all a matter of preference.

Footer Style: Leave as Dark. Same as above on personal preference. Image background colors may dictate how you want this to appear.

Link & Accent Color: Click the color swatch to the right of the hex code field to use the color picker provided. You may also directly enter a hex code into the field. See Figure 4-25 as an example.

Using the color picker to change the accent and link color in the template
Figure 4-25. Using the color picker to change the accent and link color in the template

Note

Browsers such as Chrome and Firefox both have add-on tools that give you the ability to grab hex codes from web based sites or images. These can be great tools to find the exact color of a hue in your logo or other resource. ColorZilla is an example of one of these tools for Firefox.

Font: Here you can choose from the drop-down many of the standard fonts and a plethora of Google Fonts.

The Figure 4-26 shows how the Style tab looks after our changes.

Style tab completed parameters
Figure 4-26. Style tab completed parameters

Now let us take a look at the frontend with our new settings in Figure 4-27.

Frontend of Joomla Pet Center with logo and color changes
Figure 4-27. Frontend of Joomla Pet Center with logo and color changes

The logo and color looks good. As you can see, there is a green dot under our logo. This is the CSS from the template pulling that dot through. We don’t want that there so we’ll need to find the CSS code that makes it appear and alter it so that the dot doesn’t appear on our template.

Using a Firefox add-on tool called Firebug, we’ll inspect the element to find the applicable code. Chrome also has an Inspect Element function by right clicking and choosing Inspect Element from the menu.

Firebug creates a panel under the website that shows the code and CSS of the website. When we inspect element over the logo area, we can see in Firebug that it shows us the applicable code that creates the style of the logo including that circle which is called <span id="rt-logo-accent"> </span> in Figure 4-28. That is what we need to see so we’ll click on that span line.

Firebug inspecting the logo area to find proper CSS code to change
Figure 4-28. Firebug inspecting the logo area to find proper CSS code to change

In Figure 4-29 we can see the CSS code on the right. If we change the height to 0 the dot disappears and that’s what we want. Another way to state this is display: none;. We will copy the code from Firebug and create a template override file to make this change permanent.

CSS code for the green dot that we do not want
Figure 4-29. CSS code for the green dot that we do not want

Note

Changes made in Firebug or in Chrome’s Inspect Element function are not permanent changes. They show you what your changes would look like before committing them. Once you refresh, your changes will not appear anymore while making changes in Firebug.

Template CSS Overrides

Many template companies have specific files that changes to the template CSS can be placed into. Benefits to this are many scored:

  • One place to make changes
  • Won’t be affected by template updates
  • Often, CSS changes desired for other extensions can be added to the template overrides which then wouldn’t be affected by extension updates
  • We won’t forget that we changed the individual files because we didn’t

To create an override file for RocketTheme templates we will follow these steps:

  1. Click on Extensions and then on Template Manager.
  2. Click on Templates in the left sidebar.
  3. Scroll down and select the Afterburner2 Details and Files
  4. Create a new .css file by clicking New File from the top toolbar
  5. Select the folder css.
  6. Select the File Type css from the dropdown.
  7. Name the file rt_afterburner2-custom.css.
  8. Click the blue Create button. See Figure 4-30.

    Create a new CSS file
    Figure 4-30. Create a new CSS file
  9. Navigate to the file on the right sidebar and place the following code into the file.

    #rt-logo-accent {
        display:none;
    }
  10. Click Save & Close and refresh the frontend.
  11. Using FTP, copy this new file onto your local device so you have it as a backup in case it is needed in the future.

With our code in our overrides file in place, the green dot is gone.

We could have gone into the logo.php file and erased the line for rt-logo-accent except the problem with that is that any template update would put the green dot back. Using the CSS override file, we avoid future problems.

Templates that operate on top of a framework will almost always have some kind of override file system. Look for documentation from your template company or search in their forums.

Remember that if you want to change something in your template, chances are good someone else has wanted to as well. Search for what you want to do and you will likely find the answer without even asking. All you will have to do is read.

Features Tab

The Features tab is where we can change the Copyright, change the module position, turn off the System Messages, or add our Google Analytics tracking code.

We are going to leave everything default on the Features tab except Designed by RocketTheme. That we will change to © 2014 Joomla Pet Center. All rights reserved. This field takes HTML so if we wanted a line under the copyright, we could add it with a break. Perhaps something like:

© 2014 Joomla Pet Center. All rights reserved.<br />Built by Jenn & Ron

This would appear as:

© 2014 Joomla Pet Center

Built by Jenn & Ron

Save the new settings. The completed Features tab looks like Figure 4-31.

Features tab of template for Joomla Pet Center
Figure 4-31. Features tab of template for Joomla Pet Center

The frontend of the site reflects our new copyright in Figure 4-32.

Joomla Pet Center copyright in the footer of the template
Figure 4-32. Joomla Pet Center copyright in the footer of the template

Menu Tab

In the Menu tab, you can control the menu type and what menu is being pulled. We are leaving them all as default as can be seen in Figure 4-33.

Menu tab of the template for Joomla Pet Center
Figure 4-33. Menu tab of the template for Joomla Pet Center

You can select Split Menus in the Menu Tab by choosing it from the drop-down. A split menu eliminates the drop-down for child menu items (submenu items) and instead only shows the parent menu item in the main menu bar. Once the parent menu item is clicked, a secondary menu appears in the module position chosen in the Menu Tab of the Afterburner2 template parameters.

Layouts Tab

There is extraordinary flexibility with the Gantry Framework and that becomes quickly apparent in the Layouts tab. See Figure 4-34.

Layouts tab in Afterburner2 template
Figure 4-34. Layouts tab in Afterburner2 template

Most templates for Joomla operate with a 12 grid system. Modules and the main content area can be set to span a specific number of columns of the 12 grids available. This creates a lot of flexibility to have your layout display the way you want it to.

We’ve left everything default except the MainBody Positions. We know that we are going to have sidebars. In order to accomodate this, we needed to change the configuration.

  1. Click the number of Positions. We selected 3 so that we could have a sidebar a (sa), a mainbody section (mb), and a sidebar b (sb). If a sidebar is not in use, it will collapse. This gives us a lot of flexibility.
  2. Click, hold and slide the slider below the positions to determine the ratio of space for each position. This can be changed as the design takes shape.
  3. Click Save.

Advanced and Assignments Tabs

We are going to leave both the Advanced and Assignments tab with their default settings. You are welcome to change them. Feel free to read more Rockettheme documentation.

Assignments come into play if you wanted a different look and feel to appear on different pages. This is a powerful feature that is beyond the scope of this book - yet, very cool. You can create different variations of this template and have them appear on different menu items by using Assignments.

Click Save & Close when complete.

At this point, the basics of your template are configured and your site should be looking pretty good. We will get to further customizing of content in Chapter 5.

Creating Modules

Modules provide a sort of window into your content, displaying it in small, customizable blocks or boxes. Modules are usually positioned in the left and right columns of a web page but they can be just about anywhere you want. Joomla comes with a number of default modules types that show you the most recent news items, a login form, breadcrumbs, or an advertising banner. Third-party extensions provide options do a whole lot more.

At this point, you should have a few menu items created (see Creating Menu Items if you jumped ahead) as a prerequisite for getting your modules to appear.

Module names and their positions are determined by their location in your template. If you’re using the default Protostar template and you installed the sample data, you already have a few modules in various positions set up on the frontend of your website.

The Module Manager provides an overview of your modules, their positions in your template, type of module, and status (see Figure 4-35).

The Module Manager
Figure 4-35. The Module Manager

In the Module Manager, you can reorder modules when you have more than one module in the same position by dragging and dropping into the desired order. See Ordering Modules for more detail.

Note

As your site grows, you’ll end up with a lot of module positions and finding them can be tough. Have you ever looked at a module and wondered which position it was in? Here’s how.

To enable the preview of module positions (this function is disabled by default):

  1. From the backend, click on Extensions and then on Template Manager.
  2. Click on the Options button at the top of the screen.
  3. Click Enabled for Preview Module Positions.
  4. Click Save & Close.
  5. Click the eyeball icon at the left of the template title to view the preview of the module positions available for that template.

On the frontend, just add the tp parameter with a value of 1 on the end of the website URL. An example of that would be: http://www.<yourwebsite>.com/index.php?tp=1

That’s it. Now you can see the module types and positions from the frontend of your site.

Placeholder Custom HTML Module

We know that we will have modules on our site based on our layout seen in Figure 2-6. Since we don’t have our extensions installed yet and we haven’t yet learned how to create content and manage images (this will be in Chapter 5), we are going to create a few placeholder modules so that the layout of Joomla Pet Center can take shape.

The module positions for the Afterburner2 template can be found on RocketTheme’s demo website. Once we select the Afterburner2 template, we can navigate to the module positions page of the demo to see what module positions are built into the template for us. In our case, these module positions are available.

The Afterburner2 template is a free template. Free templates often have less functionality than paid templates and this is the case with Afterburner2. Afterburner2 doesn’t have as many module positions as do RocketTheme’s Club templates. We are going to make it work as there are still many module positions to choose from.

The Top module positions are going to be utilized by our logo and our RSS module. The menu bar occupies the Header positions so we are unable to use it for additional modules.

Note

More than one Module can be used in the same Module Position as they can stack or be side-by-side. We are not choosing to do so because of aesthetics. You will need to try different positions of your template out in order to achieve the layout you are happy with.

We will have our gallery occupy the Breadcrumbs module position. This is not normally a position we would use for a gallery, however since we are low on positions and breadcrumbs are not necessary on the home page, we will use it. See Adding an Image Gallery for how to create a gallery.

Our three calls to action we will place in the module positions Content Top and use content-top-a, content-top-b, and content-top-c.

We will use the Sidebar position sidebar-b for our newsletter (see Getting the Word Out with a Newsletter) and other modules.

The Bottom positions will house our social media modules. See Chapter 12.

We will create placeholders for each of these modules.

Hands-on Exercise: Create Custom HTML placeholder modules

Creating placeholder modules is generally the same process no matter which type or in what position. Since all we want is to place a little text in a module as a placeholder, a Custom HTML Module is the perfect type of module for this purpose. A Custom HTML Module is also good for pasting a bit of HTML code on your site outside of the main content area. This module allows to you paste any text, image or HTML you want and have it show up in a module position. To create a Custom HTML Module:

  1. Click on Extensions and then on Module Manager.
  2. Click the New button in the top toolbar.
  3. Choose the type of module you want to create, in our case we will choose Custom HTML (see Figure 4-36).
Selecting the Custom HTML module type
Figure 4-36. Selecting the Custom HTML module type

In the Module tab:

  1. Enter Gallery as the module title (show or hide the title on the right sidebar) and choose a Position from the drop-down. We will create a placeholder for the gallery in the breadcrumb position.
  2. Change Status to Unpublished if you don’t want it to appear at this time. (You may also Trash the module with the Status drop-down).
  3. If you desire your module to turn on or off automatically, set the Start Publishing and Finish Publishing date and time.
  4. Choose the Access level if different from public.
  5. Select your Language if different languages are being utilized on the site.
  6. Add a Note which will appear in the Module Manager list if desired.

See Figure 4-37 for how our placeholder looks with the Module tab filled out.

Custom HTML module tab
Figure 4-37. Custom HTML module tab

Note

If your desired module position isn’t in the position drop-down, you can create one on-the-fly by just typing the name in.

You can also type the name of a module position directly in to save time scrolling through the drop-down as it shows the positions for all loaded templates in the template manager. You may also want to uninstall unused templates from the template manager so that module positions are faster to select from the list.

Adding a note into the Notes field for a module will help clarify what a module might be if the title is obscure. Notes are a great way to make your life easier in the future. You could add a note like home page advertisement or contact page sidebar. Use whatever makes it easier to find the module as sometimes the titles don’t always make sense when editing or aren’t shown on the frontend.

In the Menu Assignment tab:

In order for your modules to appear on your website, they must be associated with one or more Menu Items. Since Menu Items essentially point to pages on your site, you’re deciding which modules will show up on which pages. To assign a module:

  1. In the Menu Assignment tab (Figure 4-38), leave the Module Assignment to On All Pages to have the module show up on all pages. Select No Pages to have the module be hidden. Choose Only on the pages selected to choose specific pages for the module to appear on. Or choose On all pages except those selected to have the module publish on all pages except the ones checked.
  2. We will only be showing the slideshow on the home page. We will select the option Only on the pages selected which brings up a list of all menu items on the site.
  3. Uncheck all boxes except the Home menu item by deselecting all other menu items or clicking the link None at the top and then only ticking the Home box. Check out Figure 4-39 for how this looks.
  4. Click Save to save the module and stay on the screen. Click Save & Close to save and go back to the Module Manager list.
Menu Assignment options for modules
Figure 4-38. Menu Assignment options for modules
Module published only to the home page
Figure 4-39. Module published only to the home page

Note

If you were to use the Only on the pages selected Module Menu Assignment, then as you add articles to the menu, you would also have to go into each module and select the menu item in the Module Menu Assignment for each module you want to appear on your new page. It’s a real time saver and a real confusion saver if someone besides you is adding pages but doesn’t have the permissions to edit modules.

The great thing about On all pages except those selected is that as you add pages to your menu, modules will automatically publish on them with this option selected…except on the pages that are checked.

Within the Menu Assignment tab, you can save time by using the Select: All, Select: None, Expand: All, Expand: None either at the top of the Menu Selection or the drop-down arrow button next to the menu name and checking the Select or Deselect check boxes to check or clear all menu items in that menu with a click.

In the Advanced tab:

  1. Enter a Module Class Suffix in the Advanced Options tab if you want to apply specific CSS styles to this module. Module Class Suffixes are appended to the normal module CSS class. If you have an off the shelf template like we do, the template designer may have included alternative color schemes, borders, and styling for modules that are activated by adding one of the available Module Class Suffixes in the template demo. If you are using a custom template, you will need to check with your template designer as to the suffixes available to you.

    Note

    It is important to note that a leading space before a suffix leaves the pre-programmed CSS class intact and adds an additional class so that two sets of CSS rules apply. A suffix without a leading space causes the existing class to be renamed so that a different set of rules apply.

  2. Afterburner2 has a number of module suffixes with the main style suffix as box1. For the purpose of the slideshow placeholder, we will not use a suffix.
  3. Click Save to save the module and stay on the Edit Module screen. Click Save & Close to save and go back to the Module Manager list.

Hovering over any of the titles in the Advanced tab will tell you what each field is for. Module Class Suffix is the most frequently used field in the Advanced tab.

See Figure 4-40 as an example.

The advanced tab of a Custom HTML module
Figure 4-40. The advanced tab of a Custom HTML module

Depending on which type of module you created, you’ll have a few module-specific options available. Go ahead and play around with the options, choosing the ones that best fit your needs, and see how they affect the module on the frontend of your site.

Ordering Modules

Ordering modules in the same module position is a breeze in Joomla 3. From the module manager, use the position filter to display the position you want to order. Click the up/down arrows at the top of the first column on the left to activate the ordering function. Then simply drag and drop the modules in the order desired. Love it!

Duplicating Modules

Being that we are creating a number of placeholder modules, we are going to simply duplicate our modules and change the following items on each so that they appear on our frontend.

  • Title
  • Module Position
  • Show Title
  • Text in the description
  • Notes field
  • Menu Assignment
  • Add a Module Class Suffix if applicable

Duplicating modules is also very helpful if you have modules with a lot of customizations and you need more than one. You can save a lot of time by duplicating them. To copy a module:

  1. From the Module Manager, click the checkbox next to the module name you want to duplicate.
  2. Choose Duplicate from the top toolbar. See Figure 4-41.
Duplicate a module
Figure 4-41. Duplicate a module

Your new copy will be saved with the same title and “(2)” added (e.g. a new copy of Gallery Placeholder will be named Gallery Placeholder (2)). Your new module will be unpublished by default.

You can then go into the module and change the title and other specifics to make it appear on the proper pages and publish it to the frontend according to our list as previously stated in this section.

We have created the rest of our placeholder modules (See Figure 4-42). One of the top reasons to create placeholders is so that as we create content, we have a proper idea of layout in the design. If you think you might have a sidebar, adding a placeholder for it is a wise move. It may determine the optimum or maximum width for images that you place in articles.

Placeholder modules in the module manager
Figure 4-42. Placeholder modules in the module manager

Deleting Modules

Ultimately, we will be deleting some of our placeholder modules. Here are the step by step instructions on how to delete modules.

If you make a mistake or create a module you no longer need, you can simply delete it. To delete a module:

  1. Click on Extensions and then on Module Manager and click the checkbox next to the module name you want to delete.
  2. Choose Trash from the top toolbar.

Note

You can still access trashed modules by choosing Trashed in the Status filter drop-down. You may restore or permanently delete modules from the Trashed module list.

Frontend Layout after building the structure

See Figure 4-43 and Figure 4-44 for how our site looks after the work we have done in this chapter.

Home page layout with articles, menu items and modules
Figure 4-43. Home page layout with articles, menu items and modules
Interior page layout with sidebar modules
Figure 4-44. Interior page layout with sidebar modules

Now that you have gotten this far, it is time to run a backup. See Mastering Backups and remember to do backups regularly, not to keep backups on your server, and that a backup is only good if you are sure it can be restored.

Next we will rock on and work with the content and fine tune the site further.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required