Styling Information

Image Size

This addon offers small (60px), medium (80px), and large (100px) for image size.

Changing the image size requires to adjust CSS files, where margin-left/margin-right are determined according to the image sizes.

Css class: size60, size80, size100

Position

This addon offers

  • image-balloon : the image(icon) on the left side
  • balloon-image : the image(icon) on the right side

Image positions and the balloon opening positions are contolled in css class .image-balloon and .balloon-image.

CSS for Balloon

This addon displays balloon using CSS.

*Background color

Default Background color is #efefef, specified in

  • .balloon (message body) 
  • .image-balloon::after / .balloon-image::after (balloon opening)
If you are going to change the color of the balloon, be sure to change all of them.

 

*Shadow color

Default Background color is #b7b7b7, specified in

  • .balloon (message body) 
  • .image-balloon::before/ .balloon-image::before(shadow of balloon opening)
If you are going to change the color of the balloon, be sure to change all of them.
 
Note that ::before elements represent shadow, in order to place the balloon opening on the shadow. ::after elements represent the balloon openings.