PDA

View Full Version : Blue Web 2 buttons for default vB skin


Pottsy
01 Sep 2007, 13:23
I've been looking for some buttons to replace the slightly ugly buttons that come with the default vbulletin skin. I wanted them to be roughly the same size as the originals.

Inspired by demgel's excellent black glossy buttons (http://www.vbulletin.org/forum/showthread.php?t=156297), and using the Silk icons (http://www.famfamfam.com/lab/icons/silk/), I made these for my own site.

The zip file contains a number of sets, with popular mattes. The Photoshop PSD file is also included.

Installation:

Simply upload the files to your forum/images/buttons and forum/images/misc directories. To uninstall, copy the originals back. :)

For standard vb colours, use different sets according to whether you use postbit legacy (when looking at a thread, the users info is on the left of the post) or the new postbit (where the posters info is above the post) and use the appropriate button set.

To use the PSD enclosed:

1. Make your changes.
2. Make sure there is no background selected.
3. Save for web and devices.
4. Select individual slices and set the matte colour (background you are going to have behind the buttons).
5. When you press Save, choose "All user slices".

The font used is Myriad Web Pro (not included in PS, but is included in Lightroom and Lightroom trials, if they still do them). PS will happily replace this font with Myriad Pro, which is very close.

I'm no designer, but I hope they are useful.

They can be seen in action here (http://www.civinfo.com/forum/).

Standard colours:

https://www.vbulletin.org/forum/external/2007/09/42.gifhttps://www.vbulletin.org/forum/external/2007/09/43.gif

Black:

https://www.vbulletin.org/forum/external/2007/09/44.gifhttps://www.vbulletin.org/forum/external/2007/09/45.gif

Red by request:

https://www.vbulletin.org/forum/external/2007/09/46.gifhttps://www.vbulletin.org/forum/external/2007/09/47.gif

Postbit legacy:

https://www.vbulletin.org/forum/external/2007/09/48.gif

Postbit (new):

https://www.vbulletin.org/forum/external/2007/09/49.gif

Versions:

1.0 My first thoughts
1.1 Added some mattes
1.2 More mattes
1.3 Reduced the size of the small round buttons, added a black button set
1.4 Made "postbit legacy" and "postbit new" versions
1.5 Added buttons: thanks, px, reputation, included PSD in main file, small cosmetic changes to the buttons, added black buttons to the PSD.
1.6 Made some changes to the appearance (get rid of the softness at the bottom of some buttons and reduced the inner glow to look better on black), added some buttons and included some requested colours.

Mischievious
01 Sep 2007, 13:39
These are very nice looking buttons, and wanted to try them, but they don't download properly. They doownload as a .efw file instead of a .zip file.

Pottsy
01 Sep 2007, 13:46
Don't know why the download isn't working (works fine here - it's just an attachment on vb.org)... but PM sent anyway.

Mischievious
01 Sep 2007, 13:57
I marked as installed. Do you think I could have the PSD file for them?

Pottsy
01 Sep 2007, 14:13
When it's tidied up I'll put it up here.

Mischievious
01 Sep 2007, 14:46
When it's tidied up I'll put it up here.

Thanks, I appreciate it!

Pottsy
01 Sep 2007, 15:44
I have update the file to include sets with the following mattes:

White
Black
f5f5ff (pale blue standard vb post colour)
000066 (by request - dark blue)
Vb default (mix of pale blue, slightly darker blue and white to suit the default theme)

Mischievious
01 Sep 2007, 17:24
Thanks for taking care of this, but it's strange. I still keep getting that weird .efw extension when I try to download from here.

Triky
01 Sep 2007, 17:58
I like them, but maybe they should be more small.

PapaSmurf
02 Sep 2007, 01:54
Nice work, well done.

Pottsy
02 Sep 2007, 02:39
Thanks for taking care of this, but it's strange. I still keep getting that weird .efw extension when I try to download from here.

That's your CA antivirus making a mess of your ability to download. You can rename the .efw extension to .zip and it should work.

I like them, but maybe they should be more small.

I wanted the main buttons to be the same size and the original ones, since I like them to be obvious. But yes, maybe the round ones need reducing a bit. Back to PS... ;)

Mischievious
02 Sep 2007, 05:46
Strange. CA AntiVirus never acted like this before. Oh, well. Thanks for the headsup on that Pottsy. Do you think you could make a black/dark version of these buttons to match black skins? Oh, I think it also would be better if the big buttons were the size of the buttons on this board. :D

Luky
02 Sep 2007, 10:04
I dont see how these are web 2.0?

Pottsy
02 Sep 2007, 10:50
I like them, but maybe they should be more small.

I reduced the small round ones slightly, and I think you are correct!

Updated the version, and added a black set for good measure.

pisliq
02 Sep 2007, 11:08
perfect thanks :)

