Kunena 6.2.5 & module Kunena Latest 6.0.7 released

The Kunena team has announce the arrival of Kunena 6.2.5 [K 6.2.5] which is now available for download as a native Joomla extension for J! 4.3.x/4.4.x/5.0.x. This version addresses most of the issues that were discovered in K 6.1 / K 6.2 and issues discovered during the last development stages of K 6.2

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
14 years 8 months ago - 14 years 8 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
Code:
<div class = "msgtext"><?php echo $msg_text; ?></div>
Change to:
Code:
<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:
Code:
#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
Code:
#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: 14 years 8 months ago by sozzled.

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

More
14 years 8 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
14 years 8 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
14 years 8 months ago - 14 years 8 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
Code:
<div class = "msgtext"><?php echo $msg_text; ?></div>
Change to:
Code:
<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:
Code:
#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
Code:
#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: 14 years 8 months ago by sozzled.

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

More
14 years 8 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
14 years 8 months ago - 14 years 8 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: 14 years 8 months ago by sozzled.

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

More
14 years 8 months ago - 14 years 8 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: 14 years 8 months ago by sozzled.

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

More
14 years 8 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
14 years 8 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
14 years 8 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.

Time to create page: 0.414 seconds