One of the most commonly asked questions among users of Kunena (and the same thing is true for any Joomla extension) is “Which CSS file should I change …” (for all kinds of reasons).  This question has been “answered” in variously different ways—some good and some bad—including recommending that people directly edit the file kunena.forum.css (or, worse, the file kunena.forum-min.css).  This is actually very bad advice—and that’s not just my personal opinion!

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.

Aside from the fact that Kunena installs its own CSS files (and minified versions of them) and apart from the fact that you can edit these files (if you really have the enthusiasm to wade through pages of not-very-well documented code) any changes that you make to these files will be lost when you install a new version of Kunena or re-install (or downgrade from) the version that you are currently using.

There are three consistently better ways to preserve your own custom “CSS tweaks” to Kunena (depending on your time and enthusiasm for these things):

1. Add extra lines to the end of your Joomla site template file.  This method is the simplest—it is also the most commonly suggested method—but, if you update your Joomla site template file you may also find that any changes you make there will be lost, too.
2. Create your own custom CSS file and add it to your Joomla site template.  This is a better way of addressing the problem but also, if you update your Joomla site template file, you may have to add one line of code again afterwards.  Generally-speaking, however, people do not often change their Joomla site template files.  This article will describe the steps involved in creating your own custom CSS file.
3. Create your own Kunena template.  This is the ideal solution but it is technically the most challenging and is recommended only for the most advanced users of Joomla.

Tools to help you design your own CSS rules

There a several aids to developing your own CSS rules—for Kunena or any web page—and most of them are free.  Most modern web browsers include these tools as standard although some browsers[1] require you to install add-on software).  I prefer to use Firebug for Firefox but you can use whatever you are most comfortable with.

After you have crafted your CSS rule(s) for your site, copy the code and paste it into a standard text editor[2] (e.g. Notepad) and you are ready to build your own custom CSS file.

Build your own custom CSS file

Most of the better commercial Joomla templates include a file—usually empty—where you can add your own custom CSS rules.  You will normally find this file in the folder <joomla-root>/templates/<template-name>/css/ and the file is often called custom.css.  Don’t worry if your template does not have this file—most of the free templates that come installed with Joomla do not have it, either).  This article will explain how to create one for the Joomla Protostar template.  You can use the same technique to create your own custom CSS file for your own template.

For the purposes of this tutorial, we are going to create a file for custom changes to Kunena and the name of the file will be custom_kunena.css.  If you want to create a more “general purpose” custom CSS file, you might like to call it custom.css instead.

How to add a custom stylesheet to the Joomla Protostar template

If you are planning to use the Protostar template that comes with Joomla, you can add your own custom_kunena.css stylesheet. You can name it whatever you wish, of course, except template.css which is the name for the default stylesheet.

The benefits of having your own stylesheet are:

1. You are not altering the template.css, so you don’t have to be concerned with scrolling around in this extremely long stylesheet.
2. If you upgrade Joomla, the upgrade may overwrite the template.css stylesheet that comes with Protostar and you may have to replace the new template.css with your old one or recreate your styling.
3. style="list-style-type: lower-alpha; text-align: justify;"If you merely replace the new template.css with your old one, you could miss out on crucial changes that were made with a newer version.
4. If you create your own stylesheet it is clean, organised the way you want it to be and only has the styles that you yourself have altered or created.
5. If the link in the template index.php is done properly, the styles established in custom_kunena.css can override specific styles in template.css. as well as other stylesheets loaded by the Kunena component or other Joomla extensions you may have installed.

Create a custom stylesheet using Joomla’s Template Manager[3]

Joomla 3 has greatly improved how you can create and edit files using the Template Manager.

Extensions » Template Manager

You will see a page with a table of the installed templates for your site. The columns are Style, Default, Assigned, Location, Template and ID.

To create a custom stylesheet for the Protostar Template, click on Protostar in the Template column. 

Be sure you are in the Editor tab.

Click on the css folder in the left column, initially you will see only template.css which comes with the Protostar template.

Near the top of the page, find and click the New File button.

A dialog box will drop down.  Highlight the css folder and select “css” from the File Type dropdown.

Type the name of the new file—do not add the extension of .CSS—then select Create.

You can also choose to upload an file from your own computer.

The dialog box goes away and you will see a text editor with your new or uploaded file.

You can add your styling right in this text box.

Now you have to add the link to this stylesheet to the index.php file so that Joomla will load it when it loads the web page in the browser.

Edit your “index.php” file to see the new stylesheet

In Joomla’s Template Manager you may also edit your index.php file for your template.

You should always create a backup copy of the index.php file before editing, but there is no option to copy a file in this section of Template Manager.  You could create a copy using a separate FTP program or you can open the index.php file, hit CTRL + A to select everything then CTRL + C to copy all of the files content, then create a new file, choose a PHP file type, name the file something like index3-5-14.  When the empty file comes up select CTRL + V to paste the copied content into the new file. Hit save, then go back and edit the original index.php file.

In the Editor Tab of Template Manager the list of folders and files on the left are the files inside your template folder.

Click on “index.php” (after you made a copy of it) and the file will appear in the text editor.

Look for the line as shown below:

add this line just underneath, using the name of your custom stylesheet.

\(doc->addStyleSheet('templates/'.\)this->template.'/css/custom_kunena.css');

Now you can add your own styling or create styles that will override styling created by template.css.

Caution
Keep in mind that if you upgrade Joomla, it will overwrite the index.php file.  You may have to redo these steps with the new index.php file.  A way around this is to copy the entire template and make the copy your default template.

Notes:

[1]  The web design tool for Firefox is available as a separately installed add-on called Firebug.  Internet Explorer has its IE Developer Tools built-in.  Google Chrome also has a tool called DevTools built-in.  Safari also has a built-in tool called Web Inspector. For users of Opera there is a built-in tool called Dragonfly.  For other online web design aids, visit the Creative Blog website.

[2]  If you would prefer a text editor that is designed to handle syntax checking and code highlighting, there are better alternatives than Notepad. My personal favourite editor for CSS (as well as XML or PHP) is Context.

[3]  I am indebted to an online article entitled Add a custom stylesheet to the Protostar template for a lot of the material contained in this tutorial.

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.