Question CSS Rules Being Overridden

Hi there,

I just installed Kunena 1.7.1 on my system and followed the instructions on this page to create my custom template and I made sure that my custom template is set as the default in the Template Manager. In my kunena.default.css stylesheet, I specified a new color and shape for the tabs. However, when I load the forums on the front-end, my rules are being overridden by some other rule (which seems to be coming from the default Blue Eagle template, but I am not sure).

Looking at it in Firebug, the rule that takes over seems to be coming from index.html (if I am on the forum's index page) and from newtopic.html if I am on the New Topic page. Obviously, this is some dynamically-generated CSS that's taking over, but I am not sure where to find the solution. I am running in debug mode. Would appreciate someone guiding me to the right solution (or FAQ). Thanks.

G'day, steacha, and welcome to Kunena.

I would like to make a few general comments at this time.

The guide that you refer to is half-written (I'm sorry to say) and it presupposes that you have a strong working knowledge of Joomla and CSS in order to make it work. That's not to say that it isn't difficult to adapt any working Kunena template (like the Blue Eagle template that comes with Kunena) and the FAQ guide How do I change the colours of my template in Kunena? is appropriate in 99% of cases. Where the rough-and-ready guide is not appropriate is if you want to rearrange the placement of web elements or if you want to display other elements not handled by the Blue Eagle template. In those cases it's necessary to build your own template.

So, while these custom templates are wholly achievable, they take a bit of work and the half-written guides are the only ones that we have at the moment.

The Kunena forum is a self-help resource that relies on community support. The moderation team tries to connect people with the information that exists but we don't attempt to deal with major design issues that affect a handful of users. Those are, in the main, matters for people to deal with themselves - with the occasional prompting from us to (hopefully) point them in the right direction.

Again, as a general comment., because the Joomla template is the last piece of CSS loaded by Joomla, it tends to override just about every other piece of CSS that might be loaded by a module, component or pluging. That's why it's often best to slot your customised CSS into the Joomla template and leave Kunena untouched. That's not a hard-and-fast rule (of course), it's just a friendly tip.

Thank you for your answer, sozzled. I did figure out the reason why I experienced the problem I experienced and why it is perhaps not recommended to jump right into using custom templates, and to use or apply our customizations based on the Blue Eagle template instead.

This is probably due to the fact that Kunena hardcodes stylesheets based on the Blue Eagle template right into the page at run time as opposed to linking to external style sheets. Yikes! Even worse is that the Blue Eagle CSS rules are added no matter what; that is, even if the Blue Eagle template is not selected as the default template. I am extremely surprised at this static implementation, which can only limit flexibility and make customizing templates or developing new ones more complex than they need to.

Considering that template customization is one of the main things people tend to jump into right away, I hope the Kunena team is looking at a more modular and dynamic implementation for template customization in the next version.

steacha wrote: ... Blue Eagle CSS rules are added no matter what ...

That is not true, but it would take me a long time to explain what you need to do. I don't make custom templates myself; it takes too much time and, if I was doing that, I would not have any time to look at the questions that people ask on the forum. I just use the stock-standard, unmodified Blue Eagle template and make the occasional small adjustment to my Joomla template to accommodate colours, font styles and a few minor cosmetic things.

Just to clarify, I didn't want to develop a full fledged template package. I just wanted to have all my customization neatly stored in a set of files (or directory structure) without modifying the default files (aka the Blue Eagle template). This is common practice.

sozzled wrote:

steacha wrote: ... Blue Eagle CSS rules are added no matter what ...

That is not true, but it would take me a long time to explain what you need to do...

I already looked at the source code to see what I would need to modify to prevent the hard-coding of the CSS rules within the head of the HTML, but I remain curious as to why you said that it's not true. Is it because custom templates built following the instructions in the guide I referred to earlier are by default being loaded as a subset of the Blue Eagle template? In other words, the Blue Eagle template is still seen as the parent template and hence why its rules are still being hard-coded even though I specified my custom template as the default one; is this the case?

I have this exact same problem (except I just directly modified the "Example" template). It only seems to be affecting the top menu. After reading the above, I tried modifying the "Blue Eagle" template, but that did not work either.

Any assistance would be greatly appreciated. The site is still under development, but you can see it here:

Knoxville Now

We have, on many occasions, tried to explain that the Example template (that is included with the Kunena installation package) is not a template that works. It's a "template" for template developers to build a Kunena template. It's unfortunate that the instructions to guide people with the process of building a custom template are not very well written.

Therefore let's focus on the problems that you may be having with the Blue Eagle (default) template.

I looked at your site. I don't understand the problems that you seem to be having with the top menu. Would you like to provide us with a screenshot that demonstrates the issue?

We will do our best to help you even though, as I've already written, the process of developing a custom template is a little tricky especially considering the lack of a comprehensive guide for template developers.

Thank you for taking the time to help with this. So I switched back to Blue Eagle as my default and modified the css. This worked for some items, but not all. It seems that directly modifying the css of items that can be controlled by the backend color chooser does not work. So I used the aforementioned chooser to modify what I could, which is the majority of what I need to do.

It all worked with the exception of the "Inactive tab font color" and the red color on hover of links that I wanted to change to orange did not work either with a direct css modification.

The template options are added into main HTML from initialize.php inside your template. Try removing those options you don't want to use.

Thank you, I will take a look at it.

Well, I have had success changing everything I wanted with the exception of the following three items:

Tab font, tab font color, and changing the red (ff0000) font color to my desired orange color. I have modified these across multiple files, but still no luck.