12. Practical Application: Joomla! for NGOs/NPOs, Groups, Clubs, and Organizations

For the same reasons we mentioned in the previous chapter with regard to business applications, Joomla! is an excellent choice for nongovernmental organizations (NGOs), nonprofit organizations (NPOs), groups, clubs, and organizations: it is free in cost and the code is open source. One of the benefits of Joomla! specifically for this application is the collaborative environments that can be set up to help organizations not only connect and organize within their constituencies but also reach out to the greater public and promote their platform or message, gain financial support, and connect like-minded people to achieve a common idea or goal.

Basic Planning of Group Sites

When creating a Web site for a nonprofit organization or group, whether as a volunteer or a paid staff member, there are a few general principles to consider:

• What is the purpose of the site? Is it to give information about the organization, advocate for a specific cause, raise money, attract volunteers, or engage the community of members, clients, or potential clients?

• Is the site envisioned as central to fulfilling the organization’s mission? Or is it a brochure site?

• How much interaction will there be between the site visitors and the organization and site visitors and each other?

• Who will manage the site—a volunteer, a staff member, or a team? How much time will they have to devote to it?

As you consider these questions, you will want to discuss goals and expectations for the site with various stakeholders or constituencies connected with the organization or group. Although these groups may create long lists of feature requests, what is most important at this stage is to identify the main purposes, goals, and audience for your site. You may also want to find out what other solutions are being used within the organization. For example, is there an existing membership list? Is there an e-mail list? How are they managed? Does it make sense to integrate these into the Web site? Keeping focused on message can be difficult for any organization. Having a clear mission, vision, and strategy can help to solidify your communications and the connections among your organization’s members, volunteers, and supporters.

You should also gather materials such as a mission statement, contact information, images, press releases, printed brochures or stationery, and other materials that may be used on your site. Especially if you are a volunteer, it makes sense to plan to implement a site in stages, starting with a basic site and then enhancing it as time goes on.

If your organization already has a logo or colors associated with it, build on that identity by incorporating them into the site. If the organization does not have these, this can be a good opportunity to develop them. Nonprofit groups can benefit from branding and a strong visual identity just as much as businesses.

Leveraging Your Site to Raise Awareness and Gain Momentum

Joomla!’s flexibility and extensibility make it easy to use your NGO/NPO or organization Web site as a marketing tool to bring awareness to your cause; attract volunteers, members, or donors; or encourage people to take action. Here are some things to consider to make the most of Joomla!’s marketing advantage:

• Your front page should exhibit a short explanation of the mission or goals of the organization, with easily found navigation to longer mission statements, services, or actions. Using a tag line or slogan that is easily identifiable and memorable is a good way to solidify your brand.

• Visitors should be able to immediately know how to become involved or donate to your mission or cause.

• There should be a news media or press release section of the site to help promote and encourage media outlets to spread your message to encourage new donors and members.

• If you have a physical address that you want people to visit (for meetings or religious services, for example) or you sponsor regular events, put those on the home page (and probably every page) with links to travel directions and maps.

• Have a general contact form so that visitors can get in touch with your organization, making sure that there is someone who will reply promptly. Most hosts provide customers with basic e-mail service.

• Having a latest news or blog section with current and active content will encourage repeat visitors to the site, which in turn will help convert visitors into donors or members.

• Use social media to encourage member activity and bring new members or donors to your site. As with any marketing materials, the look and message should be consistent across all platforms so that your brand is recognized. Integrate extensions that update social media sites when you post new content.

• An extremely valuable action for any NGO/NPO is to publicly thank those who support it as volunteers or financial contributors. Creating goals and activities to engage visitors or members is important, but it is equally important to acknowledge how goals and activities are progressing. Thanking those who are helping goals to be reached or activities to be successful encourages more engagement from visitors.

Extensions for Enabling Basic Interaction

As for any site, extensions for your nonprofit site should be carefully considered. They increase the flexibility and functionality of your site, but they also increase the complexity of managing it. Consider what you want to achieve with your site, explore the options available, and then make decisions. New extensions are always being added to the Joomla! Extensions Directory, and new versions of extensions that add new functionality are continually released.

The following are some extensions to consider that could help keep your organization’s site focused but improve its ability to be in touch with visitors and membership.

Calendars and Event Registration

Events are an excellent way to raise funds and awareness for any group or organization. Joomla! has a number of extensions that are specific to events, calendaring, and reservations.

JCal Pro

JCal Pro is a component calendaring solution that includes a number of advanced functions. Permissions can be set regarding who can post events by access level, and there is the ability to group events into categories, have recurring events based on flexible criteria, and export to iCal—just to name a few of the functionalities available. It uses a templating system that allows customization to match site designs, and the developer offers template packs in a number of color schemes. JCal Pro also has the ability to use the content editor to allow images and other media to be inserted into event details. JCal Pro is actively developed, has documentation on its use, and offers a support forum.

GCalendar

GCalendar is a component that integrates the Google calendar system. This can be extremely easy to use, especially if your organization is using Google Apps. You can set up individual calendars for specific types of events and enable them to display as individual calendars, or you can display information from multiple calendars in one view.

Event Registration Pro

Many nonprofits and clubs offer events, whether meetings, service projects, fund-raising events, or conferences. Event Registration Pro makes it easy to schedule events and implement registration, whether paid or free (a number of payment processor options are available). It can also serve as a calendar for your site.

