{"id":1793,"date":"2015-11-24T13:10:14","date_gmt":"2015-11-24T13:10:14","guid":{"rendered":"http:\/\/www.rumbletalk.com\/blog\/?p=1793"},"modified":"2024-09-30T09:18:55","modified_gmt":"2024-09-30T09:18:55","slug":"customize-your-mobile-chat","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/","title":{"rendered":"New Feature: Customize your Mobile Chat using CSS"},"content":{"rendered":"

Since we launched RumbleTalk HTML chat service for\u00a0websites.\u00a0We tried to give our customers a full control over their HTML chat room look and feel. The service was built as a JavaScript chat on the client side with light HTML5 and CSS.<\/p>\n

Back then the chat looked exactly the same in mobile and web. However, since mobile has special features and behavior, we found out that web view was causing many mobile users to leave the chat. We then built the Mobile chat version of RumbleTalk which made a huge difference for customers and mobile usage.<\/p>\n

When we started RumbleTalk, we created an “Advanced design<\/a>” feature, where people could change colors, backgrounds, borders, fonts, font size, and more.<\/p>\n

However, after a while, we understood that for advanced users and web designers, this was simply not enough. The requests for additional customization options came too often. So we decided to add the option to let customers design the entire HTML chat room look and feel using CSS. It meant back then that users would control any aspect of the chat design simply by letting them control the CSS.<\/p>\n

\"Web
Web Style Web Chat Design<\/figcaption><\/figure>\n

In the example image above, we loaded a new background using CSS. This is basically what a customer sees when he\/she is using a PC or laptop (using a web browser).<\/p>\n

This was a big boost for RumbleTalk as web designers and website developers started to design special customized HTML chat room skins. It was a unique, fresh approach for designers that let them actually, design. It also meant that they could avoid using off-the-shelf flash-like chat room software that always looks strange with respect to their website design.<\/p>\n

One more important point, web designers have the option now to design the chat room for customers with the exact look & feel of their website without compromising on the quality and look and feel. This made RumbleTalk very popular with web designers that expressed themself easily and were not forced to use a 3rd party chat software that has none or very limited customization options.<\/p>\n

Mobile, here we come<\/h2>\n

When we were done with the Web CSS feature (Control the chat design for web browsers). We understand that the work is not finished. We knew that in order to give a complete 360-degree solution, we would need to allow customers to change their mobile chat CSS<\/strong>\u00a0as well.<\/p>\n

We are happy to announce that this feature is now\u00a0released. Yehaaaaee\u00a0\u221a\u221a\u221a<\/p>\n

So, the mobile CSS feature was launched last week. You can now create and customize your mobile chat design. Note, that we gave some technical CSS tips in here<\/a> to help you start the process of changing the most common items that customers often ask us about.<\/p>\n

Quick Example of CSS design option.<\/h2>\n

To explain it better, let me start with the original idea, RumbleTalk comes with a default mobile theme that\u00a0was not editable till now.<\/p>\n

You may see below\u00a0how we transform in 3 steps from the default mobile theme to a custom chat room theme.<\/p>\n

\"mobile<\/p>\n

So, what do you see here in this example above?<\/p>\n

    \n
  1. First, you see on the left, the default design that is part of every chat room created.<\/li>\n
  2. Then we loaded up the same background we had in the web chat design.
    \nSee here the line we added.#chat { background: url(“https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/a78f4e7c872dbc2654ea3bb2238ef365\/1448364119-colors.jpg”) no-repeat scroll left center; }<\/span><\/span><\/li>\n
  3. Then we changed the header and foot colors.top-bar { background-color: #0373d1 !important; }<\/span>
    \n#bottom { background-color: #0373d1 !important; }
    \n<\/span><\/li>\n
  4. At last we increased the font size to 20px.#chat { font-size: 20px !important; }<\/span><\/li>\n<\/ol>\n

    Customize your Mobile Chat<\/h2>\n

    \"admin<\/p>\n

    Changing your mobile CSS is done in the advanced design menu, in a new tab called Mobile CSS.
    \n<\/strong>You can control all the design aspects of the chat, mainly used to customize your mobile chat looks but also can help in adding functionality (limited though).<\/p>\n

    The most common requests that we get from clients for mobile customization are:<\/p>\n

    Background<\/strong><\/p>\n

      \n
    • Changing the Top top-bottom bar color<\/li>\n
    • Changing the chat background color<\/li>\n<\/ul>\n

      Fonts<\/strong><\/p>\n

        \n
      • Changing the Font size<\/li>\n<\/ul>\n

        Admin User<\/strong><\/p>\n

          \n
        • Changing the ADMIN image<\/li>\n
        • Changing the ADMIN text color<\/li>\n
        • Changing the default image of a guest user using CSS<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

          Since we launched RumbleTalk HTML chat service for\u00a0websites.\u00a0We tried to give our customers a full control over their HTML chat room look and feel. The service was built as a JavaScript chat on the client side with light HTML5 and CSS. Back then the chat looked exactly the same in mobile and web. However, since […]<\/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,9],"tags":[49,155,156],"acf":[],"yoast_head":"\nCustomize your Mobile Chat using css - Website Chat room<\/title>\n<meta name=\"description\" content=\"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.\" \/>\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\/2015\/11\/24\/customize-your-mobile-chat\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize your Mobile Chat using css - Website Chat room\" \/>\n<meta property=\"og:description\" content=\"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/\" \/>\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=\"2015-11-24T13:10:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-30T09:18:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/a78f4e7c872dbc2654ea3bb2238ef365\/1448366514-web-view.jpg\" \/>\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\/2015\/11\/24\/customize-your-mobile-chat\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/\",\"name\":\"Customize your Mobile Chat using css - Website Chat room\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2015-11-24T13:10:14+00:00\",\"dateModified\":\"2024-09-30T09:18:55+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c\"},\"description\":\"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Feature: Customize your Mobile Chat using 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 Mobile Chat using css - Website Chat room","description":"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.","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\/2015\/11\/24\/customize-your-mobile-chat\/","og_locale":"en_US","og_type":"article","og_title":"Customize your Mobile Chat using css - Website Chat room","og_description":"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2015-11-24T13:10:14+00:00","article_modified_time":"2024-09-30T09:18:55+00:00","og_image":[{"url":"https:\/\/rumbletalk-images-upload.s3.amazonaws.com\/a78f4e7c872dbc2654ea3bb2238ef365\/1448366514-web-view.jpg"}],"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\/2015\/11\/24\/customize-your-mobile-chat\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/","name":"Customize your Mobile Chat using css - Website Chat room","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2015-11-24T13:10:14+00:00","dateModified":"2024-09-30T09:18:55+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/25d71b46ff2470eaf367d02f9d47726c"},"description":"New feature, RumbleTalk lets you Customize your Mobile Chat design using css. Create your own design and share it with the world to see.","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2015\/11\/24\/customize-your-mobile-chat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Feature: Customize your Mobile Chat using 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\/1793"}],"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=1793"}],"version-history":[{"count":26,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1793\/revisions"}],"predecessor-version":[{"id":16670,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1793\/revisions\/16670"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}