Mischievious
02 Sep 2007, 12:53
I would still like the PSD for these. It would be a lot easier to customize them for my board without having to ask you to do so much.

captainslater
02 Sep 2007, 14:30
Yeah would be nice to have it or would you like to translate all buttons to german, Pottsy? :D

Pottsy
02 Sep 2007, 15:05
Yeah would be nice to have it or would you like to translate all buttons to german, Pottsy? :D

Yikes!! :eek:

File now uploaded. Please do not redistribute it - it's for use on your own site only.

Thanks.

captainslater
02 Sep 2007, 15:16
Thank you for sharing and of course I won't redistribute it :)

Ascor
02 Sep 2007, 20:23
Thank you Pottsy :)

Mischievious
03 Sep 2007, 21:26
Would you mind including the PSD file for the black buttons as well? I also have another quetion. Could you give me some tips on how to save the individual buttons? I keep running into issues with the backgrounds.

Pottsy
04 Sep 2007, 00:02
I didn't save the file for the black buttons. Simply double click on the "f" on a button layer, and change the gradient (in gradient overlay) from a blue one to a dark one, by changing the two end colours. Then copy and paste the layer style onto all the other button layers.

To save the images, use "Save for web and devices". To change the matte, firstly select all the button images (slices) with the slice select tool (you need to hold Shift to multi-select) and then change the matte colour. Press save, make sure that at the bottom of the filename box only "User slices" is selected, and hey presto, a pile of lovely gifs.

Alfa1
04 Sep 2007, 14:51
This looks good. But in the vb default scheme matte report.gif infraction.gif ip.gif have a white border around them, while they are placed upon a blue background. Can you please create some with a default blue background?

R M 4 E V E R
04 Sep 2007, 16:27
wow !

very nice buttons

marked as installed :)

Pottsy
04 Sep 2007, 18:39
This looks good. But in the vb default scheme matte report.gif infraction.gif ip.gif have a white border around them, while they are placed upon a blue background. Can you please create some with a default blue background?

I've just checked the file attached to the thread and all looks ok. The gifs are all transparent, but it's the blend that just affects a couple of pixels. In the "white" folder, they all blend to white, but the round buttons including the ones you mention all blend to e1e4f2, and then have a transparent background. Make sure you haven't picked from the "white" folder by mistake!

It should all look exactly as per my screenshot - that shot was taken using the default theme and the graphics from the "vb default" folder in the download.

Alfa1
05 Sep 2007, 14:37
I have used the default scheme matte.
But your postbit is not default as your report button, etc is on the left on a light blue background, instead of on the right top of each post on a dark blue background.

Pottsy
05 Sep 2007, 16:59
I'm sorry - I didn't think of the new postbit!

New version added (1.4) with both postbit (new) and postbit legacy.

Alfa1
05 Sep 2007, 21:12
Thanks! Thats working (and looking) great.

I am missing the following buttons:
reputation.gif
px.gif (This comes from Paul M's Proxy to real IP hack (http://www.vbulletin.org/forum/showthread.php?t=120082) )

Could you please add these?

Mischievious
05 Sep 2007, 21:55
Hey, Pottsy! Check out your buttons that I customized in action! Be sure to look at both skins too!

http://cuestaverdeforums.net/showthread.php?p=122&styleid=8#post122

Pottsy
06 Sep 2007, 14:36
Thanks! Thats working (and looking) great.

I am missing the following buttons:
reputation.gif
px.gif (This comes from Paul M's Proxy to real IP hack (http://www.vbulletin.org/forum/showthread.php?t=120082) )

Could you please add these?

Updated to include buttons for those jobs.

Hey, Pottsy! Check out your buttons that I customized in action! Be sure to look at both skins too!

http://cuestaverdeforums.net/showthread.php?p=122&styleid=8#post122

Cool!

Alfa1
06 Sep 2007, 16:52
I applaud your excellent support!

And yes; Cuesta Verde Forums look very good.

I have a request which is not directly related to the buttons, but which would look awesome if available for use with the Blue web 2.0 buttons: I would love to have tab buttons (http://www.vbulletin.org/forum/showthread.php?t=148933&page=10) which match the Blue web 2.0 buttons.

Pottsy
07 Sep 2007, 17:44
Bit tricky, because I like tabs to be pale.

Something like this?

69541

Alfa1
07 Sep 2007, 18:25
The colours used are new colours, as they are not to be seen anywhere in default vb. I think that if at least some of the colours used would be standard colours, the tabs would look more in place.

Pottsy
07 Sep 2007, 20:44
Quite tricky to do, when you start blending and playing with transparency. Here's another go, but may not be final... ;)

69543

Mischievious
08 Sep 2007, 11:46
Is there a special command I would need to save these individual buttons as PNGs?

Pottsy
08 Sep 2007, 13:32
In Photoshop, Save for web (and devices), and just use the PNG option.

captainslater
09 Sep 2007, 16:14
Attached the german version of the blue buttons for standard background and (dark) blue background.

Other version will follow as I have the time for it.

Alfa1
09 Sep 2007, 18:22
Quite tricky to do, when you start blending and playing with transparency. Here's another go, but may not be final... ;)

69543
Looking better. Can you add another go?

Mischievious
10 Sep 2007, 19:31
Heya, Pottsy. How did you go about resizing the individual buttons? I would like the large text buttons a littler smaller than they are now.

Pottsy
11 Sep 2007, 06:29
To resize, I just started again! You could just use Edit, Transform, Scale though.

These tabs are made from vb colours, and are the ones I have settled on for my forum:

69673

Alfa1
11 Sep 2007, 11:35
Those look excellent Pottsey. Many thanks!

Mischievious
12 Sep 2007, 05:20
To resize, I just started again! You could just use Edit, Transform, Scale though.

Oy.. I'm not good at photoshop with these kinds of graphices. Would it be too much for me to ask you to resize the three big buttons in 105x20, and include them in a seperate PSD file? I would really appreciate it!

Pottsy
12 Sep 2007, 09:22
Would it be too much for me to ask you to resize the three big buttons in 105x20,

Here you go! :)

ninjamaster
12 Sep 2007, 09:45
thanks real like these :)

Alfa1
17 Sep 2007, 00:28
Could you add a 'Add Buddy', a 'Remove Buddy', a 'Ignore', a (find) 'Threads', a (find)'Files', a (find)'Wiki' and a (find) 'Images' button? (last three similar to find posts)

domregchief
30 Sep 2007, 19:35
any equivalent replacements for the forum listings on forum homes. I like the ones you use on your site..

petacat
02 Oct 2007, 13:36
Nice.

For an unsupported product you seem to be doing a great support job!

Can I put in a suggestion that post_groan image would be handy.

Trialling them now to see if they become my choice.

Thanks

valdet
03 Oct 2007, 16:44
A truly awesome set. Very clean and neat.

Thanks so much. Installed and looking great..

KURTZ
04 Oct 2007, 01:51
really good buttons :) but i need a red and a green set also :)

ciprianrpp
08 Oct 2007, 11:55
great. thank you. INSTALLED

Princeton
09 Oct 2007, 20:28
beautiful set .. thanks for sharing :up:

sunrunner_pei
12 Oct 2007, 00:39
Awesome button set! Your work is MUCH appreciated!!!

Triky
19 Oct 2007, 16:24
I like these buttons.
Thank you.

Audentio
20 Oct 2007, 17:56
These are awesome :)

Cedric_FP
28 Oct 2007, 14:23
Beautiful buttons.

kaptanblack
29 Oct 2007, 21:19
Very Good.Thanks.

ujai
02 Nov 2007, 17:23
thanks

Sarthek
04 Nov 2007, 10:22
Great, installed.

One request pls - 2 buttons for Blogs:

Blog - grey
Blog - redorange

Mazinger
09 Nov 2007, 14:11
Very nice!

imranbaig
11 Nov 2007, 08:38
Thanks, appreciate it.

