Register Members List Search Today's Posts Mark Forums Read

Mod Options
PNG Editor Buttons Details »
PNG Editor Buttons
Mod Version: 1.00, by Wayne Luke (Administrator) Wayne Luke is offline
Developer Last Online: Jan 2021 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.7.2 Rating: (28 votes - 4.64 average) Installs: 319
Released: 20 Dec 2007 Last Update: 29 Aug 2008 Downloads: 4115
Not Supported Template Edits Re-usable Code Translations  

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.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

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

For support with this template modification, please visit 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.

Download Now

Only licensed members can download files, Click Here for more information.


Click image for larger version

Name:	editor_toolbar.gif
Views:	12395
Size:	8.5 KB
ID:	73486  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
New Editor Buttons vmacedonia Miscellaneous Images 64 19 Dec 2010 17:51
New Posting Features dark_vb_v2 Editor Buttons! bitdefuser Miscellaneous Images 18 05 Oct 2010 04:01
Mini Mods Editor Buttons newliner itsid vBulletin 3.6 Add-ons 31 11 Oct 2009 19:12

Old 12 Mar 2008, 02:52
legionofangels's Avatar
legionofangels legionofangels is offline
Join Date: Mar 2007
Originally Posted by jaycob View Post
wow no more smilie drop down in quick reply, can that be helped please?

love this.
Isn't that the favorite smilies add on? Smilies appear below if you used that add on, of the editor. Or they appear to the right of the editor if you didn't change it. Therefore you'd need to add one for the smilies and edit the templates for it to show.

Originally Posted by Dream View Post
Well done Wayne, good job. Installed.

They are smaller than they look in the screenshot though.
Yes they are, 16 x 16 is how he did all of them, as that is similar to what the color.gif starts at, but it actually starts at 16 x 21 because of that stupid color bar line. So he probably made them to be uniform size.

Also in the past when I changed my editor I noticed that even though I used the same exact sizes that were listed before, something in the template cuts a pixel off on the bottom. So I manually edited the 3 templates to make the height one pixel more or 21 height so that they aren't cut.

Just edit the height width param's in the template if you want them to appear bigger. Not a big deal, just time consuming.

My question to Wayne is this:

You say this only works on an unmodified template, can I edit the template however I want after that, or am I going to do something so that it will not work with an edited template?

The editor starts as a gray color, if I've done other things to my editor in regards to its color or the background will that get reverted back by reverting those templates?


In closing I'm still happy with what you've done and I'm going to play with it a bit tonight to see if it's useful for us or not, but I don't see how it only working on unedited templates is beneficial. That means that all the changes we made and others have will have to all be reapplied again, and that can be a hassle dependent upon how many changes have been made. Instead of just having it overwrite the imagery, or change the code within a template.

Christian discussion, support, & fellowship
Reply With Quote
Old 15 Mar 2008, 20:30
Legendery. Legendery. is offline
Join Date: Jun 2007
Very nice bro.
Reply With Quote
Old 19 Mar 2008, 23:45
KURTZ KURTZ is offline
Join Date: Nov 2006
Real name: Christian
just upgraded to RC1 but i've got 3 templates out of date ... i love this mod it's possible to have an upgrade?

Last edited by KURTZ; 19 Mar 2008 at 23:53.
Reply With Quote
Old 20 Mar 2008, 17:28
Wayne Luke's Avatar
Wayne Luke Wayne Luke is offline
Join Date: Jan 2002
Real name: Wayne
Why is your editor not working? All an out of date template means is that it was edited before the last version. I haven't experienced any problems and it actually changes no functionality. I'll update the template versions with the stable release of 3.7.0

Legionofangels2: you can further modify the template.
Wayne Luke
Get started with your own social network. Purchase and download vBulletin today.
Reply With Quote
Old 20 Mar 2008, 17:50
KURTZ KURTZ is offline
Join Date: Nov 2006
Real name: Christian
Wayne sorry, let me explain better

