Fonts drop down selection & URL in post screen

[Gobo]

all the colors u specified dont work

plus some of them are given wrong in FF like Red shows Block and Green shows Orange etc etc

[TechnoDragon]

LOL...I forgot that I had changed some of the text in the language files...that is the reason the colors dont match up!
In post.english.php find:

Code Select Expand

$txt['change_color'] = 'Change Color';
$txt[262] = 'Black';
$txt[263] = 'Red';
$txt[264] = 'Yellow';
$txt[265] = 'Pink';
$txt[266] = 'Green';
$txt[267] = 'Orange';
$txt[268] = 'Purple';
$txt[269] = 'Blue';
$txt[270] = 'Beige';
$txt[271] = 'Brown';
$txt[272] = 'Teal';
$txt[273] = 'Navy';
$txt[274] = 'Maroon';
$txt[275] = 'Lime Green';
and replace with this:

Code Select Expand

$txt['change_color'] = 'Change Color';
$txt[262] = 'Black';
$txt[12345] = 'Aqua';
$txt[263] = 'Silver';
$txt[264] = 'Gray';
$txt[265] = 'Teal';
$txt[266] = 'Maroon';
$txt[267] = 'Red';
$txt[268] = 'Purple';
$txt[269] = 'Fuchsia';
$txt[270] = 'Green';
$txt[271] = 'Lime';
$txt[272] = 'Olive';
$txt[273] = 'Yellow';
$txt[274] = 'Navy';
$txt[275] = 'Blue';

[Gobo]

LOL...I forgot that I had changed some of the text in the language files...that is the reason the colors dont match up!

sounds more like hanky panky to me loool

just kiddin - thanks

[TechnoDragon]

ROFL

You're very welcome...I forget sometimes that I edit files to fit my needs and then don't write it down...part of the reason I have been unable to upgrade to RC3 yet

[tones_ie]

Thanks fo rthe fix....

[TechnoDragon]

always a pleasure!

[comatose]

as long as the post.template.php in your default is used by all of your other themes...then it will be the right one.

Here is the modified one...make sure to back up your old one just in case!

This makes the IMG, URL, FTP, and EMAIL tags pop-up when they are clicked...also adds the drop-down list for color, font, and size.

EDIT: oops, can't attach anything to these posts...I'll leave the zip file for you to download on my server for a few days to give you a chance to download it!
Post.Template.php

Is your Post.template.php file still good to use for version 1.1.2  ?

[ekfaysal]

HI
my theme doesnt use post.index.php
im using smf 1..13
can u please tell me how to and where to do it?
thanks

[tones_ie]

HI
my theme doesnt use post.index.php
im using smf 1..13
can u please tell me how to and where to do it?
thanks

Hi...   watever file URE custom theme dose not have it goes and uses the one that is in the themes\default folder.....  so in essance it sues "some" files from URE custom folder and others (ones it dosent have) from the default folder....  make sense ?

[ekfaysal]

yea
thanks

[krystal]

Hi!

I've just recently upgraded my forum to 1.1.3 (default theme) and have a similar request.

I want to keep the current url button on the post form but also want to add a new one with the javascript pop-up function right beside it.

I worked out how to add an image for the extra button (which I've called [url2]) by adding this line of code to the array under the regular url button and uploading a new image:

Code Select Expand

'url2' => array('code' => 'url2', 'before' => '[url]', 'after' => '[/url]',  'description' => $txt[2571]),

But I can't work out exactly where to place the relevant code which is needed to turn this into a javascript button.

I also think it needs to be slightly different to the code given by TechnoDragon because I'm not replacing the original url button in this instance, just adding an extra one.

I'm quite happy to leave all the other BB buttons as they are, so it's only the url code that I would like to alter.

Any help would be greatly appreciated as I've been messing about with this for days and getting nowhere.

[eminent]

how about if i want a font size drop down on the left hand corder of the site, for people to change the font size of the forum..  IE is making the fonts look huge! while the font by default looks great in Firefox, this can allow IE to have a normal view they desire..  anyone know how to do this?

[Harro]

IE shouldn't make fonts look huge when they are looking fine in Firefox....
What theme are you using?

On a side note, I believe that there are a few themes that have a feature to increase the font size of the entire site.

[aglioeolio]

Nice tips

IMG and URL tags are more BBC-newbie-user friendly now

[Chopper]

1- Font Size & Name drop down list
open Post.template.php and look for:

Code Select Expand

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

Delete the last line, and Add belew 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">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Tahoma">Tahoma</option>
            <option value="Verdana">Verdana</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">10pt</option>
            <option value="14pt">14pt</option>
            <option value="18pt">18pt</option>
            </select>';
    echo '<br />';
  // End Print a drop down list for font size . . . . . . . .


Note:
* you can modify the red text: <option value="10pt">10pt</option> to your own needs.
* to remove the default tag buttons, look for and delete:

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]),


2- URL input boxes
look for:

Code Select Expand

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

Code Select Expand

    // 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>';
look for:

Code Select Expand

// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{

add after:

Code Select Expand

      // only replace the URL tag! . . . . . . . . . . .
      if ($tag['code'] == 'url')
          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


Hi,

I have been through the Post.php and i cant find the line your referring to? Does anyone know what line it is?

[metallica48423]

Is this issue solved or do you still require assistance?

I think this was put in 2.0 by default, IIRC -- it is here and on my board without modification

[Hoochie Coochie Man]

Thank you A.M.A, it works great!

[58tbird]

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.

This looks great!  I don't know what RC2 is (I assume it's a theme).  Will this code work for 1.1.4 default core theme?

Also, is there a way to add code for bulleted (or ordered) lists?

[SleePy]

RC2 was a release candidate for SMF 1.1 (you most likely will see RC2 used again for SMF 2.0)

There was not to many changes between RC2 and 1.1.4 on the theme side of things. You should be fine to use the same code.

[auditorbob]

Thanks SleePy