11 CSS tricks to style up your mobile group chat theme

When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change the chat’s look 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 their own custom mobile CSS design.  RumbleTalk introduced a feature that allows customers to design also their mobile group chat theme using CSS.

All you have to do is:

  1. Copy the CSS code you find suitable from this post.
  2. Log into your RumbleTalk admin panel.
  3. In the chat settings, under “Design”, click on “Add CSS for Mobile Browsers”.
  4. Paste your code and close the box.

mobile css editor

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.

1. Changing the default image of a guest user using CSS

User icon guest   You may change the default guest user for your mobile group chat to any image by using your own image URL.

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

user image change via css

2. Changing the ADMIN image

User icon admin   You may change the default ADMIN user to any image by using your own image URL.
.admin .user-image,
.admin .message-user-image {
background-image: url("//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-white.png");
}

2. Changing the ADMIN text color

You may change the default ADMIN text color.
.admin .message-user-name,
.admin .user-name {
color: #2DA8E0 !important;
}

3. Changing the Top and/or Bottom Bar color

You may change the color on the header and footer area of your mobile chat.
.top-bar,
#top-bar-left,
#top-bar-right { background-color: #3D5B9B; }
#bottom,
#bottom button { background-color: #3D5B9B; }

header and footer color change

4. Changing the chat background color

You may change the chat background from white to any color you want.
#chat { background-color: #607D8B; }

5. Load background image

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

change chat background color

6. Change Fonts size

You may change the size of the font to your own liking.

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

 

7. Hide Buttons in the chat menu

You may hide buttons in the mobile menu view.

Hide Full Screen button
.options-dialog .popup {
display: none !important;
}

Hide QR code button
.options-dialog .qr-option {
display: none !important;
}

Hide font size buttons

.options-dialog .font-size {
display: none;
}

Hide pin the position button
.pin-li { display: none; }

Hide sound on/off button
.options-dialog .toggle-sound {
display: none;
}

Hide logout button
.options-dialog .logout {
display: none !important;
}

Hide export transcript button

.options-dialog .export {
display: none !important;
}

8. Change Message Background Color

Changing the message background color include, changing the background, changing the text color and changing the tip at the message (the small triangle pointing to the user image).
.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff; }
.main-message-container::after {
border-left-color: #333333;
border-right-color: #333333;
}

9. Change the user’s list background color

Changing the user’s list background.
#list-frame { background-color: #183f07; }

Admin only CSS tricks

10. Removing admin mode option from the chat menu

This will remove the admin mode option.

.options-dialog .admin-mode-switch { display: none; }

chat tool

11. Removing the option to delete chat messages from the chat menu

This will remove the option to delete chat messages.

.options-dialog .clear-messages { display: none !important; }

clear chat messages

How To Integrate A Chat Room Into Your WordPress Members Plugin?

If your WordPress hosted website has a membership option (plugin), there is a 50% chance that you are using a WordPress members plugin. As you probably know, members only chat room is something that is essential for community engagement, whether a daily chat or once in a while.

Before we dig into the chat plugin, lets first understand the member’s plugin concept. There are a number of WordPress members plugin, though they all essentially perform the same function. Plugins allow a webmaster to set up a members-only area in their website with exclusive content and special features.

Choosing the right plugin for your site is important, as the various features the plugins offer can affect how many people stay engaged on your website.

Below, we will answer a few questions you may have regarding the integration of a chat room into your WordPress members plugins.

What Are Members Chat Rooms?

A members chat room is a chat room that can only be accessed by website members.

Having a members chat room on your website can be helpful. It can encourage site visitors to become members in order to participate in conversations and join the site community.

A chat of today includes also video and audio messages and video and audio live calls.

What Types of WordPress Members Plugin to use?

When in the market for a plugin, it is important to do a little research before making a decision. There are many options out there and we will discuss a few below.

  • MemberPress – MemberPress is a good option when looking for a plugin. It is simple to set up and has quite a number of features. Webmasters are able to have a lot of control over who accesses what on their site and at what time. This plugin also conveniently allows for integration with other services you may want to use on your website. Some of these include MailChimp, MadMimi, and BluBrry. The company useses PayPal and Stripe, making it easy for members to make payments. You can choose from two versions of this plugin, either the Business Edition or the Developer Edition. Users of MemberPress often say that this plugin is one of the simplest to use with WordPress, especially for beginners.
  • Paid Memberships Pro – This plugin offers a couple of options. There is a basic version that is entirely free to use, as well as the standard version for a yearly fee and the plus version. Keep in mind the basic free version does not offer many features but may give users a taste of what they can expect in the more advanced versions. Paid Membership Pro also allows for integration with various other services and WordPress members plugins, as well as adding in the plus version. For users who don’t have a lot of experience working with websites and plugins, this particular one may be rather difficult to use.
  • Ultimate Member – Ultimate Member is yet another option when it comes to plugins. This plugin is extremely simple to use, as no knowledge of coding is required to integrate it into your website. It adapts to mobile devices, allowing users to access members-only content from their computers as well as their mobile devices. Ultimate Member offers a number of extensions that webmasters can pay for, such as Instagram, MailChimp, and User Reviews. There are also a couple of free extensions, like the ability to display what users are online.

How to Integrate a Plugin Into Your Website

We built the RumbleTalk chat room plugin to integrate with most members plugins.
Most WordPress members plugins are using the WordPress built-in users management.

RumbleTalk chat room service is integrated with WordPress built-in users management. This means that both the chat and members use the same users base and therefore are integrated by nature, the integration can take practically 1 minute.. (Note, Integration on the chat side is done with one checkbox click, we made it extra easy).

So In practice, what’s next?

You will need the two-component installed in your WordPress to create chat room integration.

This can be quite handy because if you have a WordPress Members plugin installed, you can easily incorporate the Rumbletalk plugin into your WordPress website. This will allow you to have a members-only chat room.

The steps to do so are below (we just use ultimate member as an example).

members plugin with a chat room

Step 1
1 – Install the Member plugin and follow the setup instructions.

2 – Install the  RumbleTalk chat room plugin and follow the setup instructions.

Performing these two steps will automatically integrate the chat with the Members Plugin users base. By doing so, we will allow only members of the site to log in automatically to your chat with their username.

Step 2
After the installation of the plugins has finished, you then must create an account via the RumbleTalk chat plugin.

Account wordpress setup

Step 3
Once done, you will see the window below. Make sure to check the “Member” box to complete the process.

detailed info on the wp plugin

For more information and troubleshooting, check this link

You are done! 

As you can see, it is quite a simple process!  If you need more information about settings or the installation process, you can check out the introductions in here.

For any additional questions or comments, please contact us at support <the sign @> rumbletalk.com.

WordPress Chat Integration Made Easy – Connect your Usersbase with a Click

What if I tell you that a WordPress chat integration is a click away. We have tried to make user base integration easy, so we took all the heavy lifting from you and made one checkbox to allow your chat to be fully integrated with your WordPress database.

Now your registered users will be able to automatically login to your WordPress chat room. This means that the chat can be accessed only by WordPress users, registered and/or by users, you decide to set as admin or simple users in the RumbleTalk users management.

Chat and User Base Integration made easy

WordPress chat integration is perfect not only for WordPress users base but for all products using it underneath, like members plugins, BBpress or BuddyPress plugin.

integarte your users base with WordPress. WP Chat Integration Made Easy

This feature is for companies that wish to create a private members group chat using their own existing users base.  It is perfect for closed group discussions, social trading websites, health support group, admin areas where discussions are private or any type of private chat rooms for websites.

WordPress chat integration with your users

After installing the RumbleTalk plugin and creating an account, instructions can be found in here.
You now can use our self-explanatory chat settings.

1. The plugin was installed and the chat account was created. You will see one default chat was created (you can add more rooms when you upgrade your plan). Now you want to connect your WordPress users to the chat. Simply check the MEMBERS checkbox (see below), save and you are done. Checking this checkbox will seamlessly set the WordPress chat integration to use WordPress registered users.

2. Embed – Add the chat to a page where users need to login in order to see (in your member’s area). Use the shortcode to do it.

WP plugin short code

3. Test – Login to your WordPress members area, go to the page you added the chat too and you will see that you automatically logged in to the chat with their member’s area login username.

Wordpress chat plugins info

4. Important – Make sure the login option “Guests” checkbox is checked. Note, Although the “Guest login” is checked, it will not allow guests to log in but only the WordPress/BuddyPress/BBpress users.

Wordpress chat integration guest login

5. Settings – Now you can change your chat settings and customize it to your liking. To do it simply click on the settings button (the options are endless).

The chat is integrated with your users base.
Now, let’s see an example of a using the chat. Let’s take an example of a website that has 500 registered users. This site is giving advice for a group of Stock Traders (the registered users). When these traders are logged in to the site (after supplying their users and passwords). They will be immediately and automatically logged in to the chat room. It is that simple.

When using members login your Social Login is now disabled

Now you made your chat members only (private room). It means only allowed registered users may log in to the chat. In addition, users will not be able to log in with their social logins. e.g

  • Guest
  • Facebook
  • Twitter

Set administrators for a members only chat room

To create a chat administrators create a user in RubmleTalk with a username that’s exactly the same as your displayname in your WordPress user base.

To do this, simply go to your chat settings and open the “Users” tab. Click on the + and add a user with a password (make sure you add the admin email).

Login as an administrator

When users will open the chat page, they will be logged in automatically. The chat will identify when a user is also an administrator and will prompt them for a password. The administrator will need to provide the password for the first time in this browser, latter on the login will be automatic.

Note, administrators name are show in red by default.