speech bubble

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

speech bubble

Post by Lumpy Burgertushie » Sun Oct 06, 2019 10:05 pm

I would swear that christian or somebody had created a way to either make the whole posting message look like a speech bubble or at least a currently working bbcode that does it.

anybody know anything about this?

thanks,

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 2:15 am

Our dear big brother G... uh? :)

Ref.: https://davidwalsh.name/css-triangles

[speech]{TEXT}[/speech]

Responsive code.

Code: Select all

<style>
.speech {
	background: #eeeeee;
	border: 1px solid #cccccc;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	width: auto;
	margin-left: 20px;
}

.speech::before {
	position: absolute;
	display: inline-block;
	border-top: 7px solid transparent;
	border-right: 7px solid #eeeeee;
	border-bottom: 7px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.2);
	left: -8px;
	top: 20px;
	content: '';
}

.speech::after {
	position: absolute;
	display: inline-block;
	border-top: 6px solid transparent;
	border-right: 6px solid #eeeeee;
	border-bottom: 6px solid transparent;
	left: -6px;
	top: 21px;
	content: '';
}
</style>
<div class="speech">{TEXT}</div>
Image

Edit: removed 2 spaces in [speech]{TEXT}[/speech]
Last edited by 3Di on Mon Oct 07, 2019 3:12 am, edited 1 time in total.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: speech bubble

Post by Lumpy Burgertushie » Mon Oct 07, 2019 2:30 am

thanks I will give that a try.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 2:38 am

Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: speech bubble

Post by Lumpy Burgertushie » Mon Oct 07, 2019 2:43 am

well, just like the other one similar to that, it does not create anything. it just shows the bbcode and the text entered:

Code: Select all

[speech]hellow world how are you doing[/speech]
I have tried putting the css in the common.css file and no luck.

not sure what I am doing wrong if it works for others.

rob ert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 3:14 am

It is a bbcode, to use like the others.

Image

[speech]{TEXT}[/speech]

Image
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: speech bubble

Post by Lumpy Burgertushie » Mon Oct 07, 2019 4:02 am

thanks, I did know that. I used it exactly as you have shown. on my test board in wamp it simply shows as in the post I made above.
If I create the bbcode on one of my live boards online, it still does not work. it does not post the bbcode [speech][/speech] brackets, it just posts the text I type in with no styling at all.

I can create any other bbcode I wish and they all work, just not this one for some reason.

thanks,
robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 4:31 am