CiviCRM

CiviCRM, which we will discuss in more detail in the section on constituent relationship management systems, offers integrated events management.

Forums

Forums have long been a standard part of Web sites because they are powerful and flexible. The help forum at http://forum.joomla.org is an example of a large and highly successful forum, but many smaller sites find forums very useful for discussing and debating issues, sharing information, providing support, and building connections among community members. Not only does using a forum help visitors and members easily have discussions, but it can also serve as a tool for internal communications for an organization. Forums can also be used as a customer or client support system by encouraging users to help each other with issues or activities. One thing to keep in mind if you do use a forum on your site is the time investment and labor needed to moderate and manage it. Even the best forums can be targeted by spammers and by “trolls” who cause conflict and destruction and need to be monitored. On the other hand, enlisting community volunteers to help manage your forum can serve to engage those volunteers in your organization.

Some forums are Joomla! extensions, where you will be able to build on your knowledge of Joomla! If you choose one of these, it will be easier to integrate the look and functionality of the forum and the rest of your site. In other cases there are major independent forums such as phpBB which can be integrated into your site using a bridge extension. These generally allow you to share the list of users between Joomla! and the forum and allow for a single sign-on to both applications. However, using an independent forum will require that you master a second major application in addition to Joomla!

Kunena

Kunena is a very popular forum component for Joomla! It has a very active development team, detailed documentation, and a large community of users. It was built as a native Joomla! extension and integrates well with Joomla! sites. It also integrates with many other Joomla! extensions and with your template.

JFusion

JFusion is a Joomla! extension designed to cleanly integrate Joomla! with a number of other applications, including several major forums such as phpBB, vBulletin, and Simple Machines Forum.

JomSocial

JomSocial is not strictly speaking a forum, but it has a number of forum-style features, enabling users to have discussions on specific topics. We discuss JomSocial in more detail in the section on community portals.

Mailing List Integration

Often nonprofits want to establish a simple way to send information to their constituents via e-mail, whether in the form of simple announcements of news and events or in more complex e-mail newsletters and other one-way communications. There are complicated legal rules about doing this that mainly serve to protect potential recipients from receiving unwanted e-mail. For example, you must make sure that users can easily opt out of your newsletter completely, and you must make sure that you do not send e-mail to users with privacy settings that will prevent the e-mail from being delivered. The last thing you want is for automated spam detection systems to classify all e-mails from your organization as spam. There can be very serious consequences for your organization and Web site if that happens. Further, because sending large numbers of e-mails can be resource intensive, many hosts restrict the amount of e-mail you can send at once. Hosts also do not want to be labeled as hosting spammers. Therefore, we generally recommend the use of third-party services to provide integrated e-mail newsletter management for your site.

The Joomla! Extensions Directory provides numerous extensions that integrate your Joomla! Web site with these services. The most commonly used services are MailChimp, Constant Contact, and iContact. All three of these services offer tiered levels of support, ranging from free to paid, with costs generally related to the number of subscribers and frequency of mailings. You need to analyze the costs based on your anticipated sending pattern, for example, how many addresses you will mail to and how frequently you will send mail.

CRMs: Constituent/Client/Customer Relationship Management

One of the first options to consider when creating a site for an organization is whether you will need a constituent/client/customer relationship manager (CRM). For the type of application discussed in this chapter, this software is used to identify organization members, donors, and clients; their interactions and interests; and their contributions. CRM software is an excellent way to target specific members in an organization for action or activity and to facilitate communication not only from the organization out to its contributors but also in some instances to allow the contributors or members to facilitate relationships and communication with each other.

CRM applications are generally complex but powerful. If your organization has an existing mailing list, fund-raising list, or membership list, you can use a CRM to manage it and integrate it with your site. Moving to Web-based management of this information can also allow additional people to help with it. It also will make it easier for records to be kept up-to-date by allowing users to self-manage their contact information.

CiviCRM

CiviCRM is CRM software that is specifically designed for advocacy, nonprofit, and nongovernmental groups. It is extremely robust and full featured with the ability not only to be a contact management database but also to assist with online fund-raising and donor management, event registration, membership management, mailing list marketing, and report generation by using the add-ons that are available. CiviCRM has a very large and active community supporting the software, as well as a large group of professionals who work specifically with CiviCRM installations. It is developed specifically for use with the largest CMSs: Joomla!, Drupal, and WordPress.

SugarCRM

SugarCRM is open source CRM software that is available in three editions. The Community Edition is free to download and use but has specific limitations compared to the Professional Edition and the Enterprise Edition. The Professional and Enterprise Editions are fee based by number of users. SugarCRM has an extensive community that is very active in supporting and extending SugarCRM, and there are professional service providers.

Blogging and Advanced Content

Some organizations may want to blog and provide advanced news features with commenting and tagging. For example, you may want staff or volunteers to blog about their activities, or you may want to post commentaries about issues related to the organization’s mission. Comments on blog posts are one way to encourage two-way engagement with the organization. Comments, however, also can be time-consuming because they need to be monitored for both spam and abuse and messages that may run counter to the organization’s mission or values. You should carefully consider the time and commitment required for both writing and managing if blogging is to be a successful part of your site.

While it is possible to create a full blogging environment using separate extensions for comments, tagging, social media integration, and other features, in Joomla! 2.5 it is simpler to implement and manage this using an integrated content system. Such systems are often referred to as content construction kits or CCKs because they allow you to construct content in more advanced ways, incorporating both customized layouts and features such as tags and comments. CCKs are very powerful and can be used to create other types of content besides blogs, so if you choose to use one to incorporate blogging, as your site develops and you gain experience you may want to use additional features. Fortunately, most of the CCKs available for Joomla! install with basic blogging functionality. These are complex extensions, and each has its own advantages and disadvantages. You will also find that each has its own very active community of users and numerous add-ons available.

K2

K2 is one of the earliest Joomla! CCKs and is especially known for its use in online magazines and newspapers, including www.gazzetta.gr/ and the Joomla! Community Magazine.

ZOO

ZOO is highly flexible and known for its easy interface for modifying custom layouts. Blogging is included in the free edition, and more advanced layouts can be purchased or you can design your own. The same company produces templates under the YOOtheme brand, and many of the templates and layouts are designed to integrate seamlessly.

SEBLOD

While all CCKs are complex, SEBLOD is probably the most complex because in addition to content management it contains features for multisite management, forms management, and user management. However, if you are willing to spend the time necessary to learn to use its features, it is extremely powerful.

Creating a Community Portal

Some organizations may not need a full-blown CRM or a forum but instead want to create a community site where members can easily interact and share information with each other. These sites can be very similar to the many popular social networking sites such as Facebook and Google Plus. The community aspects of these sites can help your members get to know each other better and can be especially useful when your members, volunteers, or supporters do not have face-to-face interactions, for example, if they are spread around the country or the world.

Joomla! has a number of extensions that can facilitate community-style Web sites. Two of the most popular are JomSocial and Community Builder.

JomSocial

JomSocial is an installable social networking extension made specifically for Joomla! It offers an extensive range of capabilities such as the ability to have member profile pages, groups, messaging, discussions, commenting, integrated event management, and the sharing of media files such as video and photos. It also can connect with the popular social networking site Facebook, giving visitors a unified way to connect using their Facebook account, allowing a user’s Facebook content to display inside a JomSocial community site. JomSocial also has the built-in ability for social bookmarking, allowing content information sharing on more than 20 social networking and bookmarking sites such as Digg, StumbleUpon, Technorati, and LinkedIn. It is well supported by the developers and community who use it and integrates with many other Joomla! extensions.

Community Builder

Community Builder is a flexible extension that allows the creation of membership and subscription community- or directory-style sites, as well as sites that need extended user profiles. It allows Web site administrators to extend user profiles to gather expanded data on users as well as organize their users and user data in customized lists or groups. There are a number of extensions for Community Builder that allow for private messaging, paid-for memberships and subscriptions, access control for content and site management, and collaborative content. Community Builder is one of the most well-established extensions for Joomla! and has a large community of users who support and develop for it. Many other extensions have Community Builder plugins that allow integration of users’ content with their profiles.

Both extensions are meant to organize users and provide them with rich profiles, but they do it in very different ways. What actions you want your users to take on your site and how you want them to interact with your organization and each other will be the deciding factor as to what extensions you choose.

It is important for a community portal to be about the people in the community and to keep the membership excited and involved. Managing a community takes a lot of commitment in time and resources. If you have an interactive site where members communicate in public spaces with each other such as through commenting, posting, or sharing links, for example, a significant amount of time will be needed to oversee the content posted to your site, in addition to keeping the site content fresh and creating community activities.

Recruiting users to help with community management, which ranges from moderating content and dealing with conflicts between users to starting discussion topics and encouraging engagement, is a powerful way to increase interaction with your organization. Watch for people who are active and positive participants in your online community; they are often the best possible recruits to a community management team.

Fund-Raising

Most nonprofit organizations need to do some fund-raising and often hope to use their Web sites to facilitate that. If you are seeking funds, it is especially important that your site have a clear mission and provide evidence that your organization will use any contributions wisely. Donations can play a huge part in the financial success of any group.

Planning for fund-raising through your site should be done in collaboration with your organization’s treasurer so that you can ensure that the bookkeeping and tax records are handled appropriately. Your treasurer will want to review the material on working with a payment processor in Chapter 11. Some payment processors offer special plans for nonprofits, and you may want to explore them.

There are a variety of ways that an NGO/NPO, group, or organization can raise funds online. Whether you use a donation button that simply allows people to donate through PayPal or another online payment system or you use a collecting service, it is important that you be aware of the legal ramifications of soliciting donations and that you are compliant with the applicable rules and laws in your geographical area. Tax status, registration, and licensing for organizations vary widely across the world, so it is best to get the advice of a financial adviser or legal representative before you start to solicit or start planning your funding strategy. Here are some helpful links to fund-raising solutions and other nonprofit and organization resources:

