Show Thread Enhancements - J105 - Beautiful Bevel and Emboss Custom Avatars

This is my first mod, I hope you enjoy it!

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!

[down.low]

I still need help trying to auto- center this,.- could someone please help me out if they can?

[down.low]

Did anyone ever figure out a way to make the watermark image auto center itself?

[Bigj85]

Originally Posted by down.low

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]

Originally Posted by Bigj85

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]

Can I get some support on this product or what, or can you at least mark the thread as "Unsupported"- which it is.

[blake247]

Works great! Thanks!