• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Gender Message Indicators [Deleted]

John L.

Well-known member
#1
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...
 

xIsabel38

Well-known member
#4
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.
 

John L.

Well-known member
#5
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">
 

Adam Howard

Well-known member
#7
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.
 

Adam Howard

Well-known member
#9
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.png
^^^ 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.
 

John L.

Well-known member
#10
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;}
 

Adam Howard

Well-known member
#12
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
 

John L.

Well-known member
#13
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 :)
 

xIsabel38

Well-known member
#14

John L.

Well-known member
#18
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.