{"id":2000,"date":"2016-02-17T14:11:22","date_gmt":"2016-02-17T14:11:22","guid":{"rendered":"http:\/\/www.rumbletalk.com\/blog\/?p=2000"},"modified":"2021-10-25T12:17:52","modified_gmt":"2021-10-25T12:17:52","slug":"group-chat-design","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/","title":{"rendered":"Color Your Group Chat Experience"},"content":{"rendered":"<p>RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. In this post, we will show you three areas of customization to color your group chat experience.<\/p>\n<p>Why is customization important? Simply put, this ability to design the chat box appearance will make the chat look and feel like it belongs in the website you add it to.<\/p>\n<p>But before we get into the nitty gritty let\u2019s take a step back.<\/p>\n<p>If you are looking for the fastest way to color your group chat experience, we have ready-to-use skins available. If one of these almost suits your design, you can adjust a skin using the admin panel \u201cadvance design\u201d option.<\/p>\n<p>For more advanced options, we offer the ability to design via CSS. <a href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/2016\/01\/17\/chat-box-css\/\" target=\"_blank\" rel=\"noopener\">You can read more about CSS design options here.<\/a><\/p>\n<p>I could go on and on about all the different types of customization RumbleTalk offers, but instead I\u2019m going to stay on topic. Like I said before, we\u2019re talking about three areas of design customization:<\/p>\n<ol>\n<li>User name + Text Color<\/li>\n<li>Message Backgrounds<\/li>\n<li>Default Guest Icons<\/li>\n<\/ol>\n<p>Below is a snapshot of the RumbleTalk group chat customized by our customer.<\/p>\n<p><a href=\"http:\/\/Lifestream.fr\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" style=\"line-height: 1.7;\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455638837-chat-colors.png\" alt=\"customized group chat\" width=\"841\" height=\"376\" \/><\/a><\/p>\n<h2>Changing User Name + Text Color<\/h2>\n<p>The user name and text color settings are changed in the advanced design settings menu under \u201cUser Colors\u201d.<\/p>\n<p>In this menu you can choose up to 16 colors to be rotated between users, sorted by name.<\/p>\n<p>Here\u2019s how it works:<\/p>\n<ul>\n<li>If no color is chosen, the default color, black, will be used.<\/li>\n<li>If one color is chosen, all users names and text will be in that one color.<\/li>\n<li>If more than one color is chosen, the user names and text will alternate between the multiple colors.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455641453-UsersColor.png\" alt=\"\" width=\"505\" height=\"541\" \/><\/p>\n<h2>Changing Your Message Background<\/h2>\n<p>First, let\u2019s get on the same page: by message background we mean the color that appears in each speech bubble behind the text.<\/p>\n<p>Customizing a message background is similar to changing text colors. Like in the users lists, the colors are rotated if more than one is chosen and you can choose up to 16 colors.<\/p>\n<p>You can find this setting under the Message tab.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455641448-MessageColor.png\" alt=\"\" width=\"504\" height=\"318\" \/><\/p>\n<p>The result might look like this:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455643560-chat-exmaple.png\" alt=\"Group chat result\" width=\"548\" height=\"410\" \/><\/p>\n<h2>Changing Your Default Guest Icon<\/h2>\n<p>When customers log into your chat, an icon appears next to their name. Participants logging in with Facebook or Twitter will automatically have their profile picture as their chat icon. For guest users, a default icon is used.<\/p>\n<p>Our default user image changes based on the skin you choose for your group chat.<\/p>\n<p>You can customize this in your group chat to be whatever image you like, such as a simple company logo, as long as you are legally permitted to use that image.<\/p>\n<p>You can also customize separate icons for web browsers and mobile browsers. <strong>Be sure to check out both settings.<\/strong><\/p>\n<h3>Web CSS:<\/h3>\n<ol>\n<li>Login to your administration panel<\/li>\n<li>Go to your chat\u2019s settings<\/li>\n<li>Click on \u201cAdvanced design\u201d (on the left navigation panel)<\/li>\n<li>Click on \u201cCSS\u201d (on the newly opened top navigation panel)<\/li>\n<li>Add the following content to the text area and save.<\/li>\n<li>Replace the URL with your image\u2019s URL.<br \/>\nIt is highly recommended to use images in a secure location (https)<\/li>\n<\/ol>\n<p><code><br \/>\n.guest-default-image {<br \/>\nbackground: url(\u201c<strong>https:\/\/www.yourdomain.com\/usericon.png<\/strong>\u201d);<br \/>\n}<br \/>\n<\/code><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455641444-css-design-chat.png\" alt=\"\" width=\"507\" height=\"217\" \/><\/p>\n<h3>Mobile CSS:<\/h3>\n<ol>\n<li>Login to your administration panel<\/li>\n<li>Go to your chat\u2019s settings<\/li>\n<li>Click on \u201cAdvanced design\u201d (on the left navigation panel)<\/li>\n<li>Click on \u201cMobile CSS\u201d (on the newly opened top navigation panel)<\/li>\n<li>Add the following content to the text area and save.<\/li>\n<li>Replace the URL with your image\u2019s URL.<br \/>\nIt is highly recommended to use images in a secure location (https)<\/li>\n<\/ol>\n<p><code><br \/>\n.user-image,<br \/>\n.message-user-image {<br \/>\nwidth: 0 !important;<br \/>\npadding-right: 32px;<br \/>\nbackground-image: url(\u201c<strong>https:\/\/www.yourdomain.com\/usericon.png<\/strong>\u201d);<br \/>\nbackground-repeat: no-repeat;<br \/>\n}<br \/>\n<\/code><\/p>\n<h2>Group Chat Results!<\/h2>\n<p>We hope you like your newly customized group chat! If you hit any snags along the way, contact us at <a href=\"mailto:support@rumbletalk.com\" target=\"_blank\" rel=\"noopener\" data-wplink-edit=\"true\">support@rumbletalk.com<\/a>.<\/p>\n<p>Do you have a suggestion for another topic we should cover? Feel free to contact us about that too!<\/p>\n<p>Every Wednesday we\u2019ll be posting a new technical help and explanations post here on our blog, so be sure to check back next week for more tips and tricks.<\/p>\n<p>Until then, enjoy creating!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. In this post, we will show you three areas of customization to color your group chat experience. Why is customization important? Simply put, this ability to design the chat box appearance will make the chat look and feel like it [&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":[9],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Color Your Group Chat Experience<\/title>\n<meta name=\"description\" content=\"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat\" \/>\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\/02\/17\/group-chat-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Your Group Chat Experience\" \/>\n<meta property=\"og:description\" content=\"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/\" \/>\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-02-17T14:11:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-25T12:17:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455638837-chat-colors.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\/02\/17\/group-chat-design\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/\",\"name\":\"Color Your Group Chat Experience\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2016-02-17T14:11:22+00:00\",\"dateModified\":\"2021-10-25T12:17:52+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c\"},\"description\":\"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Your Group Chat Experience\"}]},{\"@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":"Color Your Group Chat Experience","description":"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat","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\/02\/17\/group-chat-design\/","og_locale":"en_US","og_type":"article","og_title":"Color Your Group Chat Experience","og_description":"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2016-02-17T14:11:22+00:00","article_modified_time":"2021-10-25T12:17:52+00:00","og_image":[{"url":"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/8cb8eaa7aa0c8efdda886127cc4b7953\/1455638837-chat-colors.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\/02\/17\/group-chat-design\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/","name":"Color Your Group Chat Experience","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2016-02-17T14:11:22+00:00","dateModified":"2021-10-25T12:17:52+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c"},"description":"RumbleTalk group chat is highly customizable. It\u2019s a favorite among web designers and non-experts alike. We will show you areas to customize your group chat","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2016\/02\/17\/group-chat-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Color Your Group Chat Experience"}]},{"@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\/2000"}],"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=2000"}],"version-history":[{"count":24,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2000\/revisions"}],"predecessor-version":[{"id":12023,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2000\/revisions\/12023"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}