11. Practical Application: Joomla! for Business

Free and open source software (FOSS) is good for businesses on a number of levels. Initially, the greatness comes from the price point. Low or no cost can make a difference in the overall bottom line of a business. The other advantage is in terms of support. Most FOSS software projects have communities of users and developers who can support the user base. Joomla! is an excellent example of how a FOSS software community creates, distributes, and supports a software project. Because Joomla! is open source, at any time you can view, edit, and add to the source code to suit your own purposes. You also can hire someone to do that for you.

The other advantage to business that Joomla! offers is the number of extensions that are available that extend Joomla!’s functionality, ranging from full-blown e-commerce to client/customer management or data gathering and tracking. This chapter will look at a few practical applications for business and examples of extensions that they would use.

Basic Planning of Business Sites

The basic principles for creating a business site are simply variations of those for any site. First, think about what the purposes of your site are. Some may be immediate, and some you may want to develop over time as your site evolves. Speak with customers and staff about what they would like in a site in terms of information and interaction. Try to put yourself in the position of a potential customer and think about what information you need.

It is also worth reviewing what information systems your company is using currently, whether Web based or not, and considering whether their use could be enhanced through some integration with your Web site. A system for managing business leads that are linked with contacts that come in via your site would be a good item to consider for integration. Also consider your business’s social media presence and how that can be strengthened. If it doesn’t have a social media presence, creating this site will be a good opportunity to implement one.

As you begin to work on the site, gather materials such as stationery, brochures, flyers, and advertising so that you can ensure that all of these along with your site have consistent and strong branding and messaging.

Finally, while planning your site, make sure to consider the time and effort it will take to maintain a complex site along with the potential benefits. Our experience tells us that it is better to start small and manageable and then expand the site over time in a way that makes sense financially, and in terms of the ability of your team to devote the time necessary to manage the site.

Brochure Sites

Out of the box without any extensions, Joomla! is very useful to use for a brochure Web site. Brochure Web sites are basic sites that mimic the information that a business would put in a physical paper brochure for distribution or mailing. They usually contain pages such as the home page, an About Us page, a contact information page with a contact form, and descriptions of services offered or examples of work; and it is always a good idea to have a page or more with client referrals and testimonials. Brochure Web sites can also allow you to have your online catalog available for people to browse or download, as well as specific information to direct new customers to offline purchasing such as store locations and travel directions.

