News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Adding "font" "size" and "colour" to BBCode Bar For Signature

Started by kerrang!, May 13, 2007, 02:03:28 PM

Previous topic - Next topic

kerrang!

Does anyone happen to know how to add these three options?

It would help to brighten up my members signatures, it does support colour although many would like to do this but are unsure about how to and it's very tiring referring them to a post which shows and tells them how or pm'in everyone. (not that I have a major problem but takes areas away which I could do)

I'd very much appreciate it, although waiting for the modder to add these wouldn't be problem. Just thought I'd ask =)

~Kerrang!
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Kays

Neat idea, but I don't know if I'd use font size on my forums. I'm trying to keep the sigs down in size.

Here''s something which will add those three options and as a bonus I've added buttons for the IMG tag (another annoying question) and the quote tag (which seems to be the rage lately).

In the default theme and any which have a Profile.template.php file open it and above

// Show the signature box.

Add:

echo '
<tr>
<td colspan="2"><hr size="1" width="100%" class="hrcolor" /></td>
</tr>';


Now a bit below that, find:

echo '
</td>
<td>
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">', $context['member']['signature'], '</textarea><br />';

// If there is a limit at all!


And replace it with:


echo '
</td>
<td>';

// Begin signature drop down mod.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function bbc_highlight(something, mode)
{
something.style.backgroundImage = "url(" + smf_images_url + (mode ? "/bbc/bbc_hoverbg.gif)" : "/bbc/bbc_bg.gif)");
}
// ]]></script>';

$context['bbc_tags'][] = array(
'img' => array('code' => 'img', 'before' => '[img]', 'after' => '[/img]', 'description' => $txt[435]),
'quote' => array('code' => 'quote', 'before' => '[quote]', 'after' => '[/quote]', 'description' => $txt[260]),
);

foreach ($context['bbc_tags'][0] as $image => $tag)
{
echo '
<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.creator.signature); 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'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}

echo ' <select onchange="surroundText(\'[font=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/font]\', document.forms.creator.signature); this.selectedIndex = 0; document.forms.creator.signature.focus(document.forms.creator.signature.caretPos);" style="margin-bottom: 1ex;">
<option value="" selected="selected">Font Face</option>
<option value="courier">Courier</option>
<option value="arial">Arial</option>
<option value="arial black">Arial Black</option>
<option value="impact">Impact</option>
<option value="times new roman">Times New Roman</option>
<option value="georgia">Georgia</option>
<option value="andale mono">Andale Nono</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="comic ms">Comic MS</option>
</select>&nbsp;';


echo ' <select onchange="surroundText(\'[size=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/size]\', document.forms.creator.signature); this.selectedIndex = 0; document.forms.creator.signature.focus(document.forms.creator.signature.caretPos);" style="margin-bottom: 1ex;">
<option value="" selected="selected">Font Size</option>
<option value="1">8pt</option>
<option value="2">10pt</option>
<option value="3">12pt</option>
<option value="4">14pt</option>
<option value="5">18pt</option>
<option value="6">24pt</option>
<option value="7">36pt</option>
</select>&nbsp;';


if (!isset($context['disabled_tags']['color']))
echo ' <select onchange="surroundText(\'[color=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/color]\', document.forms.creator.signature); this.selectedIndex = 0; document.forms.creator.signature.focus(document.forms.creator.signature.caretPos);" style="margin-bottom: 1ex;">
<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>
</select>';

// End signature drop down mod.

echo '
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);">', $context['member']['signature'], '</textarea><br />';

// If there is a limit at all!


Finally, in themes/default/languages/profile.english.php at the bottom, above the ?> add:

$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';
$txt[435] = 'Insert Image';
$txt[260] = 'Insert Quote';
$txt['font_face'] = 'Font Face';
$txt['font_size'] = 'Font Size';

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

After adding all the codes above, it created 2 signature input boxes.  After commenting one line and adding single and semi-colon at the end of <td> tag, it looks fine and it seems to be working.

if ($context['show_spellchecking'])
echo '
<input type="button" value="', $txt['spell_check'], '" onclick="spellCheck(\'creator\', \'signature\');" />';

echo '
</td>
<td>';
// <textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">', $context['member']['signature'], '</textarea><br />';


However,  the font size appear to be not working. It uses "size=3" instead of "size=12pt".  I am using SNF 1.1.2.

