The Arcive of Official vBulletin Modifications Site.

PNG Editor Buttons · **Released**: 12-19-2007

As another step forward in usability, here is another simple template edit that uses the FAMFAMFAM Silk Icons for your editor buttons. These icons are in PNG format with alpha transparency so should look good on any background except pure black. Black doesn't work since most of the icons contain a lot of black.

If you have a lot of Internet Explorer 6 users, then you will need to install the following addon as well:
PNG Transparency for Internet Explorer - This will enable Internet Explorer 5.5 and 6.0 to utilize PNG Transparency through DirectX filters. This is not needed for Internet Explorer 7 or higher.

Features

PNG icons for Standard and WYSIWYG Editors
Cut, Copy and Paste enabled in Editor
Extra icons included for additional common BBCodes including superscript, subscript, audio, video, and horizontal rules.

Installation

Upload all images to yourforumpath/images/editor
Merge the style.xml file into each style you want to apply the changes to. This will only work on styles with unedited editor templates. If your editor templates are modified then you will need to revert them to apply this change. To do this follow the steps below.

Merging Styles

Go to Styles & Templates -> Download / UploadStyles.
In the Upload form, browse to the editor_png.xml file
For the Merge Into Style choose the style that these changes should be applied on.
Tell the system to ignore the version number (just in case).
Click Import.
Repeat for each additional style.

The FAMFAMFAM Silk icons are licensed under a Creative Commons Attribution 2.5 License.
Note:
If you install this template modification after upgrading to 3.7.0 RC4 or later, you will need to manually add the security token notification to the three templates. This line of code needs to be added:

Code:

<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />

If this is installed before you upgrade to RC4 then vBulletin will automatically add these lines during the upgrade process.

Update:
Updated to 3.7.3 with all code changes between Beta 2 and 3.7.3 applied.

Support:
For support with this template modification, please visit www.rabidbadger.net and post your issues in the Project Tools tracker. Registration is required. All registrations are moderated. To get access as soon as possible, use the same username that you use on this site.

Stubbed · #**102** 05-19-2008, 08:04 AM

kursed: No idea there.. It doesn't look like that on my install on IE7, it must be something local to you.

