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.