i've upgraded the board to RC1, obviously after this upgrade it tells me that i've some templates that should be reverted ... so if i revert these templates i've the "original" templates, without your .pngs ... also if i re-merge your "style" onto RC1, again it tells me that i still have some templates that should be reverted ...

i know (i check your .xml) that your hack is made for Beta 2 ... but i don't know what are the changes in these templates between Beta 2 and RC 1 ...
Reply With Quote
Old 26 Mar 2008, 17:43
legionofangels's Avatar
legionofangels legionofangels is offline
Join Date: Mar 2007
Well I got done with my modification from gif to png. I wanted to keep a very similar look of what we originally had, as I liked the design I had in mind. But I also wanted something different. I wanted something bigger. I wanted the icons to look like a browser toolbar, or that big size, as nearly every icon out there is that size...browser, desktop, etc. Not only that but with computers and tv's going more and more towards widescreen, we got these large screens and these tiny buttons, lol. I suppose screen resolution can modify your view but still I wanted to make the buttons a bit larger so they are more visible.

I have a 1024 x 782, but I cannot view it at this time, I also have a 1280 x 800 laptop and they look pretty good on that. I also didn't really care too much, I wanted big buttons, and I got them. I probably should have used the add on as that might have saved time, but I would have had to change the sizes in the templates anyway, so I did it manually. I downloaded to look at your copy, cut, paste being enabled and I don't see any different code in your xml file than from my template in either FF or IE browser viewing. So I'm either missing the code change you did, or it has to be allowed via the rules in your link on both FF and IE. I tried to do it, and I'm obviously doing something wrong since it didn't work. I couldn't find the JS file and read that it means that I need to make one, but I can't imagine the necessity for a JS file with 4 lines of text on it or so. I might ask for more thorough explanation on how to do it, but it's not that critical.

My previous question was pure confusion on the graphics as all you're really doing is changing .gif to .png and adjusting the size. I should have known that. I'll also recant on my previous statements of png, after research I've found that png's are actually smaller in file size due to compression and not only that but they will cache, while gif images don't seem to cache on my pc or browsers; which is strange and stupid.

You definitely have succeeded in what you were trying to do Wayne, as you will make it easier to do one set of graphics rather than multiple for multiple skins with matting. That is exactly the route I took when I did my gif set, I wanted them to work on all the styles, but I also had to recolor the B U I and justifications which I did again for this png set. So really my philosophy was the same but I had to png some of my images or remake them, or find them again. The majority of the images required modification or I had to make them from scratch which was hard work overall. I ended up keeping the separator.gif, as its so small and it isn't going to make a difference for that to be png that I'm aware of. I also recolored them and isolated them into each styles editor folder. I left the menupops alone, as I think they are fine, and I left the increase size and decrease size and just changed the height so that the bg border that is behind the images, which is either vb standard, or because we have so many layers of transparency on top of transparency; matches up with the switcheditormodes border. They still look like arrows so who cares.

In closing I made the color bar 0 and 0 for it's dimensions so that I could see my full size color image. It's funny because on IE it shows a lil tiny black dot, which is either 1 x 1 or nothing at all. It's like a spec, and if you change colors you'll see the change if you look closely at the dot. While the dot does not appear at all in Firefox.

Here is a before and after of our editors, gif, and then png with a few added bb codes:

Lastly I added the other BB Codes because I seen I had space. I wanted the editor to align perfectly, but I realize I cannot do that as the smilies are what is changing the size of the editor. I might use the code that Princeton made for the smilies below the editor, then maybe adjust the stylevar for the width of the editor to get my perfect alignment, if anyone can tell me if that is doable and will work, that would be great.

I would release the images, but I can't, I have absolutely no idea where I found them all over 10+ different sites, of the images that I didn't make. It breaks TOS or the Rules here to release stuff that isn't mine, and most images out there are not to be redistributed anyway. But I can release the templates if anyone wants copies of them, as I have them all upsized and loaded for all of my 3 editor templates.

This was fun...for about 5 minutes, lolz. Thanks Wayne for kind of leading me in the right direction with your add on on how to make them look better on all styles. Last night I thought they were totally sick. Today I woke up not liking them, but either way I'm kind of like...meh, they're alright.

