“.smiley-#” to “.smilies-set-a-#” where # is a number

e.g. “.smiley-10” to “.smilies-set-a-10”

“.smiley-#” to “.smilies-set-a-#” where # is a number

e.g. “.smiley-10” to “.smilies-set-a-10”

Here’s an example.

.smilies-set-a-1 {
	width: 48px !important;
	padding-right: 48px;
	background-image: url("https://rumbletalk-images-upload.s3.amazonaws.com/a8ee7ab954f25e717b41e0de157a6057/1665746731-man.png");
	height: 48px;
	background-position: center;
}

.smilies-set-a-2 {
	width: 48px !important;
	padding-right: 48px;
	background-image: url("https://rumbletalk-images-upload.s3.amazonaws.com/a8ee7ab954f25e717b41e0de157a6057/1665746738-woman.png");
	height: 48px;
	background-position: center;
}

.smilies-set-a-3 {
	width: 48pxc !important;
	padding-right: 48px;
	background-image: url("https://rumbletalk-images-upload.s3.amazonaws.com/a8ee7ab954f25e717b41e0de157a6057/1665746744-baby.png");
	height: 48px;
	background-position: center;
}

These are the CSS codes for changing each emoji for each tab. Each tab has 32 emojis that you can customize. You can refer to this image for the emoji that you want to change.

Smileys (1st tab)

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.

.smilies-set-a-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/smiley1.png");
	height: 32px;
	background-position: center;
}

.smilies-set-a-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/smiley2.png");
	height: 32px;
	background-position: center;
}

.smilies-set-a-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/smiley3.png");
	height: 32px;
	background-position: center;
}

Hand gestures and people (2nd tab)

.hand-gestures-and-people-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/gestures1.png");
	height: 32px;
	background-position: center;
}

.hand-gestures-and-people-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/gestures2.png");
	height: 32px;
	background-position: center;
}

.hand-gestures-and-people-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/gestures3.png");
	height: 32px;
	background-position: center;
}

Objects/business (3rd tab)

.objects-business-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/objects1.png");
	height: 32px;
	background-position: center;
}

.objects-business-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/objects2.png");
	height: 32px;
	background-position: center;
}

.objects-business-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/objects3.png");
	height: 32px;
	background-position: center;
}

Food and drinks (4th tab)

.food-and-drinks-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/foods1.png");
	height: 32px;
	background-position: center;
}

.food-and-drinks-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/foods2.png");
	height: 32px;
	background-position: center;
}

.food-and-drinks-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/foods3.png");
	height: 32px;
	background-position: center;
}

Animals and nature (5th tab)

.animals-and-nature-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/animal1.png");
	height: 32px;
	background-position: center;
}

.animals-and-nature-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/animal2.png");
	height: 32px;
	background-position: center;
}

.animals-and-nature-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/animal3.png");
	height: 32px;
	background-position: center;
}

Social media and numbers (6th tab)

.social-media-and-numbers-1 {
	width: 0px !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/social1.png");
	height: 32px;
	background-position: center;
}

.social-media-and-numbers-2 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/social2.png");
	height: 32px;
	background-position: center;
}

.social-media-and-numbers-3 {
	width: 0 !important;
	padding-right: 32px;
	background-image: url("https://www.test.com/storage/social3.png");
	height: 32px;
	background-position: center;
}

The post Customizing the new set of emojis (for beta users) appeared first on Online Group Chat Room Plugin for Websites and Live events.

• First, go to your RumbleTalk’s admin panel and click Design.

• Second, select Visual Design.

• Under the General tab, scroll down and click Add CSS for Web Browsers.

Here comes the fun part. In the CSS editor, copy the code provided below.

#login-guest span {
color: transparent !important;
position: relative;
}
#login-guest span::after {
content: 'Chat With Us!';
position: relative;
color: #fff;
left: -20px;
}

On the content variable, the default value on that is Guest and we changed it to Chat With Us!. However, you can change it to any word that you would like. After that, click the Close button to save the changes.

After clicking the Close button, your admin panel will refresh. You will see the change once you log in on the chat just like this.

The post How to change the “Guest” text button using CSS appeared first on Online Group Chat Room Plugin for Websites and Live events.

However, users will only see admins in the user’s list.

body:not(.moderator) #list-frame #list > div:not(.admin) {
  display: none;
}

In this example, the guest “user” is logged in. However, they can only see the admin’s name in the user’s list.

For admins, they can still see the user’s list normally.

The post Hide users in the user’s list for other users appeared first on Online Group Chat Room Plugin for Websites and Live events.

#list-frame #list > div:not(.admin) {
  display: none;
} 

To know how to edit web CSS, click this link.

The post How to show only admins in the users’ list (user list)? appeared first on Online Group Chat Room Plugin for Websites and Live events.

If you do not want to see the mentions option menu when you type @.
Simply use CSS to disable it.

To disable the mentions option, you just need to paste this code on your CSS editor.

.mention-tooltip {
     display: none !important;
 }

The post Can you disable the mentions option? appeared first on Online Group Chat Room Plugin for Websites and Live events.

.options-dialog .toggle-sound {   display: none; } 

Add this CSS code using the admin panel (see how in here for web CSS, here for mobile CSS).

The post How to remove the option remove sound notification? appeared first on Online Group Chat Room Plugin for Websites and Live events.