Fonts drop down selection & URL in post screen

[nokonium]

Thanks SleePy

[Gobo]

Thanks

works great with 1.1rc2

[comatose]

i was able to fix it by moving the if statement around

Code Select Expand

// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{
  if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;

// only replace the URL tag! . . . . . . . . . . .
      if ($tag['code'] == 'url')
   {
global $tag;
echo '<a href="javascript:void(0);" onclick="urlINPT(); return false;"><img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
else{
// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection ;).
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';

// Okay... we have the link.  Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
}

echo '
</td>
</tr>';
}

works good for me, but only problem i seen is that when you put your mouse over the URL icon the Description of that icon does not pop up anymore?
how can i fix that?

[comatose]

works good for me, but only problem i seen is that when you put your mouse over the URL icon the Description of that icon does not pop up anymore?
how can i fix that?

Anyone?

[yeahimsteve]

Can somebody please say clearly what needs to be edited for 1.1Rc2??

I do not have anything close to

Code Select Expand

// Print a drop down list for all the colors we allow!" in my Post.Template.php.  I'm using the Classic template.  From all the modifications in this thread, it's getting confusing, as half the stuff doesn't exist in 1.1Rc2.  Help please!  Thanks in advance...

[Gobo]

try a search for

<option value="10pt">10pt</option>

im sure ull find it easy...

remember if u cant loacte the exact text given in the post try to search for other lines...

[TechnoDragon]

OK, i have edited this code to work perfectly with RC2 and here it is all together in one nice, neat little post:

NOTE: all of this editing is done in the post.template.php file

To make the names of the colors appear in that color:
Find:

Code Select Expand

<option value="" selected="selected">', $txt['change_color'], '</option>
<option value="Black">', $txt[262], '</option>
<option value="Red">', $txt[263], '</option>
<option value="Yellow">', $txt[264], '</option>
<option value="Pink">', $txt[265], '</option>
<option value="Green">', $txt[266], '</option>
<option value="Orange">', $txt[267], '</option>
<option value="Purple">', $txt[268], '</option>
<option value="Blue">', $txt[269], '</option>
<option value="Beige">', $txt[270], '</option>
<option value="Brown">', $txt[271], '</option>
<option value="Teal">', $txt[272], '</option>
<option value="Navy">', $txt[273], '</option>
<option value="Maroon">', $txt[274], '</option>
<option value="LimeGreen">', $txt[275], '</option>

Replace:

Code Select Expand

<option value="" selected="selected">', $txt['change_color'], '</option>
<option value="Black" style="color:black">', $txt[262], '</option>
<option value="Silver" style="color:silver">', $txt[263], '</option>
<option value="Gray" style="color:gray">', $txt[264], '</option>
<option value="Maroon" style="color:maroon">', $txt[266], '</option>
<option value="Red" style="color:red">', $txt[267], '</option>
<option value="Purple" style="color:purple">', $txt[268], '</option>
<option value="Fuchsia" style="color:fuchsia">', $txt[269], '</option>
<option value="Green" style="color:green">', $txt[270], '</option>
<option value="Lime" style="color:lime">', $txt[271], '</option>
<option value="Olive" style="color:olive">', $txt[272], '</option>
<option value="Yellow" style="color:yellow">', $txt[273], '</option>
<option value="Navy" style="color:navy">', $txt[274], '</option>
<option value="Blue" style="color:blue">', $txt[275], '</option>
<option value="Teal" style="color:teal">', $txt[265], '</option>

for the pop-up tags (IMG and URL):
In your post.template.php file (usually in the default theme directory) find this code:

Code Select Expand

// Print a drop down list for all the colors we allow!

add this before:

Code Select Expand

    // Java script to handle IMG input boxes ...
    echo '<script language="JavaScript" type="text/javascript">
          <!--
          function imgINPT(){
          // Enter IMG .........................................
          var imgLINK = prompt("Please enter IMG address:","http://");
          if (imgLINK == null ){ //cancel pressed . . .
          }
          else if (imgLINK == "" || imgLINK == " "){ //ok pressed but with Notext . . .
                  alert("Sorry no text entered!");
          }
          else
          { //ok pressed with text so use IMG and Name!
                    surroundText(\'[img]\'+imgLINK+\'\', \'[/img]\', document.', $context['post_form'], '.', $context['post_box_name'], ');
          }
          }
          // -->
          </script>';
 
    // Java script to handle URL input boxes ...
    echo '<script language="JavaScript" type="text/javascript">
          <!--
          function urlINPT(){
          // Enter URL .........................................
          var urlLINK = prompt("Please enter URL address:","http://");
          if (urlLINK == null ){ //cancel pressed . . .
          }
          else if (urlLINK == "" || urlLINK == " "){ //ok pressed but with Notext . . .
                  alert("Sorry no text entered!");
          }
          else
          { //ok pressed and there is something :)
          // Enter Description ...................................
          var urlNAME = prompt("Please enter URL name:","");
          if (urlNAME == null ){ //cancel pressed . . .
          }
          else if (urlNAME == "" || urlNAME == " "){  //ok pressed but with notext so use URL only!
                    surroundText(\'[url]\'+urlLINK+\'\', \'[/url]\', document.', $context['post_form'], '.', $context['post_box_name'], ');
          }
          else //ok pressed with text so use URL and Name!
                    surroundText(\'[url=\'+urlLINK+\']\'+urlNAME+\'\', \'[/url]\', document.', $context['post_form'], '.', $context['post_box_name'], ');
          }
          }
          // -->
          </script>';

then find this code:

Code Select Expand

// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;

// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection ;).
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';

// Okay... we have the link. Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
}

echo '
</td>
</tr>';
}

and replace it with this:

Code Select Expand

// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{
  if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;

// only replace the IMG tag! . . . . . . . . . . .
      if ($tag['code'] == 'img')
   {
global $tag;
echo '<a href="javascript:void(0);" onclick="imgINPT(); return false;"><img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="Insert Image" title="Insert Image" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// only replace the URL tag! . . . . . . . . . . .
      elseif ($tag['code'] == 'url')
   {
global $tag;
echo '<a href="javascript:void(0);" onclick="urlINPT(); return false;"><img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
else{
// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection ;).
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';

// Okay... we have the link.  Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
}

echo '
</td>
</tr>';
}

When this is done, any new posts that are made, when the IMG or URL BBC tag is selected will pop-up a box.  For the IMG tag it is simply to put the url of the image, for the URL tag it will first ask for the link, then the text you want to display (if any) for the link.

Now for the font styles and sizes:
once again in the post.template.php file (again, in your default theme directory) find this code:

Code Select Expand

<option value="LimeGreen">', $txt[275], '</option>
</select>';
echo '<br />';

and this code after it:

Code Select Expand

  // Begin Print a drop down list for font face . . . . . . .
    echo ' <select onchange="surroundText(\'[font=\'+this.options[this.selectedIndex].value+\']\', \'[/font]\', document.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0;" style="margin-bottom: 1ex;">
            <option value="" selected="selected">Font Face</option>
            <option value="Arial" style="font-family:arial">Arial</option>
            <option value="Arial Black" style="font-family:arial black">Arial Black</option>
            <option value="Comic Sans MS" style="font-family:comic sans ms">Comic Sans MS</option>
            <option value="Courier New" style="font-family:courier new">Courier New</option>
            <option value="Georgia" style="font-family:georgia">Georgia</option>
            <option value="Times New Roman" style="font-family:times new roman">Times New Roman</option>
            <option value="Tahoma" style="font-family:tahoma">Tahoma</option>
            <option value="Verdana" style="font-family:verdana">Verdana</option>
    <option value="Trebuchet MS" style="font-family:trebuchet ms">Trebuchet MS</option>
    <option value="Impact" style="font-family:impact">Impact</option>
            </select>';
  // End Print a drop down list for font face . . . . . . . .

  // Begin Print a drop down list for font size . . . . . . .
    echo ' <select onchange="surroundText(\'[size=\'+this.options[this.selectedIndex].value+\']\', \'[/size]\', document.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0;" style="margin-bottom: 1ex;">
            <option value="" selected="selected">Font Size</option>
            <option value="10pt" style="font-size:8px">8pt</option>
            <option value="12pt" style="font-size:10px">10pt</option>
            <option value="14pt" style="font-size:12px">12pt</option>
            <option value="16pt" style="font-size:14px">14pt</option>
            <option value="20pt" style="font-size:18px">18pt</option>
            </select>';
    echo '<br />';
  // End Print a drop down list for font size . . . . . . . .

then do a search for this:

Code Select Expand

array(),
'size' => array('code' => 'size', 'before' => '[size=10pt]', 'after' => '[/size]', 'description' => $txt[532]),
'face' => array('code' => 'font', 'before' => '[font=Verdana]', 'after' => '[/font]', 'description' => $txt[533]),

and remove it.

Now instead of posters trying to guess what fonts are available or the size they want, they can just select it.

EDIT: Changed the code to actually show the font style as well as the name, color shows name as well as color, and font size is name as well as size.

EDIT2: Fixed the image BBC button not have the hover to tell what it is.

[Gobo]

hey thanks techno

do u know of any way so that the "sizes" and "colors" for the font are visible in the drop down list?

Something like this----imagine its the drop down list:

Size 10
Size 15
Size 20
Size 25
Size 30

same with colors only as colors like this:

Black
Blue
Red
Green

do u know how?
Thanks

[TechnoDragon]

Check the original post...i just finished editing the code to do exactly as you requested as well as added 6 other fonts that are web friendly to the list.

[Gobo]

Thanks works really wondefully

[nokonium]

If you have a contrast problem with the font colour in the dropdown you can add a background colour

Code Select Expand

<option value="Black" style="color:black; background-color: #ffffff;">', $txt[262], '</option>

Unfortunately all the above do not work in all browsers

Fire Fox - All work (font colour, font face and font size)
IE6 - Colour only (font face and font size don't work)
Opera 8 - None work

[Vinspire]

Can i see a demo or screenshot of this first before i apply it to my forum ?

[nokonium]

SMF Theme - Dark Blue (1.1RC2)
XP theme - Slate
Browser - FireFox

[TechnoDragon]

SMF Theme - Dragon Wisdom (1.1 RC2)
Browser - Firefox
Font Drop-Down


Font Size Drop-Down

[Vinspire]

Thanks noko & techno

[comatose]

everything works fine, Thanks,
but only problem i see is that when you put your mouse over the IMG icon the Description of that icon does not pop up anymore?
Can this be fixed?

[TechnoDragon]

Fixed that...may not be the best fix, but it works fine...edited my code post.

[comatose]

Thanks a bunch...

Ok i see what you did, you took out the Array and just hard coded it.....now why didn't i think of that....Cause i'm still a bigginer trying to learn this stuff

Thanks again, Nice work.

[TechnoDragon]

LOL...thanks, anytime!

[tthmaz]

Just what I had been looking for! Great post!