Speech bubble around text - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
January 30, 2015 at 11:58 am #388238

sjidesign
Participant

Hi

I have some text on the following url http://www.sjidesign.co.uk/pace/?page_id=891, I would like to put the speech bubble styling around each quote.

I have set each quote out in a normal text block and not used the testimonial element as I want all quotes visable at all times and not one at a tme.

ie if you look at Testimonial Professional I would like the speech bubble styling around the following quote ““e have instructed Pace on many occasions and our clients have been delighted by how their expertise and dedication have helped towards a return to an active lifestyle
Personal injury solicitors specialising in motorcycle, brain, spinal cord and amputation claims”

Thanks in advance

Dan

January 31, 2015 at 6:40 pm #388804

Elliott
Inactive Moderator

Hey sjidesign!

When you say “speech bubble styling” are you referring to our compact testimonial slider styling as seen on this page? http://kriesi.at/themes/enfold/shortcodes/testimonials/

If not then take a screenshot and highlight exactly what your trying to do so we can get a better idea.

Best regards,
Elliott

February 2, 2015 at 12:05 pm #389267

sjidesign
Participant

Hi Ellitt

Thank yoy for the reply.

Yes I would like the compact testimonial speech bubble styling around individual quotes.

I have attached a scrrenshot, hopefully this helps.

Basically I have used just the normal text block to sho each quote below each other (as I want all quotes displayed on the page at the same time), I just need to out the speech bubble around theis text, if we could get my logos to be inside the bubble as on the bottom image of attached scrrenshot then that would be great.

Screenshot Click here
Regards

Dan

February 3, 2015 at 12:28 am #389768
Elliott
Inactive Moderator
Hi!

Alrighty, first off do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

And then add a class of “speech_bubble” to the textblock element and then add this to your custom CSS.
```
.speech_bubble {
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  padding: 10px;
background: #fcfcfc;
}
```
For the little arrow you will need to add this inside the textblock.
```
<div class = "arrow"></div>
```
And then add this to your custom CSS.
```
.speech_bubble .arrow {
  border-style: solid;
  border-width: 1px;
  height: 10px;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: -6px;
  transform: rotate(45deg);
  width: 10px;
background: #fcfcfc;
border-color: #e1e1e1;
}
```
Best regards,
Elliott
February 3, 2015 at 3:27 pm #390114

sjidesign
Participant

Hi Elliott

Fantastic, thank you so much.

The arrow appeared at the top of he quote border instead of the bottom but I can fix that.

Many thanks for your help.

KInd Regards

Dan
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Speech bubble around text’ is closed to new replies.