×
Kunena 5.2 RC3 Released (Yesterday)

The Kunena team is thrilled to announce the third public release candidate of Kunena 5.2, a native Joomla extension for Joomla 3.9. This is a development release and should be only be used for testing; this version is not recommended for live websites at this stage.

The purpose of this release is to encourage testing by downloading, installing and identifying any problems or shortcomings that people may discover. K 5.2.0 RC3 is stable and we are aware that people will discover defects. We encourage you to use the forum to report defects, as soon as they are discovered, so that the development team can work through the problems before the release of K 5.1 as a stable product. Reporting defects does not mean that the problems can or will be fixed. The Kunena team is looking forward to hearing your feedback on how well we have achieved our design goals.

× This category contains miscellaneous, uncategorised user contributions, (templates, modules, plugins and hacks) relating to older versions of Kunena that are no longer supported.

This category may also contain a few topics relating to K 1.6 that may have been moved here possibly by mistake.

The topics in this category are for historical interest only. Owing to the structural differences between K 1.6 and K 1.7, these ideas in these topics will not work with later versions and, for that reason, the topics are locked.

Idea K 1.5.3 - "Speech bubbles" for default_ex template

More
11 years 4 months ago - 11 years 4 months ago #1 by sozzled
In an earlier discussion , someone asked how to create "speech bubbles" (see image below - click to enlarge) in Kunena.



I wrote a tutorial on how to achieve this result in K 1.0.10 (see K 1.0.10: "Speech bubbles" for default_ex template ). You can also see a working demonstration of the concept at www.enduring.com.au/40P_demo .

With Kunena 1.5.3 there have been further changes to the default_ex template that affect the recommendations I made in my other posting. Although the techniques are still basically the same, I'm providing updated information here.

To create "speech bubbles" (for template default_ex):

Step 1: Edit the file ../components/com_kunena/default_ex/message.php at line 100 from
<div class = "msgtext"><?php echo $msg_text; ?></div>
Change to:
<div class = "msgtext"><?php echo $msg_text; ?><span class="arrow" /></div>
Step 2: Edit the file ../components/com_kunena/default_ex/kunena.forum.css

(a) Make these two changes as shown by the text in red):

td.fb-msgview-left {
background:#f1f1f1;
vertical-align: top;
width:170px;
min-width:170px;
border-bottom: 0px solid #BFC3C6;
border-right:1px solid #BFC3C6;
}
td.fb-msgview-right {
border-right:1px solid #BFC3C6;
padding:5px 10px 5px 10px;
vertical-align: top;
border-left:1px solid #BFC3C6;
background-color: f1f1f1;
}

(b) Replace the following lines in the same file:
#Kunena div.msgtext {
	width: 100%;
	overflow: hidden;
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	border-top:1px solid #ddd;
	padding:10px 0 0 0;
	margin-top:5px;
}
with
#Kunena div.msgtext {
	position: relative;
	background-color: #ffffff;
	padding: 10px 4px 25px 4px;
	left: 0;
	margin-right: 30px;
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
span.arrow { 
	width: 0;   
	height: 0;   
	line-height: 0;   
	border-bottom: 15px solid #f1f1f1;   
	border-left: 40px solid white;   
	position: absolute;   
	top: 15px;   
	right: -38px;   
}  

Alternatively, copy the attached file and replace the contents of your kunena.forum.css with it:

Attachment kunena-20090708.txt not found


As always, these are only my suggestions; there is no support for them. The CSS features are also not supported in Internet Explorer V6 but they should work with all other versions of IE and other browsers.
Attachments:
Last edit: 11 years 4 months ago by sozzled.

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #2 by hjames
Very nice addition indeed!

Hard to tell by the pictures but does not look as if the bubbles have rounded corners.. even a 5px radius would be nice. Give it a shot if you can I would love to see this!

Thanks,
James

Joomla 1.5.24

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #3 by Spock
Just to bring the conversation on a bit I saw a nice tutorial about rounded corners with just CSS and HTML today (no need for javascript or images)- www.spiffycorners.com . I haven't tested it so I don't know yet but it seems to work for safari, FF3 & ie8 on his demo page . I'll look into it soon or one of you guys can try it if you've time. I think it could be the basis for a nice web2.0 look & feel template. Regards

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago - 11 years 4 months ago #4 by sozzled
Thank you for your feedback, guys. I've got a working solution (you can see it at www.enduring.com/40P_demo):



The revised instructions (to achieve "speech bubbles" with rounded corners) are as follows:

Step 1: Edit the file ../components/com_kunena/default_ex/message.php at line 100 from
<div class = "msgtext"><?php echo $msg_text; ?></div>
Change to:
<div class = "msgtext">  <b class="spiffy-msg">  <b class="spiffy-msg1"><b></b></b>  <b class="spiffy-msg2"><b></b></b>
				<b class="spiffy-msg3"></b>   <b class="spiffy-msg4"></b>  <b class="spiffy-msg5"></b></b>  <div class="spiffy-msgfg">
					<?php echo $msg_text; ?></div>
			    	<b class="spiffy-msg">  <b class="spiffy-msg5"></b>  <b class="spiffy-msg4"></b>  <b class="spiffy-msg3"></b>  
			    	<b class="spiffy-msg2"><b></b></b>  <b class="spiffy-msg1"><b></b></b></b><span class="arrow" />
			    </div>
 