Tested on 3.2.4 it doesn`t works either. I am using 3.2.8 for the above test.

To let it work on 3.2.4 you should basically put all style inline
(but ::before and ::after do not work, so no triangle etc..)

Code: Select all

removed since is buggy
Last edited by 3Di on Mon Oct 07, 2019 4:57 am, edited 3 times in total.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: speech bubble

Post by Lumpy Burgertushie » Mon Oct 07, 2019 4:43 am

me too.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 4:48 am

Update your boards to 3.2.8.


Example: this is a "speech" inside a transparent "bubble"

Image
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Lumpy Burgertushie
Registered User
Posts: 66812
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: speech bubble

Post by Lumpy Burgertushie » Mon Oct 07, 2019 6:35 am

all of my boards are already at 3.2.8
I really appreciate the help. however, I have tried every thing you said before I asked for help and have now tried it all again.
I know it has to be something simple if it works for you. I just can't figure it out.


thanks,
robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Talk19Zehn
Registered User
Posts: 398
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: speech bubble

Post by Talk19Zehn » Mon Oct 07, 2019 9:31 am

Hello, here we go, -- please test this:

BBCode:

Code: Select all

[bubble]{TEXT}[/bubble]
HTML:

Code: Select all

<style>
/* Bubble-Effect - create as rectangle-speechborder based by fachinformatiker.de/topic/148104-htmlcss-sprechblase
------------------------------------------------------------------------------------------------------------------------ */
.rectangle-speech-border {
	position: relative;
	padding: 15px;
	margin: 1em 0 6em;
	border: 5px solid #5A8F00;
	color: inherit;
	/* css3 */
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
	content:"";
	position: absolute;
	z-index: 10;
	bottom: -40px;
	left: 40px;
	width: 50px;
	height: 30px;
	border-style: solid;
	border-width: 0 5px 5px 0;
	border-color :#5A8F00;
	/* css3 */
	-moz-border-radius-bottomright: 80px 50px;
	-webkit-border-bottom-right-radius: 80px 50px;
	border-bottom-right-radius: 80px 50px;
}

/* creates smaller curve */
.rectangle-speech-border:after {
	content:"";
	position: absolute;
	z-index: 10;
	bottom: -40px;
	left: 40px;
	width: 20px;
	height: 30px;
	border-style: inset;
	border-width: 0 5px 5px 0;
	border-color: #5A8F00;
	background: transparent;
	/* css3 */
	-moz-border-radius-bottomright: 40px 50px;
	-webkit-border-bottom-right-radius: 40px 50px;
	border-bottom-right-radius: 40px 50px;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border>:first-child:before {
	content:"";
	position: absolute;
	bottom: -40px;
	left: 45px;
	width: 10px;
	height: 10px;
	/* css3 */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border>:first-child:after {
	content:"";
	position: absolute;
	bottom: -10px;
	left: 76px;
	width: 24px;
	height: 15px;
}
/* End Bubble-Effect - create a rectangle-speechborder based by fachinformatiker.de/topic/148104-htmlcss-sprechblase
------------------------------------------------------------------------------------------------------------------------ */
</style>
<div class="rectangle-speech-border"><span>{TEXT}</span></div>
Tip:

Code: Select all

Speechborder: [bubble]Use few words[/bubble]


Results - Screenshot:
bubblerectanglebordertest.png

Regards

Edit: UUups
3Di wrote: ↑
Mon Oct 07, 2019 9:43 am
Also there is an extra ; there.

Sorry, is now cleaned up.

Edit:
BTW: Distances and colors are examples ...
Last edited by Talk19Zehn on Mon Oct 07, 2019 10:19 am, edited 2 times in total.
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

User avatar
3Di
Former Team Member
Posts: 14348
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: speech bubble

Post by 3Di » Mon Oct 07, 2019 9:43 am

<div class="rectangle-speech-border";><span>{TEXT}</span></div>
Why use a span into a DIV like this? Doesn't work this way?

<div class="rectangle-speech-border">{TEXT}</div>

Also there is an extra ; there.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity ΒΊ PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
πŸ‘¨β€πŸ« | Take a tour to | The Studio | πŸ‘¨β€πŸ«

User avatar
Talk19Zehn
Registered User
Posts: 398
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: speech bubble

Post by Talk19Zehn » Mon Oct 07, 2019 10:04 am

Hello, it works without the specification of "span". If I use "span" I can add further definitions:

Example: <span style="font-weight: bold;">

Or use inside some gimmicks ==> classes, IDs and so on. ;) I instinctively added it.

Best regards

Edit: UUups
Also there is an extra ; there.
Sorry, is now cleaned up.
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

User avatar
Tastenplayer
Registered User
Posts: 374
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: speech bubble

Post by Tastenplayer » Wed Oct 09, 2019 7:53 am

viewtopic.php?t=2171707 Solution is also for profile left (Title of the linked topic should be changed ;) )

Should still work in 3.2.8, since viewtopic_body.html has not changed anything about the code to be adapted. <div class="content">{postrow.MESSAGE}</div>

Edit:
Definitely still working.
bubble-xmasstyle.png
(Solution in link above is also for profile left)

However, the blockquote still has to be adjusted.
Without icon (arrow) I think it's good, because the original contribution is not from the user in the picture on the right.

Code: Select all

margin: 1em 5px 1em;
border-radius: 5px;
bubble-blockquote.png
Edit 11.10.19:
The solution from pit-pl also works without additional icon.png

Speech bubble code pit-pl without icon.png
Last edited by Tastenplayer on Fri Oct 11, 2019 9:17 am, edited 1 time in total.
My phpBB Style Board & More β€’ FlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

Post Reply

Return to β€œ[3.2.x] Styles Support & Discussion”