The main issue is with the CSS - right now, I can't figure out how to get the timestamp tucked in under the bubble. This project was from here: https://www.templatemonster.com/blog/ch ... -tutorial/
My Custom Template is pretty simple - though wrong:
<div class="bubble {C1}"><p>{Message}</p></div>
<div class="cts {C2}">{ContactTime}</div>
Here's my data. In reality, the data should just have "I"ncoming, or "O"utgoing fields, but for now, because I didn't want to get bogged down in complex IF statements in the custom Template, I just made it easy and put the variable data in the C1 & C2 fields.
One might want to simplify the HTML/CSS and put ContactTime inside the 1st <div>, then it appears inside the bubble, and I want it outside. here's the CSS
-----------------------
Code: Select all
.cts {
display: block;
text-align: center;
font-weight: bold;
margin-bottom: 8px;
color: #8b91a0;
text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
.cts-alt {
float: right;
}
.cts p {
font-size: 0.7em;
}
/** ios1-ios6 bubbles **/
.bubble {
box-sizing: border-box;
float: left;
width: auto;
max-width: 80%;
position: relative;
clear: both;
background: #7acd47;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
border: solid 1px rgba(0,0,0,0.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
margin-bottom: 20px;
padding: 6px 20px;
color: #000;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 5px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0,0,0,0.5);
bottom: 0px;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #e5e5e5; /* arrow color */
bottom: 1px;
left: -5px;
}
.bubble-alt {
float: right;
}
.bubble-alt:before {
left: auto;
right: -7px;
}
.bubble-alt:after {
left: auto;
right: -5px;
}
.bubble p {
font-size: 1.0em;
}
/* green bubble */
.green {
background: #7acd47;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));
background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b');
}
.green:after {
border-bottom-color: #ace44b;
}
/* white bubble */
.white {
background: #7acd47;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
}
.white:after {
border-bottom-color: #e5e5e5;
}