Step 2: Edit the file ../components/com_kunena/default_ex/kunena.forum.css

(a) Make these two changes as shown by the text in red):

td.fb-msgview-left {
background:#f1f1f1;
vertical-align: top;
width:170px;
min-width:170px;
border-bottom: 0px solid #BFC3C6;
border-right:1px solid #BFC3C6;
}
td.fb-msgview-right {
border-right:1px solid #BFC3C6;
padding:5px 10px 5px 10px;
vertical-align: top;
border-left:1px solid #BFC3C6;
background-color: f1f1f1;
}

(b) Replace the following lines in the same file:
#Kunena div.msgtext {
	width: 100%;
	overflow: hidden;
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	border-top:1px solid #ddd;
	padding:10px 0 0 0;
	margin-top:5px;
}
with
#Kunena div.msgtext {
	position: relative;
	background-color: #f1f1f1;
	padding: 0px 4px;
	left: 0;
	margin-right: 30px;
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
span.arrow { 
	width: 0;   
	height: 0;   
	line-height: 0;   
	border-bottom: 15px solid #f1f1f1;   
	border-left: 40px solid white;   
	position: absolute;   
	top: 16px;   
	right: -36px;   
}  
.spiffy-msg{display:block}
.spiffy-msg * {
	display:block;
	height:1px;
	overflow:hidden;
	font-size:.01em;
	background:#ffffff}
.spiffy-msg1 {
	margin-left:3px;
	margin-right:3px;
	padding-left:1px;
	padding-right:1px;
	border-left:1px solid #f7f7f7;
	border-right:1px solid #f7f7f7;
	background:#fbfbfb;
}
.spiffy-msg2 {
	margin-left: 1px;
	margin-right: 1px;
	padding-right: 1px;
	padding-left: 1px;
	border-left: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
 	background: #fcfcfc;
}
.spiffy-msg3 {
  	margin-left: 1px;
  	margin-right: 1px;
  	border-left: 1px solid #fcfcfc;
	border-right: 1px solid #fcfcfc;
}
.spiffy-msg4 {
	border-left: 1px solid #f7f7f7;
	border-right: 1px solid #f7f7f7;
}
.spiffy-msg5 {
	border-left:1px solid #fbfbfb;
	border-right: 1px solid #fbfbfb;
}
.spiffy-msgfg {
	background: #ffffff;
	padding: 4px;
}

Alternatively, copy the attached file and replace the contents of your kunena.forum.css with it:

File Attachment:

File Name: kunena-20090709-2.txt
File Size:31 KB
Attachments:
Last edit: 11 years 4 months ago by sozzled.

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #5 by Matias
Some other suggestions:

* change the background color of signature/buttons to gray
* remove vertical line between message and profile
* remove right margin in the message td to get bubble closer to the profile

Thanks to LDA, sozzled, Spock and others to make this happen. B)

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago - 11 years 4 months ago #6 by sozzled
Thanks, Matias. I like your ideas; they are easy to implement. The relevant CSS elements to change are:

td.fb-msgview-right {
/* border-right:1px solid #BFC3C6; */
padding:5px 10px 5px 10px;
vertical-align: top;
border-left:1px solid #BFC3C6;
background-color: #f1f1f1;
}

#Kunena div.msgtext {
position: relative;
background-color: #f1f1f1;
padding: 0px 4px;
left: 0;
margin-right: -10px;
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#Kunena td.fb-msgview-right-b {
border-bottom: 1px solid #BFC3C6;
padding:1px 5px 1px 5px;
vertical-align: top;
border-left:1px solid #D4C9AD;
background-color: #f1f1f1;
/* border-right: 1px solid #BFC3C6; */
}



I've attached the revised CSS file here:

File Attachment:

File Name: kunena-20090711-2.txt
File Size:31 KB
Attachments:
Last edit: 11 years 4 months ago by sozzled.

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago - 11 years 4 months ago #7 by sozzled
To achieve the same results with K 1.5.4, you need to make the same changes to message.php as shown above and you need to use the following CSS file

Attachment kunena-20090711-3.txt not found

Attachments:
Last edit: 11 years 4 months ago by sozzled.

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #8 by Matias
That was fast. :) Don't you never sleep?

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #9 by sozzled
It's hard to be humble when you're this good ... ;) But seriously, it's only 6:30 pm Saturday at the time of writing.

Please Log in or Create an account to join the conversation.

More
11 years 4 months ago #10 by Spock
I have integrated similar rounded speech bubbles into a template. I have to whole topic in the bubble though instead of just the message text. See here for more: welovekunena.com/images/com_sobi2/gallery/20/20_image_1.png

Please Log in or Create an account to join the conversation.

  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to edit your message.
Time to create page: 0.148 seconds