[MOD] New look, change those check boxes.
Select messages from # through # Forum FAQ
[/[Print]\]

HeadShot Extreme -> PC & Codeing Talk
#1: No icon [MOD] New look, change those check boxes. Author: [HSX]coRpSE, Location: Back of your mind!!! PostPosted: Wed Jun 08, 2022 4:21 pm
    —
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 mod can be used on any theme, but the instructions may need to change a little.
Here is what this mod changes.
Expand

Okay, below are the instructions that I have ATM, and if you can follow them with ease, then I will paste these same instructions publically.


Toggle script & Shorten labels

Total files to edit: 4 (minimum)
2 files for Evo core to edit
2 files for each theme to edit.

CMS:
public_html/modules/Forums/posting.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/forums/posting_body.tpl

It's recommended to back up each file that you are about to edit, just in case.


Open:
public_html/themes/YOUR_THEME/css/style.css

At the bottom, place the following.
This is also where you color edits:

Everything in the :root control the color for the switches.


Code: [ Select all ]

/* Start Toggle Checkboxs */

:root {
   --track: #777;
   --track_color_active_1: #0F0;
   --track_color_active_2: #F00;
   --switch: #FFF;
   --switch_border: #CCC;
  }
   .switchcheck {
   position: relative;
   display: inline-block;
   width: 26px;
   height: 14px;
  }

  .switchcheck input {
   opacity: 0;
   width: 0;
   height: 0;
  }

  .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--track);
   border-radius: 20px;
   -webkit-transition: .4s;
   transition: .4s;
  }

  .slider:before {
   position: absolute;
   content: "";
   height: 10px;
   width: 10px;
   left: 0;
   bottom: 0;
   background-color: var(--switch);
   border-radius: 50%;
   border: 2px solid var(--switch_border);
   -webkit-transition: .4s;
   transition: .4s;
  }


  input:checked + .slider1 {
   background-color: var(--track_color_active_1);
  }

  input:focus + .slider1 {
   box-shadow: 0 0 1px var(--track_color_active_1);
  }

  input:checked + .slider2 {
   background-color: var(--track_color_active_2) !important;
  }

  input:focus + .slider2 {
   box-shadow: 0 0 1px var(--track_color_active_2) !important;
  }

  input:checked + .slider:before {
   -webkit-transform: translateX(12px);
     -ms-transform: translateX(12px);
     transform: translateX(12px);
  }

/* End Toggle Checkboxes */





##
##
##-----------------------------------------------------------------------
##
##


public_html/themes/YOUR_THEME/forums/posting_body.tpl

Find the checkbox that you want to change to a slider switch,
and wrap it in:

Code: [ Select all ]

<label class="switchcheck">


Then the which should be already there.

After that, end with:

Code: [ Select all ]

<span class="slider slider2"></span></label>


Change the slider2 to a 1 depending on the color you want, (which is set within the previous edit).

Here is an example of what it should look like. Top one is original, bottom one edited.

Original:

PHP:  [ Select all ]

<!-- BEGIN switch_signature_checkbox -->
        <br /><input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} value="ON" /> {L_ATTACH_SIGNATURE} <span class="gensmall">{L_ATTACH_SIGNATURE_HELP}</span>
        <!-- END switch_signature_checkbox --> 

 
Edited:

PHP:  [ Select all ]

<!-- BEGIN switch_signature_checkbox -->
        <br /><label class="switchcheck"><input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} value="ON" /><span class="slider slider2"></span></label> {L_ATTACH_SIGNATURE} <span class="gensmall">{L_ATTACH_SIGNATURE_HELP}</span>
        <!-- END switch_signature_checkbox --> 

 


This next part may or may not match exactly.

Search for L_DISABLE_HTML

You will see something like:

Code: [ Select all ]

<!-- BEGIN switch_html_checkbox -->
        <input type="checkbox" name="disable_html" {S_HTML_CHECKED} value="ON" /> {L_DISABLE_HTML}
        <!-- END switch_html_checkbox -->
        <!-- BEGIN switch_bbcode_checkbox -->
        | <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} value="ON" /> {L_DISABLE_BBCODE}
        <!-- END switch_bbcode_checkbox -->
        <!-- BEGIN switch_smilies_checkbox -->
        | <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} value="ON" /> {L_DISABLE_SMILIES}
        <!-- END switch_smilies_checkbox -->


You want to replace that with what is below. If you can't find it, send me your file. Every theme is
different, so I can not guarantee that everything will match up.



Code: [ Select all ]

{L_DISABLE}
        <!-- BEGIN switch_html_checkbox -->
        <input type="checkbox" name="disable_html" {S_HTML_CHECKED} value="ON" /> {L_D_HTML}
        <!-- END switch_html_checkbox -->
        <!-- BEGIN switch_bbcode_checkbox -->
         / <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} value="ON" /> {L_D_BBCODE}
        <!-- END switch_bbcode_checkbox -->
        <!-- BEGIN switch_smilies_checkbox -->
         / <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} value="ON" /> {L_D_SMILIES} {L_D_IN_POST}
        <!-- END switch_smilies_checkbox -->



##
##
##-----------------------------------------------------------------------
##
##

public_html/modules/Forums/language/lang_english/lang_main.php

We are not going to remove the original, just add our own.

FIND:

Code: [ Select all ]

$lang['Disable_Smilies_post'] = 'Disable Smilies in this post';



AFTER ADD:

Code: [ Select all ]

$lang['Disable_HTML'] = 'HTML';
$lang['Disable_BBCode'] = 'BBCode';
$lang['Disable_Smilies'] = 'Smilies';
$lang['Disable_In_Post'] = 'in this post';
$lang['Disable'] = 'Disable';



##
##
##-----------------------------------------------------------------------
##
##

public_html/modules/Forums/posting.php


FIND:

Code: [ Select all ]

'L_DISABLE_SMILIES' => $lang['Disable_Smilies_post'],


AFTER ADD:

Code: [ Select all ]

//Shortened Options
      'L_D_HTML' => $lang['Disable_HTML'],
      'L_D_BBCODE' => $lang['Disable_BBCode'],
      'L_D_SMILIES' => $lang['Disable_Smilies'],
      'L_D_IN_POST' => $lang['Disable_In_Post'],
      'L_DISABLE' => $lang['Disable'],
      //Shortened Options End



SAVE & UPLOAD all.

Thanks all folks!
#2: No icon Re: [MOD] New look, change those check boxes. Author: zardos, Location: North west of England PostPosted: Thu Jun 09, 2022 2:51 am
    —
Thanks coRpSE, great mod works well.

Did this for the quick-reply, without toggle box, added that to quick-reply button instead.
HeadShot Extreme -> PC & Codeing Talk


output generated using printer-friendly topic mod. All times are GMT - 7 Hours

Page 1 of 1