News:

Wondering if this will always be free?  See why free is better.

Main Menu

Fonts drop down selection & URL in post screen

Started by codenaught, October 09, 2004, 12:37:49 PM

Previous topic - Next topic

codenaught

Am I the only one who thinks that the way the size, font, and url method should to be changed? I think instead of by hitting the size button and have it enter the post screen as [size=10pt][/size] have a drop down menu where you to pick the available sizes on the forum. Same goes with font. When you click the font button it enters [font=Verdana][/font] but wouldn't you want users to know all of the font types available and so he wouldn't have to type the font type themself? So I suggest a drop down thing for that, perhaps how the color thing works. Wouldn't it be annoying if the color thing worked the same way, by hitting a color button it would pop up as [color=Black][/color] and you would have to manually change it. I think the same things goes with the others.

Also I think the URL method should be changed. While you could manually type in [URL=http://www.simplemachines.com]test[/URL] it would be easier if when clicking the URL button for it to ask, 'enter the text to display for the link (optional)' and then it would ask for the URL of the link. 
Dev Consultant
Former SMF Doc Coordinator

andrea

You can achieve all this by themeing: modifying "Post.template.php" and eventually the .js file.

Andrea Hubacher
Ex Lead Support Specialist
www.simplemachines.org

Personal Signature:
Most recent work:
10 Aqua Themes for SMF



[Unknown]

Some people do like this, others don't...

-[Unknown]

codenaught

Well if that is the case, maybe in a future version of SMF you can have an option for admins to set as the default what method they want to have it. And then users could perhaps edit the default method to what they prefer. Also a mod of this would be okay if it won't be placed in as a feature.
Dev Consultant
Former SMF Doc Coordinator

A.M.A

open Post.template.php and look for:
// Print a drop down list for all the colors we allow!
add before it:
// 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 />';

and you have your own font size dropdown list .. the same method can be used for fonts name.
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

codenaught

Thank you very much! :D Now do you know how I could do something for the url thing so when you click on the url button it first asks for a name to the link and then it asks for the url of the link instead of just entering [url][/url]
Dev Consultant
Former SMF Doc Coordinator

A.M.A

1- Font Size & Name drop down list
open Post.template.php and look for:
<option value="LimeGreen">', $txt[275], '</option>
</select>';
echo '<br />';

Delete the last line, and Add belew it:

  // 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:
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:
// Print a drop down list for all the colors we allow!
add above:
    // 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:
// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{

add after:
      // 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
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

codenaught

Dev Consultant
Former SMF Doc Coordinator

codenaught

Okay, but could someone tell me how to do a small change to the url one.

Here is what I want to do. When you highlight code and hit the url button, it asks for the address and then it asks you for the name of the link. How about when you highlight text it will just ask you for the url and it will use the highlighted text as the name of the link.

Any help would be nice.
Dev Consultant
Former SMF Doc Coordinator

damo1065

Works like a dream thanks.

Does anyone know what colours you can add to the drop down colour menu, I know HotPink works - it gives you a nice deep pink colour, what other ones can you add?
Wy not visit my site... The Gaff'll be bored to be honest, unless you're from Cork in Ireland

helenbpd

I'd imagine you can use any of the "named" colors - they may not work for every single browser (only 16 "names" are web-safe), but what the hey:

http://webdesign.about.com/od/colorcharts/l/bl_namedcolors.htm

Ditto for fonts:

http://www.i4image.com/resources_wsfont.shtml


Peter Duggan

Quote from: damo1065 on December 04, 2004, 01:05:50 PM
Does anyone know what colours you can add to the drop down colour menu, I know HotPink works - it gives you a nice deep pink colour, what other ones can you add?

Perhaps I'm a bit late with this response but, since you can specify both option value and option, the answer (with one small reservation explained below) is anything you like because you can specify hex codes for the values and descriptive text for the options. So, for an English language forum, all of these are basically equivalent:

<option value="Red">', $txt[263], '</option>
<option value="Red">Red</option>
<option value="Red">Any name you like</option>
<option value="#ff0000">', $txt[263], '</option>
<option value="#ff0000">Red</option>
<option value="#ff0000">Any name you like</option>


Which means that, so long as you're happy to see 'any name you like' translated into #****** in the text area, your choice of colours for the drop-down amounts to > 16 million!

Peter Duggan

#12
Quote from: akabugeyes on October 09, 2004, 12:37:49 PM
Same goes with font. When you click the font button it enters [font=Verdana][/font] but wouldn't you want users to know all of the font types available and so he wouldn't have to type the font type themself? So I suggest a drop down thing for that, perhaps how the color thing works. 

But remember that the 'font types available' are the fonts installed on the user's computer, so one user's choice (and/or yours as admin) may not display for another user at all.

rojamaia

#13
thanks to everyone for sharing this trick!  it would really make things simpler for my users who are mostly beginners in using boards.

but hey, how do i code it, so that the actual font face and size would appear (as a preview) on the drop-down menu?

Snickers

Can anyone make this compitable with version 1.1 beta 3?

JohnnyVW

Quote from: akabugeyes on November 21, 2004, 10:11:31 AM
Okay, but could someone tell me how to do a small change to the url one.

Here is what I want to do. When you highlight code and hit the url button, it asks for the address and then it asks you for the name of the link. How about when you highlight text it will just ask you for the url and it will use the highlighted text as the name of the link.

Any help would be nice.

I would love to do this too!  I will be doing nightly posts with links; this will make things go so much quicker!

Thanks!

nokonium

I've been playing with this today and it is great, working OK except for one small thing with RC2 (yes it is legit, co-admin is a CM) The javascript for the URL is asking for the URL twice, it doesn't ask for the description on the second box.

And a supplimentary question, is there a way to put a border around the drop down box, like there is with input, text areas or radio buttons? The drop down list has a border but not the 'inactive' box.

In case this is a browser issue I'm using Opera 8.51.




SleePy

#17
After i added the code A.M.A showed us i get these to errors in my error log

8: Undefined index: description
File: /home/***/public_html/forums/Themes/helios/languages/Post.english.php (eval?)
Line: 874

8: Undefined index: code
File: /home/***/public_html/forums/Themes/helios/languages/Post.english.php (eval?)
Line: 871


edit. there is no line 874 or 871 in that file...  :(

edit 2: i was able to get rid of the description one by changing the thing a little
changed
Quoteif ($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>';
To
Quoteif ($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>';
      }

but i can't seem to get the other one to stop.
Jeremy D ~ Site Team / SMF Developer ~ GitHub Profile ~ Join us on IRC @ Libera.chat/#smf ~ Support the SMF Support team!

nokonium

I get it, according to the error log on line 866. As the changes were made in Post.template I had a look there and line 866 is     if ($tag['code'] == 'url')

// 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>';


That may need changing to work without errors.



SleePy

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

// 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>';
}
Jeremy D ~ Site Team / SMF Developer ~ GitHub Profile ~ Join us on IRC @ Libera.chat/#smf ~ Support the SMF Support team!

Advertisement: