Avatar Glossy Effect - Postbit_Legacy
Mod Version: 1.01, by thetechgenius
| vB Version: 4.2.2 | Rating:  (1 vote - 5.00 average) |
Installs: 12 |
| Released: 29 Jan 2015 | Last Update: Never | Downloads: 75 |
 Not Supported
 Template Edits
Re-usable Code
|
||
I found a really cool Javascript library that automatically adds a cool Glossy Shine effect to an image. You can add the Glossy Shine to any image on your forum, but I think it looks best with user's avatars.
And the best part is, the end-user doesn't need to do anything extra. They just upload their Avatar as normal, and when they see their avatar in posts, it will have a professional looking Shine/Glossy effect.
Lets get started!
1) First download the zip at the bottom, extract the contents, and upload the "js" folder to your forum root.
2) Add this code to your headerinclude template.
3) Edit the postbit_legacy template.
Find:
Now since my style is very custom, that code might not be exactly like yours.
You have to basiclly put a class on the avatar "IMG" tag.
Like this:
And save!
I also added a screenshot of what it will look like when its done.
EDIT: You could also use the Javascript to make any image have the Glossy/Shine Effect. I added the code to my Postbit Legacy and the User Profile Avatars. I changed the code in the profiles so instead of the profiles showing the Profile Pictures, it only shows the User's Avatar with the Glossy/Shine Effect.
I added a screenshot of my profiles with the Avatar Shine/Glossy effect.
And the best part is, the end-user doesn't need to do anything extra. They just upload their Avatar as normal, and when they see their avatar in posts, it will have a professional looking Shine/Glossy effect.
Lets get started!
1) First download the zip at the bottom, extract the contents, and upload the "js" folder to your forum root.
2) Add this code to your headerinclude template.
Code:
<script type="text/javascript" src="js/glossy.js"></script>
3) Edit the postbit_legacy template.
Find:
Code:
<vb:if condition="$show['avatar']">
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
</a>
</vb:if>
You have to basiclly put a class on the avatar "IMG" tag.
Like this:
Code:
<vb:if condition="$show['avatar']">
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<img class="glossy" src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
</a>
</vb:if>
I also added a screenshot of what it will look like when its done.
EDIT: You could also use the Javascript to make any image have the Glossy/Shine Effect. I added the code to my Postbit Legacy and the User Profile Avatars. I changed the code in the profiles so instead of the profiles showing the Profile Pictures, it only shows the User's Avatar with the Glossy/Shine Effect.
I added a screenshot of my profiles with the Avatar Shine/Glossy effect.
Download
GlossyAvatars[TTG].zip (3.9 KB, 89 downloads)
Screenshots