Thanks again,

Legion of Angels

P.S. it's still 99% done there is one thing I still want to do to it, but I need a coder for that.

P.S. 2 - I don't have many IE 6 users, only one I know of, so I might put that add on you linked to on the site, but I dunno.

P.S. 3 - I have no idea and cannot remember what that star was for in the original gif editor. I thought it was favorite smilies, but I see a smilie icon there for that, so I'm completely confused as to what its' for.

Christian discussion, support, & fellowship

Last edited by legionofangels; 26 Mar 2008 at 17:51.
Reply With Quote
Old 28 Mar 2008, 13:47
nerofix nerofix is offline
Join Date: Mar 2006
wow what a long text..

wayne, how about this one: ?

Would be nice to have this in .png too
Reply With Quote
Old 28 Mar 2008, 14:14
CrashPush's Avatar
CrashPush CrashPush is offline
Join Date: Feb 2007
Real name: Harry
I absolutely love this modification.There's only one problem with it. It's works terrible with Internet Explorer 6 (not talking about the transparencies but overall functionality). It's okay because hardly anyone uses it anymore except me at work where they do not want to upgrade to IE7 or any version of FF.

Score: 98 of 100.

Great job! Keep 'em coming.
Reply With Quote
Old 28 Mar 2008, 14:56
GrendelKhan{TSU's Avatar
GrendelKhan{TSU GrendelKhan{TSU is offline
Join Date: Jun 2005
love em!! simple yet makes a big difference in giving a professional look.

great job.
Unreal Addicts: The Ultimate UT Fraggin Fix
Unreal Tournament Sniper Clan and UT Gaming Community.
Serving frags and fun to the UT Community Since 1999
Reply With Quote
Old 28 Mar 2008, 17:56
Wayne Luke's Avatar
Wayne Luke Wayne Luke is offline
Join Date: Jan 2002
Real name: Wayne
Originally Posted by CrashPush View Post
There's only one problem with it. It's works terrible with Internet Explorer 6 (not talking about the transparencies but overall functionality). It's okay because hardly anyone uses it anymore except me at work where they do not want to upgrade to IE7 or any version of FF.
Can you provide an example of what it looks like in IE6? I actually don't have that browser accessible to me anymore as all my computers are on IE7 and IE8 and no one at my website uses IE6.
Wayne Luke
Get started with your own social network. Purchase and download vBulletin today.
Reply With Quote
Old 29 Mar 2008, 16:27
Blackhat's Avatar
Blackhat Blackhat is offline
Join Date: Mar 2005
Great stuff
running vBulletin 4.0.6

Last edited by Blackhat; 29 Mar 2008 at 16:32.
Reply With Quote
Old 29 Mar 2008, 21:58
nightbloom's Avatar
nightbloom nightbloom is offline
Join Date: Mar 2008
My editor is broken now also with the upgrade to beta 3.

I cant even figure out how to revert it back to it's original. ^^
Attached Images
File Type: jpg broken.jpg (44.8 KB, 59 views)
Reply With Quote
Old 30 Mar 2008, 01:25
nightbloom's Avatar
nightbloom nightbloom is offline
Join Date: Mar 2008
*sigh* The fault is in the skin, not the hack. My apologies.
Reply With Quote
Old 31 Mar 2008, 04:41
Gosef Gosef is offline
Join Date: Mar 2008
Very nice
Reply With Quote
Old 01 Apr 2008, 23:05
legionofangels's Avatar
legionofangels legionofangels is offline
Join Date: Mar 2007

Wishlist Request - allow for PNG reputation icons so we can keep the icons of similar type on the board.

I tried changing Functions_Reputation in the php code, and uploading PNG images, but that didn't work. Must be something else, ajax or a JS file that controls the images. Or maybe I needed to run a maintenance task to fix the display.

Anyways, wishlist.

Christian discussion, support, & fellowship
Reply With Quote

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

New To Site? Need Help?

All times are GMT. The time now is 10:58.

Layout Options | Width: Wide Color: