Style your Oxwall Live Chat Box

Play around with your instant chat box on your Oxwall or Skadate website.

Last updated on May 29th, 2019 at 01:30 am

If you haven’t been visiting too often of late, you will discover that many things have changed around here and we want you to be part of those changes.

We are now open to public suggestions, if you have any idea you think we should write on, you can simply make your idea known to us by simple sending us a message via our contact page (make sure to tick suggestion as your department).

Whose Idea?

The Idea of writing about how to style your oxwall chat box was not my own making, it was the idea of a community site owner, powered by oxwall, whose name I will not mention in this article.

He pleaded with me not to make this article long and boring, so I will just have to keep it very short and simple.

Seeing is Believing!

Uhh! I should have guessed that from the beginning, viz… Here is your complete screenshot (no time for demo page).

Screen Shots

The Fun Part!

Logon to Admin Dashboard > Appearance > Edit Theme > CSS and paste the following code into your custom CSS box.

/* —– Chat Styles by www.eobasi.com—- */
 .ow_chat_block_wrap{
    position:relative;
    float:right;
    font-size:11px;
    background:none repeat scroll 0 0 #404040;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    padding-bottom:9px;
    border:1px solid #404040;
    margin:0 0 0 10px
}
.ow_chat_block{
    border:1px solid #404040;
    margin:0
}
.ow_chat_message_block{
    position:relative;
    overflow:hidden;
    display:none;
    width:243px;
    margin:0 3px
}
.ow_dialog_item.odd .ow_dialog_in_item{
    background:none repeat scroll 0 0 #e8f7fc
}
.ow_dialog_in_item{
    border:1px solid #ddd;
    border-radius:3px 3px 3px 3px;
    box-shadow:none;
    margin:0;
    padding:3px 5px
}
.ow_chat_list ul li a.ow_chat_item{
    position:relative
}
.ow_chat_list ul li a:hover{
    background:none repeat scroll 0 0 #fff
}
.ow_chat_cont a:hover,.ow_chat_dialog_wrap a:hover,.ow_chat_notification_wrap a:hover{
    text-decoration:none
}
.ow_chat_list ul li a{
    display:block;
    text-decoration:none;
    background:none repeat scroll 0 0 #f7f7f7;
    border:1px solid #aaa;
    margin:2px;
    padding:2px 3px
}
/* —– End Chat Styles by wwww.eobasi.com—- */

Change the highlighted text (:#404040) to any color that suit your taste, if you are not sure on what color to use, try using our awesome color code generator to generate color codes for your chat box.

Finally, save your changes and refresh your page.

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Post Tags:

  • oxwall simple chat

Leave a Reply