Question *SOLVED* How-to: CSS Speech Bubbles & Topmenu links into Profilebox ..

Thanks, Lintzy. I'll play with this tomorrow.

Sorry, I forgot the right border. I changed the code above (I have edited the quote too) and now it will look so ->

Wow, thanks for all the positive feedback.
Didn't know, people would be so into this ... :woohoo:

@ grumblemarc
No ... no images used. Pure CSS.

@ all
I tried to do it vice-versa too (grey bubbles, white background). The problem is: the smileys.
On a grey color (the bubble) they don't look good (frenzied out).
That's why I made the forum background grey and the bubbles white.
But, as said before, this is work in progress ... my website is in development and I'm still playing around with color schemes.

The point is: it can be done.
And you have to play around with the css to get the colors and the look you want.
Took me 4 hours yesterday to get this result only ...


About making it a template
Yeah, I thought about it too.
I will probably make it available, once I'm done with my site.
There are still missing buttons and further optimizing.

And now the bad part:
The css bubbles won't work on IE6.
I think it's because the "arrow" has an absolute position.
(Anybody know a solution to put in the ie.css?)



And before the praise goes on:
I'm just a guy with ideas – looking to get things done the way that I want them.
I don't know anything about coding or css.
(Just use the fairly nice CSSedit for mac, which is perfect for visual editing, i.e. no code )
I searched the net for CSS bubbles and then I asked here.
So, I just had the idea, but it's other ppl (thanks again, ida) that actually knew what coding was needed to get this done.

And now the bad part:
The css bubbles won't work on IE6.

I knew there would be a downside. The default templates had something similar in them but relied on an image to act as the arrow. More stable that way I think.

G'day everyone. It's taken me a couple of days to figure it all out, but I've figured out how to tweak the default_ex template to produce the speech bubble effect as demonstrated in the image below:



The changes that need to be made to ../components/com_kunena/template/default_ex/kunena.forum.css are listed below (highlighted in red):

VIEW PAGE

---

*/
#fb_views {
background: #FFFFFF;
color: #000000;
}
th.view-th {
text-align:right;
padding-right: 10px;
}
th.fb_sectiontableheader {
}
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;
}
div.fb-msgview-l-cover {
overflow:auto;
text-align: center;
padding:5px;
}

span.view-username {
}
span.view-username a:link, span.view-username a:visited {
font-weight:bold;
text-decoration: none;
color:#357994;
}
span.view-username a:hover {
color:#000000;
text-decoration: none;
}
span.msgusertype {
font-weight:normal;
text-decoration: none;
text-decoration: none;
font-style:italic;
}
span.fb_avatar {
}
span.fb_avatar img {
border:1px solid #BFC3C6;
padding: 1px;
margin:5px;
}
div.viewcover {
border:1px solid #BFC3C6;
background: #DDDDDD;
color:#333333;
text-align: center;
margin:2px 5px;
}
span.msgtitle, span.msgtitle_new {
font-weight:bold;
text-decoration: none;
background: url(images/msgtitleicon.gif) no-repeat left center;
padding-left:25px;
line-height:26px;
font-size:medium;
}
span.msgtitle_new {
background: url(images/msgtitlenew.gif) no-repeat left center;
}
span.msgdate {
font-weight: normal;
text-decoration: none;
padding-left:10px;
font-size:x-small;
font-family:Arial, Helvetica, sans-serif;
white-space: nowrap;
}
span.msgkarma {
font-weight: bold;
color: #333333;
text-decoration: none;
padding-right: 10px;
white-space: nowrap;
}
div.msgtext {
position: relative;
background-color: #fff;
padding: 10px 4px 25px 4px;
left: 0;
}
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;
}
div.fbcode {
overflow:auto;
}
div.msgtext pre, div.msgtext .code {
border-left: 5px solid #F4A94F;
border-right: 1px solid #CCC;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-family: "Courier News", monospace;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.5;
margin: 5px 0pt 15px;
padding: 10px 15px;
width: 100%;
overflow:auto;
}
div.fb_file_attachment {
background:#BFC3C6;
border: 1px dotted #555555;
padding:10px;
margin-bottom:10px;
}
span.contentheading {
}
div.switchcontent {
}
div.fb_smalltext {
font-size:x-small;
font-family:Arial, Helvetica, sans-serif;
}
td.fb-msgview-right-c div.fb_smalltext {
padding:5px;
text-align:right;
}
div.fb_message_editMarkUp_cover {
padding-top:5px;
margin-left:5px;
text-align:right;
border-bottom: 1px dotted #CCC;
}
span.fb_message_editMarkUp {
background:#f7f7f7 no-repeat left center;
height: 16px;
border-left:1px dotted #CCC;
border-right:1px dotted #CCC;
border-top:1px dotted #CCC;
padding:2px 5px 2px 5px;
margin-left: 3px;
font-size:xx-small;
color:#666666;
}
span.fb_message_informMarkUp {
background:#f7f7f7;
height: 16px;
border-left:1px dotted #CCC;
border-right:1px dotted #CCC;
border-top:1px dotted #CCC;
padding:2px 5px 2px 5px;
margin-left: 3px;
font-size:xx-small;
color:#666666;
}
td.msgsignature {
width: 100%;
}
td.msgsignature div {
text-align: left;
overflow: hidden;
color:#999;
font-size:x-small;
padding: 5px 5px;
}
div.fb_message_buttons_cover {
text-align:right;
height: 15px;
line-height: 15px;
margin: 4px 0px 3px;
line-height: 14px;
white-space: nowrap;
}
td.fb-msgview-left-b {
background:#EFF0F4;
vertical-align: top;
width:170px;
border-bottom:1px solid #BFC3C6;
border-right: 1px solid #BFC3C6;
}
td.fb-msgview-right-b {
border-bottom: 1px solid #BFC3C6;
padding:1px 5px 1px 5px;
vertical-align: top;
border-left:1px solid #D4C9AD;
border-right: 1px solid #BFC3C6;
background-color: #f1f1f1;
}
span.fb_qr_fire {
}
.switchcontent {
display:none;
}
#Kunena .switchcontent .inputbox {
border: 1px solid #999999;
background: #FFFFFF;
color: #000000;
margin: 2px 0px;
}
span.fb_quote {
display: block;
border: 1px dotted #CCC;
margin: 5px 0pt;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
background: #F7F7F7;
}
#Kunena div.fbhide {
background:#FFF8F2 url(images/bullet-tips.gif) no-repeat scroll 5px center;
border:1px dotted #F2CAB7;
font-size:medium;
padding:10px 10px 10px 25px;
}

At the very end of this file, comment out the third-last line as shown below:

.msgtext {
// overflow:auto;
width:95%;
}

I am also attaching a copy of the modified CSS file if you don't want to make these changes by hand.

you know, in htat image is hard to see anything

Try this instead: enduring.com.au/40P_demo/forum?func=view&catid=9&id=160