Gender Message Indicators [Deleted]

[John L.]

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:

<div class="messageUserInfo

Right before the question mark to close the class, add this:

<xen:if...

Read more about this resource...

 

[aiman.h.kallaf]

look very nice but would this add any queries

 

[Adam Howard]

look very nice but would this add any queries

None that I can tell. This is only a template edit.

A very creative and well thought out original code. Very nicely done LP-John

 

[xIsabel38]

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

Are you talking about this line?

<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?

<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.]

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

Are you talking about this line?

<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?

<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:

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

With this:

<div class="messageUserInfo<xen:if is="{$user.gender} == 'male'"> male<xen:else /> female</xen:if>" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

 

[John L.]

LP-John updated Gender Message Indicators with a new update entry:

Fixed and Simplified Instructions

I had a typo and it was a little more complicated than it needed to be. No file changes, only the readme.

Read the rest of this update entry...

 

[Adam Howard]

.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.

 

[xIsabel38]

So many applications of this, can it be changed based on usergroup?

 

[Adam Howard]

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/


^^^ 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.]

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:

.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;}

 

[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

 

[Adam Howard]

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:

.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

 

[John L.]

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:

<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]

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 --------------------------------->

<------------------------------------ Save As

 

[Adam Howard]

unspecified .... Seems to still be pink

 

[robi052]

What if a gender is not chosen? ... In my forum a user has not configured their gender automatic is set as female

 

[John L.]

LP-John updated Gender Message Indicators with a new update entry:

Various Fixes & Unspecified Support

• Adjusted template change to account for unspecified users
• Added CSS for male color as well
• Fixed various issues with CSS
• Changed color of avatar border
• Attached gender icon to h3 as opposed to anchor for better support

Read the rest of this update entry...

 

[John L.]

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.

 

[robi052]

Now is OK ... Thanks

 

[Adam Howard]

a suggestion from a lot of my members was that unspecified should be a green color