×
Blue Eagle 5 v1.6.2 has been Released for Kunena 5.2 (20 Jan 2021)

The Kunena team has announce the arrival of Kunena template Blue Eagle 5 v1.6.2 which is now available for download. This version addresses most of the issues that were discovered in development.

REQUIREMENTS
Blue Eagle 1.6.x requires Kunena 5.2.x to work with

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

More
11 years 9 months ago #11 by sozzled
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! B)

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

More
11 years 9 months ago #12 by johnnydement
yOu could work a nifty template from this getting rid of the grey box around the speech bubble ;)

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

More
11 years 9 months ago - 11 years 9 months ago #13 by sozzled
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:
div.msgtext {
	position: relative;
	background-color: #f0f0f0;
	padding: 25px;
}
 
span.arrow{  
 width: 0;  
 height: 0;  
 line-height: 0;  
 border-left:  30px solid #f0f0f0;
 border-bottom: 15px solid white;  
 position: absolute;  
 top: 20px; 
 left: -30px;
} 
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?
Last edit: 11 years 9 months ago by sozzled.

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

More
11 years 9 months ago #14 by Lintzy
johnnydement wrote:

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


Something like this?

Attachments:

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

More
11 years 9 months ago #15 by johnnydement
Well. depends, is that site having a black background? ;)

I would also "transparentize" user profile :P

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

More
11 years 9 months ago - 11 years 9 months ago #16 by Lintzy
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.
Last edit: 11 years 9 months ago by Lintzy.

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

More
11 years 9 months ago #17 by sozzled
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?

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

More
11 years 9 months ago #18 by Lintzy
You mean, the bubble itself should be grey and the background around the bubble white?

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

More
11 years 9 months ago - 11 years 9 months ago #19 by sozzled
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.
Last edit: 11 years 9 months ago by sozzled.

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

More
11 years 9 months ago - 11 years 9 months ago #20 by Lintzy
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:

Attachments:
Last edit: 11 years 9 months ago by Lintzy.

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.101 seconds