Jump to content


PMs unavailable

We are aware that PMs are currently not loading. There is an issue with the database. We are working hard to fix this as soon as possible!
Thank you for understanding.
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