PDA

View Full Version : Show Thread Enhancements - J105 - Beautiful Bevel and Emboss Custom Avatars


J105C
23 Apr 2009, 16:43
This is my first mod, I hope you enjoy it! :D

This is actually quite simple and makes your forum look that much better with uniform embossed avatars with round corners.

This is accomplished by a simple CSS PNG image overlay.

Setup time is less than 2 minutes.

NOTE: The watermark.png file and code given is customized to fit the default vB theme.

1) Download and extract the ZIP file then upload watermark.png to your root vb directory

2) Go to AdminCP>Styles & Templates>Style Manager>All Style Options>Go

Scroll all the way down to "Additional CSS Definitions" at the footer

There should be two field boxes listed. COPY and PASTE THIS into the lower field box above all other CSS definitions


#watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 0px;
left: 0px;
}



TEMPLATE EDIT (POSTBIT):

3) Go to AdminCP>Styles & Templates>Style Manager>All Style Options>Edit Templates>Postbit Templates>Postbit [or] Postbit_legacy (depending upon your settings)


Then FIND:


<a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase

[xs_avatar]</phrase>" border="0" /></a>



REPLACE with:


<!-- Watermark by J105C oljc.net -->
<div id="watermark_box">
<a href="member.php?$session[sessionurl]u=$post[userid]">
<img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0"/>
<img src="/watermark.png" class="watermark" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0"/></a>
<!-- / END watermark -->


4) Should be all done. Please click installed, thank you! :)

I also included the PSD file so you can change the color of the tips on the .PNG file to match your custom background color. You may do this under the Photoshop layer titled, "CORNERS" and tweaking the HUE/SATURATION/LIGHTNESS + Colorize.

ENJOY and God Bless you!

K4GAP
23 Apr 2009, 19:41
This is going to make things look really nice on my forums. Thanks!

pein87
23 Apr 2009, 19:42
thanks I'll give it a try

TimberFloorAu
23 Apr 2009, 21:46
Quite weird you should post this, as its something I have considered for a long time, but on a more custom vein for our forums.

Enclosed is a pic, the left image is a standard avatar

The right image is that avatar with a custom overlay ( with a corner banner watermark image )

Now.

What I want to achieve is users who have filled in a particular field within their USERCP, custom profile field. Can choose: from dropdown...

Nothing ( so standard avatar they upload appears )
Visa ( so custom visa overlay appears as in image )
Citizen ( so custom visa overlay appears as in image but different graphic )


Reckon you could code this up ?

Ste

J105C
23 Apr 2009, 23:08
This is going to make things look really nice on my forums. Thanks!

thanks I'll give it a try

Thanks for your support guys! Enjoy!

Quite weird you should post this, as its something I have considered for a long time, but on a more custom vein for our forums.

Enclosed is a pic, the left image is a standard avatar

The right image is that avatar with a custom overlay ( with a corner banner watermark image )

Now.

What I want to achieve is users who have filled in a particular field within their USERCP, custom profile field. Can choose: from dropdown...

Nothing ( so standard avatar they upload appears )
Visa ( so custom visa overlay appears as in image )
Citizen ( so custom visa overlay appears as in image but different graphic )


Reckon you could code this up ?

Ste
This is very possible. I can create your .PNG file, code, and steps no problem. I just need some information. What size Avatars do you use on your forum, and did you want anything else other than the "Vista" dropdown?

TimberFloorAu
23 Apr 2009, 23:29
Our avatars can vary but max size is 120 x 120

I am happy to resize within ACP, so that all avatars are uniform size.

The two stripes I can create. Could be more. :)

But essentially. I have included 4 psd files to create 2 types of stripe. They can be renamed whatever and saved as png.

I prefer 80% opacity so have included those aswell. These are on 120px x 120px avatar sized backgrounds

one is VISA other is CITIZEN

LOKIN510051
26 Apr 2009, 07:59
Muy Bueno Gracias Ya Lo Instale Y Me Gusto.

SkyCatcher
26 Apr 2009, 08:28
The overlay isn't overlaying on my forum.

Granted, my style is modified, but any ideas why it doesn't overlay the avatar, but instead displays it on another line?

My avatars are in the filesystem incase that makes a difference.





Edit: Ok it was my custom style. I had to tweak it a little bit and undo the center aligned div for the postbit as well.

Second attechment is the new version.