The Joomla! Community Showcase shows some excellent examples of brochure business Web sites (http://community.joomla.org/showcase/sites/business).

Extending Joomla!: Some Extensions to Consider for Business

Some extensions to think about for a simple brochure site (some may be repeats of the basic suggested extensions from Chapter 6) are covered in this section.

Extending Brochure Elements

Very Simple Image Gallery

Very Simple Image Gallery is an easy-to-use picture gallery that allows you to put small picture galleries inside content items through the use of a plugin. It is a great tool to use to show a portfolio of work or to showcase products. The plugin works by inserting all the images in a specified directory (a folder in your images directory) in an easy-to-view layout.

The directory should be the name of the folder that contains the images you want to make into a gallery. Once you have uploaded the photos to this folder, the plugin automatically creates and lays out a very simple-to-navigate and pleasing photo gallery.

The developer’s site has very good documentation on how to use the plugin as well as the different configuration options.

aiContactSafe

Joomla! installs with a basic contact form that will meet the needs of many users, but some businesses will want forms with additional fields and options (such as sending to multiple users) and the possibility of automatically logging messages in the database in addition to e-mailing them. You may want a contact module or a plugin that allows contact forms to be embedded in articles. There are a large number of enhanced contact form and simple form extensions for Joomla! that will enable you to do this. aiContactSafe is a well-established extension that includes options for additional fields, logging, review of messages by front-end users, a contact module, and spam prevention along with other features.

Social Media

Social media—applications such as Facebook, Twitter, Flickr, GooglePlus, and LinkedIn—are at the core of how the Web is changing, and most businesses will want at least some social media integration. This might just be a list of Facebook friends or your latest tweets, or it might be a more complex integration, such as allowing users to log in to your site via their social media accounts, automatic promotion of your site content on social media, and the creation of a social media presence that is designed to seamlessly integrate with your site. One reason that these Web sites are so successful is that they make it very easy to integrate their content with your site and vice versa. Often you can simply copy and paste a bit of code into a Custom HTML module to instantly provide integration. However, there are literally dozens of Joomla! extensions that allow you to do this in enhanced ways. We list a few here, but it is well worth spending some time exploring the options available in the Joomla! Extensions Directory.

NewContent Tweeter

NewContent Tweeter is a commercial extension that will update your Twitter account with an article’s title and a link to the article when a new article is published on your site. This is also a great time-saver in terms of marketing your site to social media. The developer has very good documentation and support channels to contact for assistance with the extension.

JJ Tweets

JJ Tweets will display your latest tweets in a module. It has simple configuration options and allows you to display Twitter conversations in interesting ways.

Facebook Like Box

Facebook Like Box can add a number of Facebook options to your site such as a like box, a feed of your Facebook updates, or both. It is highly configurable and able to be styled to suit the available space you have on your site. The developer offers documentation on how to set up the module.

myApi

myApi is a full Facebook integration system for your Joomla! Web site. It takes advantage of numerous Facebook APIs (Application Program Interfaces) to create a seamless, highly customized, unified Facebook presence using Joomla! If Facebook is central to your business vision, this kind of integration can be extremely powerful, although of course it is much more complex to implement than simple items such as a like box.

JFBConnect

JFBConnect is a commercial extension that provides strong integration of Facebook and Joomla! and also allows that integration to work with various other Joomla! extensions.

E-commerce Web Sites

There are many reasons to have an e-commerce Web site. It allows your Web visitors to browse your products or merchandise and purchase immediately. For some retailers, online e-commerce has removed the need for a traditional bricks-and-mortar storefront, reducing their business overhead costs, while for others it has opened up sales to a worldwide market to supplement their sales from their physical location.

Joomla! has a number of options available to expand your Web site into an e-commerce site. It also has the ability to bridge or connect with any number of stand-alone online shopping carts and e-commerce solutions.

One of the first things you should think about before setting up your online shopping cart or e-commerce option is how you will accept payments online.

Which Payment System Is Right for You?

If you already have a traditional physical location, you most likely already have a merchant account through your bank or financial institution. Your bank or financial institution should be able to advise as to whether there are any steps you need to take regarding accepting online payments and whether there are specific rules for online transactions or a specific set of transaction fees.

Fees are a big factor in the decision about which payment system to use. Some systems charge either a fixed rate per transaction or a percentage of the transaction total, while others charge a monthly fee, and still others charge both transaction fees and a monthly fee. Make sure you understand exactly how much money the processing company gets and how much you keep. Fees can make or break a new business in terms of profitability.

Merchant accounts work by depositing the money directly into a bank account. This can be advantageous to new businesses that may be running their finances tightly. The more quickly the money is in your bank account, the more quickly you can access the funds. Because these funds go directly into your bank account, they are generally more secure, especially in the United States where bank accounts are insured by the FDIC. On the other side of the equation are payment processors that are not associated with banks, such as PayPal. With these sorts of accounts, your money is held by the payment processor until you transfer it to your bank account, which can take a number of days. Also, payment processors not associated with banks are not insured. A bonus to online processors like PayPal is that they are easy to set up, they accept a variety of payment types and currencies, and you can use your account for purchases at various online stores yourself.

Regardless of the payment processor or merchant account you use for your business, be sure to research how each company handles customer disputes or fraud, and be familiar with the process, including any notifications you may be required to give your customers.

Another item to note is that some online processors such as PayPal can freeze your account and block you from accessing any funds you have collected if they suspect that transactions are occurring fraudulently. It is a good idea to have more than one payment option that you can use. A backup processor is also a good idea in the event of a technical issue.

Extending Joomla!: Some Extensions to Consider for E-commerce

There are some extensions that are specifically targeted toward business use such as e-commerce or shops.

Magento

Magento is one of the most popular full-featured, stand-alone e-commerce shopping carts. Although it isn’t a Joomla!-specific extension, a number of bridges—MageBridge and JFusion are two examples—exist to tie your Joomla! site and a Magento e-commerce site together. Magento is available as a free download, and a number of customization and support programs are available. Magento also supports multistore setups.

FoxyCart

FoxyCart is a popular full-featured, fee-based software as a service (SaaS) e-commerce shopping cart. It is fully customizable with CSS and HTML and was built to integrate with various CMS solutions. Although not a Joomla! extension, it is fairly easy to integrate.

osCommerce

osCommerce is one of the longest-running open source e-commerce shopping carts. Although it isn’t a solution for inexperienced people, it does have a very large and supportive community that creates extensions and add-ons. There is a bridge for osCommerce to integrate it with Joomla!

RokQuickCart

RokQuickCart is a very simple shopping cart component that easily works with PayPal and Google Checkout. If a full-featured total e-commerce solution is too much software for the type of shop you need for your site or you have a small number of products, it is a great option. It is very simple to customize the look and feel of the cart to suit any Joomla! template.

PayPal Buttons

Another option if you already have a PayPal account is to simply create content items and place buttons created in PayPal for your items. Numerous Joomla! plugins can be used for this. There are also a number of ways to integrate a PayPal shop with Joomla!, such using the wrapping feature in Joomla!

Other Business Site Extensions

While brochure sites and e-commerce sites are some of the most prevalent types of business sites, some businesses have other needs such as client management or customer support and project tracking. Joomla! can also be used to provide intranet or extranet for your company; do scheduling, project management, document management, and contact management; and fill other common business needs.

MaQma

MaQma is a full-featured ticketing and customer support portal extension that allows you to organize your customer support with FAQs, a knowledge base, a ticketing system, and client management.

Projectfork

Projectfork is a project management extension that can be configured to work as an internal company project tracking system or as a Basecamp-like project tracking system with which clients and customers can interact. There are a number of add-ons for Projectfork as well as theme packs to integrate it with your Joomla! site.

Joomla! Business Tools

Many businesses already have servers with user accounts set up for their staff members. Joomla! Authentication Tools allows you to use that database rather than the Joomla! user system for logging in to your site. This can substantially improve the ease of use for your site by eliminating the need for multiple logins and passwords.

Many businesses find that Web-based applications provide a good way to manage lead and customer contact information. Several Joomla! extensions provide this functionality, and some also allow you to link information collected through your Web site to be integrated into enterprise resource planning (ERP) or customer relationship management (CRM) applications. For example, there are a number of ways in which your site can interact with SugarCRM, webERP, vtiger, and others by using Joomla! extensions designed for this purpose.

The Joomla! Extensions Directory also features numerous solutions for specific business sectors such as restaurants, real estate, booking, auto sales, and other specialized areas. It is well worth checking the directory for extensions designed for these. Even if they do not perfectly match what you need, the fact that they are open source and licensed under the GPL means that you can modify or adapt them as you need or pay the original developer or another professional to do the modifications for you.

Business Web Site Demo

You can visit this site at http://officialjoomlabook.com/business.

This section illustrates the creation of an enhanced brochure site using the example of a toy shop that specializes in handcrafted wooden toys.

Before beginning work on the template, we created a new image to replace the header. You can create or edit an image by using software such as GIMP or Photoshop or by using an online image editor such as Picnik. We will be using a photograph of a toy, but if you have a logo or other branding image, you would use that.

Upload the image using the Media Manager. We put the image in a folder called toyshop. Our image is called toysheaderimage.png.

Phase 1: Brochure Site

A basic brochure site will have about five pages:

• Home page

• News

• A second page with more information

• Contact page

• About Us page

Using a content management system to make this type of site will allow it to develop over time. This site uses a modified version of the Beez5 template that comes with a Joomla! 2.5 installation or the Protostar template that comes with a Joomla! 3 installation. We started by installing Joomla! with no sample data, as shown in Figure 11.1. In the Template Manager make sure that you switch to the Protostar or Beez5 template (Protostar should already be selected by default, but this could change, so make sure to check. If you switch templates they may look different.)

Figure 11.1. Front-page view of (A) a new Joomla! 3 installation with the Protostar template and (B) a new Joomla! 2.5 installation with the Beez5 template, both without sample data installed

Creating a Home Page

First, we added content. Our initial goal was to create a simple but attractive home page that gives basic information about the shop and features some of the products. For the home page, we decided to use the Very Simple Image Gallery plugin, which we downloaded from the developer and installed using the installer.

To install the plugin, navigate to the Extension Manager. Click Choose File to find the package that you downloaded from the developer, and then click Upload File & Install, as shown in Figure 11.2. You should get a success message as shown in Figure 11.3.

Figure 11.2. Installing the Very Simple Image Gallery plugin

Figure 11.3. Install plugin success message

Next, navigate to the Plugin Manager and enable the Very Simple Image Gallery plugin by clicking the red icon in the Enabled column. This will enable the plugin and turn the icon you clicked into a green check mark, as shown in Figure 11.4.

Figure 11.4. Plugin Manager screen showing Very Simple Image Gallery enabled

In the Media Manager (as shown in Chapter 4) create a folder called toys in the images folder, as shown in Figure 11.5, to hold the images to be displayed on the home page. We used eight images. We uploaded these to the folder as explained in Chapter 4 and shown in Figure 11.6.

Figure 11.5. Media Manager showing how to create a new directory for toys

Figure 11.6. Media Manager showing the toy pictures uploaded into the toys directory

We then navigated to the Content Manager. We created an article in the Article Manager with some text and {vsig}toys{/vsig}. This will insert an image gallery created from the images in the toys folder. We called this article “Come and Play.” Since this is a small site, we used the Uncategorised category rather than creating a category structure.

Going to the Menu Item Manager for the main menu, we changed the menu item type to Single Article (see Chapter 5) for the Home menu item and selected the article we created. The home page now looks like Figure 11.7.

Figure 11.7. Front-end view of the new home page

To further enhance the home page, we removed all of the article information from the page, such as the author and date, by changing the menu parameters, as shown in Figure 11.8. Note that the options you need to change will depend on the version of Joomla! you have installed and any changes you have made to the default settings.

Figure 11.8. Menu item editing options to hide the article information for a specific menu item

Most extensions have many options that allow you to manage their appearance and functionality, and Very Simple Image Gallery has many, as shown in Figure 11.9. These can appear overwhelming, but often you do not need to change many of them.

Figure 11.9. Some of the Very Simple Image Gallery plugin configuration parameters

We wanted to rearrange the small images to be in two columns on the right. Going back to the Plugin Manager, we opened Very Simple Image Gallery for editing and made these changes, as shown in Figure 11.10 (for Joomla! 2.5):

• Gallery width: 650

• Thumbnail width: 90

• Thumbnail height: 63

• Crop thumbnails: Crop

• Thumbnails are shown: Right of the main image

Figure 11.10. Very Simple Image Gallery plugin configuration parameters that were changed

After we did this, the home page appeared as shown in Figure 11.11.

Figure 11.11. Front-end view of Joomla! 3 after configuration of Very Simple Image Gallery and changes to article options

Creating a Contact Form

Next we added a contact form. We started by navigating to the Contact Manager found in the Components menu. Then we created a contact (within the Uncategorised category), as shown in Figure 11.12. One thing to notice is that we added some text in the Address field. This is not necessary, but it makes the page look better.

Figure 11.12. Contact-editing screen

Add a standard contact link to the main menu. Make sure to have a working e-mail address that will receive the messages. Nothing frustrates a potential customer like sending a message and not getting a reply. We chose the plain display format for the page. To decrease the possibility of spam contact form submission we enabled the Captcha plugin, choosing the reCaptcha option. We registered our site at www.google.com/recaptcha and obtained public and private keys which we entered into the plugin as shown in Figure 11.13. Figure 11.14 shows the contact form with the reCaptcha plugin in place.

Figure 11.13. Entering the public and private keys obtained from www.google.com/recaptcha into the plugin

Figure 11.14. Front-end view of the contact form

Additional Content Items

We created two more articles in the Shop category. One is a more detailed product description, and one is an About Us page. We linked each of these from the main menu.

We also created a new category called News and one article in it. For that we made a Category Blog menu link so that the latest news item will display. Since we do not expect there to be a lot of news articles, we set the display to 2 Leading, 0 Intro, 1 Column, 2 Links. This means there will be up to two articles displayed using the full width (in one column) and two links to additional articles if any are available. (Chapter 5 explains the details of this.) Later, if it turns out that there are frequent updates, we can rearrange the display easily by changing the menu link.

Before we do anything else, we will unpublish the Login module and the breadcrumbs. We don’t need the Login module because we are not building an interactive site where users would log in. We don’t need breadcrumbs because our site is so small that they wouldn’t add useful information for users, especially since all of our pages are linked from the menu.

When working on a template, you should always start by making a copy. If you do your work on a copy, you will always have the original code if you make a mistake. To copy a template, go to the Template Manager and click on the Templates tab. Find the template you want to copy and click on the name. In the Template screen you will see a button that says Copy Template with a space to give the copy a new name. For example, we named our template copy toystore as shown in Figure 11.15. Note that the new name must not contain any spaces.

Figure 11.15. Using the Copy Template field to make a copy of a template in Joomla! 3. In Joomla! 2.5 the Copy button is on the main page rather than in a pop-up modal.

For Joomla! 2.5 make a copy of the Beez5 template. For Joomla! 3 make a copy of the Protostar template. After copying, save and then return to the Template Manager. You will now see your copy in the list of templates, and if you visit the Styles tab, you will see that a default style for your copy has been created. Click the star to make toyshop the default template, as shown in Figure 11.16.

Figure 11.16. Template Manager with the toyshop template as the default for the site (and Isis as the default for the administrator)

Using Custom HTML Modules

By far the most important piece of information about your business is its name. If you have a physical store, the address is also of vital importance since your goal is to attract customers to your location. You want these two pieces of information to display on every page of your site. The last step of creating content for this brochure site is to add that information to all the site’s pages. And, of course, we will want to replace the default image with something related to our shop.

To do this we need to make two Custom HTML modules. To create a Custom HTML module, navigate to the Module Manager and click New. Then select Custom HTML from the list of module types available, as shown in Figure 11.17.

Figure 11.17. Creating a new Custom HTML module

For the next steps there are different procedures for Joomla! 3 and Joomla! 2.5.

Joomla! 3

For the first Custom HTML module go to the Custom Output tab and toggle the editor to the HTML view. Paste:

<div id="shopname">The Toy Shop</div>
<div id="tagline">Handcrafted toys to last a lifetime</div>

Give the module the title “Shop name,” set the title not to show, and assign it to the position-0 position, as shown in Figure 11.18.

Figure 11.18. Custom HTML module parameters in Joomla! 3

Go to the Template Manager and edit the default template style. Select a new header image.

Joomla! 2.5

For our first module in Joomla! 2.5, we will take advantage of a neat feature of Beez5 and make a blank module to replace the default image. In the Details area of the screen, we typed Blank in the Title field, changed Show Title to No, and made the Module Position position-15. We then saved the module.

Edit the default template style for Beez5. Change the site name to “The Toy Shop” and the Site Description to “Handcrafted toys to last a lifetime.” Clear the logo image. Figure 11.19 shows the changes in the template settings.

Figure 11.19. Changing the template parameters Advanced Options in Beez5

Both Joomla! 3 and Joomla! 2.5

Next, create the second Custom HTML module. Click the Toggle Editor button and enter the following text:

<div id="sitelocation">
<div id="siteaddress">
        <span>111 Main Street •</span>
        <span>Your City •</span>
        <span>Your State </span>
   </div>
   <div id="shophours">
       <span>Open every day</span>
       <span>from 10am – 7pm.</span>
   </div>
</div>
<div class="clr"> </div>

We used the HTML editor in order to enter some raw HTML and CSS code with more control than is possible with the WYSIWYG editor. HTML and CSS control the basic layout of everything you see on the Web (these are discussed in more detail in Chapters 7 and 8). Let’s look more closely at what this says. As you can tell, the text is simply the address and hours of the shop. Some things to notice are that the name and the street address are each enclosed by a pair of tags: <div></div>. These in turn are enclosed by another <div></div> pair. These divs define different areas on your Web page. Each of the <div> containers has an ID: id="siteaddress" for the address and id="shophours" for the hours. The surrounding div is called id="siteinformation". We will use these in the next section to control the appearance of the store name and address. Notice that the final div has class="clr" and is an empty div. This is used to force a new line underneath the text. A class is used instead of a unique ID because IDs can be used only once in a page, and there may be times when we need more than one clear.

Also note that each line in the address and hours is enclosed in <span></span> tags, which represent a grouping text that unlike paragraphs and divs will be displayed without breaks. Essentially this will ensure that each line is handled somewhat separately from the ones before and after, for example, by having a certain amount of space between spans. HTML is the basic language of the Web, and as you become more experienced in building your site, there will be times when you want to use it.

You will notice that we also included small bullets as spacers. You can insert these using the Insert Special Characters button in the editor.

At this point the page looks as it does in Figure 11.20. All of the brochure content is now in place, and we are ready to work on the site template.

Figure 11.20. Front-end view with complete content for (A) Joomla! 3 and (B) Joomla! 2.5

Customizing the Template

In Chapter 7, modifying templates that are installed with Joomla! is examined in detail. In this section we will modify a core template to make it more appropriate for this site. What will be presented are some basic ideas. As you work on your own Web site and gain experience, you will probably want to go much further than this example.

As mentioned earlier, HTML is the basic building block of Web pages. The HTML that controls the appearance of a site (such as fonts, colors, and background images) is managed by Cascading Style Sheets (CSS). The changes we will make to the template mainly involve changes to the CSS contained in the template.

We want to style the site location module and decide the color and style of the rest of the site. Because this is a relatively simple site—and because part of the messaging of the site is that simple toys are good—we decided to add just two colors to the design. Using the color of the string connecting the cars in the train in the header image, we decided on a major color with this code: #990000. As a secondary color we chose #481301 based on the color of the ear of the toy horse. There are a number of Web services and software applications that will determine the numerical codes for colors in an image for you.

We also wanted to change the font for the store name and tag line to something more distinctive. If you already have an established font for your business, you would want to use that, but in this case we wanted something new. One issue with font choices on the Web that makes it more challenging than for print is that there are only five fonts that are considered “Web safe,” meaning that they will render correctly in all browsers. They are Arial, Courier New, Verdana, Times New Roman, and Georgia. As a result, these are the fonts that you will most often see on Web pages. However, there are ways to get around this limitation, and one that is easy for beginners is to use the Google Web Fonts API. This is a service that provides open source fonts for Web site designers. We chose the font called Reenie Beanie.

In the Protostar template there is a parameter for Google Web Fonts; simply add Reenie+Beanie (just as written, with the + and no spaces) in the field. You should also set the Template Colour to #481301, since this will style many of the links.

Next you will need to log in to the control panel of your server, go to the File Manager, and navigate to the templates folder. Chapter 3 covers how to use the File Manager in detail. Navigate to the css folder inside the toyshop folder and create a new file called override.css by clicking the New File icon, as shown in Figure 11.21. Then enter the new filename, as shown in Figure 11.22.

Figure 11.21. Cpanel File Manager New File icon

Figure 11.22. New File dialog box

Now navigate to the Templates tab. Find the toyshop template, which should be on the bottom of the list, and click on the toyshop details link. You will see a large list of files. On the left are PHP files and on the right are CSS files. You should see the override.css file in the list of CSS files.

Next, click “Edit main page template” and add this line just above </header>, as shown in Figure 11.23:

<?php $doc->addStyleSheet('templates/'.$this->template.'/css/override.css'), ?>

Figure 11.23. Adding override.css to the index.php file

This means that the new file you created will be used when your Web pages are rendered. Because this line is last in the list of CSS files, its instructions will override any others that may have been given in files above it in the list.

As shown in Figure 11.24, you will see your override.css file in the list of files. Select the file and click Edit. You will see a blank file.

Figure 11.24. Template screen showing the list of files including override.css

In the Location and Hours module we want the location on the left and the hours on the right. To do this, we add to the override.css file. The #siteinformation, #siteaddress, #shopname, #tagline, and #shophours tags refer to the IDs we created in the custom module. The CSS for #siteinformation will apply to everything within that <div></div>. Text (whether or not enclosed in a <span></span>) in the #siteaddress and #shophours <div></div>s will have the same color, font size, font weight, and padding. The #siteaddress will float to the left of the area, and the #shophours will float to the right.

div#sitelocation
span
{
  color:#990000;
  font-size:14px;
  font-weight:normal;
   padding-right:1px;
   padding-bottom:2px;
   min-height:20px;
   border-bottom:1px solid #eee;
}

div#siteaddress {
 float:left;
}

div#shophours {
 float:right;
}

Modifications for Joomla! 3.0

We want to use the Reenie Beanie font for the name of the store and the tag line and to incorporate our color choices. The CSS that we added is as follows:

div#shopname
{
 font-family:'Reenie Beanie',serif;
 font-size:80px;
 font-weight:400;
 color:#990000;
  padding-top: 25px;
}
div#tagline {
  font-family:'Reenie Beanie',serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1em;
  float: left;
  width: 600px;
}

We added

.header .custom {
 width: 600px;

}

.header {
   border-bottom:1px solid #eee;
   }
.banner {
   border-bottom:1px solid #eee;
   }
.row-fluid
{
  margin-top: 20px;
  min-height: 400px;
}

to get solid borders above and below the location, which defines the space on the page better visually, and we added some space between the location bar and the main content on the page. The minimum height also helps to define the page better when the content on the page is short, as it is on some of our pages. (see Figure 11.25)

Figure 11.25. The front end of the business site with the header CSS changes in Joomla! 3

Modifications for Joomla! 2.5

Let’s start by adding an image to the header. We found the existing CSS for the header in the personal.css file (replace the URL with the one for your own image).

h1#logo {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  background-image:
url(http://officialjoomlabook.com/business25/images/toysheaderimage.png);
  background-repeat: no-repeat;
}