GrendelKhan{TSU · #**103** 05-19-2008, 06:24 PM

hmm... seems to be a conflict with Princetons' smilies below edit hack.
ie: png editor button disappear when using it.

at least for me

https://vborg.vbsupport.ru/showthread.php?t=178327

ideas?

D.Baker · #**104** 05-21-2008, 12:58 PM

Hey dannykilla,
I get that same problem with the 3 template files out of date. Wayne might be able to clear it up, if I do the edit>save trick to stop them from showing out of date, does that actually mean the template files are out of date, or does it just turn off the warning (basiclly like putting take over the warning light)?

Thanks, love this plugin.
P.S: Does any one use this in conjunction with AME? I just started am worried about a conflict (I can't seem to find my AME CP).

dannykilla · #**105** 05-21-2008, 02:37 PM

Hey D.Baker,

Couldnt tell you m8, when I compared the 3 templates I couldnt see anthing that was added so not sure, I have just left them as it is, as I havent noticed any problems

Hope hat helps

@Kursed
I use Firefox and I get the same problem and dont use Princetons Smiley at the bottom hack?
Any help on this problem?

Nindia · #**106** 05-21-2008, 11:22 PM

gorgeous!

installed!

Dragon Company · #**107** 05-24-2008, 03:01 PM

Very nice

trackpads · #**108** 05-24-2008, 06:34 PM

Quote:

Originally Posted by BarcaMaroc

showthread_quickreply

PHP Code:


			
<if condition="$show['editor_toolbar']">

<div id="{$editorid}_controls" class="controlbar">

    $vBeditTemplate[clientscript]



<div id="$editorid" class="vBulletin_editor">



    <table cellpadding="0" cellspacing="0" border="0">

    <tr>

        <td id="{$editorid}_controls0" class="controlbar">



            <table cellpadding="0" cellspacing="0" border="0">

            <tr>

                <td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><img src="$stylevar[imgdir_editor]/removeformat.png" alt="$vbphrase[remove_text_formatting]" /></div></td>

            <if condition="$show['font_bbcode'] OR $show['size_bbcode']">

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

            </if>

            <if condition="$show['font_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">

                    <table cellpadding="0" cellspacing="0" border="0">

                    <tr>

                        <td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px">&nbsp;</div></td>

                        <td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.png" alt="" /></td>

                    </tr>

                    </table>                

                </div></td>

            </if>

            <if condition="$show['size_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_popup_fontsize" title="$vbphrase[sizes]">

                    <table cellpadding="0" cellspacing="0" border="0">

                    <tr>

                        <td class="popup_feedback"><div id="{$editorid}_size_out" style="width:25px">&nbsp;</div></td>

                        <td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.png" alt="" /></td>

                    </tr>

                    </table>

                </div></td>

            </if>

            <if condition="$show['color_bbcode']">

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

                <td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">

                    <table cellpadding="0" cellspacing="0" border="0">

                    <tr>

                        <td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.png" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>

                        <td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.png" alt="" /></td>

                    </tr>

                    </table>

                </div></td>

            </if>

            <if condition="$show['wysiwygsmilies']">

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

                <td><div class="imagebutton" id="{$editorid}_popup_smilie" title="$vbphrase[smilies]">

                    <table cellpadding="0" cellspacing="0" border="0">

                    <tr>

                        <td><img src="$stylevar[imgdir_editor]/smilie.png" alt="" /></td>

                        <td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.png" alt="" /></td>

                    </tr>

                    </table>

                </div></td>

            </if>

            <if condition="$show['attach']">

                <td><div class="imagebutton" id="{$editorid}_popup_attach" title="$vbphrase[attachments]">

                    <table cellpadding="0" cellspacing="0" border="0">

                    <tr>

                        <td><img src="$stylevar[imgdir_editor]/attach.png" alt="" /></td>

                        <td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.png" alt="" /></td>

                    </tr>

                    </table>

                </div></td>

            </if>

                <!--

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_cut"><img src="$stylevar[imgdir_editor]/cut.png" alt="$vbphrase[cut]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_copy"><img src="$stylevar[imgdir_editor]/copy.png" alt="$vbphrase[copy]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_paste"><img src="$stylevar[imgdir_editor]/paste.png" alt="$vbphrase[paste]" /></div></td>

                -->

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_undo"><img src="$stylevar[imgdir_editor]/undo.png" alt="$vbphrase[undo]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_redo"><img src="$stylevar[imgdir_editor]/redo.png" alt="$vbphrase[redo]" /></div></td>

            <td width="100%">&nbsp;</td>

            <if condition="is_browser('ie') AND !is_browser('mac')">

                <td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="$stylevar[imgdir_editor]/spelling.png" alt="$vbphrase[check_spelling]" /></div></td>

            </if>

                <td>

                    <div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><img src="$stylevar[imgdir_editor]/resize_0.png" alt="$vbphrase[decrease_size]" /></div>

                    <div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><img src="$stylevar[imgdir_editor]/resize_1.png" alt="$vbphrase[increase_size]" /></div>                </td>

            

                <td><div class="imagebutton" id="{$editorid}_cmd_switchmode">

                  <div align="right"><img src="$stylevar[imgdir_editor]/switchmode.png" alt="$vbphrase[switch_editor_mode]" /></div>

                </div></td>

            

            </tr>

            </table>

            <table cellpadding="0" cellspacing="0" border="0">

            <tr>

            <if condition="$show['basic_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="$stylevar[imgdir_editor]/bold.png" alt="$vbphrase[bold]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="$stylevar[imgdir_editor]/italic.png" alt="$vbphrase[italic]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="$stylevar[imgdir_editor]/underline.png" alt="$vbphrase[underline]" /></div></td>

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

            </if>

            <if condition="$show['align_bbcode']">

                <if condition="$stylevar['textdirection'] == 'ltr'">

                <td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.png" alt="$vbphrase[align_left]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.png" alt="$vbphrase[align_center]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.png" alt="$vbphrase[align_right]" /></div></td>

                <else />

                <td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.png" alt="$vbphrase[align_right]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.png" alt="$vbphrase[align_center]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.png" alt="$vbphrase[align_left]" /></div></td>

                </if>

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

            </if>

            <if condition="$show['list_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_insertorderedlist"><img src="$stylevar[imgdir_editor]/insertorderedlist.png" alt="$vbphrase[ordered_list]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_insertunorderedlist"><img src="$stylevar[imgdir_editor]/insertunorderedlist.png" alt="$vbphrase[unordered_list]" /></div></td>

            </if>

            <if condition="$show['align_bbcode'] OR $show['list_bbcode']">

                <if condition="$stylevar['textdirection'] == 'ltr'">

                <td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/outdent.png" alt="$vbphrase[decrease_indent]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/indent.png" alt="$vbphrase[increase_indent]" /></div></td>

                <else />

                <td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/indent.png" alt="$vbphrase[decrease_indent]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/outdent.png" alt="$vbphrase[increase_indent]" /></div></td>

                </if>

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

            </if>

            <if condition="$show['url_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="$stylevar[imgdir_editor]/createlink.png" alt="$vbphrase[insert_link]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_unlink"><img src="$stylevar[imgdir_editor]/unlink.png" alt="$vbphrase[remove_link]" /></div></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_email"><img src="$stylevar[imgdir_editor]/email.png" alt="$vbphrase[insert_email_link]" /></div></td>

            </if>

            <if condition="$show['img_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.png" alt="$vbphrase[insert_image]" /></div></td>

            </if>

            <if condition="$show['quote_bbcode']">

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

                <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.png" alt="$vbphrase[wrap_quote_tags]" /></div></td>

                <td><img src="$stylevar[imgdir_editor]/separator.png" alt="" /></td>

            </if>

            <if condition="$show['code_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><img src="$stylevar[imgdir_editor]/code.png" alt="$vbphrase[wrap_code_tags]" /></div></td>

            </if>

            <if condition="$show['html_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_html"><img src="$stylevar[imgdir_editor]/html.png" alt="$vbphrase[wrap_html_tags]" /></div></td>

            </if>

            <if condition="$show['php_bbcode']">

                <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="$stylevar[imgdir_editor]/php.png" alt="$vbphrase[wrap_php_tags]" /></div></td>

            </if>

                $vBeditTemplate[extrabuttons]

            </tr>

            </table>        

        

        </td>

    </tr>

    </table>



</div>



</div>

</if>

<div class="controlbar">

    <if condition="$show['qr_require_click']">

    <textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]" disabled="disabled">$vbphrase[click_quick_reply_icon]</textarea>

    <else />

    <textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]"></textarea>

    </if>

