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

This is absolutely first-class brilliant, EDimNETZ! :woohoo:

I've been following this discussion since it began. I saw the basic approach and thought how good this would be if it could be solved. Even though I consider myself fairly good with CSS, I don't know quite enough about the internal element structure of Kunena to know which CSS bits to change.

I will be trying this approach soon on my own website. Thank you very much for a fantastic piece of sleuthing. Waddayareckon? This should be made standard for Kunena, eh?

And, no, GM: there are no images involved. This is some really nifty CSS!

yOu could work a nifty template from this getting rid of the grey box around the speech bubble

I spent about 2½ hours unsuccessfully trying to adapt the solution to the Kunena default_ex template. Although Eddy's solution works for him (because his template has contrasting off-white background and the white "bubble" renders nicely against it) it doesn't work successfully with default_ex template that displays messages against a pure white background.

I've also experimented, unsuccessfully, by trying to use a contrasting background, like this: I took Eddy's template and used it on my test site and everything works fine. Evidently, there's another CSS tag that's used by Eddy's template that's assisting his technique, but I can't find what it might be. Any ideas?

johnnydement wrote:

yOu could work a nifty template from this getting rid of the grey box around the speech bubble

Something like this?

Well. depends, is that site having a black background?

I would also "transparentize" user profile

hehe, yes it was made with a little bit CSS. Changed the background, of course you can take every color you like for that.

It was just a fast example.

Not this side has a black background, but the messagebox. What was grey before.

Apart from the one-line change to message.php (see www.kunena.com/forum?func=view&catid=90&id=14366#14420 ) what CSS changes have to be made to the Kunena default_ex template to display a grey "talk bubble" against a white background?

You mean, the bubble itself should be grey and the background around the bubble white?

Yes, thank you: bubble = grey (#f0f0f0); background: white (#fffff). I'm looking at a very simple change to the existing default_ex template. If you look earlier in this thread, I experimented for 2½ hours earlier today without success. I think there's more to be changed than merely the div.msgtext CSS definition and the addition of the span.arrow CSS definition.

I know that my browser can display the bubble (I replaced my kunena.forum.css file with Eddy's version and demonstrated that the method works but not the implementation) but I can't figure out what other elements in the default_ex template need to be targetted.

Thanks. This is a really interesting idea that I think is worth playing with.

Search the code in CSS and match it with the following:

div.msgtext {
background-color:#F1F1F1;
padding:25px;
position:relative;
}
td.fb-msgview-right {
background-color:#FFFFFF;
padding:5px 10px 5px 30px;
vertical-align:top;
border-right:1px solid #F1F1F1;
}
span.arrow {
border-bottom:15px solid #F1F1F1;
border-left:30px solid #FFFFFF;
height:0;
left:-30px;
line-height:0;
position:absolute;
top:20px;
width:0;
}
td.fb-msgview-right-c {
background-color:#FFFFFF;
padding:1px 5px;
vertical-align:top;
border-right:1px solid #F1F1F1;
}
td.fb-msgview-right-b {
background-color:#FFFFFF;
padding:1px 5px;
vertical-align:top;
border-right:1px solid #F1F1F1;
}
div.fb-msgview-l-cover {
overflow:auto;
padding:5px;
text-align:center;
background:#FFFFFF;
}
div.viewcover {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#515151;
margin:2px 25px;
text-align:center;
}
td.fb-msgview-left-c {
background:#FFFFFF none repeat scroll 0 0;
vertical-align:top;
border-left:1px solid #F1F1F1;
border-right:1px solid #F1F1F1;
}
td.fb-msgview-left-b {
background:#FFFFFF none repeat scroll 0 0;
vertical-align:top;
width:170px;
border-left:1px solid #F1F1F1;
border-right:1px solid #F1F1F1;
}

This will look like on screenshot: