Member Login

Freestyle Joomla Forums


Member Login   Register

Please login or register to post on the forum

Forum Index    Board Index    Last Post   

Neil McLeod

Neil McLeod

01 March 2017, 15:55

CSS Speech Bubble in Template

Hi, Folks!

I'm attempting to place text written by clients within a speech bubble using CSS.

I know I've got it completely wrong so I'll post what I've done and if someone can give me pointers as to how to fix the CSS not showing up by analysing my efforts, I'd be very grateful:

.fst_main tr, td

.speech-bubble {
position: relative;
width: 600px;
height: 120px;
line-height: 120px;
color: #FFFFFF;
text-align: center;
padding: 0px;
background: #E7BF03;
border-radius: 10px;
-webkit-filter: drop-shadow(2px 2px 2px #878282);
filter: drop-shadow(2px 2px 2px #878282);

.speech-bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #E7BF03;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 45px;

I'd display the HTML but your code button doesn't work for me.


Link showing problem
Joomla Version 3.6.5
Freestyle Version 1.13.2
Harry Shaw

Harry Shaw

06 March 2017, 14:04

Re: CSS Speech Bubble in Template


Here's a link to a stack overflow with a few good methods of creating CSS speech bubbles.


Harry Shaw
Freestyle Joomla

Vote For Us!

Please vote for our software or write a review of one of our products on the Joomla! Extensions Directory