Overlapping Image Help

[Former Member]

I'd like to add a little image to the mini-profile that kind of overlaps with a users avatar image. It's for verification purposes. I'm just not an expert at getting it to work even though I've tried to look up tutorials.

My current mini-profile:

SPOILER: Click to show

Mock-up of the position I would like a small image to go:

SPOILER: Click to show

Forum: hbadcommunity.com/

If you'd rather my mini-profile template coding, just let me know. I'd rather PM it to you.

[Tumbleweed]

Jul 25, 2016 22:29:41 GMT -8 @seriously said:

I'd like to add a little image to the mini-profile that kind of overlaps with a users avatar image. It's for verification purposes. I'm just not an expert at getting it to work even though I've tried to look up tutorials.

My current mini-profile:

SPOILER: Click to show

Mock-up of the position I would like a small image to go:

SPOILER: Click to show

Forum: hbadcommunity.com/

If you'd rather my mini-profile template coding, just let me know. I'd rather PM it to you.

Do you still need this? When I first saw your post, I didn't have time to look into it and I was pretty sure I couldn't just give you the answer anyway without spending time fiddling with it, but I'm willing to try now to work out how to do this if you still need it. 

My question is, will this be a custom field that you have set up just for staff to tick saying this person is verified? Also will that be the only thing you'll use is the check mark or will there be different stages of verification with different check boxes. I'm just not sure what you have done so far and where you are stuck exactly. You can pm me your template coding if you like. No promises I can figure this out for you though.

[Former Member]

Hey Tumbleweed!

No worries. Yes, it'll be a custom field where we can just go in and set someone as verified. There will only be the one verification stage used for all members who are verified, so no need for extra.

I tried looking up some ways to get an image to overlap using CSS, and all I managed to do was make the mini-profile look crazy, lol.

Sent the template coding via PM.

[Tumbleweed]

Thanks for the template coding. I took a quick look and I didn't really see custom coding for that custom field in your template so just assume it's just a normal custom field that will show up when you tick a box or however you did your custom field. I didn't put it on my test site yet because first I just want to cover the basics and forgive me if this is something you have already tried but did you try simple positioning like I have below?
(I just used a custom field I have on my test site with a id of "Your country flag")


.custom-field-yourcountryflag{
position:relative;
top:-100px;
right:-100px;
z-index:100;
}

The blue of course would be your custom fields name and then just tweak the top and right positioning to where you want it. I currently have negatives in there but you may have to go to positives: top:100px; (depends where you might have it in your template, which as I said, I didn't see.)

[Former Member]

Tumbleweed

Sorry for the late reply, life has been pretty hectic lately.

I had the coding in the template, but removed it because it wasn't working. I forgot if you were allowed to have more than one if statement in one foreach loop?

This is what I had.

{foreach $[user.custom_field]}

{if $[user.custom_field.name] == "Verified"}
                     
<img src="http://placehold.it/25x25">
     
{/if}

{/foreach}


This is how its showing up on the mini-profile:



I feel like this is such an easy thing to do, but I'm having a total brain fart right now on how to get it to work.

[Tumbleweed]

@seriously, The custom field is working as it should but I think it is a bit more complex since you want to replace the output with an image (that check mark) or am I misunderstanding? Perhaps you want that text "Verified -Layout Master" and then the check mark beside it?  Anyway, I haven't had the time to work my brain around how to do that if the former and it should be relatively easy (I hope) if the latter. I will try to put your template on a test site, set up a custom field and fiddle with it hopefully some time before I go to bed today.

[Former Member]

Tumbleweed: It's the first one. When a staff member checks the verified box, I want an image to pop up instead of text.

This is another mock-up of the image base we're going to use. It'll be a ribbon that shows up in the bottom-right corner, overlapping a user's avatar image.




If this can't be done as a custom profile field, is there a way for it to be done another way? Such as a plug-in, script, other? If I can go in and do it manually, that would be okay. The reason I went for the custom profile field route was just for convenience.

[Tumbleweed]

@seriously ,

Sorry I haven't got back to you on this. Been feeling kind of crappy and in no mood for coding things. The only way I can figure out how to do this is if you have a custom field and you input the image when you modify the members profile to show they are verified and it goes without saying, the custom field would have to be set so staff can only edit and then the custom field would be a text field and  URL (plain text) in the edit portion. 
The the else statement would be:


{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Verified"}
<span class="$[user.custom_field.content_class]">
<img src="$[user.custom_field.value]">

</span>
{/if}
{/foreach}

The bold part above is what adds the image you input in the user profile.

And then in your css you do: 

.custom-field-verified{
position:relative;
top:-50px;
right:-80px;
z-index:100;
}

Change the -50px in the top: and the -80px in the right part to position it where you want it. Sorry, this is the only way I can work out how to do that.