A forum is a place where members can ask question which are organized by topic. Forums are useful not merely for educational or social websites, but also for stores offering products and services. In this chapter, we will show you how to add a free forum creation tool called Kunena forum to your website. More than 4 million business websites now use Kunena forum – making it one of the most popular tools in the Joomla Extension Directory.
The Importance of Organizing Questions by Topic
A community forum is one of the most important ways to create a more interactive website. Unlike a blog which is organized more by date than by topic, a forum is a way to organize questions on a particular topic. A forum allows members of a community to post their own TOPICS, also called threads, which can be anything from questions and comments to entire articles and links to websites and videos. Other members of the community can then respond to the topic with further questions or comments. The Forum discussion is organized by placing Topics within Categories much like Joomla articles are organized into categories. Within the categories are the actual topics or questions. Other common aspects of forums includes a “Profile” page where users can download an image of themselves and provide basic information about their background and interests.
Why Kunena Forum?
Choosing a Forum component is an important decision for any website manager. A forum is not only an important way for registered website members to ask questions, but also an efficient way for other viewers of your website to learn from the questions of others and see how well those questions have been answered. In short, an easy to read and easy to use forum can inspire confidence in your viewers. The biggest problem with Kunena Forum is its complexity. We will therefore try to overcome the complexity of Kunena by providing this detailed set of instructions on how to set up, simplify and manage Kunena as well as a series of tips for improving the appearance of Kunena.
Kunena has several important advantages. First, it is integrated with the Joomla database. This means existing Joomla members are already Kunena Forum members. There is no need to create a separate account. Second, Kunena comes in over 40 languages. Third, it comes with several security features not found on other forums. Fourth, it offers the ability to moderate posts before they are published on your forum.
In order to make the process of learning Kunena a little easier, we will devote an entire chapter to Kunena Forum. We have broken down the process of building a Kunena forum into 7 steps.
#1...Review and Install Kunena
#2...Review Kunena Sample Forum Terms and Structure.
#3... Activate the Joomla Registration Form
#4...Create our own Categories and Topics
#4... Customize the Kunena Forum Menu
#6... Make Changes to the Appearance of the Forum
#7... Forum Moderation Functions, User Groups and Privileges
We will cover the first three steps in this article. The next articles will cover adding categories, customizing the Kunena forum menu, appearance and forum moderation and Member Help tips.
#1... View Demo and Install Kunena
To see what Kunena Forum looks like, here is a direct link to the official Kunena Forum.
https://www.kunena.org/forum/index
Click on the Board Categories Drop Down arrow to see how the official forum is divided into several categories:
Forum Structure
At the top is the name of the first top level section (Kunena – To Speak). This top level section includes a single sentence. Note that there are no dashes before the name of this section. Also there are no actual Topics inside of this section. Inside this section is a single category called Official Announcements – which has all 149 topics.
The next top level section is called Community Self Help. It has a couple of sentences to explain what this section is about. But it has no actual topics. Inside of the Community Self-Help section are four categories. These are General Questions and How Tos, Installation Issues, HTTP 500 Errors and Customizing Kunena. Inside of the Customizing Kunena Category are three sub-categories: General User Contributions, User Written Modules and User Plugins.
Here is what these Community Self Help forum categories look like:
The Announcements area can be used to place important info and or Joomla modules which will appear on every forum page.
Each Kunena Section can have several categories. But sections do not have topics. Each Kunena category must be assigned to a section parent. Categories can have an infinite number of Topics. To see the list of Topics, you need to click on the category that the topic has been placed in. Here is what the List of Topics looks like in the General Questions Category:
Download the latest version of Kunena
Now that we have a rough idea of Kunena Forum terminology, let's download Kunena. Unfortunately, the latest version of Kunena 5.2.8 has some problems. We will therefore install version 5.2.7 which you can download from this link: https://github.com/Kunena/Kunena-Forum/releases/tag/5.2.7
Then transfer this package from your Downloads folder to your website Extensions folder. To install Kunena, log into your Joomla Control Panel and go to Extensions, Extension Manager. Then upload the package.
Kunena has a well organized Control Panel in the Back End of the Forum which is what Forum Administrators use in order to control nearly every aspect of the forum’s structure and appearance.
2...Review Kunena Sample Forum Structure.
When we installed Kunena, not only did we get a Kunena Forum Control Panel in the Components section, but Kunena also created a new Kunena Menu in the Menus section of our control panel. Click on Menus, Kunena Menu to open it.
There is a top level menu item called Forum which has 9 submenu or child menu items. Only three of these menu items can be viewed by the public. Five more can be viewed by registered users.
To see this new menu, we need to publish a menu item for Kunena forum in our Joomla main menu.
Create a Menu item for Kunena Forum in our Main Menu
We will now publish the Forum Menu Item so we can take a closer look at the pre-loaded example forum provided by Kunena. To view the Kunena initial “sample” structure, we first need to publish the FORUM Menu Item link which Kunena has already created on our Main Menu. In the Joomla Administration Top Menu, click on MENUS > Main Menu. Then scroll to the bottom of the main menu and you will see a new menu item called Forum.
Click on the check box to the left of the word Forum, then click on Publish. Then click on your website name to view the front end of your website. Then click on the Forum Menu Item to bring up Kunena Forum with its sample content. Unfortunately, the following error currently appears when using the Helix template:
The Helix Error Logo can be hidden by adding the following to the Helix custom CSS box: .logo-image { display: none;}
This still leaves us with this error:
Rendering Error in layout Widget/Menu: Call to a member function get() on null. Please enable debug mode for more information.
Thankfully, the solution to this problem is relatively simple. Just go to Components, Kunena Forum, Templates and change the Kunena default template from Crypis to Crypsis B4.
Then go back to the Forum page on the front end again. Here is the result:
The FORUM menu item strangely opens up in the Recent Topics tab. We really want the Index tab. To change this so the Forum opens on the Index page, go to Menus, Main Menu and click on the Forum menu item to edit it. Then for Menu Item, click Edit. This brings up a popup screen with serveral Default Menu Item options:
Click on the Index option. Also change the Menu Title from Forum to Member Forum. Also change the Access from Public to Registered. Then click Save and Close. Then go to the Front end and log in as a Registered Member. Click on the Member Forum menu item. Then click on Index and you will see that there is a Kunena section called Main Forum with two categories, called Welcome Mat and Suggestion Box.
The Welcome Mat category has one topic while the Suggestion Box category does not have any topics.
Click on the Welcome Mat category to go to this category page where we will see a display of all of the Topics in this category.
This category has one article. It also has a category header we will look at in a minute. To return to the initial Forum Page, click on Forum in the Breadcrumbs section above the words Category Header. There are several menu items shown to Registered Members.
Logged in users not only can click on Index, Recent topics and Search, but they can also click on New Topic to create a new topic and they can click on Profile to edit their profile page. There is also a Help Link which can be set to go to your own custom Help page.
#3… Activate the Joomla Registration Form
To see and use Kunena Forum as a logged in member, we need to create some Registered Members. There are three ways to do this. The easiest way is to go to Users, Manage and click New to create a new registered member. Be sure to use a real email address for the new registered user so you can see the entire Kunena Forum User Notification process.
The second way is to create a Fabrik custom Member Registration form. This is what we have done for Our Community Network website.
The third way is to activate the default Joomla Registration form. For our College in the Clouds website, all we need is the simple Joomla Registration form. But before we activate this form, we need to set up some sort of Spam Filter to avoid being flooded by spam. The most common spam filter is Google Captcha. But using Google Captcha means that our forum members will be subjected to Google Data Mining. We will therefore add a free non-Google Spam Filter called Easy Calc Check instead.
Add a Non-Google Spam Filter
Download Easy Calc Check. Here is the Joomla Extension link:
https://extensions.joomla.org/extension/access-a-security/site-security/easycalccheck-plus/
Then install it with Extensions, Manage, Install. Then go to Extensions, Plugins, System and enable Easy Calc Check. On the Plugin Forms tab, change User Log in from Yes to No. On the Settings tab, change SQL injection from No to Yes. Then click Save and Close.
Add a Member Registration page.
Go to Users, Manage, Options, User Option tab. Change Allow User Registration from No to Yes. Change Send Mail to Administrators from No to Yes. Then create a new menu item called Register for our Forum. For type, choose Users, Registration form. Then go to your website front end and click on the Registration menu item:
Fill our the form with a real email address and answer the Spam filter. Then click Register. This message will appear:
Then go to your email account and confirm your registration.
Click on the link to go to this page:
Add a Member Login page
Go to Content, Articles, New and create a new article titled Member Login. Here is the text:
Once you have been approved, you can log into our Members area by entering your username and password in the form below.
Then go to Menus, Main Menu, New and create a menu item for this article. Then go to Extensions, Modules and click on the Log In module to edit it. Hide the title, publish it and put it in Helix Bottom 1.
Also change the page taken to when logging in as the forum and the page taken to when logging out as the Home page.
Set the menu assignment to only the Member Log in Menu item. Then click Save and Close. Then click on the Member Login Menu item and log in to the back end to see more of the forum:
Use Kunena Forum as a Registered Member
To add an image to your Profile, click on Profile. Then click on Edit. Then Avatar Image. Sadly, the Avatar image link does not work.
Several other important buttons do not work. Click on Welcome Mat category. There is one topic in this category. It is called Welcome to Kunena. Click on it to view this topic.
A Registered Member could reply to this topic by clicking on the QUICK REPLY button at the bottom of the page. Sadly, the Quick Reply button does not work and the reply button is not shown.
The reason several Kunena Edit buttons do not work is because the Helix Ultimate template uses Bootstrap 5 in preparing websites for conversion to Joomla 4 – which also uses Bootstrap 5. Sadly, the Kunena Forum component and templates are still at Bootstrap 4. We therefore need to use a Bootstrap 4 Joomla template on the Kunena Profile Page if we want the Edit buttons to work. Thankfully, Joomla 3.10 comes with a Bootstrap 4 template called Protostar.
How to Customize the Protostar Template
Several Kunena Menu items including the Profile Edit Page and New Topic only work with the Protostart template. We therefore need to set up the appearance of the Protostar template to be similar to the Helix Ultimate template. Here is the default appearance of the Protostar template when logged in as a Registered Member:
Change the Protostar Header
Go to Extensions, Templates, Styles and click on the Protostar template to edit it. Click on the Advanced tab.
Change the Template Color to Dark Blue, the Background color to Light Blue and load the website header image into the Protostar Logo box.Then click on Menu Assignment and assign it to all of the Kunena Forum Menu Items. Then click Save and Close.Then view the result:
Change the Protostar Main Menu to a Horizontal Menu
Next we need to change the main menu. Go to Extensions, Modules and click on the Main Menu to edit it. Hide the title. Then change the module position to Navigation. Then click on the Advanced tab. In the Menu class suffix box, type (space) nav-pills. Then click Save and Close. The Main Menu is now Horizontal but the font size is too small. To increase the font size, we need to add a Protostar user.css file.
Add a Protostart User.css File
Click on Extensions, Templates, Templates and click on the Protostar template to edit it. Click New File:
For name, type user. For File type, use the drop down arrow to select css. Then click on the css folder so that the new file is placed in the css folder. Then click Create.
Copy and paste this into the user.css file:
.navigation {font-size: 20px; background-color: #eeffee;}
.navbar-nav {font-size: 20px; color: #117711;}
nav.pt-4:nth-child(2) {font-size: 20px; color: #117777;}
Then click Save and Close. Here is the result:
Add a Better Kunena Template
In addition to changing the Joomla template, we need to change the Kunena template to make our Forum fully functional. Currently, the best free Kunena template us called Aqidah. Download it at this link:
https://joomlatema.net/download/free-joomla-templates.html
After downloading, transfer the template to your website extensions folder. Then install it by going to Components, Kunena, Templates and click New Template. Then select the Aqidah template and click Default to make it the default template:
Then go to the Front end, register and click on the Forum Menu Item again.
Click on Profile, Edit, Avatar Image
Then click Add avatar. Then navigate to the avatar image on your home computer and select it. Then click Save. Then click Index.
Improve the Appearance of the Aqidah Template
There are several appearance problems such as the font being too small and hard to read. To fix these problems, go to Extensions, Templates, Templates and click on the Protostar template. Then click CSS, user.css to open the Css file. Then copy paste the following which will help improve the appearance of the Aqidah template:
body {font-size: 18px;}
h1.category-header {font-size: 24px; color: #117711; background-color: #ddffdd;}
.category-header-cover {font-size: 24px; color: #111177; background-color: #ddddff;}
div.header-desc {font-size: 22px; color: #111177; }
#kunena.layout.aqidah_ku div.header-desc {font-size: 18px; color: #111177; line-height: 20px; font-family: arimo, arial, tahoma; }
#kunena.layout.aqidah_ku h1 a {font-size: 16px; line-height: 18px; font-family: arimo, arial, tahoma; }
#kunena.layout.aqidah_ku .navbar .nav > li a {font-size: 16px; font-family: arimo, arial, tahoma;}
#kunena.layout.aqidah_ku h1.category-header, #kunena.layout.aqidah_ku .kfrontend .table td h1.category-header, #kunena.layout.aqidah_ku h2.category-header, #kunena.layout.aqidah_ku .kfrontend .table td h2.category-header, #kunena.layout.aqidah_ku h3.category-header, #kunena.layout.aqidah_ku h3.category-header.topic {font-size: 16px; line-height: 18px; font-family: arimo, arial, tahoma; }
#kunena.layout.aqidah_ku h1.category-header, #kunena.layout.aqidah_ku h1.category-header.topic, #kunena.layout.aqidah_ku h2.category-header, #kunena.layout.aqidah_ku h2.category-header.topic, #kunena.layout.aqidah_ku h3.category-header, #kunena.layout.aqidah_ku h3.category-header.topic {background: #222299;}
#kunena.layout.aqidah_ku .navbar .nav > .active > a, #kunena.layout.aqidah_ku .navbar .nav > .active > a:hover, #kunena.layout.aqidah_ku .navbar .nav > .active > a:focus {background-color: #0000cc;}
#kunena.layout.aqidah_ku .span1.center.hidden-phone {
min-width:32px; width: 32px; min-height:14px; }
#kunena.layout.aqidah_ku .glyphicon-big, #kunena.layout.aqidah_ku .icon-big {font-size: 16px; }
h3 small {font-size: 16px; color: #111177;}
.layout#kunena [class*="category"] .knewchar {font-size: 16px;}
Hide Some Kunena Menu Items
The next step is to hide the confusing and un-needed Kunena menu items. Go to Menus, Kunena and select and unpublish the following menu items; Recent Topics, Unread, No Replies, My Topics, Help and Search. The Forum now looks like this to a Registered Member:
Click on the Welcome Mat Category:
Click on the Welcome to Kunena topic:
Add a Forum Log Out Menu Item
Because the Member Menu is in a module position that does not exist on the Protostar template, we can not see the Member Log Out link from either the New Topic or Kunena Profile Page. We should therefore add a Member Logout link to the Kunena Menu. Go to Menus, Kunena Menu and click New. Then click Select. Then click Users, Logout. Make it a child of the Forum Menu Item. Also set the Access Level for Registered. Then click Save and Close.
What’s Next?
Now that we have our custom Protostar template and our custom Kunena template controlling our Kunena Forum pages, in the next article we will replace the Kunena categories and content with our own categories and content.