i.s.s.w
11 Nov 2007, 12:11
Nice work, well done.

VADOS
23 Nov 2007, 19:55
Awesome, man, big thx!

TigerWare
28 Nov 2007, 00:17
Pottsy,

These are great, just the kind of polish I was looking for. :up:

HybridIllusions
20 Dec 2007, 07:15
Very nice! Glad to see some talent here :) I love your PSD too, very organized and easy to slice out new ones.

Alfa1
09 Jan 2008, 18:40
Great, installed.

One request pls - 2 buttons for Blogs:
Please add buttons for vb blog.

garala
13 Jan 2008, 20:07
I really don't like the looks of these, but obviously others love em!

choccyclaire
22 Jan 2008, 23:33
Cool thanks. :)

No Skype though?

Jake Riley
07 Feb 2008, 13:34
Very nice, using them now :)

Uqurcan
16 Feb 2008, 08:43
OoOo God Job.

Deimos
24 Feb 2008, 17:38
Anyone know where I can get a hold of the font they use? I need a couple of custom buttons done via the PSD file, but don't have the font?

Pottsy
24 Feb 2008, 22:42
My mistake - I think MyriadWebPro must have come from Lightroom. If you allow PS to substitute it should go for Myriad Pro (which will be fine), or you can look here (http://loutools.com/tools/fontpreview/).

Polo
25 Feb 2008, 05:00
Nice Job!! I love the effect on the images awesome 10/10

Dave Rotella
25 Feb 2008, 21:45
Hi Pottsy!

wonderfull work buttons!:up:

you can create new buttons traslate en Italian for me?!?

i can translate the words for you and you can create the buttons for me please?


sorry for my english, i'm italian :p

Dave Rotella
27 Feb 2008, 11:07
Post Reply = Rispondi

New Thread = Nuova Discussione

Closed = Chiuso

Thanks = Grazie

Quote = Citazione

Reply = Rispondi

Find = Cerca

Send PM = Invia PM

Edit = Modifica

www = www

Forward = Inoltra

Email = Email

Magnum164
01 Mar 2008, 03:03
Nice set.. Was what I was looking for...

Ohiosweetheart
16 Apr 2008, 04:57
It would be great to have the black buttons on a light background, if at all possible?

JadedSouls
11 May 2008, 23:14
I don't suppose it would be possible to have a blue button with white matte created that can be used for a "to the top" button?

Its the only button atm that looks out of place on my site as it's from a different modification I added.

It looks like this:

Doctor Death
12 May 2008, 01:00
Thanks much for this set... they work great with my board.

arcadian_girl
14 May 2008, 10:59
gorgeous buttons, thanks for these :)

vinboy
14 May 2008, 22:09
how do I install this?

Antek
16 May 2008, 19:37
how do I install this?

Log on your FTP account, go to /patch_to_your_forum/images/

and...

check each subfolder there and replace original graphics gif files.

Antek

Alfa1
03 Jun 2008, 05:55
nevermind

ArnyVee
13 Jun 2008, 03:20
These are beautiful and just what I was looking for! :D

Could use a SKYPE button on the blue ones though. Has anyone made one that they'd like to share?

Also, anyone have STATUS ICONS with this style that they could share as well?

ArnyVee
24 Jun 2008, 01:57
So, no one has been able to get that elusive SKYPE button done, huh?

If you have, can you please share? :D

