speech bubble

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

Re: speech bubble

Post by Lumpy Burgertushie » Thu Oct 10, 2019 12:14 am

thanks for all the suggestions . the client has moved on but I may play with this some more just for grins.

the goal is to have the style with profile on the left and the whole message box be a speech bubble with the arrow a the top left corner of the message box kind of like a curved up apostrophe.


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
Tastenplayer
Registered User
Posts: 317
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: speech bubble

Post by Tastenplayer » Fri Oct 11, 2019 9:04 am

The solution from pit-pl also works without additional icon.png
(original topic viewtopic.php?t=2171707 )

Speech bubble code pit-pl without icon.png (Arrow-left/right, Circle-left/reight)
Image
Image
---
Lumpy Burgertushie wrote:
Thu Oct 10, 2019 12:14 am
the goal is to have the style with profile on the left and the whole message box be a speech bubble with the arrow a the top left corner of the message box kind of like a curved up apostrophe.
This works if you find a suitable font icon and embed it in the style. Here with a font Awesome icon.

Code: Select all

div class="bubbleright-content-wrapperpit-pl">	<i class="icon fa-comment-o fa-fw icon-lighblue icon-lg pull-right"></i>
    <div class="content bubbleright-postcontentpit-pl"><div class="bubbleright-post-bubblepit-pl"></div>{postrow.MESSAGE}</div>
   </div>

Code: Select all

.bubbleright-content-wrapperpit-pl {
 padding-right: 11px;
 position: relative;
}
.bubbleright-postcontentpit-pl {
 padding: 10px 5px 10px 10px;
 border: 7px solid #037CA9;
 border-radius: 10px;
 background-color: transparent;
}

.fa-comment-o::before {
	color: #037CA9;
	font-size: 30px;
	font-weight: 900;
	margin-left: 18px;
	margin-top: -5px;
}
Bubble with font Icon.png
For the profile left of course icon-lg pull-left
My phpBB Style Board & MoreAll my styles are updated to 3.2.8FlowerPower 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.

User avatar
Mannix_
Registered User
Posts: 508
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: speech bubble

Post by Mannix_ » Fri Oct 11, 2019 10:35 am

Lumpy wants something like this
2019-10-11 12.34.22 localhost f70a6e986f58.png
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

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

Re: speech bubble

Post by Tastenplayer » Fri Oct 11, 2019 11:37 am

Mannix_ wrote:
Fri Oct 11, 2019 10:35 am
Lumpy wants something like this 2019-10-11 12.34.22 localhost f70a6e986f58.png
uuups! Problem 1 is the arrow and problem 2 is how to solve the response. Responsive, the profile is then above.

The whole thing with the bubble looks responsive anyway strange. Because then it doesn't have a profile on the right and left but on top. But the arrow points to the profile in the normal view.
bubble responsive.png
bubble responsive.png (33.1 KiB) Viewed 307 times
Last edited by Tastenplayer on Fri Oct 11, 2019 11:48 am, edited 1 time in total.
My phpBB Style Board & MoreAll my styles are updated to 3.2.8FlowerPower 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.

User avatar
</Solidjeuh>
Registered User
Posts: 1715
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Re: speech bubble

Post by </Solidjeuh> » Fri Oct 11, 2019 11:47 am

Image

8-)

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

Re: speech bubble

Post by Tastenplayer » Fri Oct 11, 2019 11:50 am

</Solidjeuh> wrote:
Fri Oct 11, 2019 11:47 am
Image

8-)
Yes, but responsive it looks weird and he wants that shifted and everything bubbled and then it looks responsive even weirder.
bubble2.png
My phpBB Style Board & MoreAll my styles are updated to 3.2.8FlowerPower 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.

User avatar
Dan Stylez
Registered User
Posts: 230
Joined: Tue Jan 16, 2018 6:17 am

Re: speech bubble

Post by Dan Stylez » Fri Oct 11, 2019 9:50 pm

If you use an image for the arrow like Solidjeuh, you can use CSS to rotate at 700px,

Example:

Code: Select all

@media (max-width: 700px) {
	/* Rotate Bubble Image */
	.post-bubble {
		-webkit-transform:rotate(268deg);
		-moz-transform:rotate(268deg);
	}

	/* Position Bubble Image */
	.post-bubble {
		top: -11px;
		left: 26px;
	}

	/* Position Post Content */
	.postbody .content {
		margin-top: 10px;	
	}
}

