Overlay image over image tip request

I have created a male/female substitution on the format name and it works perfectly usingthe code given by Nant during the tutorial on the Format name. I wanted to put this on top of the profile picture now though? Can you guys give me a little tip how I have to amend the code?

[value]
[cb:if cb_gender="Male"]<img src="images/icons/Group_feature/male.png" alt="man symbol" />[/cb:if]
[cb:if cb_gender="Female"]<img src="images/icons/Group_feature/female.png" alt="woman symbol" />[/cb:if]

Would be great if you guys could help!

up

timstohr wrote: I have created a male/female substitution on the format name and it works perfectly usingthe code given by Nant during the tutorial on the Format name. I wanted to put this on top of the profile picture now though? Can you guys give me a little tip how I have to amend the code?

[value]
[cb:if cb_gender="Male"]<img src="images/icons/Group_feature/male.png" alt="man symbol" />[/cb:if]
[cb:if cb_gender="Female"]<img src="images/icons/Group_feature/female.png" alt="woman symbol" />[/cb:if]

Would be great if you guys could help!

Please note that we are not CSS experts - there are hundreds of tips on the internet waiting for searchers.

For example:

stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html

This lead me to the following code for the avatar profile layout parameter:

This should display the icon in the top left corner (3 pixels down and 3 pixels to the right).

P.S. Also in the future please post more relevant titles (you had a title of hey guys) for others searching and reading to benefit.

Hi Nant,

Sorry for bothering you again, but the code does not work since it starts floating the profile picture. I wanted to have it on the userlist though and if putting the code into userlist it obviously enlarges the smaller userlist photographs.

I have now used the following text which looks alright on the login and cb-activity, but looks atrocious in Group Jive:


<!-- [value] -->
<div style="position: relative; left: 0; top: 0;">
<img src="[avatar]" style="position: relative; top: 0; left: 0;" width="60%" height="60%"/>
[cb:if cb_gender="Male"]<img src="images/icons/Group_feature/male.png" style="position: absolute; top: 3px; left: 3px;" alt="man symbol" />[/cb:if]
[cb:if cb_gender="Female"]<img src="images/icons/Group_feature/female.png" style="position: absolute; top: 3px; left: 3px;" alt="woman symbol" />[/cb:if]
</div>

Basically what would be interesting, and I am pretty sure not only to me, would be to have the symbol displayed on the CB connect, the Group Jive and the Userlists? What is the [name of userlist avatar]?

timstohr wrote: Hi Nant,

Sorry for bothering you again, but the code does not work since it starts floating the profile picture. I wanted to have it on the userlist though and if putting the code into userlist it obviously enlarges the smaller userlist photographs.

I have now used the following text which looks alright on the login and cb-activity, but looks atrocious in Group Jive:


<!-- [value] -->
<div style="position: relative; left: 0; top: 0;">
<img src="[avatar]" style="position: relative; top: 0; left: 0;" width="60%" height="60%"/>
[cb:if cb_gender="Male"]<img src="images/icons/Group_feature/male.png" style="position: absolute; top: 3px; left: 3px;" alt="man symbol" />[/cb:if]
[cb:if cb_gender="Female"]<img src="images/icons/Group_feature/female.png" style="position: absolute; top: 3px; left: 3px;" alt="woman symbol" />[/cb:if]
</div>

Basically what would be interesting, and I am pretty sure not only to me, would be to have the symbol displayed on the CB connect, the Group Jive and the Userlists? What is the [name of userlist avatar]?

The code I gave works just fine for me on my profile page and my user list page (see image attached).

I have now used the following text which looks alright on the login and cb-activity, but looks atrocious in Group Jive:

Both these - as you know - are to be re-written for CB 2.0, so I cannot really comment on how they react (if they react) to the CB 2.0 new layout feature.

Alternatively you could use the following:

CSS to be added to your template.css file:
.cbImageOverlay {
position: relative;
display: inline-block;
}

.cbImageOverlay .overlayImg {
position: absolute;
bottom: 1px;
right: 1px;
z-index: 99;
}

This should work on userlist, but it might have issues if with profile image displayed in the Canvas Menu position.

But yes my previous example does not play well with user lists.

Will revisit this after Kyle gets rest of add-ons converted so we can propose something that works everywhere.