</div>



<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />

<input type="hidden" name="styleid" value="$session[styleid]" />



<script type="text/javascript">

<!--

vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie');

var QR_EditorID = '$editorid';

//-->

    </script>

Thanks!

Rocc · #**109** 05-24-2008, 10:33 PM

I installed this and it shows the images just fine but when i tryed to edit a post none of the buttons on the editor work same with quick reply ?

i reverted the templates and yet it still dosen't work this is with 3.7.0 with default skin

Silvio · #**110** 05-25-2008, 10:28 PM

Quote:

Originally Posted by GrendelKhan{TSU

hmm... seems to be a conflict with Princetons' smilies below edit hack.
ie: png editor button disappear when using it.

at least for me

https://vborg.vbsupport.ru/showthread.php?t=178327

ideas?

yes happen same thing to me and my templates are updated.

disabling princeton's smilies below hack then this one will work like a charm
enabling princeton's smilies below hack then will perfectly work on quick replies panes but will not with the main full editor

Pls Wayne can you help on this matter?

regards

ciao

peterpigman · #**111** 05-27-2008, 03:30 PM

I have the Show Smilies in Quickreply added which stops working when you add this also.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06608 seconds Memory Usage 2,506KB Queries Executed 25 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_code (1)bbcode_php (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!