×
Kunena 5.1.15 Released (27 Oct 2019)

The Kunena team has announce the arrival of Kunena 5.1.15 [K 5.1.15] which is now available for download as a native Joomla extension for J! 3.9.x. This version addresses most of the issues that were discovered in K 5.1 and issues discovered during the development stages of K 5.1.

× Topics that are moved into this category are generally considered to be closed. Users may want to add additional information but these topics should not be resurrected in order to discuss new problems or unrelated matters.

Question The 5 minute quick and dirty Kunena 1.6 template

More
9 years 4 months ago - 9 years 4 months ago #1 by severdia
Now that Kunena 1.6 is in beta and rapidly approaching final form, I'd like to give you a demonstration of how easy it is to customize it. In fact, with our new template structure, you can customize the template to match your site in just a few minutes.

Most websites have a color palette of 2 or 3 colors and Kunena is the same. The third color for Kunena is grey, which goes anything so we're going to leave that color mostly as-is. Below is a snippet of CSS code. Replace the #XXXXXX color with the primary hex color of your site. Then replace #YYYYYY with the secondary hex color of your site. Paste this code at the bottom of your template.css file (in your Joomla templates folder). This will override Kunena's existing colors with your colors.
/* Change the link colors */
#Kunena a:link, 
#Kunena a:visited, 
#Kunena a:active {
	color:#XXXXXX !important;
}
 
/* Change the header background colors */
#Kunena .kblock div.kheader {
	background:none repeat scroll 0 0 #XXXXXX;
}
 
/* Change the header text colors */
#Kunena .kblock div.kheader h2 a:link,
#Kunena .kblock div.kheader h2 a:visited,
#Kunena .kblock div.kheader h2 a:active {
	color: #fff !important;
}
 
/* Change the tab colors */
div#ktab ul.menu li a {
	background-color: #XXXXXX !important;
}
 
/* Change the active tab & rollover colors */
div#ktab li#current a {
	background-color: #YYYYYY !important;
}
div#ktab ul.menu li a:hover {
	background-color: #YYYYYY !important;
}
 
/* Change the border color under the top nav */
#Kunena #ktop {
	border-color: #YYYYYY;
}
 
/* Change the pagination color */
#Kunena .kpagination .active {
	background:none repeat scroll 0 0 #XXXXXX;
	border:1px solid #YYYYYY;
}
#Kunena .kpagination a {
	border:1px solid #YYYYYY;
}
#Kunena .kpagination a:hover {
	border:1px solid #YYYYYY ;
	color: #fff !important;
	background: #XXXXXX;
}
 
/* Change the post link color */
#Kunena div.kmsg-header h2 a {
	color: #fff !important;
}
 
/* Change the toggler color */
#Kunena #ktop span.ktoggler {
	background-color:#XXXXXX;
}
 
/* Change the button rollover color */
#Kunena .kbutton:hover, #Kunena .kbutton:focus  {
	background-color: #XXXXXX;
	border-color: #YYYYYY;
}

I left the comments in there so you can see what you're changing, but if you're a more experienced CSS user, you can combine the styles to be more efficient.

This is a great way to instantly customize your Kunena template to match your Joomla template. It's also upgrade-proof so when you update Kunena, all your customizations will remain untouched. Enjoy!

Author of Using Joomla from O'Reilly Media. | www.usingjoomlabook.com
Last edit: 9 years 4 months ago by severdia.
The topic has been locked.
More
9 years 4 months ago - 9 years 4 months ago #2 by Groenteman
Hello Severdia,

I did use your color customizing but some buttons won't change color.
I mean the purple and blue once.



Can you help me out where to change?

Thanks in advance,

Groenteman
Attachments:
Last edit: 9 years 4 months ago by Groenteman.
The topic has been locked.
More
9 years 4 months ago #3 by severdia
Yes, those buttons are images so they won't change color. Only the form buttons will change color.

To change the color of those, you need to create a new image for the backgrounds. The image is located here:

components/com_kunena/template/default/media/iconsets/buttons/default/default.png

Author of Using Joomla from O'Reilly Media. | www.usingjoomlabook.com
The following user(s) said Thank You: dauf, zomblaa
The topic has been locked.
More
9 years 4 months ago #4 by Groenteman
Super :) Changed the blue and purple to green.




Its not 100% but for the time it will do.
I attached the file B)

Groenteman
Attachments:
The topic has been locked.
More
9 years 4 months ago - 9 years 4 months ago #5 by Baze
Here is green non-crispy version ;)
Attachments:
Last edit: 9 years 4 months ago by @quila.
The following user(s) said Thank You: MarkBoy81, Xiscote, Simpel
The topic has been locked.
More
9 years 4 months ago #6 by Baze
Here is green non-crispy version ;)

Attachments:
The following user(s) said Thank You: Leif, jpc0480, MarkBoy81, Groenteman, komora, lanya
The topic has been locked.
More
9 years 4 months ago #7 by @quila
This one must be a Sticky ;)
The topic has been locked.
More
9 years 4 months ago #8 by Odin Vegtamr
Yes, I have a purple-black site and is dificult to me find templates that matches "out of box". With the time I had more or less problems editing templates, until now. If you kown a little of CSS, you can edit this kunena 1.6 templates very easy. Is a strong point of this new version :)
The topic has been locked.
More
9 years 4 months ago #9 by MarkBoy81
You guys are a blessing from the Heavens. :)
The following user(s) said Thank You: markxcool
The topic has been locked.
More
9 years 4 months ago #10 by J!Stefan
@Baze

Can you post the original file,please?? Because I`dlike to change the color from the buttons for my settings.

thanks.
The topic has been locked.
  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to edit your message.
Time to create page: 0.165 seconds