● [MOD] Toggle Show / Hide Quick Reply & Additional Option

Wed Jun 08, 2022 4:38 pm
Clan Leader
Top Dog
Nuke Dev / Coder
2836 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 40.6hrs.
Total Played: 231hrs.


  
Don't get much, huh?
Reputation: 7033.5
votes: 6
**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.

Expand

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.


Expand
Thu Jun 09, 2022 2:52 am
Spammer
110 Posts
Zardos
Currently Offline
Offline

Most Played:
This week: 35.9hrs.
Total Played: 724hrs.


  
Is this your job?
Reputation: 774
Again thanks coRpSE, great mod and works well.
Thu Jun 09, 2022 6:32 am
Original Poster
Clan Leader
Top Dog
Nuke Dev / Coder
2836 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 40.6hrs.
Total Played: 231hrs.


  
Don't get much, huh?
Reputation: 7033.5
votes: 6
n/p


 
Forums ©