PhpBB3 BBCodes • Subsilver2 Special Characters and Colour Palette Mod

Page 1 of 1

Subsilver2 Special Characters and Colour Palette Mod

Posted: 15 Mar 2010, 23:36

by Post Bot

Subsilver2 Special Characters and Colour Palette Mod
Written by torinogt

SubSilver2
Be sure to backup all files prior to installin this mod.
This mod removes colour pallete from right side of posting_body.html.
Adds colour pallete and special characters scripts to posting_buttons.html.
Adds special characters and colour palette buttons inline after flash button.
Adds special characters and colour palette help in posting.php
Adds .buttonz class to stylesheet.css

1. a. Copy special_chars.js to your root directory
1. b. Copy omega.png and color.png to root/images

spec char mod.zip: .js file, omega and color.png files; (4.87 KiB) Downloaded 443 times

2. Add between the <head></head> tags in overall_header.html preferrably right after <link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

Code: Select all

<script type="text/javascript" src="./special_chars.js"></script>

root\styles\subsilver2\template\posting_body.html
Find and remove:

Code: Select all

<!-- IF S_BBCODE_ALLOWED -->
			<td width="80" align="center" valign="top">
				<script type="text/javascript">
				// <![CDATA[
					colorPalette('v', 7, 6)
				// ]]>
				</script>
			</td>
			<!-- ENDIF -->

root\styles\subsilver2\template\posting_buttons.html
Find:

Code: Select all

tip: '{L_STYLES_TIP}'

Replace with:

Code: Select all

tip: '{L_STYLES_TIP}',
	x: '{LA_BBCODE_CHARS_HELP}',
    v: '{LA_BBCODE_V_HELP}'

Find:

Code: Select all

<td class="genmed" align="center">{L_FONT_COLOR}</td>

Replace with:

Code: Select all

<tr><td>
<!-- colour palette and special characters scripts -->
<!-- start colour palette script -->
<div id="colour_palette" align="center" style="display: none;">
              <script type="text/javascript">
          function change_palette()
             {
                dE('colour_palette');
                e = document.getElementById('colour_palette');
                
             }
             colorPalette('h', 10, 6);
          </script>
</div>

   <script language="javascript">
  function toggleDiv(colour_palette){
    if(document.getElementById(colour_palette).style.display == 'none'){
      document.getElementById(colour_palette).style.display = 'block';
    }else{
      document.getElementById(colour_palette).style.display = 'none';
    }
  }
</script>
<!-- end colour palette script -->
<!--start spec char script -->
<div id="chars_view" align="center" style="display: none;">
<dt>
<li id="zoom" style="text-align:center; list-style-type:none; padding-top:2px; font-size: 36px;">&nbsp;</li>
</dt>
            <script type="text/javascript">
        // <![CDATA[
        function change_chars()
            {
                dE('chars_view');
                e = document.getElementById('chars_view');
            }
        
            specialchar();
        // ]]> 
        </script>
</div>

<script language="javascript">
  function toggleDiv(chars_view){
    if(document.getElementById(chars_view).style.display == 'none'){
      document.getElementById(chars_view).style.display = 'block';
    }else{
      document.getElementById(chars_view).style.display = 'none';
    }
  }
</script>
<!-- end special character script -->
<!-- end colour palette and special characters scripts -->
</td></tr>

Find:

Code: Select all

 <!-- IF S_BBCODE_FLASH -->
			<input type="button" class="btnbbcode" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" onmouseover="helpline('d')" onmouseout="helpline('tip')" />
		<!-- ENDIF -->

Add After:

Code: Select all

<!-- start special char and colour palette buttons -->
<input type="button" class="buttonz" value="" style="background: url('./images/omega.png');" onclick="javascript:;" onmousedown="toggleDiv('chars_view');" onmouseover="helpline('x');" onmouseout="helpline('tip');"/>

<input type="button" class="buttonz" value="" style="background: url('./images/color.png');" onclick="javascript:;" onmousedown="toggleDiv('colour_palette');" onmouseover="helpline('v');" onmouseout="helpline('tip');"/>
<!-- end special char and colour palette buttons -->

root\language\en\posting.php

Find:

Code: Select all

'BBCODE_D_HELP'				=> 'Flash: [flash=width,height]http://url[/flash]',

On new line after add:

Code: Select all

// Special Chars
	'BBCODE_CHARS_HELP'			=> 'Insert special characters',
	'CHARS_HELP'				=> 'Special characters',
	'BBCODE_V_HELP'             => 'Select font colour',

root\styles\subsilver2\theme\stylesheet.css

Find:

Code: Select all

.username-coloured {
	font-weight: bold;
}

Immediately after insert:

Code: Select all

