27 Easy Chat CSS Tricks
Controlling your chat design using chat CSS is easy with our advanced design features.
RumbleTalk sets itself ahead of the competition by being the most customizable group chatroom available on the market.
A lot of our customization features are built into our settings menu, making this customization available to anyone at any tech-literate level, and or CSS experts, RumbleTalk group chat can be completely transformed.
But not everyone knows CSS, so we’ve put together this list of easy chat CSS tricks that anyone can copy and paste into the advanced design tab of their RumbleTalk account to get the benefits of a fully customized group chat room. (Note, for the mobile version, we have other CSS tricks).
All you have to do is:
- Copy the chat CSS code from this list.
- Log into your RumbleTalk admin panel.
- In the chat settings, under “Design”, click on “Add CSS for Web Browsers”.
- Paste your code and close the box.
In this post, we’ll cover the following chat CSS tricks:
User Icons – Chat CSS tricks
- Change the default guest user icon image
- Change the user icon size in the user list
- Change the user icon size in the chat area
- Hide the user icons in the user list
- Hide the user icons in the chat area
Functions – Chat CSS tricks
- Hide system messages
- Hide message date & time
- Hide all option buttons
- Hide specific option buttons
- Insert a clear chat area button
- Hide the number of viewers and listeners
- Hide the “Go To Facebook Profile” button
- Change the emojis
Text – Chat CSS tricks
- Change group chat administrators text color
- Change the text displayed in the guest login button
- Remove the login type label from the user profile
- Add borders to the username text
- Add borders to the message text
- Add an element above the chat in full screen
- Hide the QR box
- Add closing icon to the floating bouncing icon
- Remove the fields image and description in the register
- Set max image size in a chat
- Set max YouTube size in a chat
- Hide Twitter Link in Users Profile
- Disable group chat and allow only private chats
- Hide scrolling for non-moderators
1. Change the default guest user icon image
You can change the guest user icon to any image by inserting the
image URL into the following code.
.guest-default-image {
background: url("https://www.test.com/storage/usericon.png");
}
2. Change the user icon size in the user list
.user-image {
width: 16px;
height: 16px;
}
3. Change the user icon size in the chat area
.message-user-image {
width: 16px;
height: 16px;
}
4. Hide the user icons in the user list
.user-image { display: none; }
5. Hide the user icons in the chat area
.message-user-image { display: none; }
Note, if you like to remove the white tooltip next to each message, you can use this code
.main-message-container::before,
.main-message-container::after { content: none; }
6. Hide system messages
System messages such as “user joined the conversation” and “user
left the conversation” appear in the group chat area.
.system-message-text { display: none; }
7. Hide message date & time
Each message by default will be stamped with the date and time it
was sent. Use this code to remove this feature.
.message-date { display: none; }
8. Hide all option buttons
#options { display: none !important; }
9. Hide specific option buttons
Choose the buttons you want to hide. Each of these lines of code
can be copied and pasted individually.
.options-dialog .export {
display: none !important;
}.options-dialog .popup {
display: none !important;
}.options-dialog .toggle-sound {
display: none;
}
.options-dialog .qr-option { display: none !important; }
.options-dialog .logout { display: none !important; }
/* This option only applies to mobile */
.options-dialog .toggle-private {
display: none;
}
.options-dialog .font-size {
display: none;
}
.options-dialog .admin-mode-switch {
display: none !important;
}
/* This option can only be applied by admins */
.options-dialog .clear-messages {
display: none !important;
}
/* This option can only be applied by admins. */
10. Insert a clear chat area button
By default, the clear all button is hidden. Insert this button if you
want to have the option to clear all options without deleting them.
#options #clear { display: inline-block !important; }
11. Hide the number of viewers and listeners
By default, the number of viewers and listeners is displayed in the
chat. Add this code to remove it.
#info { display: none !important; }
12. Hide the “Go to Facebook Profile” button
When a user uses Facebook to log into the chat, a button will by
default appear in their group chat profile for others to go to their
Facebook profile. Use this code to remove that option.
#user-info .facebook-button { display: none !important;}
13. Change the emojis
Use the following code for each emoji, where the number 10 represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.
.smiley-10 {
width: 0 !important;
padding-right: 30px;
background-image: url("https//www.exampleurl.com/smile2.gif");
height: 30px;
}
14. Change group chat administrators text color
Set yourself apart as the group chat administrator by changing the
color of your username and message text. By default the color is red.
In the user list
.admin .user-name { color: orange; }
In the group chat
.admin .message-user-name { color: orange; }
15. Change the text displayed in the guest login button
Replace the text “new name” but be certain to leave the (‘) marks
around it.
“color: #000” is the color of the text. In this case, the text will
be black. You can change this with any hex code.
“-20px” is the relative horizontal location of the text. Play with
this value until the text sits in the center.
#login-guest span {
color: transparent !important;
position: relative;
}
#login-guest span:after {
content: 'Join Us!';
position: relative;
color: #fff;
left: -20px;
}
16. Remove the login type label from the user profile
.login-type { display: none; }
17. Add borders to the username text
This code will add black and bold borders to the usernames in the chat message area.
.message-user-name{
font-weight: bold;
color:rgba(0,150,245,1.00);
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
}
18. Add borders to the message text
This code will add black and bold borders to the text in the chat area.
.message-text{
color:#fff;
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
font-weight: bold;
}
19. Add an element above the chat in full screen
Many ask us how I can add a player on top of the chat area?
The following code will be added to your HTML (not on RumbleTalk css area) in full screen.
<style>
<inner element height> - the height of the extra element
#wrapper { height: 100%; }
#extra-element {
width: 100%;
height: <inner element height>;
padding: 0px;
}
#chat-wrapper {
position: relative;
width: 100%;
height: 100%;
}
<chat-iframe> {
max-height: calc(100% - <inner element height>);
}
</style>
<div id="wrapper">
<div id="extra-element">THE CODE YOU WANT TO BE ON TOP OF THE PAGE </div>
<div id="chat-wrapper">THE CHAT CODE</div>
</div>
20. Hide the QR box
When you want to hide the QR option in your chat.
To remove the button, add the following:
.options-dialog .qr-option { display: none !important; }
To keep the button for chat moderators only, add the following:
.moderator #options #opts { display: list-item; }
21. Add closing icon to the floating bouncing icon
If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
(function(){
var hash = 'YOUR_HASH',
handle;
handle = setInterval(
function () {
if (
!window.RumbleTalkChat ||
!window.RumbleTalkChat[hash] ||
!window.RumbleTalkChat[hash].mainDiv
) {
return;
}
clearInterval(handle);
if (hash == 'YOUR_HASH') {
throw new Error('Someone forgot to replace the place holder "YOUR_HASH" with your chat\'s hash');
return;
}
var img = new Image();
img.src = 'https://d241b8qep9dzid.cloudfront.net/20190625083406/italic.png';
img.style.cursor = 'pointer';
img.style.position = 'absolute';
img.style.bottom = 0;
img.style.right = 0;
img.onclick = function () {
window.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
};
window.RumbleTalkChat[hash].mainDiv.appendChild(img);
},
100
);
}());
22. Remove the fields image and description in the register dialog box
Remove the fields image and description from the registration form.
.register-login-dialog form .row:nth-child(n+4) {
display: none;
}
23. Set max image size in a chat
Add maximum size of an image added to the chat conversation. Clicking on a small image will open it in the original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;
}
24. Set max YouTube size in a chat
Add maximum size of a YouTube video in a chat. Clicking on a small image will open it in the original size.
.message-text .youtubeWrapper {
max-width: 300px !important;
max-height: 300px;
padding: 0;
height: auto;
}
.youtubeWrapper > iframe {
height: auto;
position: static;
}
25. Hide Twitter Link in Users Profile
Hide Twitter Link in Users Profile (when clicking on the gear icon in the private chat ).
.twitter-button {
display: none;
}
26. Disable group chat and allow only private chats
If you want to allow only private chat discussion so all can talk in private but not having a group discussion than choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
#content,
#text:not([readonly]),
#chat-extra,
#send-button
{ display: none !important; }
27. Hide scrolling for non-moderators
If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:
body:not(.moderator) #chat {
overflow-y: hidden;
}
Private Group Chat for Traders and Financial Experts
sMany of the financial experts of today seek a way to share and profit from their knowledge. As a service provider of a group chat, we see a steady increase in the number of clients from the financial sector using the benefit of a group chat application on their websites.
In some scenarios, forex traders, day traders, stock traders, and social traders are using RumbleTalk to share insights and information among peers. In other cases, we are using the system with the help of financial experts to hold digital panel discussions.
The applications of group chat for financial experts are varied, but the reasons it is used are consistent. This post will discuss the features that make RumbleTalk a trusted choice for online discussions among financial experts and institutions.
Security
The number one concern for using any digital tools is security. When the information you share is sensitive (as in the case with banking, trading and so forth) digital managers want to ensure that their information is not susceptible to hackers.
RumbleTalk has encrypted its group chat rooms with end-to-end SSL/TLS technology. It means, that Messages and files are being send through a RumbleTalk group chat are not exposed to malicious systems that “listen in” on data transfers.
Need a video call option?
Well, when you need one of the two, audio or video call (we use WebRTC for a live call), you can trust that our encryption protects your information from being transferred.
Necessary Tools for Financial Experts
While the core purpose of RumbleTalk is to connect communities through online chat, including tools to make the conversation more productive is key to being the best choice for financial experts.
RumbleTalk includes tools for easy file sharing, embedding videos and images, recording audio, and sending audio and video calls. These features allow financial organizations to include a deeper context to their online group chats without having to send their users to their email to look find a document.
The most important use of these tools is when traders upload technical analytic graphs from their computer or send voice messages to the group. By sharing these and other excel files, charts, instructional videos and more, financial experts are able to use RumbleTalk for collaboration, training, and more.
Flexibility
RumbleTalk truly excels at being the most flexible group chat option available. Financial experts have many options for using group chat.
Among the most popular installation types, is the option to embed the group chat directly into a website. You can see an example of this by visiting the RumbleTalk demo. One RumbleTalk group chat can be embedded in as many pages and websites as necessary.
Another option is to leave the group chat off a website and access it with a provided URL. Anyone with the URL has the opportunity to log in and join the chat.
Part of RumbleTalk’s flexibility is its ability to choose who can participate. For some financial experts, online group chat is a tool to hold public discussions, while others use it for exchanging private information among each other. In either case, we configure the chat to limit or expand who can participate.
Ease of Use
Finally, our customers keep on choosing RumbleTalk. This is because of how simple it is to create, set-up, and use. To get your first group chat room, all that is required is an email address and password. This opens an account and automatically generates a live chat room that is ready to use.
Customize your chat to include your logo and match the color theme of your website. We built the option to set it up in the admin panel or by using CSS code.
For groups that need more than one group chat room, a new chat can be generated with one click.
Every group chat room comes with a line of HTML code. Grab this code and place it on any website html page. The group chat room is designed to be responsive. Responsive means that it will consume all the space given to him. This makes it easy for customers adding it to any page.
And of course, RumbleTalk isn’t just easy to use for administrators; We worked hard to make the service (platform) a mobile-friendly. Including features and an intuitive design to be convenient for your users too.
All of this comes with the reliability of RumbleTalk’s infrastructure and customer support. It does not matter where you are or what issues your facing, we are here and able to solve problems to keep you chatting.
Chat Compare, The difference between “Group Chat” “Live Chat” and a “Chat Room”
After several support emails with the same subject? asking us to explain the difference between chat software vs group chat vs live chat vs chat room. We decided to elaborate it a bit.
According to Merriam-Webster Dictionary, chat is defined as “to talk with someone in a casual way” and also “to talk over the Internet by sending messages back and forth in a chat room.”
Let’s try to understand the different options in the chat arena?
It is a matter of terminology but much more. For example, if you need a public chatroom that allows you to log in using your social media credentials, then a private room will not be suitable for your needs.
Let’s talk about chat compare, The difference between the next 3 options
A – Group Chat
B – Live Chat
C – Chat Room
Note, each of those can be shown in two forms, chat software, or chat service.
The main difference is that a chat software will be installed on your server using your CPU, memory and other resources from your servers. A chat service is a chat that will show on your website but will consume the vendor of the chat resources (e.g, will not affect your server performance).
So, let’s start
The Evolution of Chat in Computer System
Our needs to communicate with other human being had initiated a chat system to be built along with the first computer operating system, UNIX in 1970’s. Talk program was built into UNIX system to allow people communicate each other using their user name as ID. Talk program only allows one-on-one chat.
The very first multi-user and chat room is a program called Talkomatic. The program was invented for the first time in 1973 by Doug Brown and David Wolley in University of Illinois as supporting tools for the University’s learning system.
Chatting has been so common in our daily Internet life. We are now using many different chat program and connecting with people around the world, as a chat program chat has been advancing very much since the very first talk program in UNIX system.
1. Chat, Instant Messaging and SMS
We have been so useful with chatting program. As a communication system has evolved and so has the chat program evolved. Chat by definition, according to PC Magazine is a real-time communication via keyboard between two or more users on a local network (LAN) or over the Internet.
Webopedia, the online tech dictionary also define chat as the same definition as PC Magazine: a real-time communication between two users via computer. Once a chat has been initiated, either user can enter text by typing on the keyboard and the entered text will appear on the other user’s monitor.
Most chat system nowadays allows users logging in to the system to enter a chat room and chatting with other people who have already been in the room. This allows a many-to-many chat room, as everyone in the chat room can send their message to other people.
There is a different term regarding chat, but actually, it means the same. The term Instant Messaging for most often is separated from chat, but instant messaging is actually a chat in itself. The difference between chat and instant messaging is that instant messaging is built to focus on the one-on-one chat.
In a mobile application, we have now so many instant messaging application. In the cellular technology, the very first instant messaging app is SMS. This technology then evolves into more advanced technology in mobile instant messaging. As the smartphone revolutionize the computing industry in the 2010’s, SMS has been replaced by the variety of instant messaging app.
As smartphone technology now converges with Internet and web technology, the chat must be able to deal with the convergence. The challenge for today’s chat technology is to be able to run and synchronize on both PC and mobile device. Fortunately, today’s technology enables us to build a web chat software that can be used in either mobile device such as smartphones and tablets, as well as PCs (HTML5 + Javascript).
2. The 3 types of chats
In the chat arena, we know there are three types of chat:
- Private Group Chat
- Live Chat
- Chat Room
Private Group Chat. As the name depicted, the private chat room was meant to be a private conversation between a selected people. Usually, a small team needs this chat. Such as a group of stocks trader, a real estate sales associate, and small groups need this chat room.
One common needs for private group chat is the capability to share files. It is because the people in the private group chat usually are people with the same profession or the same interest. Therefore, the chat room is also functioned as a knowledge sharing tools. With the file sharing, capabilities, they can share any kind of files for information and knowledge sharing needs.
One additional advantage for teams is the fact that a user can enter when he has time and scroll up to see the group chat compare history, it is a huge time saver when managing groups.
Live Chat. This is the type used for customer service. A customer can be assisted by a company representative, who usually handle more than one visitor at a time. Companies with customer-oriented product and service, especially retail or FMCG company will surely need this chat. Live chat is useful as the supplement for telephone contact center.
Moreover, a company with an Internet-related product will need this live chat more than phone support. Since most customers are connected to the Internet, live chat is the most appropriate customer contact for such company.
Chat Room. This is the most common chat type and resembles a public space where people can talk to anonymous chatters. The public room can be placed on any website in any area of the site as long as the chat room is a public chat room.
When we enter the public chat room, we can see how many people have already been in the room and we can join the conversation with those people. In these chat room, usually, a conversation can be so hectic. However, we can also switch to private chat mode by inviting someone to a private room and chat privately. A good chat room will have this mode switching.
3. Chat Compare – Table of Comparison Between the Three
Features | Private Group Chat | Live Chat | Chat Room |
Public | No | Yes | Yes |
Switch to other types | Yes | No | Yes |
Moderated | Yes | No | Somewhat |
File sharing | Yes | No | Somewhat |
Image insertion | Yes | Somewhat | Yes |
Video Call | Yes | No | Yes |
Audio Call | Yes | Somewhat | Yes |
Emoticon | Yes | Somewhat | Yes |
4. Why Is It So Confusing?
The complexity of human communication makes our communication method is different from one another. This also applies to the Internet communication, that is the reason for so many different chats compare available. All of them have a specific purpose and cater specific chatting need.
We can select the most suitable chat for our conversation needs.
Comments
Post a Comment