marshal_ramdev
26 Apr 2009, 09:01
thanks will test it :)

J105C
27 Apr 2009, 07:57
The overlay isn't overlaying on my forum.

Granted, my style is modified, but any ideas why it doesn't overlay the avatar, but instead displays it on another line?

My avatars are in the filesystem incase that makes a difference.

Edit: Ok it was my custom style. I had to tweak it a little bit and undo the center aligned div for the postbit as well.

Second attechment is the new version.
Glad you got it working. The files and code only supports the default vbtheme :)

Muy Bueno Gracias Ya Lo Instale Y Me Gusto.
Fue todo un placer

Our avatars can vary but max size is 120 x 120

I am happy to resize within ACP, so that all avatars are uniform size.

The two stripes I can create. Could be more. :)

But essentially. I have included 4 psd files to create 2 types of stripe. They can be renamed whatever and saved as png.

I prefer 80% opacity so have included those aswell. These are on 120px x 120px avatar sized backgrounds

one is VISA other is CITIZEN
I just sent you a PM, it is complete :D

down.low
28 Apr 2009, 03:35
I need to center this watermark,.- can you help me out?

as7apcool
29 Apr 2009, 03:18
thanks alot 4 you

i will try this now

Bigj85
29 Apr 2009, 21:26
I need to center this watermark,.- can you help me out?

Same here,my avatars are centered and this is not.
I can move it to the side by changing
left: 0px; to left: 14px; or whatever but my style is fluid and it won't show centered for all resolutions like that

anyone know how I can center this?

Bigj85
02 May 2009, 04:46
I checked it out and it does show centered in different resolutions by changing the CSS left: 0px; to left: 14px;
you might have to do more or less depending on your style and avatar size

down.low
02 May 2009, 08:23
I checked it out and it does show centered in different resolutions by changing the CSS left: 0px; to left: 14px;
you might have to do more or less depending on your style and avatar size

The avatars are sized differently- I'll try it out and see if it works though..

InF3RNo
04 May 2009, 01:37
Haha, you mean 2 minutes install for intelligent people, for me it took 10 minutes. :)
Thanks, really good mod.

odln018
04 May 2009, 21:19
Would this work on something other than the postbit?

For example, I'm running this mod, and would love to have something like this to dress it up.

http://www.vbulletin.org/forum/showthread.php?t=99498.

troybtj
05 May 2009, 00:51
Is there a way to make this work with only certain users based on their userid?

J105C
06 May 2009, 14:36
Would this work on something other than the postbit?

For example, I'm running this mod, and would love to have something like this to dress it up.

http://www.vbulletin.org/forum/showthread.php?t=99498.
Sure, just take the postbit html code and embed it to work within that specific template. You would have to ask that developer of that mod to direct you to the specific template(s) to change.

Is there a way to make this work with only certain users based on their userid?
That could be possible with conditionals. I don't know which conditional to use though. Very possible. I would ask vbulletin.com for the conditional code for specific user ID's.

Bigj85
08 May 2009, 21:56
Is there a way to make this work with only certain users based on their userid?

I think you can use

<if condition="$bbuserinfo[userid] == X"></if>

Replace "X" with the users ID

I have it set up on my forum as a user selectable profile field,if anyone wants to know how to do that just post here and I'll post instructions

down.low
09 May 2009, 06:49
I still need help trying to auto- center this,.- could someone please help me out if they can?

down.low
04 Jun 2009, 08:00
Did anyone ever figure out a way to make the watermark image auto center itself?

Bigj85
14 Jun 2009, 13:34
Did anyone ever figure out a way to make the watermark image auto center itself?

you have to change this code

#watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 0px;
left: 0px;
}

where it says left: 0px you have to change to how many pixels your avatar is from the left side of the postbit,mine was 13px left, so I did
left: 13px

Works fine

down.low
18 Jun 2009, 14:38
you have to change this code

#watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 0px;
left: 0px;
}where it says left: 0px you have to change to how many pixels your avatar is from the left side of the postbit,mine was 13px left, so I did
left: 13px

Works fine



This doesn't work for me,... it only works to cover up some avatars, not all avatars, or it only covers parts of certain ones,..

down.low
25 Jun 2009, 12:31
Can I get some support on this product or what, or can you at least mark the thread as "Unsupported"- which it is.

blake247
01 Aug 2009, 06:31
Works great! Thanks!