{"id":1910,"date":"2016-01-17T09:58:01","date_gmt":"2016-01-17T09:58:01","guid":{"rendered":"http:\/\/www.rumbletalk.com\/blog\/?p=1910"},"modified":"2018-04-17T16:00:43","modified_gmt":"2018-04-17T16:00:43","slug":"chat-box-css","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/","title":{"rendered":"Customize Your Chat Box Style With CSS"},"content":{"rendered":"<p style=\"text-align: left;\">One of the most beautiful things\u00a0in an HTML5\u00a0chat box\u00a0is the ability to fully customize your own chat room. If you are a chat room administrator, you may choose a chat box theme from a variety of themes in your admin panel.<\/p>\n<p style=\"text-align: left;\">As an administrator, you have a full access to customize your chat box\u00a0using simple admin panel actions. These options enable you to change the following:<\/p>\n<ul>\n<li>Background color<\/li>\n<li>Background image<\/li>\n<li>Text color, size, and font<\/li>\n<\/ul>\n<p>You can access the customize menu at the bottom of your dashboard. In there you will find settings. Click on it and you will\u00a0have the customization page appear before you.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022598-Setting01.png\" alt=\"Admin panel chat box configuration\" height=\"380\" \/><\/p>\n<p>Now, let us try to customize our chat room box.<br \/>\nIf you look at the customization page, you will find 7 customization designs for your chat box. The customization settings consist of 6 basic customizations and 2 advanced customizations using CSS.<\/p>\n<h1>Basic chat box customization<\/h1>\n<p>There are 6 basic components which you can customize accordingly. They are:<\/p>\n<ul>\n<li><strong>General &amp; Background<\/strong> &#8211; provide general settings: layout, background, and text.<\/li>\n<li><strong>User List<\/strong> &#8211; enables you to customize the size of your user list, background, text, border and color with padding and margin.<\/li>\n<li><strong>Chat Area<\/strong> &#8211; for customizing text, border, and color with padding and margin in the chat box area<\/li>\n<li><strong>Message<\/strong> &#8211; border, background, padding, and margin.<\/li>\n<li><strong>Dialog Boxes<\/strong> &#8211; this is a setting to customize the\u00a0popup message, enables you to customize background, border, along with padding and margin<\/li>\n<li><strong>TextBox<\/strong> &#8211; setting for the bottom text box, height, background, text, border, padding, margin<\/li>\n<\/ul>\n<p>Please check\u00a0the following guide for further explanation:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022603-Setting-Guidance.png\" alt=\"Changing background in your chat box\" width=\"498\" height=\"359\" \/><\/p>\n<h1>Advanced customization with CSS<\/h1>\n<p>Advanced CSS customization provides more control to customize your chat box. In the CSS customization, you will be required to have a knowledge of CSS.<\/p>\n<p>There are two CSS customizations you can use for the chat room: CSS, for standard web chat (PC, laptop browsers) and mobile CSS for your chat box through mobile.<\/p>\n<p>To change\u00a0color appearance, you can use either a color-hex\u00a0code or a\u00a0RGBA (Red-Green-Blue-Alpha) value. For instance: a maroon color would\u00a0use one of the following codes:<br \/>\nColor-hex #5a1414<br \/>\nor<br \/>\nRGBA\u00a0(90, 20, 20, 100)<\/p>\n<p>The following lists are the most common customization CSS parameters and their\u00a0variable for changing appearance:<\/p>\n<h2>1- Changing icon and color of users<\/h2>\n<p>.guest-default-image<br \/>\n<strong>Function:<\/strong> Changing default image of guest users<br \/>\n<strong>Syntax:<\/strong><br \/>\n.guest-default-image {<br \/>\nbackground: url(http:\/\/your_image_here);<br \/>\n}<\/p>\n<p>.user-image<br \/>\n<strong>Function:<\/strong> Changing size of user icon in user list<br \/>\n<strong>Syntax:<\/strong><br \/>\n.user-image {<br \/>\nwidth: 60px;<br \/>\nheight: 60px;<br \/>\n}<\/p>\n<p>.message-user-image<br \/>\n<strong>Function:<\/strong> Changing size of user icon in chat list<br \/>\n<strong>Syntax:<\/strong><br \/>\n.message-user-image {<br \/>\nwidth: 24px;<br \/>\nheight: 24px;<br \/>\n}<\/p>\n<p>.user-image<br \/>\n<strong>Function:<\/strong> Hiding user icon in user list<br \/>\n<strong>Syntax:<\/strong><br \/>\n.user-image {<br \/>\ndisplay: none;<br \/>\n}<\/p>\n<p>.message-user-image<br \/>\n<strong>Function:<\/strong> Hiding user icon in chat area<br \/>\n<strong>Syntax:<\/strong><br \/>\n.message-user-image {<br \/>\ndisplay: none;<br \/>\n}<\/p>\n<p>.admin .message-user-name<br \/>\n<strong>Function:<\/strong> Changing admin color in the chat<br \/>\n<strong>Syntax:<\/strong><br \/>\n.admin .message-user-name {<br \/>\ncolor: your_color;<br \/>\n}<\/p>\n<p>.admin .user-name<br \/>\n<strong>Function:<\/strong> Changing admin color in the user list<br \/>\n<strong>Syntax:<\/strong><br \/>\n.admin .user-name {<br \/>\ncolor: your_color;<br \/>\n}<\/p>\n<h2>2- Changing text in chat box area<\/h2>\n<p>.message-user-name<br \/>\n<strong>Function:<\/strong> Changing user name appearance in chat area<br \/>\n<strong>Syntax:<\/strong><br \/>\n.message-user-name {<br \/>\nfont-weight: bold;<br \/>\ncolor:rgba(90, 20, 20, 100);<br \/>\ntext-shadow: -1px 0 black, 0 1px black,<br \/>\n1px 0 black, 0 -1px black;<br \/>\n}<br \/>\nThe above will change your user name into bold maroon color.<\/p>\n<p>.message-text<br \/>\n<strong>Function:<\/strong> Changing message text color in chat area<br \/>\nSyntax:<br \/>\n.message-text {<br \/>\ncolor:#3c5a78;<br \/>\n}<br \/>\nThe above code will change your message text into blue text.<\/p>\n<p>After customizing your chat room you can save the setting and see the result in your embedded chat box:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022593-Customized-Chat-Web.png\" alt=\"Chat box css for web chat\" width=\"815\" height=\"384\" \/><\/p>\n<h2>3- Some useful mobile CSS parameters<\/h2>\n<p>The following CSS parameters can be used for mobile chat when you access your chat box\u00a0through your mobile devices such as smartphone or tablet.<\/p>\n<p>Combination of .user-image and .message-user-image<br \/>\n<strong>Function:<\/strong> Changing default image of guest users<br \/>\n<strong>Syntax:<\/strong><br \/>\n.user-image,<br \/>\n.message-user-image {<br \/>\nwidth: 0 !important;<br \/>\npadding-right: 32px;<br \/>\nbackground-image: url(&#8220;url_to_your_image_here&#8221;);<br \/>\nbackground-repeat: no-repeat;<br \/>\n}<\/p>\n<p>Combination of .admin .user-image and .admin .message-user-image<br \/>\n<strong>Function:<\/strong> Changing default image of admin user<br \/>\n<strong>Syntax:<\/strong><br \/>\n.admin .user-image,<br \/>\n.admin .message-user-image {<br \/>\nbackground-image: url(&#8220;url_to_your_image_here&#8221;);<br \/>\n}<\/p>\n<p>.top-bar and .bottom<br \/>\n<strong>Function:<\/strong> color of top and bottom bar<br \/>\n<strong>Syntax:<\/strong><br \/>\n.top-bar {<br \/>\nbackground-color: #5e2e2c!important;<br \/>\n}<br \/>\n.bottom {<br \/>\nbackground-color: #5e2e2c!important;<br \/>\n}<\/p>\n<p>The above will change your top and bottom bar into a brown color. Find the result in your smartphone or tablet<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022588-Customized-Chat-Mobile.png\" alt=\"chat box css for mobile chat\" width=\"384\" height=\"512\" \/><\/p>\n<p>Its\u00a0very simple to customize your chat room&#8230;.<br \/>\nNow, you can play around and\u00a0change\u00a0your chat box\u00a0appears\u00a0to be\u00a0as fancy as you want. This functionality will give you a totally different chat box\u00a0to serve your purpose.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most beautiful things\u00a0in an HTML5\u00a0chat box\u00a0is the ability to fully customize your own chat room. If you are a chat room administrator, you may choose a chat box theme from a variety of themes in your admin panel. As an administrator, you have a full access to customize your chat box\u00a0using simple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"featured_image_url":"","seo_focus_kw":"","seo_meta_desc":""},"categories":[11,4],"tags":[182,49,183,90],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customize Your Chat Box With CSS<\/title>\n<meta name=\"description\" content=\"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Your Chat Box With CSS\" \/>\n<meta property=\"og:description\" content=\"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Group Chat Room Plugin for Websites and Live events\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/rumbletalk\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-17T09:58:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-17T16:00:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022598-Setting01.png\" \/>\n<meta name=\"author\" content=\"Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rumbletalk\" \/>\n<meta name=\"twitter:site\" content=\"@rumbletalk\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\",\"name\":\"Customize Your Chat Box With CSS\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2016-01-17T09:58:01+00:00\",\"dateModified\":\"2018-04-17T16:00:43+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c\"},\"description\":\"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize Your Chat Box Style With CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\",\"url\":\"https:\/\/rumbletalk.com\/blog\/\",\"name\":\"Online Group Chat Plugin for Websites and Event\",\"description\":\"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c\",\"name\":\"Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1944e05b00ac133489dacf7fca386d64?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1944e05b00ac133489dacf7fca386d64?s=96&d=mm&r=g\",\"caption\":\"Editor\"},\"description\":\"This is the admin of the kingdom :)\",\"sameAs\":[\"https:\/\/rumbletalk.com\"],\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize Your Chat Box With CSS","description":"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/","og_locale":"en_US","og_type":"article","og_title":"Customize Your Chat Box With CSS","og_description":"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2016-01-17T09:58:01+00:00","article_modified_time":"2018-04-17T16:00:43+00:00","og_image":[{"url":"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1453022598-Setting01.png"}],"author":"Editor","twitter_card":"summary_large_image","twitter_creator":"@rumbletalk","twitter_site":"@rumbletalk","twitter_misc":{"Written by":"Editor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/","name":"Customize Your Chat Box With CSS","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2016-01-17T09:58:01+00:00","dateModified":"2018-04-17T16:00:43+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c"},"description":"RumbleTalk group chats can be fully customized with CSS because the chat boxes are built with HTML5. Learn more about how easy customizing a chat box is.","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customize Your Chat Box Style With CSS"}]},{"@type":"WebSite","@id":"https:\/\/rumbletalk.com\/blog\/#website","url":"https:\/\/rumbletalk.com\/blog\/","name":"Online Group Chat Plugin for Websites and Event","description":"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c","name":"Editor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1944e05b00ac133489dacf7fca386d64?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1944e05b00ac133489dacf7fca386d64?s=96&d=mm&r=g","caption":"Editor"},"description":"This is the admin of the kingdom :)","sameAs":["https:\/\/rumbletalk.com"],"url":"https:\/\/rumbletalk.com\/blog\/index.php\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1910"}],"collection":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1910"}],"version-history":[{"count":16,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1910\/revisions"}],"predecessor-version":[{"id":3714,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1910\/revisions\/3714"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}