![[HSX] HeadShot Xtreme is officially recognized by the Central Outpost as a genuine gaming organization.](https://www.headshotdomain.net/files/coRpSE/cnopseal_X74-MEW1.png "[HSX] HeadShot Xtreme is officially recognized by the Central Outpost as a genuine gaming organization.")
**Copy from other mod thread**
Well, about 5 years ago, I was just messing about, and I made a video where I showed off a few small mods that I did to replace check boxes and have a show/hide section. A few days ago, I saw a message on the video asking if I was still working on it. Well, I wasn't, mostly because it was 5 years ago and also, I lost all my scripts that were on my private disks. So, I asked, was it something they would be interested in me remaking, and they said yes, so here it is. I separated the two mods for one can be used pretty much on all themes, but the other, not all since the ones using Bootstrap, especially like the theme we are using here, already has its own already.
This one here, will not work on all mods, so I kept the jQuery theme specific.
Okay, this is more files, but should be easy to add in. Just note, this mod is for any theme not bootstrap, so not BlackMagic. For that, you would use the system that is already that with theme.
Show/Hide Toggle button
3 files for Evo to edit
4 files for theme to edit.
CMS:
public_html/modules/Forums/posting.php
public_html/modules/Forums/viewtopic.php
public_html/modules/Forums/language/lang_english/lang_main.php
Theme:
public_html/themes/YOUR_THEME/css/style.css
public_html/themes/YOUR_THEME/theme.php
public_html/themes/YOUR_THEME/forums/posting_body.tpl
public_html/themes/YOUR_THEME/forums/viewtopic_body.tpl
Includes 1 file:
public_html/includes/js/jquery.toggler.js
--------------------------------------------------------------------------------------
DOWNLOAD -> EXTRACT -> UPLOAD the attached file keeping the folder path.
OPEN:
public_html/themes/YOUR_THEME/css/style.css
At the Bottom of the file, put this and edit the colors to match your theme.
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/theme.php
Near the top of the file, within the first 100 lines, you should find an area that will possibly have a few lines
that starts off like:
addCSSToHead or addJSToBody. Probably under a bunch of lines that start off with the word define. On
a new line after the last addCSSToHead or addJSToHead, add the following:
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/forums/posting_body.tpl
FIND:
**READ THE SPECIAL NOTE AT BOTTOM BEFORE DOING THIS EDIT**
REPLACE WITH:
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/forums/viewtopic_body
FIND:
REPLACE WITH:
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/language/lang_english/lang_main.php
FIND:
ADD BEFORE, ON NEW LINE:
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/posting.php
FIND:
AFTER, ADD:
##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/viewtopic.php
FIND:
AFTER, ADD:
That's all, Save and Close all.
Adjusting the speed of the toggle system. For this, you need to edit the jQuery file.
Open the attached file and you will see this code.
There are 3 occurrences of the number 1000. Change each one as you see fit. Note, it is in ms. 1000ms = 1 second.
**SPECIAL NOTE FROM ABOVE**
Not all themes are the same, this is designed for those themes that have not used any modifications to the template system of the forums. If by chance you are using one of those themes that are changed, you will need to figure out how to go about wrapping that section for that specific theme. This is where knowing HTML is a must, well, at least the basics. The only parts you will need for sure is the following.
THE START:
That there is the button, and the start of the container where everything that you want to hide or show will be in.
That is the closing of the container.
Just note, I will help as much as I can if you need it, but understand this, if the theme you are using is a commercial theme, I can't help you if I don't have the theme, and just sending me that file may not be enough. From there, you may have to contact the creator or if the creator is okay with you sending me a copy of the theme to do the mods, then that is fine as well.
Well, about 5 years ago, I was just messing about, and I made a video where I showed off a few small mods that I did to replace check boxes and have a show/hide section. A few days ago, I saw a message on the video asking if I was still working on it. Well, I wasn't, mostly because it was 5 years ago and also, I lost all my scripts that were on my private disks. So, I asked, was it something they would be interested in me remaking, and they said yes, so here it is. I separated the two mods for one can be used pretty much on all themes, but the other, not all since the ones using Bootstrap, especially like the theme we are using here, already has its own already.
This one here, will not work on all mods, so I kept the jQuery theme specific.
Okay, this is more files, but should be easy to add in. Just note, this mod is for any theme not bootstrap, so not BlackMagic. For that, you would use the system that is already that with theme.
Show/Hide Toggle button
3 files for Evo to edit
4 files for theme to edit.
CMS:
public_html/modules/Forums/posting.php
public_html/modules/Forums/viewtopic.php
public_html/modules/Forums/language/lang_english/lang_main.php
Theme:
public_html/themes/YOUR_THEME/css/style.css
public_html/themes/YOUR_THEME/theme.php
public_html/themes/YOUR_THEME/forums/posting_body.tpl
public_html/themes/YOUR_THEME/forums/viewtopic_body.tpl
Includes 1 file:
public_html/includes/js/jquery.toggler.js
--------------------------------------------------------------------------------------
DOWNLOAD -> EXTRACT -> UPLOAD the attached file keeping the folder path.
OPEN:
public_html/themes/YOUR_THEME/css/style.css
At the Bottom of the file, put this and edit the colors to match your theme.
Code: [ Select all ]
/* Start Toggle Show/Hide */
.showBtn {
cursor: pointer;
display: block;
padding: 10px 20px;
border: 1px solid #0F0;
border-radius: 4px;
background: #444;
color: #FFF;
font-weight: 600;
text-align: center;
max-width: 250px;
}
.showBtn:hover {
background: #0F0;
border: 1px solid #666;
color: #000;
font-weight: 600;
}
.hideme {
display: none;
}
/* End Toggle Show/Hide */##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/theme.php
Near the top of the file, within the first 100 lines, you should find an area that will possibly have a few lines
that starts off like:
addCSSToHead or addJSToBody. Probably under a bunch of lines that start off with the word define. On
a new line after the last addCSSToHead or addJSToHead, add the following:
PHP: [ Select all ]
addJSToBody('includes/js/jquery.toggler.js','file'); ##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/forums/posting_body.tpl
FIND:
Code: [ Select all ]
{ATTACHBOX}
{POLLBOX}**READ THE SPECIAL NOTE AT BOTTOM BEFORE DOING THIS EDIT**
REPLACE WITH:
Code: [ Select all ]
<tr>
<td colspan="2">
<div class="showBtn">{L_ATTACHMENT_AOO}</div>
<div class="hideme">
<table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline">
{ATTACHBOX}
{POLLBOX}
</table>
</div>
</td>
</tr>##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/themes/YOUR_THEME/forums/viewtopic_body
FIND:
Code: [ Select all ]
<!-- BEGIN switch_quick_reply -->
{QRBODY}
<!-- END switch_quick_reply -->REPLACE WITH:
Code: [ Select all ]
<!-- BEGIN switch_quick_reply -->
<div class="showBtn">Show Quick Reply</div>
<div class="hideme">
{QRBODY}
</div>
<!-- END switch_quick_reply -->##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/language/lang_english/lang_main.php
FIND:
PHP: [ Select all ]
//
// That's all, Folks!
// ------------------------------------------------- ADD BEFORE, ON NEW LINE:
PHP: [ Select all ]
/*****[START]******************************************
[ Base: Toggler Show/Hide ]
******************************************************/
$lang['AttachAOO'] = 'Attachemts and other options';
$lang['ShowQR'] = 'Show/Hide Quick Reply';
/*****[END]********************************************
[ Base: Toggler Show/Hide ]
******************************************************/ ##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/posting.php
FIND:
PHP: [ Select all ]
'L_DISABLE_SMILIES' => $lang['Disable_Smilies_post'],
'L_GOTO_PAGE' => $lang['Goto_page'], AFTER, ADD:
PHP: [ Select all ]
'L_ATTACHMENT_AOO' => $lang['AttachAOO'], ##
##
##-----------------------------------------------------------------------
##
##
OPEN:
public_html/modules/Forums/viewtopic.php
FIND:
PHP: [ Select all ]
'L_GOTO_PAGE' => $lang['Goto_page'], AFTER, ADD:
PHP: [ Select all ]
'L_SHOW_QR' => $lang['ShowQR'], That's all, Save and Close all.
Adjusting the speed of the toggle system. For this, you need to edit the jQuery file.
Open the attached file and you will see this code.
Code: [ Select all ]
jQuery.noConflict(), jQuery(function($) {
$('.showBtn').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('.hideme').slideUp(1000);
} else {
$('.hideme').slideUp(1000);
$('.showBtn').removeClass('active');
$(this).addClass('active');
$(this).next().filter('.hideme').slideDown(1000);
}
});
});There are 3 occurrences of the number 1000. Change each one as you see fit. Note, it is in ms. 1000ms = 1 second.
**SPECIAL NOTE FROM ABOVE**
Not all themes are the same, this is designed for those themes that have not used any modifications to the template system of the forums. If by chance you are using one of those themes that are changed, you will need to figure out how to go about wrapping that section for that specific theme. This is where knowing HTML is a must, well, at least the basics. The only parts you will need for sure is the following.
THE START:
Code: [ Select all ]
<div class="showBtn">{L_ATTACHMENT_AOO}</div>
<div class="hideme">That there is the button, and the start of the container where everything that you want to hide or show will be in.
Code: [ Select all ]
</div>That is the closing of the container.
Just note, I will help as much as I can if you need it, but understand this, if the theme you are using is a commercial theme, I can't help you if I don't have the theme, and just sending me that file may not be enough. From there, you may have to contact the creator or if the creator is okay with you sending me a copy of the theme to do the mods, then that is fine as well.
Again thanks coRpSE, great mod and works well.