Realtime Chat - List


Give your Realtime Chat a stylish, different look!

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):


__________________________________________________________________________________

ion-view[state="chatrooms-list"] > ion-content {
  background-color: #fff !important;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom {
  width: 95%;
    margin: auto;
    border: none;
    background-color: #fff;
  background-size: cover;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    height: 150px;
    border-radius: 10px;
    padding-top: 104px;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom:nth-child(1) {
  background-image: url(https://i.imgur.com/KOvXuyT.jpg); /*change image URL*/
  margin-top: 10px;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom:nth-child(2) {
  background-image: url(https://i.imgur.com/KOvXuyT.jpg); /*change image URL*/
  margin-top: 10px;
}
/*Copy and paste below this line if you have more than 3 chatrooms. Change the image URL and increase the child number.*/
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom:nth-child(3) { /* << child number */
  background-image: url(https://i.imgur.com/Y7XqsKw.jpg); /*change image URL*/
  margin-top: 10px;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom:nth-child(4) { /* << child number */
  background-image: url(https://i.imgur.com/FurG9Xf.jpg); /*change image URL*/
  margin-top: 10px;
}
/*Copy and paste above this line*/
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom > div.row {
  background-image: linear-gradient(45deg, #009fe3,  #009fff);
    opacity: 0.95;
    border-radius: 10px;
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom > div.row > div > h2 {
  color: #fff;
    font-weight: bold;
}
ion-view[state="chatrooms-list"] > ion-content div.scroll ion-list > div > div.item.item-custom > div.row > div > p {
  color: #fff;
}
div.popover-wrapper > ion-popover-view {
  margin-top: 10px;
}
ion-popover-view ion-content div.scroll ion-list > div > div.item.item-custom.ng-binding {
  border: none;
    background-color: white;
    color: #000;
}
.item-note {
    float: right;
    color: #fff;
    font-size: 12px;
  padding-right: 5px;
}

__________________________________________________________________________________


NOTES:

Elements in BOLD can be updated.

  1. Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.