If you use a Font Awesome icon, you can rotate that at 700px too,

Example using the question mark FA icon: <i class="icon fa-question-circle fa-fw" aria-hidden="true"></i>

Code: Select all

@media (max-width: 700px) {
	/* Rotate Font Awesome Icon */
	.fa-question-circle {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
Tip:
Make sure you address the actual icon like .fa-question-circle rather than .icon otherwise you will rotate all the FA icons on the forum.

Better still add rotate to the class of the icon like:
<i class="icon fa-question-circle rotatable-icon" aria-hidden="true"></i>

Then the CSS is easier and would be:
.rotatable-icon {

Hope that helps
Dan
When you’re hot, you’re hot, when you’re cold, you’re not hot.

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

Re: speech bubble

Post by Talk19Zehn » Sun Oct 13, 2019 9:38 am

Hi, difficult case. Note for this example: The profile is already on the left side and I will not comment on that separately here. :)
Rummaged in my ancient documents and I designed: Next examples .. based on prosilver(3.2.8 (!)).
... responsive it also seems to work. But, test it agian.
The style concept decides which one I do not know (Robert did not provide this). Adjustments may therefore be necessary. This concept is just another simple idea on my part. ;)

example mybubbleleft.css:

Code: Select all

/* speech bubble left css
-----------------------------------------------*/

.bubblepostbody {
	padding: 11px;
}

/* speech bubble leftside */
div.wetakebubbles {
	position: relative;
	width: auto;
	padding: 40px 32px;
	margin: 10px 8px 22px;
	background: #E0DEDE; /*fallback colour for non-supporting browsers*/
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#F4F1F1), to(C8C3C3));
	background:-moz-linear-gradient(#F4F1F1, #CCC, #C8C3C3);
	background:-o-linear-gradient(#F4F1F1, #CCC, #C8C3C3);
	background:linear-gradient(#F4F1F1, #CCC, #C8C3C3);
	-webkit-border-radius: 60px 7px;
	-moz-border-radius: 60px 7px;
	border-radius: 60px 7px;
	-webkit-box-shadow: -3px 4px 8px #464B64;
	-moz-box-shadow: -3px 4px 8px #464B64;
	box-shadow: -3px 4px 8px #464B64;
	color: #333333;
	font-size: 1em;
}

/***create the first bigger circle***/
div.wetakebubbles:before {
	content:"";
	position: absolute;
	top: -7px;
	left: 20px;
	background: #A8A6A6;
	width: 24px;
	height: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
	-webkit-box-shadow: -3px 3px 4px #282828;
	-moz-box-shadow: -3px 3px 4px #282828;
	box-shadow: -3px 3px 8px #282828;
}

/***create the second smaller circle***/
div.wetakebubbles:after {
	content:"";
	position: absolute;
	top: -12px;
	left: 0;
	width: 15px;
	height: 15px;
	background: #A8A6A6;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: -3px 3px 4px #282828;
	-moz-box-shadow: -3px 3px 4px #282828;
	box-shadow: -3px 3px 8px #282828;
}

/*** Another ADDS***/
blockquote {
	background-color: #EEE;
	border-color: #161616;
	margin: 1em 1px 1em 5px;
}

blockquote {
	background-color: #E2E2E2;
	border-color:#161616;
}

blockquote blockquote {
	/* Nested quotes */
	background-color: #F3F3F3;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #C5C5C5;
}

.signature {
	border-top-color: #191919;
}


viewtopic_body.html (original prosilver 3.2.8)
find:
<div class="postbody">
change to:

Code: Select all

		<div class="postbody">
		<div class="wetakebubbles">

find:
<div class="content">{postrow.MESSAGE}</div>
change to:

Code: Select all

<div class="bubblepostbody content">{postrow.MESSAGE}</div>

find:

Code: Select all

		</div>

		<!-- EVENT viewtopic_body_postrow_back2top_before -->
		<div class="back2top">
change to:

Code: Select all

		</div>
		</div>

		<!-- EVENT viewtopic_body_postrow_back2top_before -->
		<div class="back2top">

Clear all caches.

Results: Screenshots
wetakebubbles11280960.png
:
wetakebubbles21280960.png

Regards



=========
Edit: 2019-10-14
Due to a request - profiles on right-side:
Snippet: speech bubbleused ==> profile on right-side
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

Post Reply

Return to “[3.2.x] Styles Support & Discussion”