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

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