mwilday

Broken Express Page Messaging Page CSS fix

Discussion created by mwilday on Jul 12, 2017

For those of you that haven't transitioned to boost or snap and discovered the disorderly mess that is the Messaging page in Express. Fear not! Below you can find the CSS code fix to straighten out the mess that was left in the aftermath of End of Support. Simply add this css to your custom css box in Express and you will find that your messaging page will restore most of its functionality. With the following code I have restored all functionality except the options to select and delete individual messages. I sincerely hope this css code increases your institution's ability to achieve your teaching and learning goals! Enjoy! Please note that some of the colors were chosen for our organization, but could be updated with your own institutions colors. Please see css comments below for custom colors.

 

/***Fix Moodle Messaging Express Page ver. 3.2 Update***/
#page-message-index div.contacts-area {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  border: 1px solid #e3e3e3;
}
#page-message-index div.messages-area {
  display: inline-block;
  width: calc(100% - 26%);
  vertical-align: top;
max-width: 800px;
border: 1px solid #e3e3e3;
}
.messaging-area-container .messaging-area .messages-area .messages .message .content {
    border: 1px solid #e3e3e3;
    padding: 10px;
    margin-bottom: 5px;
    font-size: 12px;
    word-wrap: break-word;
    max-width: 55%;
    position: relative;
}
.messaging-area-container .messaging-area .messages-area .messages .message .content.right {
    float: right;
margin: .5em;
}
.messaging-area-container .messaging-area .messages-area .messages .message .content.left {
    float: left;
margin: .5em;
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact .picture img {
    border-radius: 50%;
    height: 54px;
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact .information {
    padding: 6px 0;
    height: 66px;
    width: 75%;
    float: left;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact .picture {
    line-height: 66px;
    text-align: center;
    height: 66px;
    border-bottom: 1px solid #e3e3e3;
    width: auto;
  padding: 0 .5em;
    float: left;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact .picture img{
padding-top: .3em;
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact {
    height: 66px;
    cursor: pointer;
    border-bottom: 1px solid #e3e3e3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.messaging-area-container .blocktime {
padding: .5em;
background-color: gainsboro; /*Custom Color*/
font-weight: bold;
}
.messaging-area-container .blocktime:before {
content: "Sent on";
}
.messaging-area-container .messaging-area .contacts-area .contacts .contact.selected {
    background: #900900;  /*Custom Color*/
  color: #ffffff;
}
.messages-header {
padding: .5em 0;
}
button[data-action="view-contact-profile"]:after {
content: "'s profile";
}
button[data-action="view-contact-profile"]:before {
content: "View ";
}
.messaging-area-container .messaging-area .messages-area .delete-instructions, 
.messaging-area-container .messaging-area .messages-area .actions, button[data-action="show-contacts"],
.messaging-area-container .messaging-area .messages-area button[data-action="delete-messages"],
.messaging-area-container .messaging-area .messages-area .name-container .status,
.messaging-area-container .messaging-area .contacts-area .tabs {
  display: none;
}
.messaging-area-container .messaging-area .messages-area .message-text-container textarea {
  width: calc(100% - .25em);
  min-height: 50px;
}
.messaging-area-container .messaging-area .messages-area .message-text-container {
padding: .5em;
}
/***adjusts messaging buttons in header and puts view profile before delete all messages***/
.messages-header button[data-action="delete-all-messages"]:after {
  content: "messages from contact"
}
.messages-header div.delete-all, div.name-container {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.messages-header div.name-container {
  float: left;
  margin: 0em .5em
}
/***adjusts the tabs for the messenger***/
#page-message-index div.contacts-area{
  position: relative;
}
.messaging-area-container .messaging-area .contacts-area .tabs {
  display: block;
  position: absolute;
  top:0;
  width: 100%;
    border-bottom: 1px solid #e3e3e3 
}
.messaging-area-container .messaging-area .contacts-area .tabs .tab {
  width: 49%; 
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.messaging-area-container .messaging-area .contacts-area .tabs .tab.selected {
  background: gainsboro;  /*Custom Color*/  
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea {
  margin-top: 40px;
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea input#searchtext {
  width: 98%
}
.messaging-area-container .messaging-area .messages-area .messages {
    height: 400px;
}
/***Modal Window -- messaging***/
#page-message-index .modal-container.moodle-has-zindex.show {
  position: fixed;
  top: 0;
    left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
#page-message-index .modal {
  background: white;
  padding: 1em;
  max-width: 400px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 100px;
  border: 1px solid rgba(0,0,0,0.5);
}
#page-message-index button.close:before {
  content: "✕";
  font-size: 18px;
  font-weight: bold;
  font-family: arial, sans-serif;
  opacity: .2;
}
#page-message-index button.close,
#page-message-index .moodle-dialogue-base button.closebutton {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
#page-message-index .close,
.moodle-dialogue-base .closebutton {
      position: relative;
       top: -30px;
       right: -5px;
       float: right;
       font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      color: #000000;
      text-shadow: 0 1px 0 #fff;
      opacity: 2;
}
#page-message-index .modal-footer {
  text-align: right;
  margin-top: 1em
} 
/*Responsive Message Screen*/
@media only screen and (max-width: 1370px){
  #page-message-index div.contacts-area {
    width: 300px;
  }
  #page-message-index div.messages-area {
    width: calc(100% - 320px);
  }
}
@media only screen and (max-width: 1100px){
    #page-message-index div.contacts-area{
      width:100%;
  }
  .messaging-area-container .messaging-area .contacts-area .contacts .contact,
  .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture {
        height: 50px;
  }
    .messaging-area-container .messaging-area .contacts-area .contacts .contact .information,
  .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture img {
      height:30px;
  }
  #page-message-index div.messages-area {
    width: 100%;
    max-width: 100%;
  }
}

Outcomes