Gender Message Indicators [Deleted]

John L.

Well-known member
LP-John submitted a new resource:

Gender Message Indicators (version 1.0) - Add gender icons to your name in message and change the color of the message bit.

by John Lewis (www.otakutalk.com)

** Love anime?! Check us out at OtakuTalk.com! **

This is a pretty simple change that anyone can make to their forums, but of course requires some small template changes.

Step 1 - Find the "message_user_info" and find this part of the line:
HTML:
<div class="messageUserInfo

Right before the question mark to close the class, add this:
PHP:
<xen:if...

Read more about this resource...
 
I'm confused. You say "Right before the question mark to close the class, add this:"

Are you talking about this line?
Code:
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

Which question mark? Do you mean the Quotation Mark?

So would I replace the above code with this?
Code:
<div class="messageUserInfo <xen:if is="{$user.gender} == 'male'"> male<xen:else /> female</xen:if>" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

I'm not a coder so I need very very specific instructions.
 
I'm confused. You say "Right before the question mark to close the class, add this:"

Are you talking about this line?
Code:
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

Which question mark? Do you mean the Quotation Mark?

So would I replace the above code with this?
Code:
<div class="messageUserInfo <xen:if is="{$user.gender} == 'male'"> male<xen:else /> female</xen:if>" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

I'm not a coder so I need very very specific instructions.
Sorry about that, it's a typo. It should "quotation mark". Simply replace:
HTML:
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

With this:
HTML:
<div class="messageUserInfo<xen:if is="{$user.gender} == 'male'"> male<xen:else /> female</xen:if>" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
 
PHP:
.male .messageUserBlock{background-color:#FFBFED!important;border:1px solid #ECF7FF!important;}
.male .messageUserBlock div.avatarHolder{background-color:#FFDFF6!important;}
.male .messageUserBlock .extraUserInfo{background-color:#FFDFF6!important;}
.male .messageUserBlock .arrow{border-color:transparent -moz-use-text-color transparent #ECF7FF;}
.male .messageUserBlock .arrow span{border-color:transparent -moz-use-text-color transparent #FFDFF6;}

Depending on your theme / skin / style (whichever you call it) .... The above should give your men (males) their own pre-define colors. You can of course change them to fix your own needs.
 
Small heads up. There is a small graphic conflict if you are an admin and using this

http://xenforo.com/community/resources/user-edit-menu-in-postbit.796/

www.sociallyuncensored.eu 2012-9-27 14:34:8.webp
^^^ You'll notice the male / female symbols are hidden under the user name and not on the right side. This only is viewable to Administrators only and so, no general worries for the rest of your users.

This is also not a flaw with either modification. Just how the layout finally renders with them together.
 
Small heads up. There is a small graphic conflict if you are an admin and using this

http://xenforo.com/community/resources/user-edit-menu-in-postbit.796/

View attachment 34703
^^^ You'll notice the male / female symbols are hidden under the user name and not on the right side. This only is viewable to Administrators only and so, no general worries for the rest of your users.

This is also not a flaw with either modification. Just how the layout finally renders with them together.
Right now I have the CSS applying to the a tag for the username in the Extra.css template. Try attaching the image to the h3 instead, like so:
Code:
.male .messageUserBlock h3.userText{background: url(styles/default/xenforo/gender/male.png) right center no-repeat;}
.female .messageUserBlock h3.userText{background: url(styles/default/xenforo/gender/female.png) right center no-repeat;}
 
Right now I have the CSS applying to the a tag for the username in the Extra.css template. Try attaching the image to the h3 instead, like so:
Code:
.male .messageUserBlock h3.userText{background: url(styles/default/xenforo/gender/male.png) right center no-repeat;}
.female .messageUserBlock h3.userText{background: url(styles/default/xenforo/gender/female.png) right center no-repeat;}
Success :)

Thank you :D
 
Could we add on to this perhaps? I have at least one member that I know of who identifies with both genders (and is taking the surgical route if you know what I mean).

This perhaps? http://www.psdgraphics.com/wp-content/uploads/2009/06/male-and-female-signs.jpg
I suppose if you edit the gender field and add that option you can then adjust the template conditional like so:
PHP:
<xen:if is="{$user.gender} == 'male'"> male<xen:elseif is="{$user.gender} == 'male_female'" />male-female<xen:else /> female</xen:if>

Hope that helps. I don't have an icon for that but I'm sure you can find one :)
 
  • Like
Reactions: Cal
Could we add on to this perhaps? I have at least one member that I know of who identifies with both genders (and is taking the surgical route if you know what I mean).

This perhaps? http://www.psdgraphics.com/wp-content/uploads/2009/06/male-and-female-signs.jpg

On a light Background it should work fine, if you need a dark background version we would have to black matte it.

Save As --------------------------------->
30caubk.png
<------------------------------------ Save As
 
What if a gender is not chosen? :) ... In my forum a user has not configured their gender automatic is set as female :)
 
What if a gender is not chosen? :) ... In my forum a user has not configured their gender automatic is set as female :)
This should be fixed, try applying this update as I've specified in the conditional that they have to be either male or female to have a class applied. If they are neither, they get nothing and will be the default style of your forum :).

I also added a few fixes to this one to make it look better and included a male color since some people may have custom styles that can be any color. This way you have at least a pink and blue version.
 
Top Bottom