WP-Mix

Thank you to Benjamin S. for sharing this CSS snippet for my free WordPress plugin, Simple Ajax Chat. Simple Ajax Chat (SAC) provides a setting that makes it easy to add your own custom CSS/styles. So today we’re going to take advantage of that option to customize the appearance of the SAC chat box so it’s more responsive. Estimated required time: about one minute.

Note: this tutorial applies to the free version of SAC.

Step 1: Add the CSS

Here is the magic code. Copy and paste to the SAC setting, “Custom CSS styles”. Make sure also that the custom styles are enabled by checking the option, “Enable custom styles”. If there are existing CSS rules, add the following code to the end, after all other CSS.

div#sac-latest-message {
  z-index: 2;
  padding: 10px !important;
  font-size: 14px;
  background-color: #f5f5f5 !important;
  text-shadow: none !important;
  border-bottom: 1px solid #cccccc !important;
  position: sticky;    
  top: 0;
}
div#sac-output {
  float: left;
  width: 100% !important;
  overflow: auto;
  border: 1px solid #cccccc !important;
  margin-bottom: 10px;
}
div#sac-panel {
  float: left !important;
  width: 100% !important;
}
form#sac-form fieldset label, 
form#sac-form fieldset input, 
form#sac-form fieldset textarea {
  float: left;
  clear: both;
  width: 100% !important;
  margin: 0 0 2px 0;
  font-size: 14px;
}
div#sac-output.sac-reg-req {
  width: 100%;
  border: 3px solid #ccc !important;
  background-color: #f5f5f5;
}
div#sac-output.sac-reg-req p {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
form#sac-form fieldset span {
  font-weight: 700;
}

This code overrides key styles in the default SAC stylesheet. The result is a more responsive display of the chat box and form.

Step 2: Done

You thought there was a step 2..? Not really, but it’s a good idea to check out the new styles by visiting your chat form after saving changes in the plugin settings. You should see the chat box and form displayed vertically, making better use of horizontal space on the page. And the styles are responsive, so try resizing the browser to get an idea of how the display adapts based on window size.

Thanks again to Benjamin S. for sharing this custom CSS for SAC :)