Default Icons and transparency

[Deleted member 2163]

I have a question about the default theme and icons and their transparency. Are all the icons around the forum in PNG format?

I ask because although my forums will not have a black background, they will be somewhat dark (you can look here: Candybar Heaven). One problem I've consistently had with vB is the distinct lack of any post icons or emoticons supporting dark backgrounds. They're all GIFs with a light background matte which, as you can imagine, doesn't look that great. Even my current emoticons look terrible, but we've learned to live with it for now.

So I guess my question is-- will the forums support dark themes with the default icons?

Also, what's the deal with the Create Thread page? It looks terribly inconsistent compared to the rest of the forums. Everything is right aligned.. it just feels really odd.

 

[Mike]

Yes, the icons are all PNG with alpha transparency.

Also, what's the deal with the Create Thread page? It looks terribly inconsistent compared to the rest of the forums. Everything is right aligned.. it just feels really odd.

It's center aligned here. Care to make a screenshot?

 

[Deleted member 2163]

For what it's worth I'm using the fixed-width layout.

It just doesn't feel up to the same level as the rest of the site. Maybe I'm crazy.

 

[Shelley]

Forget how vbulletin do things when it comes to constructing GDK and smilies, and I suppose this can extend to other imagery. They have always had a nasty habit of matting images in a specific background colour (white) and when applied to dark backgrounds it leaves a nasty white remnant around the edges.

In short, The imagery here will be in .png format and support dark backgrounds and other background colours which won't have that infamouse white edging or other redundant matting.

Here's a little guide I wrote regarding matting and why you see redundant edging and how to counter it if gif images where used which they won't be with xenforo. You have nothing to worrry about.

Save for Web
​

I find that many people opt for full transparency when applying images/graphics to their forums. This is fine, if that image hasn't got any curved areas or transparent areas. However, Opting for full transparency when dealing with curved images results in that image having a jaggy border showing around it which gives that image a rough taccy and sometime redundant colour around the edges. if you've not used the correct matte colour to compliment the background colour to which the image is being applied onto basically it's going to look ****.

I find that using the matte dropdown menu in photoshop and picking the appropriate colour background that the graphic is being applied onto eliminates the rough graphic which has become more commonplace. Using this method, will result in smoother more higher quality displayed images whithout that redundant edge looking so nasty.

Lets Begin!!

You have your image/graphic completed, and you are ready to save and apply that image to your forum and/or website.

1. In Photoshop. Click File scroll down to Save For Web, Select and click.

​

2. Now that you are in the Save For Web menu. Follow the instructions showed in the screenshot. Bare in mind, that the color you choose for instruction no 2 is the colour of the background that the image is being applied onto (the background colour it's being applied upon). Step 1 is your format selector which would only apply if you choose .gif. (Screenshot Below)

​

An example in using .gif and saving it to a matte colour, rather than saving it as transparent, you'll see the visual difference in quality. Correctly colour matted .gifs will look visually superior than transparent .gifs which results in jaggered edges (around curved edges) and parts of the images being cropped.

​

Finished. You should now have a smoother, visually improved looking image applied onto your forum or website. Bare in mind, this applies to .gifs where .gif would be the preferred format over .png due to the icon containing animations which .png doesn't support though .png does a better job with transparency and I would recommened using .png for static images.

 

[Peggy]

The thread title box is aligned right Mike.

 

[Deleted member 2163]

Well, so are all the other fields. I wasn't sure if it was just a design decision or what have you. It looks odd to me.

In response to Shelley, thanks for the info. I was aware that it was the GIF format being the issue because no matte = no pseudo-antialiasing. But I am relieved to hear that all the icons here will be PNG. Makes me very happy