Jump to content


Staff applications open!

We are currently in need of more staff members. Feel you are ready to take on the tasks of being a Community Team Member? Apply today here: http://invision-viru...f-applications/
IV Management

- - - - -

Customize ShoutBox

  • Please log in to reply
No replies to this topic

#1 KseniAdv



  • Member
  • Pip
  • 1 posts

Posted 27 December 2019 - 04:27 AM

Today we are going to show you where to go to customize BIM 4.x.x Shoutbox.

(NOTE: Do not copy and paste the HTML code as your version may be different and have slight code differences; Just find the section that is highlighted in blue and put whatever you desire.)

"You can copy and paste the CSS Stuff though"

1. First go to your site/forum -> Login to your AdminCP.

2. Next go to Customization --> Themes --> Your Theme --> Edit HTML and CSS.

3. Then Open Templates --> bimchatbox --> front --> chat --> main.

This is where you will change your ShoutBox Title name and rename your rules tab to whatever you want.

Switch out this HTML code to change your ShoutBox Title

<div data-controller="bim.chatbox.new">
<h2 class="ipsType_sectionTitle ipsType_reset" id="elChatbox" >
<ul class="ipsPos_right ipsList_inline ipsList_noSpacing">
<a href="#" class="cbBtn" data-action="toggleSound" data-ipstooltip="" title='{lang="chatbox_togglesound"}'>
<i class="fa fa-volume-up"></i>
{{if \IPS\Application::load('bimchatbox')->can_Manage()}}
<a href="#" class="cbBtn" data-ipsDialog data-ipsDialog-forceReload data-ipsDialog-url='{url="app=bimchatbox&module=chatbox&controller=chatbox&do=config"}' data-ipsDialog-size='narrow' data-ipstooltip="" title='{lang="chatbox_management"}'>
<i class="fa fa-wrench"></i>
<div>{lang="Rename this to whatever you want your shoutbox title to be"}</div>

Next we will change the rules tab. This is also in your main.html file.

Simply look for and change the following.

<div id="elChatboxContent">
{{if $ann}}
<div class="cbAnn ipsClearfix">
{{if settings.chatbox_conf_anntab == 1}}
<a href="#" data-ipsDialog data-ipsDialog-forceReload data-ipsDialog-title='{lang="chatbox_rules"}' data-ipsDialog-url='{url="app=bimchatbox&module=chatbox&controller=chatbox&do=chatrules"}' data-ipsDialog-size='narrow'>

<i class="fa fa-bullhorn" aria-hidden="true"></i>&nbsp;&nbsp;{lang="Rename this to whatever you want your rules tab to show"}


If you want to change text color and what not then follow these steps below.

1. First go to your site/forum -> Login to your AdminCP.

2. Go to Customization --> Themes --> Your Theme --> Edit HTML and CSS.

3. Open CSS --> bimchatbox --> chatbox.css

Find the following and Place with whatever Hex Color you want. (replace the #7FFFD4 with your own color)

(Below is the color of the ChatBox Title)

#elChatbox { margin-bottom: 0px !important;
background: transparent;
   color: #7FFFD4 !important;


(Below is the color of all Text-Input before pressing enter)

.bimcb_chatInput {
width: 100% !important;
max-width: 100% !important;
margin-top: 2px;
height: 36px;
padding: 8px;
border: none !important;
background: transparent;
   color: #7FFFD4 !important;  

(Below is the color of all text entered into the ChatBox)

#chatcontent {
width: 100%;
  color: #7FFFD4 !important;

Hope this is straight forward and helps others customize their BIM ChatBox

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users