Design and customization / Message

Message

Absolutely positioned step in the right (or any other corner) with person image.

Class name:

ims-player-message

HTML Code:

<div class="ims-player-message-header"><img alt="" height="44" src="https://files-storage.inlinemanual.com/d3fbc10a-3e44-42e5-986f-2f15ce0bbcf1.png" width="44" /> <strong>John Doe</strong>
<div>CEO</div>
</div>
<div><strong>Hi {{first_name|there}},</strong><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet velit feugiat, vestibulum leo sit amet, placerat ligula. Sed convallis massa in egestas aliquam. Mauris tincidunt euismod turpis ac aliquet. Sed mollis egestas quam, eu egestas massa. Integer enim eros, convallis quis euismod et.</div>

CSS Code:

.ims-player-message {
    position: fixed;
    bottom: 104px !important;
    right: 36px !important;
    top: auto !important;
    left: auto !important;
}
.ims-player-message .inmplayer-popover-inner-content .ims-player-message-header {
    width: 328px;
    display: block;
    position: absolute;
    bottom: -68px;
    background-color: rgba(255,255,255,0.4);
    padding: 4px;
    border-radius: 8px;
    left: -1px;
}
.ims-player-message .ims-player-message-header img {
  border-radius:50%;
  margin-right:10px;
  float:left
}