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]

Originally Posted by jaycob

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

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.

[Legendery.]

Very nice bro.
thanks

[KURTZ]

just upgraded to RC1 but i've got 3 templates out of date ... i love this mod it's possible to have an upgrade?

[Wayne Luke]

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.

[KURTZ]

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

[legionofangels]

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:

http://img.photobucket.com/albums/v3...S-Editor-4.gif

http://img.photobucket.com/albums/v3.../PNGEditor.png

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.

[nerofix]

wow what a long text..

wayne, how about this one: https://vborg.vbsupport.ru/showthread.php?t=174208 ?

Would be nice to have this in .png too

[CrashPush]

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.

[GrendelKhan{TSU]

love em!! simple yet makes a big difference in giving a professional look.

great job.

[Wayne Luke]

Originally Posted by CrashPush

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.