closed Badge overlay customization

iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
Just thought I'd share this with you.
Probably not the best way to implement it, but it only took me 15 minutes to get this going.
Badge Module by @360 Thanks for this!

Running Elastic Skin.

In Photoshop, create a 64x64 pixel canvas. Add a layer, create a rectangle, then set the angle to 45 degrees. Set your colors. Add a quick drop shadow. Create another layer with your text, in this case "artist". Save as transparent .png file.

In your ACP, Upload the image to the mybadges > images section. Override whichever badge you want to replace it with.

In the profile_header.tpl, find the div for your profile image.

Add something like this:
{* testing badge *}
{jrCore_include template="badges.tpl"}

Create a badges.tpl file. Upload it to the root of your skin dir.

YMMV in this tpl, but just as an initial test I threw this code:

<style>
.overlay_badge {
    position:absolute;
    left:0;
    bottom:0;
    z-index:5;
}
</style>
<div class="overlay_badge">{jrCore_image module="myBadges" image="artist_badge.png"}
</div>

The result is a nice little ribbon style badge on the lower corner of your profile image.

Needs more tweaking to account for profile_quota_ids but I think you get the jist. Word to your mother.
updated by @ilovehousemusic: 04/11/14 08:55:20AM
alt=
@serin
10 years ago
38 posts
Thank you for this! It look great!
Developer Networks
Developer Networks
@developer-networks
10 years ago
566 posts
Very cool! Can you post this also in my forums so others can easily find this. Thanks!
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts
No problem. Here you go!
https://www.jamroom.net/b360/forum/profile-badges/8073/mybadges-customization-profile-image-overlay

I'll close this thread too....
updated by @ilovehousemusic: 03/10/14 09:06:26AM

Tags