Chat Bubble Concept

yerg1

Looking to turn the primary/secondary colour blocks into a talk/chat bubble by adding a triangle to one of the sides.

Something like this below

Anyone considered this before?
Thanks

Ninja

yerg1
Hi
The chat bubble would be from the chat extension that you would like to use on your site.
If you can provide the example url and screenshot with template name, i can check it better.

Regards

yerg1

I don't have any code happening and that example was an image I made in photoshop.
In the Bamboo templates if you go .... Features / Tools / Typography / Colours and Blocks you will see primary and secondary blocks, with and without borders.
It is these blocks that I was looking to add a "triangle" on the side/top/bottom to make a chat button out of that block.
Hope that is clearer as to what I'm seeking to achieve
Thanks

Ninja

yerg1 \Hi
Kindly provide the template name or the Typo page URL.
So i can provide the html code for that block.
Regards

yerg1

All the Bamboo Template Demos have this section shown

https://demo.joomlabamboo.com/showcase/utafiti/index.php/template-features/module-overview/typography

Click on Colours and Blocks tab and make your choice.

Here's the html code provided
In the browser using "Inspect the Element" will provide the basis for the css.

<div class="block primary1">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Hope that helps

Thanks

Ninja

yerg1
Hi
The above style is for utafiti template.
The style is defined in css file here : http://prntscr.com/lvu64k
If you use the same code in any other template it needs to define these style again on that template.

Regards

yerg1

Ok my bad
I know all that in the image you indicated and am able to mange all of that.
Here's an image that I have made to indicate what I'm seeking to create via CSS
I do NOT want an image to be used in this instance.
The brown colour is to highlight for you so that you can see what I'm looking to create.

I've been fiddling in static html since I first posted and built this ...

<div class="speech-bubble">
	<h1>Chat Bubble</h1>
	<p>Additional text in bubble</p>
</div>

.speech-bubble { position: relative; background: #00aabb; border-radius: .4em; }
.speech-bubble:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-right-color: #00aabb; border-left: 0; border-bottom: 0; margin-top: -10px; margin-left: -20px; }

It sort of works but I'm looking to see if we can pull that information into a similar block CSS that we already have.
Is this possible?
Hope that helps.

Ninja

yerg1
Hi

It sort of works but I'm looking to see if we can pull that information into a similar block CSS that we already have.

I can see you already git how it works, its purely custom style work and need apply new css and testing with changing the values. There is no such trick to make an exact value without testing it on correct page block.