{"id":9578,"date":"2021-04-01T10:00:03","date_gmt":"2021-04-01T10:00:03","guid":{"rendered":"https:\/\/www.rumbletalk.com\/blog\/?p=9578"},"modified":"2024-10-09T05:52:41","modified_gmt":"2024-10-09T05:52:41","slug":"css","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/","title":{"rendered":"Chat customization: Design a chat with CSS"},"content":{"rendered":"\n<p>CSS is one of RumbleTalk&#8217;s features that was released in the earlier updates. Since CSS was introduced, many of our customers have been using it to design their group chat rooms with various themes and the like. Anyone with a creative mind can take advantage of this feature to make your chat look vastly different from the default group chat.&nbsp;<\/p>\n\n\n\n<p>Our designers have made their custom group chats and it looked as if it was an all-new group chat. It was pretty amazing for a chat platform to look like that. In combination with the skins that you can use on your chat, chat customization is limitless.<\/p>\n\n\n\n<p>So, without further ado, let&#8217;s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use CSS?<\/h2>\n\n\n\n<p>For those who are new to RumbleTalk or do not know where to find the CSS option, you can follow these steps.<\/p>\n\n\n\n<ol>\n<li>Click&nbsp;<strong><em>Design<\/em><\/strong>&nbsp;&gt;&nbsp;<strong><em>Visual Design<\/em><\/strong>.<\/li>\n\n\n\n<li>On the&nbsp;<strong><em>Visual Design<\/em><\/strong>&nbsp;tab, scroll until the end.<\/li>\n\n\n\n<li>You will find the CSS editor for both mobile and web browsers.<\/li>\n<\/ol>\n\n\n\n<p>Get started with these introductory articles on web and mobile CSS.<\/p>\n\n\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/knowledge-base\/0-introduction-to-mobile-css\/\" rel=\"noreferrer noopener\">Introduction to Mobile CSS<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/knowledge-base\/0-introduction-to-web-css\/\" rel=\"noreferrer noopener\">Introduction to Web CSS<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>NOTE<\/strong>: Once you go back to the Visual Design tab (e.g., changing background images), your code will reset. This means that you can only keep one custom design, either the CSS or the one on Visual Design. Additionally, it&#8217;s best to leave it up to the experts to edit CSS to avoid making mistakes. If you don&#8217;t have a designer, you can check out the links above so that you can copy and paste the codes that you want for your group chat theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Starting with CSS<\/h2>\n\n\n\n<p>When you paste a CSS code, it will automatically reflect on your group chat. There are different codes for web and mobile browsers. So, be sure to check out these links for codes that you can use.<\/p>\n\n\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/knowledge-base\/text-style-tricks-using-css\/\" rel=\"noreferrer noopener\">Text style tricks using CSS<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/2018\/10\/31\/chat-css-tricks\/\" rel=\"noreferrer noopener\">27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB &amp; MOBILE)<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/\" rel=\"noreferrer noopener\">11 CSS tricks to style up your mobile group chat theme<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Examples<\/h3>\n\n\n\n<p>Now let&#8217;s try some of the tricks in the articles.<\/p>\n\n\n\n<ul>\n<li><strong>Adding a border in the username text<\/strong><\/li>\n<\/ul>\n\n\n\n<p>To add a border for all usernames, the code you will need is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.message-user-name{\nfont-weight: bold;\ncolor:rgba(0,150,245,1.00);\ntext-shadow: -1px 0 black, 0 1px black,\n1px 0 black, 0 -1px black;\n}<\/code><\/pre>\n\n\n\n<p>After pasting it on the editor, it will look like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"600\" src=\"https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091545\/userborder.png\" alt=\"css\" class=\"wp-image-9583\" srcset=\"https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091545\/userborder.png 800w, https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091545\/userborder-300x225.png 300w, https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091545\/userborder-768x576.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<ul>\n<li><strong>Adding a border in the message text<\/strong><\/li>\n<\/ul>\n\n\n\n<p>To add a border for all messages, the code you will need is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.message-text{\ncolor:#fff;\ntext-shadow: -1px 0 black, 0 1px black,\n1px 0 black, 0 -1px black;\nfont-weight: bold;\n}<\/code><\/pre>\n\n\n\n<p>After pasting it on the editor, it will look like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"600\" src=\"https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091526\/messageborder.png\" alt=\"css\" class=\"wp-image-9581\" srcset=\"https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091526\/messageborder.png 800w, https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091526\/messageborder-300x225.png 300w, https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091526\/messageborder-768x576.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<ul>\n<li><strong>Combining CSS styles<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Now that we&#8217;ve shown you the examples above, why don&#8217;t we try combining the two styles?<\/p>\n\n\n\n<p>To combine them, just paste both codes in the editor and add a space between them by pressing&nbsp;<strong><em>Enter<\/em><\/strong>&nbsp;on your keyboard. Then, the code should look like this on the editor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.message-user-name{\nfont-weight: bold;\ncolor:rgba(0,150,245,1.00);\ntext-shadow: -1px 0 black, 0 1px black,\n1px 0 black, 0 -1px black;\n}\n.message-text{\ncolor:#fff;\ntext-shadow: -1px 0 black, 0 1px black,\n1px 0 black, 0 -1px black;\nfont-weight: bold;\n}<\/code><\/pre>\n\n\n\n<p>Here&#8217;s how it will look like when you combine the two styles.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"600\" src=\"https:\/\/d241b8qep9dzid.cloudfront.net\/20210323091620\/css.gif\" alt=\"web chatting\" class=\"wp-image-9584\"\/><\/figure><\/div>\n\n\n<p>You can do this for multiple styles. So, try your hand at it or let your designer do all the technical work. You can find more tricks on the articles, so find the most suitable for your group chat room.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">More features like this<\/h2>\n\n\n\n<p>RumbleTalk is a group chat platform that you can use almost anywhere. From websites to <a href=\"https:\/\/rumbletalk.com\/virtual-events-chat\/\">live events<\/a>, RumbleTalk has the perfect chat you can use. Just like this feature, other features are waiting on the platform for you.<\/p>\n\n\n\n<p>So, <a href=\"https:\/\/www.rumbletalk.com\/\">sign up now<\/a> and get a free account to get a trial version! <\/p>\n\n\n\n<p>Furthermore, there are new features you might be interested in. Be sure to check out the other articles on our blog! If you have any questions, then you can go to our knowledge base section. You can also contact us for other answers you might not find in the knowledge base.<\/p>\n\n\n\n<p>Also, you can check out our <a href=\"https:\/\/facebook.com\/rumbletalk\">Facebook<\/a> and <a href=\"https:\/\/twitter.com\/rumbletalk\">Twitter<\/a> pages for more access to tips and tricks you can use in your group chat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS is one of RumbleTalk&#8217;s features that was released in the earlier updates. Since CSS was introduced, many of our customers have been using it to design their group chat rooms with various themes and the like. Anyone with a creative mind can take advantage of this feature to make your chat look vastly different [&hellip;]<\/p>\n","protected":false},"author":17,"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>Chat customization: Design a chat with CSS<\/title>\n<meta name=\"description\" content=\"Tired of the same old chat design? Why don&#039;t you try a hand at CSS or let your designer integrate it into your chat design for more flair?\" \/>\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\/2021\/04\/01\/css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chat customization: Design a chat with CSS\" \/>\n<meta property=\"og:description\" content=\"Tired of the same old chat design? Why don&#039;t you try a hand at CSS or let your designer integrate it into your chat design for more flair?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/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=\"2021-04-01T10:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T05:52:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2021\/03\/userborder.png\" \/>\n<meta name=\"author\" content=\"Mary Alice\" \/>\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=\"Mary Alice\" \/>\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\/2021\/04\/01\/css\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/\",\"name\":\"Chat customization: Design a chat with CSS\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2021-04-01T10:00:03+00:00\",\"dateModified\":\"2024-10-09T05:52:41+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3\"},\"description\":\"Tired of the same old chat design? Why don't you try a hand at CSS or let your designer integrate it into your chat design for more flair?\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chat customization: Design a chat 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\/53a763b494aec8f004846c17ae8d90c3\",\"name\":\"Mary Alice\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g\",\"caption\":\"Mary Alice\"},\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/author\/mary-alice\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chat customization: Design a chat with CSS","description":"Tired of the same old chat design? Why don't you try a hand at CSS or let your designer integrate it into your chat design for more flair?","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\/2021\/04\/01\/css\/","og_locale":"en_US","og_type":"article","og_title":"Chat customization: Design a chat with CSS","og_description":"Tired of the same old chat design? Why don't you try a hand at CSS or let your designer integrate it into your chat design for more flair?","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2021-04-01T10:00:03+00:00","article_modified_time":"2024-10-09T05:52:41+00:00","og_image":[{"url":"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2021\/03\/userborder.png"}],"author":"Mary Alice","twitter_card":"summary_large_image","twitter_creator":"@rumbletalk","twitter_site":"@rumbletalk","twitter_misc":{"Written by":"Mary Alice","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/","name":"Chat customization: Design a chat with CSS","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2021-04-01T10:00:03+00:00","dateModified":"2024-10-09T05:52:41+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3"},"description":"Tired of the same old chat design? Why don't you try a hand at CSS or let your designer integrate it into your chat design for more flair?","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2021\/04\/01\/css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Chat customization: Design a chat 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\/53a763b494aec8f004846c17ae8d90c3","name":"Mary Alice","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g","caption":"Mary Alice"},"url":"https:\/\/rumbletalk.com\/blog\/index.php\/author\/mary-alice\/"}]}},"_links":{"self":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/9578"}],"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\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=9578"}],"version-history":[{"count":11,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/9578\/revisions"}],"predecessor-version":[{"id":17019,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/9578\/revisions\/17019"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=9578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=9578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=9578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}