Do we have to stick with gifs for buttons?

[duckndive]

I'm customising a forum for a client and the default icons and buttons will have to go. The default setup is that all icons and buttons are gifs, which is somewhat limiting. It is far easier and better aesthetically to create buttons as 32bit pngs, especially when trying to achieve subtle and attractive transparency effects (it does away with all that nonsense of having to change background colours). The problem I'm having is that I can't find the stylesheets or templates from where the buttons are being referred to. For example, if I want to change:

forum/images/buttons/collapse_alt_collapsed.gif
for
../ collapse_alt_collapsed.png

What do I need to amend and where?

I've waded through the graphics manual and it's only concerned with gifs.

Is it do-able or are we stuck with this inferior image format?

[Jose Amaral Rego]

Ask the 'License Holder' to add your email to 'Priority Forums Support', as it is easy to find and change the extention.
http://members.vbulletin.com/membersupport_priority.php

I do hope the Dev's make an extention directory to just easily change between image.EXT...

[shelley_c]

You could always use replacement variables located at the foot of the main css in the admincp for each style.

I did this and replaced most of the gifs because I implemented a two tone gradient which would have resulted in matting issues. Though there is a workaround for this issue even for gifs.

[duckndive]

Ask the 'License Holder' to add your email to 'Priority Forums Support', as it is easy to find and change the extention.
http://members.vbulletin.com/membersupport_priority.php


Thank you Jose for the reply. I have already been added to Priority Forum Support, and I'm still no wiser as to how I might achieve, what I thought would be, a fairly simple task. This is my first exposure to vbulletin so I'm sure I'm missing something. I've tried searching the templates for the graphics names, (so that I could overwrite them) but unless I'm doing something wrong, I can't seem to find where they are being referenced from.
Care to elaborate?

To be honest, I'm a bit surprised that this seemingly simple task seems so unnecessarily complicated.

[duckndive]

You could always use replacement variables located at the foot of the main css in the admincp for each style.

I did this and replaced most of the gifs because I implemented a two tone gradient which would have resulted in matting issues. Though there is a workaround for this issue even for gifs.

Thank you shelly_c. As a complete novice with vbulletin, I'd appreciate it if you could just expand a little on that explanation, I'm afraid I haven't quite got a full grasp of your explanation.

[shelley_c]

In the footer of each of your styles main css you'll see an option to add a replacement variable. What this will allow you to do is insert the path of the orginal gif file and parse it to a format of your choice.

below is a screenshot of what I mean. The original file was a .gif formatted image and I created a .png and replaced it so instead of it using .gif it will now use .png without the need of any template edits.

[Jose Amaral Rego]

Admin CP > Replacement Variable Manager > Replacement Variables > (Select Style) [Add New Replacement Variable]

Admin CP > Styles & Templates > Style Manager > (Select Style) All Style Options > (Scroll to End) [Add New Replacement Variable]

Admin CP > Styles & Templates > Style Manager > Replacement Variables > [Add New Replacement Variable]

Or

Admin CP > Search in Templates > Search Templates > Search in Style > (Select one or All)
Search for Text: collapse_alt
Search Titles Only: No

After you find what is it you are looking for...

Admin CP > Search in Templates > Find and Replace in Templates (be careful!) >
Search for Text: /collapse_alt{$collapseimg_groupid}.gif
Replace with Text: /collapse_alt{$collapseimg_groupid}.png
Test Replacement Only: Yes
Use Regular Expressions: No
Case-Insensitive: Yes/No (you decide)

It will show around very last few pages the results of any changes. It is slow, but at least you know what and with template(s) will be edited.

To find this and other images that are not hard coded, just use the 'Search in Templates'. You might have to use part of the word from the image just to find it, as for some reason it is not a user friendly and quick way to edit this.

For that image, you can see it within this template: pm_messagelist_periodgroup


<a href="#top" onclick="return toggle_collapse('pmf$groupid')"><img class="inlineimg" id="collapseimg_pmf$groupid" src="$stylevar[imgdir_button]/collapse_alt{$collapseimg_groupid}.gif" alt="" border="0" /></a>

[duckndive]

shelley_c and Jose, thank you both for your help, it's really most appreciated. I've also now received a response from vbulletin tech support that mentions changing .htaccess settings to redirect failed searches for gifs to pngs. Crikey! It's all rather more tricky than I imagined.

Can't help but feel that this is something that quite a few people would want to do, given the limitations of gif images, so one can only hope that the next significant upgrade deals with it rather more elegantly than the current palaver.

Again, thank you both.

[Jose Amaral Rego]

Oh.. that is right, I have forgotten about NoMoreGifs from Zachery. Is that what you are using or something newly created.