Fix for Flat chat/messaging section is simple css. Took from jomsocial theme.
Change Primary and Secondary colors as needed:
.joms-chat__conversations-wrapper {
display: table-cell;
width: 35%;
border-right: 1px solid rgba(0, 0, 0, .05);
vertical-align: top;
}
.joms-chat__messages-wrapper {
display: table-cell;
vertical-align: top;
}
.joms-chat__wrapper {
display: table;
width: 100%;
}
.joms-chat__search {
padding: 14px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
background-color: rgba(0, 0, 0, .025);
border-top: 1px solid rgba(0, 0, 0, .035);
}
.joms-chat__search_conversation[type="text"] {
margin: 0px;
}
.joms-chat__item.active {
color: #fff;
background-color: #3f947c; /*PRIMARY COLOR BUTTONS*/
}
.joms-chat__item > .joms-avatar {
display: table-cell;
width: 32px;
vertical-align: middle;
}
.joms-chat__item > .joms-avatar > img {
max-width: 32px;
max-height: 32px;
}
.joms-chat__item-body {
display: table-cell;
padding-left: 9px;
vertical-align: middle;
}
.joms-chat__item.active a {
font-weight: bold;
color: #fff !important;
}
.joms-chat__header {
display: table;
width: 100%;
padding: 14px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
-webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .025);
-moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .025);
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .025);
}
.joms-chat__message-item {
position: relative;
display: table;
width: 100%;
padding: 6px 14px;
color: #666666;
}
.joms-chat__message-item > .joms-avatar {
display: table-cell;
width: 32px;
vertical-align: middle;
}
.joms-chat__message-item > .joms-avatar > img {
max-width: 32px;
max-height: 32px;
}
.joms-chat__message-body {
display: table-cell;
padding-left: 9px;
vertical-align: middle;
}
.joms-chat__message-item.you .joms-chat__message-body > div {
background-color: #64AE9A; /*SECONDARY COLOR BUTTONS*/
color: white;
}
.joms-chat__message-body > div:last-child {
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.joms-chat__message-body > div:first-child {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.joms-focus__button--options--desktop {
padding-top: 15px;
}
.joms-chat__message-body > div {
background-color: #ecf0f1;
font-weight: bold;
font-weight: 500;
margin: 2px 0;
padding: 6px 14px;
position: relative;
}
.joms-chat__messagebox {
padding: 14px;
background-color: rgba(0, 0, 0, .025);
border-top: 1px solid rgba(0, 0, 0, .035);
}
Add to Joomla template template.css or add as user.css to Joomla template css folder in case you don't want it overwritten by some update and load it in template index.php <head>...</head>
section like:
<link href="<?php echo JURI::base() . 'templates/' . $app->getTemplate() ?>/css/user.css" rel="stylesheet" />
