Jump to content

  •  

Important Notification

Members,
For your security and privacy please read this IV News Article to protect your community and your self from IPS. This is urgent and should be taken seriously.
Thank you,
IV Management

* * * * * 1 votes

Customize Shoutbox


  • Please log in to reply
5 replies to this topic

#1 killjoy

killjoy

    Member

  • Member
  • PipPipPipPipPip
  • 171 posts

Donator

Posted 28 September 2018 - 04:06 PM

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">
<li>
<a href="#" class="cbBtn" data-action="toggleSound" data-ipstooltip="" title='{lang="chatbox_togglesound"}'>
<i class="fa fa-volume-up"></i>
</a>
</li>
{{if \IPS\Application::load('bimchatbox')->can_Manage()}}
<li>
<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>
</a>   
</li>
   {{endif}}
</ul>
<div>{lang="Rename this to whatever you want your shoutbox title to be"}</div>
</h2>



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"}
</a>

{{else}}
{$ann|raw}
{{endif}}
</div>
{{endif}}


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



#2 Invincibility

Invincibility

    Community Team

  • Community Team
  • 93 posts

Donator

Posted 28 September 2018 - 04:20 PM

Very well written!
I needed such a tutorial since ages.
Huge appreciation!

~ I only live once. But the way I live, one time is enough. ~


#3 _.:Mercenary:._

_.:Mercenary:._

    IVN COO | IV Management Team

  • Community Management
  • 514 posts
  • LocationUnited States of America

Donator

Posted 29 September 2018 - 02:21 AM

Great post! Very well written. Many will definitely need this. #Pinned

Kind regards,
_.:Mercenary:._

-------Enjoy my content? Donate to me below! <3 -------
BTC: 32rhDTMBHE3HyK8WcmSMukjG8naQB3u9sB
ETH: 0x4fF69a50E2a319Be43Dfd2D829832d6a6D86cf83


#4 killjoy

killjoy

    Member

  • Member
  • PipPipPipPipPip
  • 171 posts

Donator

Posted 05 October 2018 - 04:40 PM

Thanks everyone - Thanks to Invincibility for asking for help on this in the first place.

#5 killjoy

killjoy

    Member

  • Member
  • PipPipPipPipPip
  • 171 posts

Donator

Posted 30 November 2018 - 08:38 PM

View Postnullsen, on 30 November 2018 - 12:13 AM, said:

Thank you mate! Well written! All my job already is already working pretty well!

Glad to help - hopefully soon I'll get more free time and get some more tutorials going.
But either way our Staff and members do a damn good job at helping everyone with issues or customizing their own boards.

Kudos to our IV staff and members!

#6 [email protected]

[email protected]

    Newbie

  • Member
  • Pip
  • 1 posts

Posted 15 May 2019 - 12:26 AM

View Postkilljoy, on 28 September 2018 - 04:06 PM, said:

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">
<li>
<a href="#" class="cbBtn" data-action="toggleSound" data-ipstooltip="" title='{lang="chatbox_togglesound"}'>
<i class="fa fa-volume-up"></i>
</a>
</li>
{{if \IPS\Application::load('bimchatbox')->can_Manage()}}
<li>
<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>
</a>   
</li>
   {{endif}}
</ul>
<div>{lang="Rename this to whatever you want your shoutbox title to be"}</div>
</h2>



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"}
</a>

{{else}}
{$ann|raw}
{{endif}}
</div>
{{endif}}


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



glad tto get this i was looking how to customised the sjoutout box may i know how to change the header details




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users