vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Show Thread Enhancements - J105 - Beautiful Bevel and Emboss Custom Avatars (https://vborg.vbsupport.ru/showthread.php?t=212005)

J105C 04-22-2009 10:00 PM

J105 - Beautiful Bevel and Emboss Custom Avatars
 
1 Attachment(s)
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

Code:

#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:

Code:

<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:

Code:

<!-- 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 04-23-2009 05:41 PM

This is going to make things look really nice on my forums. Thanks!

pein87 04-23-2009 05:42 PM

thanks I'll give it a try

TimberFloorAu 04-23-2009 07:46 PM

1 Attachment(s)
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 04-23-2009 09:08 PM

Quote:

Originally Posted by GaryT (Post 1797632)
This is going to make things look really nice on my forums. Thanks!

Quote:

Originally Posted by pein87 (Post 1797633)
thanks I'll give it a try

Thanks for your support guys! Enjoy!

Quote:

Originally Posted by TimberFloorAu (Post 1797696)
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 04-23-2009 09:29 PM

1 Attachment(s)
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 04-26-2009 05:59 AM

Muy Bueno Gracias Ya Lo Instale Y Me Gusto.

SkyCatcher 04-26-2009 06:28 AM

1 Attachment(s)
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 04-26-2009 07:01 AM

thanks will test it :)

J105C 04-27-2009 05:57 AM

Quote:

Originally Posted by SkyCatcher (Post 1799155)
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 :)

Quote:

Originally Posted by LOKIN510051 (Post 1799150)
Muy Bueno Gracias Ya Lo Instale Y Me Gusto.

Fue todo un placer

Quote:

Originally Posted by TimberFloorAu (Post 1797760)
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


All times are GMT. The time now is 08:30 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01106 seconds
  • Memory Usage 1,750KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (6)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete