Jump to content

  •  

* * * * * 1 votes

Customize Shoutbox


  • Please log in to reply
6 replies to this topic

#1 killjoy

killjoy

    Member

  • Member
  • PipPipPipPipPip
  • 174 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
  • 120 posts

Donator

Posted 28 September 2018 - 04:20 PM

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

#3 _.:Mercenary:._

_.:Mercenary:._

    Invision-Virus Nerd

  • Retired Contributor
  • PipPipPipPipPip
  • 521 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
  • 174 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
  • 174 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
  • 5 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

#7 kodiak

kodiak

    Newbie

  • Member
  • Pip
  • 8 posts

Donator

Posted 06 June 2019 - 10:18 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


hey i use new message on top ( want that )
but want the chatfield where i write on the bottom ?
How?




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users