[edit]
Sorry, the font size work. It only uses "size=5" instead of "size=18pt". Thanks Kays. I like it.
[/edit]
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays

Sorry, brain fart. I should of realised that I needed to delete the original textarea.

I've corrected my post to reflect the change. Thanks

The boards accepts the use of either size=3 or size=14pt. Being the lazy sob I am, I did a view source of the post page and that's why it's like that. :)

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

Quote from: Kays on May 14, 2007, 10:26:37 AM
Sorry, brain fart. I should of realised that I needed to delete the original textarea.

I've corrected my post to reflect the change. Thanks

The boards accepts the use of either size=3 or size=14pt. Being the lazy sob I am, I did a view source of the post page and that's why it's like that. :)

hehehe I don't really know what I am doing. I call it luck.  Opera has a built-in xtml validator and complain about double "onkeyup". I don't know it if will still work if I will remove the onkeyup="storeCaret(this);. You are great in php and I like what you did.  I thank you again for the codes.

The size=3 is the same as size=14pt but for me, the "14pt" is more descriptive than the "3" but of course I don't know how to convert the 3 to 14pt. If I can, I will do it. You spent enought time coding already so I won't ask you favor but of course, I will appreciate if you can help. ;)
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

kerrang!

Hey,
Thank you very much Kays  :D It works a treat!

~Kerrang
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Kays

Quote from: kerrang! on May 14, 2007, 01:11:20 PM
Hey,
Thank you very much Kays&nbsp; :D It works a treat!

~Kerrang

Cool, no problem. :)

I think when I get a bit of time I might make this a mod.

QuoteOpera has a built-in xtml validator and complain about double "onkeyup". I don't know it if will still work if I will remove the onkeyup="storeCaret(this);.

I didn't think of validating it. It doesn't seem to make a difference if you remove that. But the best approach is to use:

onkeyup="calcCharLeft();, storeCaret(this);"

QuoteThe size=3 is the same as size=14pt but for me, the "14pt" is more descriptive than the "3" but of course I don't know how to convert the 3 to 14pt. If I can, I will do it.

It's not a big deal to change.

echo ' <select onchange="surroundText(\'[size=\' + this.options[this.selectedIndex].value.toLowerCase() + \'pt]\', \'[/size]\', document.forms.creator.signature); this.selectedIndex = 0; document.forms.creator.signature.focus(document.forms.creator.signature.caretPos);" style="margin-bottom: 1ex;">
<option value="" selected="selected">', $txt['font_size'], '</option>
<option value="8">8pt</option>
<option value="10">10pt</option>
<option value="12">12pt</option>
<option value="14">14pt</option>
<option value="18">18pt</option>
<option value="24">24pt</option>
<option value="36">36pt</option>
</select>&nbsp;';


If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

awww you're sweet Kays.  This onkeyup="calcCharLeft();, storeCaret(this);" works. Opera validator is smiling. It's clean and green.

I also replaced the old code with your new code and guess what.  I added the $txt['font_size'] = 'Change Size'; to default\languages\profile.english.php and the thing works great.  I thank you so much.  It will be nice if you will make this a mod.

One more thing Kays, do you know how to display a message saying "Successful update" after changing profile info?  My members are complaining because when they change their password, they don't even know if it is successfully changed or not. 

BTW, where did you learn php programming?  I like to learn too.  You are good.
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays

Cool :)

QuoteI also replaced the old code with your new code and guess what.&nbsp; I added the $txt['font_size'] = 'Change Size'; to default\languages\profile.english.php

Just realised that I forgot a couple of language strings. I've updated my post.

QuoteOne more thing Kays, do you know how to display a message saying "Successful update" after changing profile info?  My members are complaining because when they change their password, they don't even know if it is successfully changed or not.

Not really, but a wild guess. In Sources/Profiiles.php there's this:
if (!empty($profile_vars))
{
// If we've changed the password, notify any integration that may be listening in.
if (isset($profile_vars['passwd']) && isset($modSettings['integrate_reset_pass']) && function_exists($modSettings['integrate_reset_pass']))
call_user_func($modSettings['integrate_reset_pass'], $user_profile[$memID]['memberName'], $user_profile[$memID]['memberName'], $_POST['passwrd1']);

updateMemberData($memID, $profile_vars);
}


I think you might be able to place a JavaScript alert just before the closing curly bracket.

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
alert("Your profile has been successfully updated");
// ]]></script>
</head>
<body>&laquo;</body>
</html>';