This looks complex, but it is really just a series of instructions about how to make that area of the page appear. These instructions control the area of the page that is contained in the <div id="logo"></div> set of tags. The first four lines say:

• Use a top margin of 20px.

• Center the text in the middle of the div.

• The header div should fill 100 percent of the horizontal space available in any container it is in (such as another div).

• Use toysheaderimage.png as the background image. This is where we put the exact location of our header image as a URL.

After we apply the changes to the file, the header of the site looks as shown in Figure 11.26.

Figure 11.26. Front-end view of the header logo image in Joomla! 2.5

Remember that earlier in this chapter we created a module for the location and hours of the shop. We want to use the Reenie Beanie font for the name of the store and the tag line and to incorporate our color choices. The CSS that we added is as follows:

#sitelocation
span
{
  color:#990000;
  font-size:14px;
  font-weight:normal;
   padding-right:1px;
}

#siteaddress {
 float:left;
}

#shophours {
 float:right;
}
h1#logo
{
 font-family:'Reenie Beanie',serif;
 font-size:80px;
  font-weight:400;
 line-height:1em;
 color:#990000;
}

The front end of the site now looks like Figure 11.27.

Figure 11.27. The front end of the business site with the header CSS changes in Joomla! 2.5

Next we added CSS to change the colors of various headers, titles, and link states that are used in the site. Finally, we added some additional CSS to change spacing and other small elements to styles we prefer. Taking the time to add some polishing CSS will make your site more professional appearing and also reflect your preferences better.

#main h2{
  color:#481301;
}
#main a:link,
#main a:visited{
  color:#481301;
}

.items-row h2 a:link, .items-row h2 a:visited, .items-leading h2 a:link,
.items-leading h2 a:visited {
  color: #481301 !important;
}
ul.menu li.active a:link,
ul.menu li.active a:visited{
  color:#990000;
}
#main a:hover,
#main a:active,
#main a:focus{
  background: #fff;
  color: #481301;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus,
ul.menu li.active a:hover,
ul.menu li.active a:active,
ul.menu li.active a:focus{
  background: #fff url(../images/nav_level_1.gif) repeat-x ;
  color:#481301 ;
}


#footer {
 background:none;
}

At this point the site appears as in Figure 11.28. This is a complete brochure site. You can download a complete copy of the override.css file from officialjoomlabook.com.

Figure 11.28. Front-end view of the toy store brochure site home page in Joomla! 2.5

Phase 2: Adding a Simple Shopping Cart

As your site develops, you may want to move it beyond a brochure site by adding other features. Many options are available. In this example, we add a simple shopping cart called RokQuickCart.

Find the extension in the Joomla! Extensions Directory and download it. Then install it using the Extension Manager as explained earlier.

You configure RokQuickCart by navigating to RokQuickCart in the Components menu. Click the Options icon as shown in Figure 11.29.