Edited: I just realized that there is, in fact, a Skype button included. (Edit details, you'll see it there)

But, the icon that you see in the posts for the members that have Skype is being 'pulled' from the site itself. There might not be a way to change that unless Skype changes it to our style. :D

Stormer
02 Jul 2008, 18:38
Excellent work, currently using these on my forum.

Would be even better if you could include some more status icons with it for New Posts, Hot New Threads etc.

Leon44
03 Jul 2008, 18:06
Can I get these in a red and grey since the PSD isnt in the file like stated in the update log.

Pottsy
03 Jul 2008, 21:52
Can I get these in a red and grey since the PSD isnt in the file like stated in the update log.

Er, yes it is!

ArnyVee
05 Jul 2008, 20:02
Excellent work, currently using these on my forum.

Would be even better if you could include some more status icons with it for New Posts, Hot New Threads etc.

Oh, that would be cool! :D

Can you do additional ones for these other icons?

Wheezy
08 Jul 2008, 01:35
I just love these. Beautiful work! Thanks for sharing!

ed2k_2
08 Jul 2008, 05:40
I Suggest a red version :D

Stormer
10 Jul 2008, 14:56
I've been playing around with these icons in Photoshop but can't work out how to save each individual button on its own instead of saving them all on one big canvas. How do I do this ?

Pottsy
12 Jul 2008, 09:56
Simply press "Save for web and devices". On the right are all the images in slices - make sure each one has the correct matte (the colour of the background each image will be on), then press save.
At the bottom of the "save as" box, make sure slices is set to "all user slices". It will then save all the individual files with the correct file names, ready to go.

Hugo Holbling
16 Jul 2008, 17:40
It would be great to have the black buttons on a light background, if at all possible?

I'd also like to see the black buttons on a light (white) background, please.

Pottsy
23 Jul 2008, 08:50
I'd also like to see the black buttons on a light (white) background, please.

Attached.

84450

Hugo Holbling
23 Jul 2008, 19:27
Thanks a lot - much appreciated. :up:

Greeksgal
24 Jul 2008, 05:09
Do these work for Vb 3.7.0? What I mean is, are there any extra buttons needed for 3.7 that this set is missing?

Pottsy
24 Jul 2008, 15:03
These work fine with 3.7.

Doctor Death
30 Jul 2008, 18:16
perfect thanks :)

Thanks from me too.

Request: Can you please add one final button? I would like one that says "Nominate" on it to nominate that particular post/thread as the post of the week.

Here is the Mod I am using to Nominate (http://www.vbulletin.org/forum/showthread.php?t=184155) posts of the week.

Thanks again, the black/red buttons of yours that I use on my board look fabulous.

Pottsy
30 Jul 2008, 19:32
Dr Death,

I have made a set with the correct mattes for your forum, and included a Nominate button.

choccyclaire
30 Jul 2008, 19:35
Thanks for adding Skype and red looks great. :)

ArnyVee
30 Jul 2008, 19:38
Pottsy, great job! :D

Those would probably look great for a Christmas 'makeover' on our site :)

Thanks again for sharing!

Hugo Holbling
16 Aug 2008, 12:42
Is there any chance of "New Entry" and "Delete Entry" buttons in this style for use with the Glossary (http://www.vbulletin.org/forum/showthread.php?t=188189) mod?

Wheezy
23 Aug 2008, 22:34
I love these buttons and have been using them on my forum for several months. They are great!

I would really love a matching 160x30 (or similar size) button saying "Join Now!" for my forum. No icon, transparent/white matte.

eTiKeT™
27 Aug 2008, 17:31
perfect Thanks :)

Ohiosweetheart
03 Sep 2008, 04:30
Excellent work!

pushedx
04 Sep 2008, 22:55
Absolutely wonderful! Thanks

Krumbz
06 Sep 2008, 02:04
buttons look very nice, thank you.

jmurrayhead
15 Sep 2008, 02:41
Well done, mate! Installed!

jmurrayhead
16 Sep 2008, 00:28
Oh, one remark...the reputation image could use a little work...it's a little messy around the edge. Other than that...looks awesome :)

ShawneyJ
28 Sep 2008, 11:56
omg amazing thanks.

Glynn58
28 Sep 2008, 19:22
oops wrong thread sorry

JamesFreeman
08 Oct 2008, 11:12
Tbh, I love it!

lindab2
08 Oct 2008, 17:40
Nice, thank you :)

Maxwell the Cat
28 Oct 2008, 22:57
No matter how I try to save these in PS, they come out with a black background. How can I make it so they have a transparent background?

mmurtha
31 Oct 2008, 19:37
Very nice look to the buttons. Thanks!

Markeed installed.

GSeybold
01 Nov 2008, 04:28
great love the red, easier for member to find.

shacow
06 Nov 2008, 19:29
how about green? ;)

NikosN
10 Nov 2008, 14:34
Thank you , very good work!

murekhalir
16 Nov 2008, 02:08
VERY SEXY.

enough said.

Bluetiereign
01 Dec 2008, 04:09
I would have used this set if it weren't for the heart reputation. People in my forums aren't going to go for that sissy crap...

Well, scratch that - I'm using them. All but that reputation button.

cookiepants
04 Dec 2008, 01:25
Thank you!!!

SuperTaz
28 Dec 2008, 20:59
Can you make a button that says "Download" because I have a lot of files stored on my site for download to my members and I can't seem to find a good download button.

Doctor Death
29 Jan 2009, 23:55
I use (and love) the black ones. Could you possibly add a button that says "Nominate" for the "Thread of the Month" Mod?

Really nice work.

Doctor Death
01 Feb 2009, 20:52
I love these.... could I ask for a couple more in the Black category?

"Download"
"Nominate"


Thanks much!

lbpforum.net
10 Feb 2009, 11:06
Thanks mate, installed!

Krazeguy
16 Feb 2009, 00:20
Awesome, nice work man!

Doctor Death
16 Mar 2009, 01:26
I love these.... could I ask for a couple more in the Black category?

"Download"
"Nominate"


Thanks much!


I hope I can convince you to do these two additional buttons!!

princeedward
10 Apr 2009, 16:44
thanks for this..gonna try it to my site... ;)

merk_aus
19 Apr 2009, 04:19
Would be good the nominate, download and a blog this button for those of us who use vBlog

GSeybold
29 Apr 2009, 20:36
Very Nice ... Thank you!

bigtime
11 May 2009, 19:32
Thanks!!!

Buller
18 May 2009, 20:39
Thank you Pottsy

Installed the red ones on my forum and they look great, so good it inspired me to open Photoshop and make a few more. :D

zirzirnet
23 May 2009, 20:59
thanks

ErnieTheMilk
24 May 2009, 08:00
Very very nice, thanks :D

shinng
26 May 2009, 09:49
used the black matte on black on my default and it looks crisp. installed.

Alfa1
08 Jun 2009, 20:18
Could you make a 'Post File', 'Post Video', 'Post Audio' and a 'Post Wiki' button in blue with white matte?

Lahoria
18 Jun 2009, 16:23
best Buttons to VB
Please make a img for forum/images/misc/thanks.gif ( thanked i postbit )

why is'nt there a img to "send a message via Skype™ to Administrator" icon ? ( the gray skype icon with the cross )

5 stars from me

Cause4Chaos
22 Aug 2009, 13:38
can you make a twitter misc button for black on black range please.

dahamsta
30 Aug 2009, 12:56
Just like to add myself to the list of people looking for green. I already have the colourised standard set (http://www.vbulletin.org/forum/showthread.php?t=212341&highlight=green), but it's not complete (missing reply_small, for example).

Thanks,
adam

infnity8x3
17 Jun 2010, 03:40
Thank you so much for these icon!!! And the psd :D I edited a few buttons to suit my needs. I think others might be able to use them to. Right click save image as ;)

blogpost.gif

stats.gif

whos_online.gif

forum_new.gif

forum_old.gif

forum_link.gif

forum_new_lock.gif

forum_old_lock.gif

calendar.gif

birthday.gif

NightLord
18 Aug 2010, 22:54
thank you ! !

Traxdata
09 Nov 2010, 20:06
great icons ,thanks!

and yes, a twitter and facebook icons would be great! anyone?

mandrinvborg
13 Feb 2011, 14:39
*Subscribed*

mandrinvborg
13 Feb 2011, 14:57
For those not using postbit legacy, the reputation button was not edged correctly. I have edited and attached it...

revo70
22 Apr 2011, 17:18
can someone help out a newbie?

I added these buttons, but the background text still shows (for example, 'ply' still shows underneath the Reply button.

Here's the code from that section, maybe you can tell me which one to delete? Thanks in advance.

<a id="qr_{vb:raw post.postid}" class='quickreply' href="{vb:raw post.replylink}" rel="nofollow"><img id="replyimg_{vb:raw post.postid}" src="images/buttons/quickreply.gif" alt="{vb:rawphrase quick_reply_to_this_message}" /> {vb:rawphrase reply}</a>

rasp187
28 Apr 2011, 02:04
Yes how exactly do you implement these by editing out the text that is default-displayed for postbit_legacy in vB 4.1.3? Thanks.

K4GAP
05 Aug 2011, 12:05
Thanks for making these.

jroxinsas@gmail
21 Nov 2016, 20:38
Thanks you