I'll let you mess with that to see if you can make it work. A nicer way would be to create a confirmation page and direct them to that and then back to their profile. And that's a bit beyond me.

where did you learn php programming?  I like to learn too.

I'm self taught and know just enough to be dangerous. Get a good book and/or find a good online reference on PHP, JavaScript and XHTML use that as a reference along with the PHP manual and try to figure out how things work by looking at the code.


If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

Everything is working great. My members are having fun editing  their signatures now using your mod Kays. They like it. It makes their life easier. It's cool.   8)

Quote from: Kays on May 15, 2007, 10:23:37 AM
Cool :)

if (!empty($profile_vars))
{
// If we've changed the password, notify any integration that may be listening in.
if (isset($profile_vars['passwd']) && isset($modSettings['integrate_reset_pass']) && function_exists($modSettings['integrate_reset_pass']))
call_user_func($modSettings['integrate_reset_pass'], $user_profile[$memID]['memberName'], $user_profile[$memID]['memberName'], $_POST['passwrd1']);

updateMemberData($memID, $profile_vars);
}


I think you might be able to place a JavaScript alert just before the closing curly bracket.

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
alert("Your profile has been successfully updated");
// ]]></script>
</head>
<body>&laquo;</body>
</html>';


I'll let you mess with that to see if you can make it work. A nicer way would be to create a confirmation page and direct them to that and then back to their profile. And that's a bit beyond me.

Haha Kays, I am still struggling with php and Javascript is totally strange to me. But I tried your code tho. Your instruction looks like right but I think it didn't work because it does nothing after changing my password.  No error either. Maybe it is not the right place for it.

Quote
I'm self taught and know just enough to be dangerous. Get a good book and/or find a good online reference on PHP, JavaScript and XHTML use that as a reference along with the PHP manual and try to figure out how things work by looking at the code.

awww really. Do you have a good books to suggest for reading? I have a hard time reading articles from the internet. I prefer reading books.

Did I hi-jacked your topic kerrang!? I'm sorry.
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays

Like I said, just a wild guess. I might try to look at that later if I get a chance.

Really can't recommend any good books, maybe someone else could. Look for one which you can easily understand and has a good index.

Btw, I am packaging it as a mod and should have it submitted today maybe.

Thanks for the feedback and for picking up on my mistakes.

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

Quote from: Kays on May 16, 2007, 12:05:07 PM
Like I said, just a wild guess. I might try to look at that later if I get a chance.

Really can't recommend any good books, maybe someone else could. Look for one which you can easily understand and has a good index.

Btw, I am packaging it as a mod and should have it submitted today maybe.

Thanks for the feedback and for picking up on my mistakes.

I understand. I know you're doing a lot of coding so don't rush. 

Maybe I should visit bookstores and look for a good php book. Thanks.

Wow, let me know when the mod is ready. I would like to be the first downloader.

You're welcome anytime. Am I a good beta tester?  :D If you will write/code another tip or mod, I am willing to be one of your tester.  ;) I want to learn php from your codes. I am using SMF 1.1.2 and Babylon template.  I thank you so much for your time.
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays

Sure I'll let you know once I fIgure out how to package it properly. :)

Your last comment made me realise that a mod will only take effect in the default theme.

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

Quote from: Kays on May 16, 2007, 10:51:04 PM
Sure I'll let you know once I fIgure out how to package it properly. :)

Your last comment made me realise that a mod will only take effect in the default theme.

You mean, you haven't packaged any mod before?  Hmmnn

Your mod should work on all theme that uses default/profile.template.php.  :P
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays

Nope, first one. Gotta learn somehow.

Got it submitted, just need to wait for it to be approved.

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

I am hoping for speedy approval of your mod.  Let us know or post the link here when it's ready for downloading. Thanks.
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Kays


If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Bulakbol

I thought I will be the first to downloader. I was the fourth.  :P

Thanks Kays.
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

kerrang!

Kays;

Would it be possible of allowing links to have a different colour inside the signatures? Sorry for not mentioning it before, I wasn't aware that you couldn't already do this but I would appreciate any help with allowing the links to be colour based.

Thanks,
~Kerrang!

P.s Good work on packaging the mod, =)
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Kays

Hi, I can see where that can be a problem. :)

It might be possible to alter the code for the color tag to do that. But then any links in a post in color tags will do the same.

As long as they're underlined, that might not be that bad.

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Advertisement: