{"id":1779,"date":"2018-10-21T02:05:30","date_gmt":"2018-10-21T02:05:30","guid":{"rendered":"http:\/\/www.rumbletalk.com\/blog\/?p=1779"},"modified":"2025-10-03T03:41:03","modified_gmt":"2025-10-03T03:41:03","slug":"mobile-css-group-chat-theme","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/","title":{"rendered":"11 CSS tricks to style up your mobile group chat theme"},"content":{"rendered":"

When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change\u00a0the chat’s\u00a0look on your PC & laptop. See here<\/a> instructions on how to do it. Now, since the mobile version is totally different than the web version, one has the option to create their own custom mobile CSS design. \u00a0RumbleTalk introduced a feature that allows customers to design also their mobile group chat<\/a> theme using CSS.<\/p>\n

All you have to do is:<\/p>\n

    \n
  1. Copy the CSS code you find suitable from this post.<\/li>\n
  2. Log into your RumbleTalk admin panel.<\/li>\n
  3. In the chat settings, under \u201cDesign\u201d, click on \u201cAdd CSS for\u00a0Mobile Browsers\u201d.<\/li>\n
  4. Paste your code and close the box.<\/li>\n<\/ol>\n

    learn more about CSS tricks here<\/a><\/p>\n

    Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge. You can see below some common tricks asked by customers to control their mobile design.<\/p>\n

    1. Changing the default image of a guest user using CSS<\/h2>\n

    \"User\u00a0 \u00a0You may change the default guest user for your mobile group chat to any image by using your own image URL.

    \n#list > div:not(.admin) .user-image,
    \n<\/span><\/code>.main-message-container:not(.admin) .message-user-image {<\/span>
    \n\u00a0 width: 0 !important;<\/span>
    \n\u00a0 padding-right: 32px;<\/span>
    \n\u00a0 background-image: url(\"\/\/rumbletalk-images-upload.s3.amazonaws.com\/cc244d13c0e7e7bb6c4b63830314dc61\/1444667334-usericon-blue.png\");<\/span>
    \n\u00a0 background-repeat: no-repeat;<\/span>
    \n}
    \n<\/span>
    \n<\/code><\/p>\n

    \"user<\/p>\n

    2. Changing the ADMIN\u00a0image<\/h2>\n

    \"User\u00a0 \u00a0You may change the default ADMIN\u00a0user to any image by using your own image URL.
    \n.admin .user-image,
    \n.admin .message-user-image {
    \nbackground-image: url(\"\/\/rumbletalk-images-upload.s3.amazonaws.com\/cc244d13c0e7e7bb6c4b63830314dc61\/1444667334-usericon-white.png\");
    \n}<\/span>
    \n<\/code><\/p>\n

    2. Changing the ADMIN text color<\/h2>\n

    You may change the default ADMIN text color.
    \n.admin .message-user-name,<\/span>
    \n.admin .user-name {<\/span>
    \n color: #2DA8E0 !important;<\/span>
    \n}<\/span>
    \n<\/code><\/p>\n

    3. Changing the Top and\/or Bottom Bar color<\/h2>\n

    You may change the color of the header and footer area of your mobile chat.
    \n.top-bar,
    \n#top-bar-left,
    \n<\/span>#top-bar-right { background-color: #3D5B9B; }<\/span>
    \n#bottom,
    \n#bottom button { background-color: #3D5B9B; }<\/span>
    \n<\/code><\/p>\n

    \"header<\/p>\n

    4. Changing the chat\u00a0background color<\/h2>\n

    You may change the chat background from white to any color you want.
    \n#chat { background-color: #607D8B<\/b>; }<\/span>
    \n<\/code><\/p>\n

    \n

    5. Load the background image<\/h2>\n

    You may load any image as your mobile chat background.
    \n#chat { background: url(\"\/\/d1pfint8izqszg.cloudfront.net\/images\/skins\/40000\/background.jpg\") no-repeat scroll center center; }<\/span>
    \n<\/code><\/p>\n

    \"change<\/p>\n<\/div>\n

    \n

    6.\u00a0Change Fonts size<\/h2>\n

    You may change the size of the font to your own liking.<\/p>\n

    Font of the messages a user sends:<\/div>\n
    #chat { font<\/span>-size: 20px; }<\/span><\/code><\/div>\n
    \u00a0<\/b><\/div>\n
    Username font in the chat area (next to the messages):<\/div>\n
    .message-user-name { font<\/span>-size: 20px; }<\/span><\/code><\/div>\n
    \u00a0<\/b><\/div>\n
    The username font in the user’s list:<\/div>\n
    .user-name { font<\/span>-size: 20px; }<\/span><\/code><\/div>\n
    \u00a0<\/b><\/div>\n
    The font in the setting buttons:<\/div>\n
    #options-mobile li a span { font<\/span>-size: 20px; }<\/span><\/code><\/div>\n<\/div>\n
    \n

    \u00a0<\/h2>\n

    7. Hide Buttons in the chat menu<\/h2>\n

    You may hide buttons in the mobile menu view.<\/p>\n

    Hide Full-Screen button
    .options-dialog .popup {
    display: none !important;
    }<\/span><\/code><\/p>\n

    Hide QR code button
    .options-dialog .qr-option {
    display: none !important;
    }
    <\/span><\/code><\/p>\n

    Hide font size buttons<\/p>\n

    .options-dialog .font-size {
    display: none;
    }
    <\/span><\/code><\/p>\n

    Hide pin the position button
    .pin-li { display: none; }<\/span><\/code><\/p>\n

    Hide sound on\/off button
    .options-dialog .toggle-sound {
    display: none;
    }
    <\/span><\/code><\/p>\n

    Hide logout button
    .options-dialog .logout {
    display: none !important;
    }<\/span><\/code><\/p>\n<\/div>\n

    Hide export transcript button<\/p>\n

    .options-dialog .export {
    display: none !important;
    }<\/code><\/p>\n

    \n

    8. Change Message Background Color<\/h2>\n<\/div>\n
    \n

    Changing the message background color includes, changing the background, changing the text color and changing the tip of the message (the small triangle pointing to the user image).
    \n.message-bubble { background-color: #333333 !important; }<\/span>
    \n.message-text { color: #ffffff; }<\/span>
    \n.main-message-container::after {
    \n<\/span>border-left-color: #333333;
    \nborder-right-color: #333333;
    \n}<\/span>
    \n<\/code><\/p>\n<\/div>\n

    9.\u00a0Change the user’s list background color<\/h2>\n

    Changing the user’s list background.
    \n#list-frame { background-color: #183f07; }<\/span><\/code><\/p>\n\n\n

    Admin-only CSS tricks<\/h1>\n\n\n\n

    10. Removing the admin mode option from the chat menu<\/h2>\n\n\n\n

    This will remove the admin mode option.<\/p>\n\n\n\n

    .options-dialog .admin-mode-switch {\n display: none;\n}\n<\/code><\/p>\n\n\n\n

    11. Removing the option to delete chat messages from the chat menu<\/h2>\n\n\n\n

    This will remove the option to delete chat messages.<\/p>\n\n\n\n

    .options-dialog .clear-messages { display: none !important; } <\/code><\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change\u00a0the chat’s\u00a0look on your PC & laptop. See here instructions on how to do it. Now, since the mobile version is totally different than the web version, one has the option to create […]<\/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,4],"tags":[154],"acf":[],"yoast_head":"\n11 CSS tricks to style up your mobile group chat theme<\/title>\n<meta name=\"description\" content=\"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.\" \/>\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\/2018\/10\/21\/mobile-css-group-chat-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"11 CSS tricks to style up your mobile group chat theme\" \/>\n<meta property=\"og:description\" content=\"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/\" \/>\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=\"2018-10-21T02:05:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-03T03:41:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d1pfint8izqszg.cloudfront.net\/images\/skins\/15000\/usericon.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=\"3 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\/2018\/10\/21\/mobile-css-group-chat-theme\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/\",\"name\":\"11 CSS tricks to style up your mobile group chat theme\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2018-10-21T02:05:30+00:00\",\"dateModified\":\"2025-10-03T03:41:03+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c\"},\"description\":\"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"11 CSS tricks to style up your mobile group chat theme\"}]},{\"@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":"11 CSS tricks to style up your mobile group chat theme","description":"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.","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\/2018\/10\/21\/mobile-css-group-chat-theme\/","og_locale":"en_US","og_type":"article","og_title":"11 CSS tricks to style up your mobile group chat theme","og_description":"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2018-10-21T02:05:30+00:00","article_modified_time":"2025-10-03T03:41:03+00:00","og_image":[{"url":"https:\/\/d1pfint8izqszg.cloudfront.net\/images\/skins\/15000\/usericon.png"}],"author":"Editor","twitter_card":"summary_large_image","twitter_creator":"@rumbletalk","twitter_site":"@rumbletalk","twitter_misc":{"Written by":"Editor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/","name":"11 CSS tricks to style up your mobile group chat theme","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2018-10-21T02:05:30+00:00","dateModified":"2025-10-03T03:41:03+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c"},"description":"Change your mobile chat style. Mobile group chat for websites is powerful than ever with its CSS capabilities.","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2018\/10\/21\/mobile-css-group-chat-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"11 CSS tricks to style up your mobile group chat theme"}]},{"@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\/1779"}],"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=1779"}],"version-history":[{"count":84,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1779\/revisions"}],"predecessor-version":[{"id":18509,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1779\/revisions\/18509"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}