New Posting Features - PNG Editor Buttons

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

1. Upload all images to yourforumpath/images/editor
2. 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

1. Go to Styles & Templates -> Download / UploadStyles.
2. In the Upload form, browse to the editor_png.xml file
3. For the Merge Into Style choose the style that these changes should be applied on.
4. Tell the system to ignore the version number (just in case).
5. Click Import.
6. 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:

<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.

[legionofangels]

Hello,

Quick question Wayne.

You state via link a way to get the Cut/Copy/Paste to work with Firefox. Were you referring to the actual png or gif buttons, or the ability to use those buttons?

Because on my editor that I did a year ago, I only see the Spellcheck gif in IE 7, and not in FF. But I don't see the Cut/Copy/Paste in either browser.

Do those options have to be turned on in the Admin Cp, or how do I get them to show up?

[Wayne Luke]

They have to be uncommented out in the code of the template for them to show.

Firefox doesn't show a spell check button because in FF2 it is implemented inline with the wavy red line underneath misspelled words.

[legionofangels]

Ok a few questions then.

If your code or set up here is allowing for the system or browser to recognize PNG images, don't you have the coding for that of which could be applied to the whole forum? Having a trickle down effect to make all the images work in PNG format.

Have you considered file size of PNG's in regards to your editor? Obviously load time of pages will increase since PNG is a larger file size. I'd imagine it's still unnoticeable on most pc's.

Do you have the code for the edit/copy/paste or do you know what thread it is in, as I'd like to see my images some day. of which we have nearly the same one's, my clipboard is a different color and my scissors point straight up, but they are blue like yours. lol

I did change the color.gif cuz I didn't like the reshaping of that area. I went with a color wheel instead for my own editor.

I must say I'm happy with what you've done though, it's a nice look and PNG is nearly required since everyone changes the chrome if they stylize there own skins or board.

i still want the highlight bb code, where is it? lolz

If I install this, and then replace the images with my own, would that still keep the PNG working as well as make the CCP appear?

[Wayne Luke]

This distribution is three (3) edited templates that specifically changes the GIF images in those templates to PNG images. It has no code outside those three templates and it does not perform a dynamic replacement of anything.

I am not too worried about img sizes honestly. Presentation is more important in my book and since my community is a closed niche, I can guarantee that everyone has broadband of some sort. Besides images would be cached and the browser can load them from the cache on subsequent loads.

I don't use a Highlight BBCode so have not incorporated one. The templates have full functionality for custom BBCodes though so just create one.

As this is a template edit, it would still load the PNG images unless you edit the HTML to revert it to GIF format images. The main purpose is to provide a toolbar that works in multiple colors and styles without having to matte the images every time you make a style. That is the only thing that I worked to achieve here.

[KURTZ]

Wayne, just wondering ... i've just updated @ Beta 5, and when i finished the upgrade the SW tells me that i've a template "out of date", the template is: postbit_quickedit, so the Q is: can i revert the template easily without any troubles? or after that i must reinstall your mod?

TIA

PS. with the Beta 3 and 4 i haven't this trouble, all runs correctly without any warning ...

[cassis2k]

Great thx ^^

[KURTZ]

OK i've just reverted all the templates and re-merged the styles with Wayne's editor ... now i've this (see the attachment)

edit: i checked the new template and i saw that there are some new lines ... so we need an update from Wayne i think ...

[Maxime-TPC]

Installer, C'est tr?s joli ! Bravo encore

[ShawneyJ]

wow no more smilie drop down in quick reply, can that be helped please?

love this.

[Dream]

Well done Wayne, good job. Installed.

They are smaller than they look in the screenshot though.