• GuideStar (http://guidestar.org): GuideStar is an information-gathering and publicizing Web site geared toward encouraging nonprofit and charitable organizations to share information and for donors who want to research charitable organizations. It is similar to a Better Business Bureau for charities. It allows organizations to easily share their organization’s reports, share mission and values, and encourage transparency, which assists donors and supporters to make informed decisions.

• Network for Good (http://networkforgood.org): Network for Good is an online tool set for organizations, including donation processing services, training, and education on how to effectively raise funds online. The organization also offers promotional tools such as integrated e-mail marketing and online surveys.

• Your Cause (http://yourcause.com): Your Cause is a site that allows supporters to create a personal page to promote and raise funds for a cause or charity. It is also a site where organizations can reach out to potential supporters to find volunteers to join and work with their organization.

• MissionFish (http://missionfish.org): MissionFish connects nonprofit and charitable organizations with eBay.

• eBay Giving Works (http://givingworks.ebay.com): eBay Giving Works allows eBay sellers to list their items for sale with the proceeds from the sales going to registered charitable and nonprofit groups. MissionFish collects and distributes the donated funds from the eBay sales and auctions and distributes them to the registered charitable and nonprofit organizations.

Nonprofit Web Site Demo

You can visit the live version of this site at http://officialjoomlabook.com/nonprofit25 or http://officialjoomlabook.com/nonprofit3.

This section will explain step by step how to create a simple nonprofit site, in this case a site for a club for people interested in rocks and minerals. We had three goals for this site:

• Provide useful information for people who are not club members but who might be interested in joining. In this sense, the site design has elements of a brochure site.

• Provide members with an online community to discuss topics of interest and with up-to-date information about club meetings and events.

• Keep the site relatively easy for a small group of club members to maintain.

We based this list on our review of a large number of sites maintained by clubs for rock and mineral collectors, but we think it is typical of many clubs in many areas. On the whole they want simple sites that serve the needs of their members and potential members who mainly live in a limited geographic area. Often these sites seem to be maintained by one or two volunteers and are rarely updated except for event listings. The vast majority of them do not use content management systems but instead rely on static HTML pages. Building the sites with Joomla! instead could make them easier to update, which in turn makes the work of the volunteers easier and the usefulness of the sites for recruiting new members more powerful. Using Joomla!’s templating system also makes it easier to create a visually consistent and attractive Web site without extensive skills in design.

Setting Up the Site and Extensions

We decided on a simple design incorporating GCalendar for presenting information about upcoming meetings and events and the Kunena forum as a solution for creating an online community. We will also use a simple extension called OSDonate to incorporate a PayPal donation button. Finally, we will use a Custom HTML module to incorporate a Facebook widget. There will be four main jobs in managing this site beyond the super administrator:

• Someone needs to respond to e-mails sent via the contact form.

• Someone needs to manage the calendar.

• Someone needs to add news as needed.

• Someone needs to manage the forum. If the forum is successful, this will be the most time-consuming job.

Before beginning to set up the site, we recommend that you create a Google account for the club at https://www.google.com/accounts/NewAccount.

Although this account will be tied to one individual as the owner, it allows you to separate the individual’s accounts from the club’s, which will be useful if someone else takes over. The features that you will want to use from this account are as follows:

• An e-mail account for receiving e-mail submitted via the contact form. This can then be forwarded to one or more individuals.

• A calendar used to display club events.

• Google Analytics, which gives you statistics about your visitors and what pages they look at.

• Webmaster Tools, which will assist you in optimizing your site and making a site map for submission to Google.

Google provides very thorough instructions on how to use these applications.

For Joomla! 2.5 sites we will use the Atomic template, and for Joomla! 3 sites we will use the Protostar template, both of which were discussed in Chapter 7. Before starting to put together the site, we will go to the Template Manager Templates tab and open the Atomic or Protostar template as appropriate. We will use the Copy button to copy the complete template folder to a new template called atomic-rock-club or protostar-rock-club as appropriate. (How to copy a template is described in detail in Chapters 7 and 11.) The new name should be in all lowercase letters and not contain any spaces.

Save and close and then go to the Template Styles tab. You should see a new template style for the new rock club template. Check the box next to it and click on the star icon to make it the default. Your home page now looks like Figure 12.1.

Figure 12.1. Starting layout for (A) Joomla! 3 and (B) Joomla! 2.5

Settings for the Home Page

The front page for the site features a Category Blog layout, with the description of the club in the category description, which means it will always be on top. The most recent article will always be on the front page. This is a good solution for sites where there may not be frequent updates. The design is flexible enough that it can easily be made more complex in the future. We implement this by making the home link an Articles Category Blog link. Since we would like to keep this updated with news from our club, we created a category called News that we used for the link. In our example we have added a sample article and some sample content for the home page. We have also added a welcome and some information about the club to the category description. Our home page now looks like Figure 12.2.

Figure 12.2. Home page using a category blog

In our case some of the parameter settings we chose were to show just one article but with links for up to five older articles. This will allow access to older news items as they are added. We also chose not to show the author, date, or other items. This is largely a matter of taste, but if your site is not frequently updated and the only content has a date that is months old, that can unintentionally send a message of inactivity. In Figure 12.2 you will notice the large word Home. We stop that from displaying by setting the menu item Advanced Options, Show Page Options field to No.

Creating a Contact Form

In your administrator, go to the Contact Manager (from the Components menu). Create a contact with an e-mail address, a physical or mailing address if you have one, and a brief description. Figure 12.3 shows the contact-editing screen.

Figure 12.3. Contact-editing screen

Once you have filled out all of the fields, click Save to save your contact form. To create a Contact Us menu link to the main menu, see Chapter 5 on working with menus and menu items. The display options for adding a contact form can be a bit intimidating, but the Plain setting for Display Format (found on the Display Options tab) will work best for a simple form. We strongly recommend that you enable the reCaptcha antispam filter that is available in Joomla! This is described in detail in Chapter 11, but to summarize you need to go to the reCaptcha Web site and follow the instructions to obtain public and private keys, edit the reCaptcha plugin filling in the keys, and go to Global Configuration and select reCaptcha as the default service. This will automatically include a form to “test for humans” on your contact form.

We also set the menu to not display the contact name since in this case the title of the site will already have the name of the club.

Site Name and Tag Line

For Joomla! 3 enter Rock and Mineral Club in the Title field and For people who dig rocks in the Description field as shown in Figure 12.4. We assigned the module to the banner position and selected On All Pages for the Menu Assignment. The front end of the site now looks as in Figure 12.5.

Figure 12.4. Entering the site title and description in the Protostar template

Figure 12.5. The home page with the title, description, and additions to the menu

For Joomla! 2.5, the Atomic template already displays the site name at the top of the page. In addition, it has a position called “atomic-top-quote” for modules that we will use for a common design across the site. Because the site name displays, the Custom HTML module is used to hold a tag line for the club (“For people who dig rocks”); go to the Module Manager and create a new Custom HTML module.

Setting Up a Calendar

Because it is relatively simple to manage, we chose to use a Google calendar as the calendaring solution for this site and to incorporate it using the GCalendar extension, which includes a component, plugin, and several modules. You must have a Google account to use this extension.

Log in to your Google account and create a calendar for the club. As shown in Figure 12.6, under My Calendar, click Create New Calendar and fill in the Calendar Name, Description, Location, and Calendar Time Zone boxes. Check the “Make this calendar public” box. Then click Create Calendar.

Figure 12.6. Creating a Google calendar

Now that your calendar is created, you want to share it with people and with your site. Find the calendar on your list of calendars and on the menu click Calendar Settings. Find the Calendar Address as shown in Figure 12.7.

Figure 12.7. Google Calendar Settings

For GCalendar, you will need the calendar ID. Because the calendar is public, you do not need the Magic Cookie.

In your administrator, navigate to GCalendar (in the Components menu) by selecting the GCalendar submenu. Create a new calendar. Fill in a name and the calendar ID in the spaces provided as shown in Figure 12.8. You can also pick a color. We will choose a color when we work on the look and feel of the site.

Figure 12.8. Settings for your Google calendar

Now create a menu link to the calendar from your main menu by going to the Menu Items Manager for the main menu and creating a new menu item.

It is important that the time zone settings for your system (which are set in the Global Configuration settings), Google calendar, and the GCalendar component match; otherwise, the time display on your site can become out of sync. You can adjust the time zone settings for the GCalendar component by clicking the Options icon in the top-right corner of the GCalendar component screen. You can also adjust how time and dates display on your site in the options using php strftime, which formats a local time/date according to locale settings. There are configuration options to set this in both the component and the modules for GCalendar. You can find more information on formatting the input for strftime at http://php.net/manual/en/function.strftime.php.

We also published the GCalendar Upcoming Events module on all pages in position-8. We chose to show the next two events. As shown in Figure 12.9, we changed the name to Upcoming Events, chose to display two events, and changed the date format by eliminating the year.

Figure 12.9. Settings for the Upcoming Events module

Donation Module

PayPal is probably the easiest payment processor to use for many organizations. Assuming you have a PayPal account set up, it is easy to incorporate a donation button. You can set it up using one of the widgets that PayPal provides on its site, or you can use an extension specifically designed for Joomla! For this site we decided on the OSDonate module for our donation button. We downloaded it from the developer and then installed it using the Extension Manager. This module has many options that are well worth exploring as you learn more about Joomla! and continue to develop your site, but we decided to keep things simple.

The module-editing screen for OSDonate is shown in Figure 12.10. There are three sliders: Basic Options, Sticky Hover Options, and Affiliate Options. In Basic Options we simply added our home page to the fields for “Success return page” and “Cancel return page.” These are pages to which the user is taken when the donation is either successfully completed or canceled. However, you may want to make articles that specifically say “Thank you for your contribution” or that display a message related to canceling the contribution. In that case you would enter links to the specific pages.

Figure 12.10. Basic settings for the OSDonate module

Social Media Module

If your organization has a Facebook, Twitter, or other social media account, you will probably want to include this on your Web site. Fortunately, social media companies make it easy to put images and widgets on your Web site. While there are many Joomla! extensions that assist you with this, you don’t really need a special extension. For example, it is easy to use a Custom HTML module for this. We will demonstrate how to do this with Facebook.

First, obviously, you need to have a Facebook page and you need to know the URL for that page. For example, the URL for the Official Joomla! Book Facebook page is www.facebook.com/officialjoomlabook. Next, before you start, visit the Text Filter tab in Global Configuration and make sure that your user group (probably Super Users) is set to No Filtering, as shown in Figure 12.11.

Figure 12.11. Text Filters screen with Super Users group set to No Filtering

We need to set it to No Filtering because Facebook and other social media sites use scripts to send, retrieve, and display data. Normally we don’t want users to be able to insert scripts on a site because they are potentially malicious. However, since you are the super user for your site, you can be trusted. Another thing to do before you start is to go to your profile (My Profile on the Site menu in Joomla! 2.5 or on the drop-down menu with your name on the upper right of Joomla! 3) and change your editor to Editor-None, as shown in Figure 12.12. This is because the social media sites will give us raw code to insert. Putting the code in with a normal editor can make the display not work.

Figure 12.12. Changing a profile to use Editor-None

Go to the Module Manager and create a new Custom HTML module. As we have seen earlier, these modules let you put whatever you want in them. Notice that instead of your normal editor you have a plain box.

On another tab or window of your browser go to http://developers.facebook.com/docs/plugins/ (you can also try http://facebook.com/badges). You will see many possible plugins. They all work in similar ways. We chose the Facepile plugin to display a list of users who have “liked” our page. After clicking on the link, we come to a page with a form. We put our URL in the URL field and select an appropriate width (we’ll try 120px) and color scheme (we’ll use “light”), a maximum of 5 rows, and a size of medium, as shown in Figure 12.13.

Figure 12.13. Setting up a Facepile plugin from Facebook

Click the Get Code button. Then you will see a page that looks like Figure 12.14.

Figure 12.14. Code for a Facepile plugin from Facebook

Copy both parts of the code and paste them into the editor box in your Custom HTML module page, as shown in Figure 12.15.

Figure 12.15. Code in the Custom HTML module

Set your module to Published and to show on all pages in position-8. Save and close. If you go to your home page, it should now look like Figure 12.16.

Figure 12.16. Facebook and Donate modules on the home page

Forum

For our forum we chose to use Kunena. After downloading it, we installed it using the Extension Manager. Like all forums, Kunena is fairly complex, with many options. Figure 12.17 shows the control panel for Kunena.

Figure 12.17. Kunena control panel

Starting with a new forum, the two links we used are Category Manager and User Administration. As shown in Figure 12.18, Kunena by default creates a forum called Welcome Mat, and this is a good theme for a forum to start with. Here we suggest starting with one or two forums of interest to your group.

Figure 12.18. Kunena categories screen with the default forums

Two things you will want to do as part of setting up Kunena are to create two regular Joomla! articles to be used for Help and Rules. You can do this in the Uncategorised category, or you can create a new category for Kunena articles. In your Rules you will want to post simple rules regarding appropriate behavior on your forums and prohibiting illegal activities. You can look at the rules on the http://forum.joomla.org site for examples of more complex rules used by larger sites. Your Help article should contain basic information about how to use the forum. Most likely to start you will just want to put one or two sentences, but as you see what questions your users have, you can add more information. Record the ID numbers of these two articles.

Kunena automatically creates its own menu, and on the menu you will see links for Help and Rules. Open the Rules link and fill in the ID for the article in the Main Settings, as shown in Figure 12.19.

Figure 12.19. Setting up Rules for users in Kunena

Make a link to Kunena from the main menu. In the Required Settings field, change the selection to Index. Clicking that link shows the basic list of forums as shown in Figure 12.20.

Figure 12.20. Kunena forum front-end view

We suggest “seeding” your forum with a few threads that your membership will be interested in participating in. As your forum grows, you can add more subforums. You may notice that the Kunena forum does not work well with the Atomic template; it overflows the main body area, and the calendar module that should be in the right column is pushed down beneath the forum. To correct this and other issues in the design of the site we will modify our template.

Modifying the Template

At this point we have a Web site with good functionality, but it is not as polished as we would like. For this site, as mentioned earlier, we are using the Atomic template for our Joomla! 2.5 site and the Protostar template for our Joomla! 3 site. We will create a simple color scheme and make some basic choices for typography and other design elements. Our goal is to make a simple, attractive, and user-friendly design that is also easy for the Webmaster to use to maintain a consistent look across the site. You should already have made a copy of the Atomic template called atomic-rock-club or the Protostar template called protostar-rock-club following the instructions earlier in this chapter.

It may seem obvious, but the first decision that we made was to maintain a basic white background with black text for our main body area. While it is always tempting to go with something else, it is good to remember that this is the most popular format both on the Web and in print for very good reasons; specifically, it has excellent contrast, raises no issues for color-blind people, works well on all devices, and will print the way you expect if printed on a black-and-white printer.

Next, we chose a color scheme for the other parts of the site. Because we want to keep it simple, the only colors we changed were for the background regions that create the left and right columns.

We also will change some of the fonts for the titles using Google Web Fonts. We chose the Questrial font as our font family for the titles and headers of the site. We also need to make some small changes to the structure of the Web page in the template. Before starting, we recommend that you edit the CodeMirror editor plugin to enable the display of line numbers. Also use the instructions in Chapter 7 to add a custom.css file to the template css folder (Protostar and Atomic).

Modifications for Joomla! 3.0 Sites

Setting Template Parameters

As was discussed in Chapters 7 and 8, Joomla! 3 introduces the Twitter Bootstrap CSS and JavaScript framework. This encourages standardization across extensions in terms of design.

The first ways that we will modify the site involve simply setting the template parameters in Protostar:

• Add the Questrial font in the Protostar template parameter for Google Web Fonts.

• For our template color, we want the major headings and menu links to be black, and we chose #111, so enter that as the template color.

• For the background that frames the main page we decided to use a CSS technique for making a gradient. A gradient is a gradual color change from a starting color to an ending color. Using the online tool http://css3please.com/, we generated a gradient for the background. Although this code looks complex (and it is), you can do as we did and use an automated tool to generate it.

 background-color: #FFFFFF;
 background-image: -webkit-
gradient(linear, left top, left bottom, from(#3e4854), to(#FFFFFF));
 background-image: -webkit-linear-gradient(top, #3e4854, #FFFFFF);
 background-image:    -moz-linear-gradient(top, #3e4854, #FFFFFF);
background-image:     -ms-linear-gradient(top, #3e4854, #FFFFFF);
background-image:      -o-linear-gradient(top, #3e4854, #FFFFFF);
background-image:         linear-gradient(top, #3e4854, #FFFFFF);
background-repeat: repeat-x;

• We pasted this complete code into the Background Colour field.

Editing the Index File

In general, changing templates to suit your site will mainly involve modifying CSS, but in some cases you will want or need to modify the index.php file that is part of your template. This is accessible via the Template Manager; select the Templates tab, then click the Template Details for your template. At that point you will be able to edit the index.php file directly without having to use your host’s File Manager. To include any new CSS we create we add

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

just before the </head> tag in index.php.

Next, at about line 133 there is the code that brings in the Joomla! logo. We eliminate this by using PHP to comment it out (so the browser ignores it):

<?php /* ?>
      <a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
         <img src="<?php echo $logo;?>" alt="<?php echo $sitename; ?>" />
   </a>
<?php */ ?>

Modifying CSS and Styling

Next, we will add a number of new style details to the custom.css file.

We will add a contrasting background for the menu bar. We used the same gradient creation service to create a blue gradient to use on the banner position:

.banner {
background-color: #FFFFFF
background-image: -webkit-gradient(linear, left top, left bottom,
from(#5388B4), to(#FFFFFF));
background-image: -webkit-linear-gradient(top, #5388B4, #FFFFFF);
background-image: -moz-linear-gradient(top, #5388B4, #FFFFFF);
background-image: -ms-linear-gradient(top, #5388B4, #FFFFFF);
background-image:    -o-linear-gradient(top, #5388B4, #FFFFFF);
background-image:     linear-gradient(top, #5388B4, #FFFFFF);
background-repeat: repeat-x;
background-color:#48515d;
}

At this point the front page of the site looks like Figure 12.21.

Figure 12.21. Joomla! 3 site home page front-end view after changes to the template

Modifications for Joomla! 2.5 Sites

Editing the Index File

In general, changing templates to suit your site will mainly involve modifying CSS, but in some cases you will want or need to modify the index.php file that is part of your template. This is accessible via the Template Manager; select the Templates tab, then click the Template Details for your template. At that point you will be able to edit the index.php file directly without having to use your host’s File Manager.

To use the Questrial font from Google we inserted this code into the index.php file immediately above the </head> tag (found at about line 42):

<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet'
type='text/css'>

One thing you may notice in the home page at this point is that the text of the main content area is directly next to the edge of that area with no spacing. To allow us to fix this we add a container <div></div> around the whole body of the site. To do this, immediately after the <body> tag we add

<div class="mainbody container">

We close the div with </div> at around line 91, just before the </body> tag.

Notice also that on the home page as it is now, in the Login module the right-side border does not show. To allow us to address this we add a div around the atomic-sidebar position located at about lines 81–83:

<div class="joomla-main-sidebar span-7 last">
    <jdoc:include type="modules" name="atomic-sidebar" style="sidebar" />
</div>

At line 62 add joomla-main to the class:

<div class="joomla-main span-16 append-1">

At around line 87 change

<div class="joomla-footer span-16 append-1">

to

<div class="joomla-footer container">

Finally, we will add a containing <p></p> element around the footer information at around line 89 so that it reads

<p>&copy;<?php echo date('Y'), ?>
<?php echo $app->getCfg('sitename'), ?></p>

Now save the file. You won’t see any changes yet because we need to do the next step, which is to edit the CSS files.

Modifying CSS and Styling

You should already have created a custom.css file for holding your CSS.

First, we’ll add the CSS to use the Questrial font with the header tags h1, h2, and h3. These tags define the hierarchy of the site with h1 being used for the site name, h2 for the tag line and article titles, and h3 for major subheadings within articles.

h1, h2, h3 {
font-family: 'Questrial', sans-serif;
}

Next, we define the background for the container for the whole page as white:

.container {
 background: white;
}

Next, we are going to add left, bottom, and top margins for the joomla-main div that we added. We are also making it a fixed width of 630px, which keeps it consistent with the existing Atomic design.

div.joomla-main {
  margin-left:10px;
  margin-right:0;
  margin-top:10px;
  width: 630px !important;
  padding-bottom: 10px;
}

For the joomla-main-sidebar div that we created we define top and bottom margins:

div.joomla-main-sidebar{
  margin-top:10px;
  padding-bottom: 10px;
}

We also added margins and padding to other areas and a solid 2px border around the main body area:

div.joomla-header, ul.joomla-nav {
   margin: 0 0 0 !important;
}
div.mainbody{
  border: 2px solid #3e4854;
  margin-top: 15px;
  margin-bottom: 15px;
}
div.joomla-header{
  padding:0 5px 0;
}

To fix the problem with the Login module border we will set the width of the Login module to 250px:

form#form-login{
  width: 250px;
}

We are also adding placeholders for the other regions on the page in case you want to modify them later.

div.joomla-main-bottom-left{

}
div.joomla-main-bottom-middle{
  
}

div.joomla-footer {
  
}

Now that the basic layout issues are taken care of, we will add some polishing design elements. We decided that we would like a more interesting background than plain white. Using the online tool http://css3please.com/, we generated a gradient for the background. A gradient is simply a color bar that starts with one color and gradually turns into another color. Although this code looks complex (and it is), you can do as we did and use an automated tool to generate it.

body{
  background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(#3e4854), to(#FFFFFF));
    background-image: -webkit-linear-gradient(top, #3e4854, #FFFFFF);
    background-image:    -moz-linear-gradient(top, #3e4854, #FFFFFF);
    background-image:     -ms-linear-gradient(top, #3e4854, #FFFFFF);
    background-image:      -o-linear-gradient(top, #3e4854, #FFFFFF);
    background-image:         linear-gradient(top, #3e4854, #FFFFFF);
    background-repeat: repeat-x;
}

We also used a gradient to replace the baby blue background color of the main menu:

ul.joomla-nav {
  background-color: #FFFFFF
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(#5388B4), to(#FFFFFF));
    background-image: -webkit-linear-gradient(top, #5388B4, #FFFFFF);
    background-image:    -moz-linear-gradient(top, #5388B4, #FFFFFF);
    background-image:     -ms-linear-gradient(top, #5388B4, #FFFFFF);
    background-image:      -o-linear-gradient(top, #5388B4, #FFFFFF);
    background-image:         linear-gradient(top, #5388B4, #FFFFFF);
    background-repeat: repeat-x;
    /*background-color:#48515d;*/
    border-bottom-color:#3e4854;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-top-color:#3e4854;
    border-top-style:solid;
    border-top-width:1px;
  }

To ensure good contrast for the menu we made the type a bold black:

.joomla-nav li a {
    color: #111111;
    cursor: pointer;
    display: block;
    float: left;
    font-weight: bold;
    padding: 0 0.33em;
}

At this point our site looks like Figure 12.22 in most browsers.

Figure 12.22. Site home page front-end view with modified CSS

To fix the problems with the Kunena layout we also will set the width of its container to 630px. Kunena now appears as shown in Figure 12.23.

div#Kunena{
  width: 630px;
  min-width: 630px !important;
}

Figure 12.23. Kunena forum front-end view with modified CSS

Internet Explorer (Applies to Both Templates)

In versions of Internet Explorer prior to version 10 your site will look different because these versions do not work well with CSS gradients. It is always important to test your site in many different browsers to make sure that it renders acceptably in all of them. In the case of Internet Explorer you could, if you wish, specify a different solid background in the template_ie.css file.

Overall, this site is a good beginning for a dynamic Web site for a club or organization that wants to concentrate its efforts on its core activities, not maintaining a Web site. With one or more people working together to maintain it, the site can be useful and gradually expanded over time if that is desired.

Phase 2: Adding Simple ACL

If you are lucky in managing a site, you may have volunteers who are willing to assist you with creating content. However, you do not necessarily want them to have the ability to change all of the site’s content or to modify site settings. This is a situation in which using the Access Control Lists features of Joomla! can be extremely helpful. Suppose most of your users are simply registered users who can participate in your forum and read registered-only information. These users would normally be part of the Registered user group. However, if you have one person or a group of people whom you would like to be able to add news to your site, you can assign those users to the Author group. To do this go to the User Manager and for each user you want to assign to the group, check the box next to Author, as shown in Figure 12.24.

Figure 12.24. Assigning a user to the Author user group

This will allow them to create new articles. However, you don’t want them to be able to put articles in all of the article categories, but only in the Our Club category. In addition, you would like that group to be able to make corrections (edit) articles in that category and to publish the articles on their own.

To do this, go to the Articles Category Manager and edit the Our Club category. At the bottom of the screen is a section called Category Permissions. Click on the Author slider. For the Edit and Edit State permissions change the status to Allowed and save. This will allow authors to edit, publish, and unpublish articles in the Our Club category.

Finally, go to the Menu Manager, add a new Create Article link to the menu, and set the access level to Special. This will allow authors to create and publish new articles in the Our Club category.

Because you have installed the Kunena forum extension, you can also designate some users to help you moderate or administer the forum even without giving them access to the back end of your site. In the Components menu select Kunena, User Manager. Edit any users who will be helpful. Moderators help manage the forum content by doing things such as deleting posts or banning users. Administrators can create new moderators and have more access to controlling the settings of the forum. Edit the Kunena profile for any user to make him or her a moderator or administrator of the forum.

Conclusion

Joomla! provides a huge range of opportunities for nonprofit organizations, NGOs, clubs, associations, and groups to achieve their goals from awareness to fund-raising to community building. As you develop your site, you will benefit from a clearly developed and realistic plan that matches the needs of your constituencies and that is easy and realistic to maintain. Over time, as your site is used, you can add new features to enhance your site. As with all other sites, good design, strong branding, a clear message, and excellent content are the cornerstones of visibility and success. On the Official Joomla! Book Web site (http://officialjoomlabook.com) you can download the complete templates as modified for this site and can see the site in operation at http://officialjoomlabook.com/nonprofit.

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.