The Kunena Blue Eagle template has been around for a long time—over 6 years since it was first designed for K 1.6—and it is the basis for 95% of the hundreds of thousands of Joomla websites around the world that use the Kunena forum product.  As you can imagine, there have been a lot of changes in the last 6 years.  Apart from thirty-plus releases of Kunena there have been changes in web-browser technology, HTML, CSS and generally in the way people prefer to view web content (desktop computers, laptops, tablets and mobile phones).  It is not surprising that the Kunena Blue Eagle template developed 6 years ago (and that has largely remained unchanged over this time) is showing its age.

In the years that the author has been associated with Kunena we must have answered thousands—possibly tens of thousands—of questions about how to change bits and pieces of the standard Kunena template.  This article will demonstrate a couple of changes that you can make to give your forum template a simple, modern and more elegant look.

What is “special” about Blue Eagle?

Apart from anything else, when people visit the Kunena website it is the Blue Eagle template they’ll see.  It’s true that K 4.0 added a new template (called Crypsis) but the forum template used most on other sites is Blue Eagle.  It is not that Blue Eagle is the most “popular” template around; Blue Eagle is the basis of every other third-party template (free and commercially available) that exist as alternatives[1].  It may come as a surprise to people that the next version of Kunena (K 5.0) will not support Blue Eagle or any of the third-party templates that currently exist today.  When this happens it will probably create rifts within the Kunena community from those who will be unable to update to K 5.0—and who will be forced to live with the bugs that exist in their current version—and from template developers who will see a decline in sales of their products.

When people look around other Joomla websites that use Kunena, they will see all kinds of different template designs—simple differences such as colouring, font styling, etc.—and people may be surprised that they all have one thing in common.  Most of these websites use a template that is based on Blue Eagle.  As I mentioned in an earlier article, even the main “partners” with the Kunena project—places like Joomlapolis, Rockettheme, JomSocial, 9themestore, MobileJoomla among others—all of them use Blue Eagle or their own design derived from it.  It is also unlikely that any of the players I have mentioned will be changing their forum template in the future in spite of the pending arrival of K 5.0; some of these sites are still using versions of Kunena that were released for or five years ago!

These are the factors that make Blue Eagle special:  for its versatility, universality, popularity, reliability, ease of customising and the availability of third-party developers who offer their own designs for people looking for something “a little bit different”.  I think we’re all agreed:  if a product stands the test of time—if it’s reliable, durable and robust—why would people put their faith in a product that is new on the market, has a history of failure or that is largely untested?

If, however, you’re reading this article and you’re among those who are content to use Blue Eagle with your forum, read on to see what simple little changes you can make to give your forum a bit of added “sparkle”.

Where did those rounded corners come from?

Perhaps the first noticeable difference people will see when they install Kunena on their website, is the shape of the borders around the <DIV> blocks.  The image on the right shows the standard form of Kunena that most people will be familiar with.  Compare this image with the forum at the Kunena website.

It’s no real secret[2] how to style those <DIV> blocks differently with a few CSS tweaks.  The code to change the shape of the border—make them round—appears below:

/*   A few Kunena forum CSS tweaks    */

#Kunena a:hover {
  color: #f92a60 !important;
  text-decoration: underline;
}
#Kunena #kuserlist-bottom .kpagination li {
  font-size: 1em !important;
  line-height: 1em !important;
}
#Kunena .kpagination span {
  background-color: #0099fe !important;
}
#Kunena div.kblock, #Kunena .klist-bottom {
  border-radius: 5px;
  -moz-border-radius: 5px;
}
#Kunena div.kbody {
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
}
#Kunena div.kblock > div.kheader {
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
}
#Kunena .klist-actions, #Kunena .klist-actions td, #Kunena .klist-actions-bottom, #Kunena .klist-pages-all, #Kunena div.kforum-pathway, #Kunena div.kpathway, #Kunena .klist-markallcatsread {
  background-color: transparent;
  border-color: transparent;
  margin: 5px 0px
}
#Kunena td.krowmoderation, #kwhoisonline td.kcol-first, #kwhoisonline td.kcol-mid, #kfrontstats td.kcol-first, #kfrontstats td.kcol-mid {
  border-bottom-color: transparent;
}
#Kunena div.kblock span.ktoggler {
  right: -5px;
  top: 5px;
}
#Kunena img.kstats-bar {
  height: 10px;
}
#Kunena .kheader h2, #Kunena .kheader h2 a, #Kunena .kheader h2 span {
  line-height: 2.2em;
  text-transform:capitalize;
}
#Kunena .kwhoisonline .kheader h2 {
  padding-bottom: 8px !important;
}
#Kunena .kthead-title, #Kunena .kthead-title a {
  text-transform:capitalize;
}
#Kunena td.kcol-ktopicviews {
    display: none;
}
#Kunena .kforum-headerdesc-custom1 {
    background-color: #FFE1B3;
    color: #000000;
}

People may be asking which file to modify to add these changes.  The best place to make these changes is a custom CSS file (as explained in another article written some time ago).

Never directly edit or replace the original Kunena template source files including the .CSS files! Any changes you make will be overwritten when you upgrade or re-install Kunena.

When you apply these changes, your Kunena forum should look something like what you see in the image on the right of this page.

But wait, there’s more.

Remove the borders between forum elements

A few days ago I saw a question on the Kunena forum that asked if it was possible to collapse all the forum borders to zero pixels in width.  Although I am not sure that I correctly understood the question, after a little bit of experimentation, I found a neat trick to give Kunena a nice change that you can see in the image on the left.

This change is achieved with the CSS code shown below:

#Kunena td {
    border-width: 0px !important;
}

Add these lines to the end of your custom CSS file.

All of the changes described in this article should work equally well whether you’re using Kunena versions 2.0, 3.0 or 4.0.

Notes:

[1]  A short list of alternative/third-party templates available for Kunena:  Roundtheme; 9themestore; TemplateKunena.com; RocketTheme; templateBlender; Shape5.com; JoomForest; Studio42 as well as many others too numerous to list.  All of these template designs are based on Blue Eagle and none of them will work with K 5.0.

[2]  To give credit where it’s due, the original Blue Eagle template was designed by Ron Severdia.  The CSS tweaks, described in this article, that generate the rounded borders seen today on the Kunena website were invented by the author.  It is disappointing that current team of developers—whose names are listed in credits for K 4.0—do not acknowledge Ron for his important contribution.  From the author’s perspective, we should acknowledge and pay tribute to hundreds of people whose ideas have given us delight in our work.

About the author:

Michael Russell has worked in the information technology industry since 1971 and, since retiring from the workforce in 2007, is a website hobbyist specialising in Joomla, a former member of the Kunena project for more than 8 years, and contributor on The Joomla Forum™. The opinions expressed in this article are entirely those of the author. View his profile here.