.buttonz {
        width: 22px !important;
        height: 22px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin: 6px 0px !important;
        border: 1px solid #979797 !important;
        }
        .buttonz:hover {
        background-color: #ebebeb !important;
        border: 1px solid #120000 !important; /*BC2A4D*/
        }

: No Modifications

: Finished Product

: Special Characters

: Colour Palette

Re: Subsilver2 Special Characters and Colour Palette Mod

Posted: 24 Apr 2010, 02:57

by cisco007

here are the instructions on how i made it work for Prosilver, did a few changes like adding the js files to the posting_buttons.html i did not see any reason for having it in the overall_header.html unless I am wrong but here i go! Some directions might be the same!

the files you download put them in the same location

now open styles/prosilver/posting_buttons.html

Find:

Code: Select all

		d: '{LA_BBCODE_D_HELP}'

Add after:

Code: Select all

tip: '{L_STYLES_TIP}',
   x: '{LA_BBCODE_CHARS_HELP}',
    v: '{LA_BBCODE_V_HELP}'

Find:

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/editor.js"></script>

Add after:

Code: Select all

    <script type="text/javascript" src="./special_chars.js"></script>

Find:

Code: Select all

<div id="colour_palette" style="display: none;">
	<dl style="clear: left;">
		<dt><label>{L_FONT_COLOR}:</label></dt>
		<dd>
		<script type="text/javascript">
		// <![CDATA[
			function change_palette()
			{
				dE('colour_palette');
				e = document.getElementById('colour_palette');
				
				if (e.style.display == 'block')
				{
					document.getElementById('bbpalette').value = '{LA_FONT_COLOR_HIDE}';
				}
				else
				{
					document.getElementById('bbpalette').value = '{LA_FONT_COLOR}';
				}
			}

			colorPalette('h', 15, 10);
		// ]]>
		</script>
		</dd>
	</dl>
</div>

Replace with:

Code: Select all

<!-- colour palette and special characters scripts -->
<!-- start colour palette script -->
<div id="colour_palette" align="center" style="display: none;">
              <script type="text/javascript">
          function change_palette()
             {
                dE('colour_palette');
                e = document.getElementById('colour_palette');
               
             }
             colorPalette('h', 10, 6);
          </script>
</div>

   <script language="javascript">
  function toggleDiv(colour_palette){
    if(document.getElementById(colour_palette).style.display == 'none'){
      document.getElementById(colour_palette).style.display = 'block';
    }else{
      document.getElementById(colour_palette).style.display = 'none';
    }
  }
</script>
<!-- end colour palette script -->
<!--start spec char script -->
<div id="chars_view" align="center" style="display: none;">
<span>
<li id="zoom" style="text-align:center; list-style-type:none; padding-top:2px; font-size: 36px;">&nbsp;</li>
</span>
            <script type="text/javascript">
        // <![CDATA[
        function change_chars()
            {
                dE('chars_view');
                e = document.getElementById('chars_view');
            }
       
            specialchar();
        // ]]>
        </script>
</div>

<script language="javascript">
  function toggleDiv(chars_view){
    if(document.getElementById(chars_view).style.display == 'none'){
      document.getElementById(chars_view).style.display = 'block';
    }else{
      document.getElementById(chars_view).style.display = 'none';
    }
  }
</script>
<!-- end special character script -->
<!-- end colour palette and special characters scripts -->

Find:

Code: Select all

	<!-- IF S_BBCODE_FLASH -->
		<input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />
	<!-- ENDIF -->

Add after:

Code: Select all

    <!-- start special char and colour palette buttons -->
    <input type="button" class="buttonz" value="" style="background: url('./images/omega.png');" onclick="javascript:;" onmousedown="toggleDiv('chars_view');" onmouseover="helpline('x');" onmouseout="helpline('tip');"/>

    <input type="button" class="buttonz" value="" style="background: url('./images/color.png');" onclick="javascript:;" onmousedown="toggleDiv('colour_palette');" onmouseover="helpline('v');" onmouseout="helpline('tip');"/>
    <!-- end special char and colour palette buttons -->

now follow the same edit for the language/yourlanguage/posting.php

now open:
styles/prosilver/buttons.css
Find:

Code: Select all

ul.profile-icons li.info-icon, ul.profile-icons li.report-icon	{ margin: 0 3px 0 0; }

Add after:

Code: Select all

.buttonz {
        width: 22px !important;
        height: 22px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin: 6px 0px !important;
        border: 1px solid #979797 !important;
        }
        .buttonz:hover {
        background-color: #ebebeb !important;
        border: 1px solid #120000 !important; /*BC2A4D*/
        }

save, upload, refresh and purge yourstyle and enjoy! I think i did it right!