{"id":14869,"date":"2023-05-15T09:00:19","date_gmt":"2023-05-15T09:00:19","guid":{"rendered":"https:\/\/rumbletalk.com\/blog\/?p=14869"},"modified":"2025-10-14T04:07:11","modified_gmt":"2025-10-14T04:07:11","slug":"new-css-codes","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/","title":{"rendered":"New CSS codes to play with and enhance your chat experience"},"content":{"rendered":"\n

In today’s digital age, online communication has become a crucial aspect of many industries. One effective way to engage with an online audience is through live chat platforms like RumbleTalk<\/a>. This powerful tool not only offers seamless chat features but also provides advanced customization options. In particular, RumbleTalk’s CSS capabilities allow users to fully tailor the chat experience to match their brand’s aesthetic by letting users inject CSS codes.<\/p>\n\n\n\n

In this blog post, we’ll explore how you can leverage RumbleTalk’s CSS capabilities to enhance the look and feel of your live chat, creating a more cohesive and engaging experience for your audience.<\/p>\n\n\n\n

Injecting CSS codes into your chat room<\/h2>\n\n\n\n

By injecting custom CSS<\/a>, you can personalize the appearance of your chat room to fit your brand or website’s design. This feature allows you to make advanced customizations, such as changing the color of the chat room header, altering the size and position of chat messages, or adding custom fonts. Injecting CSS into your chat room is easy to do, and it can help enhance the user experience by creating a more visually appealing and cohesive chat environment.<\/p>\n\n\n\n

To add a CSS code, go to your admin panel. Click Advance Design<\/em><\/strong> > Advanced CSS Design<\/em><\/strong>. Then, choose where you’re going to add the CSS code, i.e., mobile or web browser.<\/p>\n\n\n\n

The latest CSS codes you can add to your chat room<\/h2>\n\n\n
\n
\"css<\/figure><\/div>\n\n\n

1. Customize a user\u2019s message appearance via userid<\/h2>\n\n\n\n

Configuration for chat bubble color<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

In this sample, we\u2019re changing the chat bubble color of the admin only.<\/p>\n\n\n\n

#content .main-message-container[uid=\"3\"] .message-bubble {\n\n\/ Configuration for chat bubbles \/\n\n}<\/code><\/pre>\n\n\n\n
Configuration for date<\/h3>\n\n\n\n
In this sample, you can change the appearance of the date (below the chat bubble).<\/p>\n\n\n\n
#content .main-message-container[uid=\"3\"] .message-bubble .message-date {\n\n\/ Configuration for Date \/\n\n}<\/code><\/pre>\n\n\n\n
Configuration for username<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
In this sample, you can change the appearance of the username.<\/p>\n\n\n\n
#content .main-message-container[uid=\"3\"] .message-bubble .message-user-name {\n\n\/ Configuration for Username \/\n\n}<\/code><\/pre>\n\n\n\n
2. Customizing the new set of emojis (for beta users)<\/h2>\n\n\n\n
To customize the new set of emojis, the emoji CSS class name should be changed as follows:<\/p>\n\n\n\n
“.smiley-#” to “.smilies-set-a-#” where # is a number<\/p>\n\n\n\n
e.g. “.smiley-10” to “.smilies-set-a-10”<\/p>\n\n\n\n
“.smiley-#” to “.smilies-set-a-#” where # is a number<\/p>\n\n\n\n
e.g. “.smiley-10” to “.smilies-set-a-10”<\/p>\n\n\n\n
Smileys (1st tab)<\/h3>\n\n\n\n
The smileys tab has 3 sets, which are set a, set b, and set c, respectively. Change the codes accordingly to the set you’re using.<\/p>\n\n\n\n
.smilies-set-a-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/smiley1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.smilies-set-a-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/smiley2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.smilies-set-a-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/smiley3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}<\/code><\/pre>\n\n\n\n
Hand gestures and people (2nd tab)<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
.hand-gestures-and-people-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/gestures1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.hand-gestures-and-people-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/gestures2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.hand-gestures-and-people-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/gestures3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n<\/code><\/pre>\n\n\n\n
Objects\/business (3rd tab)<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
.objects-business-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/objects1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.objects-business-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/objects2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.objects-business-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/objects3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}<\/code><\/pre>\n\n\n\n
Food and drinks (4th tab)<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
.food-and-drinks-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/foods1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.food-and-drinks-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/foods2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.food-and-drinks-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/foods3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}<\/code><\/pre>\n\n\n\n
Animals and nature (5th tab)<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
.animals-and-nature-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/animal1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.animals-and-nature-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/animal2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.animals-and-nature-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/animal3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}<\/code><\/pre>\n\n\n\n
Social media and numbers (6th tab)<\/h3>\n\n\n
\n
\"css<\/figure><\/div>\n\n\n
.social-media-and-numbers-1 {\n\twidth: 0px !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/social1.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.social-media-and-numbers-2 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/social2.png\");\n\theight: 32px;\n\tbackground-position: center;\n}\n\n.social-media-and-numbers-3 {\n\twidth: 0 !important;\n\tpadding-right: 32px;\n\tbackground-image: url(\"https:\/\/www.test.com\/storage\/social3.png\");\n\theight: 32px;\n\tbackground-position: center;\n}<\/code><\/pre>\n\n\n\n
These are just some of the CSS codes that you can try out. These codes are for the web version of the platform. The CSS codes for mobile browsers differ. For an extensive list of CSS codes, visit our knowledge base<\/a>.<\/p>\n\n\n\n
Go beyond the limits with RumbleTalk’s CSS capabilities<\/h2>\n\n\n
\n
\"css<\/figure><\/div>\n\n\n
In conclusion, RumbleTalk’s CSS enables users to customize their chat rooms<\/a> to their liking by injecting their own CSS codes. This allows for a fully personalized chat experience that aligns with the branding and aesthetic of the website or application. With the ability to modify font styles, colors, and layout, RumbleTalk offers a highly versatile chat solution that caters to individual needs and preferences. By providing users with the tools to inject CSS codes, RumbleTalk empowers them to create a unique chat environment that elevates their online communication efforts.<\/p>\n\n\n\n
For more information on CSS and other customization features, send us a message at https:\/\/rumbletalk.com\/about_us\/contact_us\/<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In today’s digital age, online communication has become a crucial aspect of many industries. One effective way to engage with an online audience is through live chat platforms like RumbleTalk. This powerful tool not only offers seamless chat features but also provides advanced customization options. In particular, RumbleTalk’s CSS capabilities allow users to fully tailor […]<\/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":"\nNew CSS codes to play with and enhance your chat experience<\/title>\n<meta name=\"description\" content=\"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.\" \/>\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\/2023\/05\/15\/new-css-codes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New CSS codes to play with and enhance your chat experience\" \/>\n<meta property=\"og:description\" content=\"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/\" \/>\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=\"2023-05-15T09:00:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-14T04:07:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2023\/04\/blog15_2.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=\"5 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\/2023\/05\/15\/new-css-codes\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/\",\"name\":\"New CSS codes to play with and enhance your chat experience\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2023-05-15T09:00:19+00:00\",\"dateModified\":\"2025-10-14T04:07:11+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3\"},\"description\":\"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New CSS codes to play with and enhance your 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\/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":"New CSS codes to play with and enhance your chat experience","description":"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.","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\/2023\/05\/15\/new-css-codes\/","og_locale":"en_US","og_type":"article","og_title":"New CSS codes to play with and enhance your chat experience","og_description":"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2023-05-15T09:00:19+00:00","article_modified_time":"2025-10-14T04:07:11+00:00","og_image":[{"url":"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2023\/04\/blog15_2.png"}],"author":"Mary Alice","twitter_card":"summary_large_image","twitter_creator":"@rumbletalk","twitter_site":"@rumbletalk","twitter_misc":{"Written by":"Mary Alice","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/","name":"New CSS codes to play with and enhance your chat experience","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2023-05-15T09:00:19+00:00","dateModified":"2025-10-14T04:07:11+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3"},"description":"Customize the design of your chat room, create a seamless integration with your website, and enhance user experience. Unleash your creativity via CSS codes.","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/05\/15\/new-css-codes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New CSS codes to play with and enhance your 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\/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\/14869"}],"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=14869"}],"version-history":[{"count":8,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/14869\/revisions"}],"predecessor-version":[{"id":18724,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/14869\/revisions\/18724"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=14869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=14869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=14869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}