Figure 11.29. RokQuickCart Manager screen showing the Options icon in the upper-right side in Joomla! 2.5

There are many configuration options, as shown in Figure 11.30, but as you set up your shop, the most important will be your payment processor information. For this cart, both PayPal and Google Checkout are available. You fill in your account information. While you are working on your site, you should use the Sandbox Checkout Mode. To actually sell items, you would change Checkout Mode to Production.

Figure 11.30. RokQuickCart configuration screen

After saving your configuration, you are ready to add items to your shop. Click the New icon, and add the information you want. In this case, we just added an image and name, but you can also add a description, for example. RokQuickCart uses its own folder in the Media Manager, so you will have to upload any images that you want to use even if they are already in other folders. When you are finished, you add a menu link to RokQuickCart. We made a new menu called E-Commerce Expansion and made the link there. We also added a custom module with some introductory text about the products and assigned it to position-12 only on the shop page. Figure 11.31 shows the resulting page.

Figure 11.31. Front-end view of the simple shopping cart using RokQuickCart in Joomla! 2.5

Conclusion

Taking the step to put your business online will open your business doors to the world. An important thing to keep in mind is that you still need to think about demographics and your target audience. Also remember that having a Joomla! site will allow you to steadily grow and expand your Web presence, so you can take your time to develop your site. Joomla! allows you to have control over your site and your content at all times, which gives you the flexibility to be able to plan your Web site rollout in phases or stages to best suit your financial situation, time constraints, or level of knowledge. Professionals are always available for hire to help you make your site the best it can be or if you experience problems. There is also a great group of professional Joomla! trainers who offer classes all over the world from beginner to advanced. The Joomla! Resources Directory has an ever-expanding list of Joomla! professionals from which to choose. The template forum on forum.joomla.org is an excellent source of CSS and other design advice.

The step-by-step example shows how to make a basic brochure site for a small business and how to expand it to become somewhat more interactive. As you develop your own site, keep in mind the principles that were explained in earlier chapters, including having a well-thought-out organization and design, relating visually and in terms of message to other marketing materials you have, and being realistic about the time it takes to maintain complex sites.

Note: If any extensions or templates used in this example site are unavailable for your version of Joomla! please visit http://officialjoomlabook.com to obtain them.