MyBB Community Forums

Full Version: gender icon on thread view
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
On forums, it is often confusing as to whether you are speaking to a male or female (or undisclosed). Of course, you can refer to a user's profile to see. But having to do that for every person for every response is very tedious and time-consuming. In the heat of conversations, sometimes it is not clear (because of name or avatar) if you are speaking to a male or female, so you can make the mistake of using "him" or "her" or "he" or "she" incorrectly. Which can be embarrassing.

It would be very nice if there was a plugin that would create some sort of little icon that was visible in the thread-view (like a discrete pawn icon) that was either blue, pink, or grey. This could be directly called from their profile as to whether they are: male, female, or undisclosed.
Edit: do you mean thread view like showthread or thread view as forumdisplay where all threads are listed ?

Admin CP -> configuration -> Custom Profile Fields and addd New Profile Field
Title - Gender
Short Description * - Your gender
Field Type * - select Box
Field Length * - /leave blank
Selectable Options? * - 
male
female
other
Display Order * - 1
Required? * - Yes

2.Go to Templates and styles -> templates -> <your theme template set> -> postbit templates -> postbit_classic (or postbit)

and after

{$post['user_details']}

paste

<br />Gender: <span class="gender {$post['fidx']}" title="{$post['fidx']}"></span>

(replace x, WHERE x is your gender field id,you can see that profile field id under custom profile fields)

Go to your theme global.css (admincp -> templates and styles -> themes -> <your forum theme> -> global.css )

and paste

.gender {
  display:inline-block;
  vertical-align:middle;
  width:16px;
  height:16px;
  background-repeat:no-repeat;
  background-position:center center;
}

.female {
  background-image: url(../../../images/female.png);
}
 
.male {
  background-image: url(../../../images/male.png);
}

.other {
  background-image: url(../../../images/other.png);
}

Extract gender.zip and upload images to image folder.
Ok, that was freakishly fast. So much so, that I'm pretty sure my mind just melted. :o

I haven't tried this yet, but I've got to say, you win the "All-Time Award for Fastest Turnaround Time in Plugin Creation" (hands down)

One question after reading your post, wouldn't it be more logical to link it to the already existing field of "Sex" (instead of asking them twice what their gender is).

Nevermind, that is a minor detail, as I can just disable the "Sex" profile field. Honestly, it always reminded me of a solicitation for prostitution anyway.
If you have sex profile field use him (or rename it to gender) and change other to undisclosed.
My daftness is only further highlighted by your genius! Big Grin

To answer your question: I mean the view where you are actually reading (participating) in the thread.



UPDATE:

The images are not appearing.

- tried in multiple browsers
- tried with multiple accounts
- tried with relative URLs and Full URLs in the CSS
- added the changes to both postbit and postbit_classic templates
- ensured using proper field ID which, in this case, is 3 (double-checked)
- ensured images uploaded to proper directory ROOT/images/
- there is a 16x16 space that the cursor jumps over in that area now
- tried adding z-index:1 (for the hell of it, no change, so removed, I'm a noob)
- when I hover over that area, it shows proper title text

Custom Profile Field settings:

- Title: Gender
- Short Description: Please select your gender from this list below.
- Field Type: Select Box
- Maximum Length: 0
- Field Length: 0
- Selectable Options?: Undisclosed / Male / Female / Other (in that order)
- Display Order: 1
- Required? Yes
- Editable by User? Yes
- Hide on Profile? No
- Minimum Post Count: 0
* Custom Profile Field ID Number: 3 *

CSS Edits:

.gender {
display:inline-block;
vertical-align:middle;
width:16px;
height:16px;
background-repeat:no-repeat;
background-position:center center;
}

.undisclosed {
background-image: url(images/undisclosed.png);
}

.male {
background-image: url(images/male.png);
}

.female {
background-image: url(images/female.png);
}

.other {
background-image: url(images/other.png);
}

Postbit template:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
	<tbody>
		<tr>
			<td class="tcat">
				<div class="float_left smalltext">
					{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
				</div>
				{$post['posturl']}
			</td>
		</tr>

		<tr>
			<td class="trow1 {$unapproved_shade}">
				<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
					<tr>
						<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
							{$post['useravatar']}
						</td>
						<td class="post_author">
							<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
							<span class="smalltext">
								{$post['usertitle']}<br />
								{$post['userstars']}
								{$post['groupimage']}
							</span>
						</td>
						<td class="smalltext post_author_info" width="165">
							{$post['user_details']}

<!--***this is a mod-->
<br />Gender: <span class="gender {$post['fid3']}" title="{$post['fid3']}"></span>
<!--***this is a mod-->
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr>
			<td class="trow2 post_content {$unapproved_shade}">
				<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>

				<div class="post_body" id="pid_{$post['pid']}">
					{$post['message']}
				</div>
				{$post['attachments']}
				{$post['signature']}

				<div class="post_meta" id="post_meta_{$post['pid']}">
				{$post['iplogged']}
				</div>
			</td>
		</tr>

		<tr>
			<td class="trow1 post_buttons {$unapproved_shade}">
				<div class="author_buttons float_left">
					{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
				</div>
				<div class="post_management_buttons float_right">{$post['button_spam']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
				</div>
			</td>
		</tr>
	</tbody>
</table>

Postbit_Classic template:

{$ignore_bit}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
	<tr>
		<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
		<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
		<span class="smalltext">
			{$post['usertitle']}<br />
			{$post['userstars']}
			{$post['groupimage']}
			{$post['useravatar']}<br />
			{$post['user_details']}
<!--***this is a mod-->
<br />Gender: <span class="gender {$post['fid3']}" title="{$post['fid3']}"></span>
<!--***this is a mod-->
		</span>
	</td>
	<td class="{$altbg}" valign="top">
		<table width="100%">
			<tr><td>{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
			<br />
			<div id="pid_{$post['pid']}" class="post_body">
				{$post['message']}
			</div>
			{$post['attachments']}
			{$post['signature']}
			<div style="text-align: right; vertical-align: bottom;" id="post_meta_{$post['pid']}">
				<div id="edited_by_{$post['pid']}">{$post['editedmsg']}</div>
				{$post['iplogged']}
			</div>
		</td></tr>
	</table>
</td>
</tr>
<tr>
	<td class="{$altbg}" style="white-space: nowrap; text-align: center; vertical-align: middle;"><span class="smalltext">{$post['postdate']} {$post['posttime']}</span></td>
	<td class="{$altbg}" style="vertical-align: middle;">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr valign="bottom">
				<td align="left" ><span class="smalltext">{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}</span></td>
				<td align="right">{$post['button_spam']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
			</tr>
		</table>
	</td>
</tr>
</table>

After some research I'm positive the problem is in my CSS.

The CSS doesn't jive. I give up. Sad

Going now to pluck the grey hairs I grew while attempting to make this functional.
Did you uploaded that images in <forum root>/images/ folder (not your theme folder)?
(2012-11-19, 02:05 PM)Johnny S Wrote: [ -> ]Did you uploaded that images in <forum root>/images/ folder (not your theme folder)?

Yes, its not a path issue. I even tried putting them in the root folder and pointing to that location as well. its a rendering issue, Google "background image not showing up CSS" LOL

its beyond my scope, but your code is fine.
This may seem a bit of a strange suggestion, but in your profile field you have

Selectable Options?: Undisclosed / Male / Female / Other (in that order)

But the class is using lower case. eg undisclosed

Is that the same as Undisclosed?
(2012-11-19, 06:00 PM)Leefish Wrote: [ -> ]This may seem a bit of a strange suggestion, but in your profile field you have

Selectable Options?: Undisclosed / Male / Female / Other (in that order)

But the class is using lower case. eg undisclosed

Is that the same as Undisclosed?

Yes, that is an issue. But it is an issue that I already caught earlier. I changed the fields to lower case, but still not working. I believe CSS / XHTML has to be all lower case. So since it was calling those names from the profile fields themselves, they have to be listed in lower case.

I read several similar threads and it seems that this is something that routinely pops up when people attempt this for one reason or another. I feel as though it's got to be the CSS, because I am not getting a Red-X in place of the image. I am just getting the background.

Also, in the CSS, are we setting it up for particular browsers? How about the "transparent" background-color, where should that go?

I did hours of reading on CSS websites and many have this same problem. Which is why I feel confident that Johnny's code is likely very sound. Just something about the whole thing isn't letting the image render. When I hover over that area.

Someone should try this (takes about ten minutes to implement) and see if thye can recreate this condition...

I appreciate the effort up till now, thanks!
Well, why not just have the image link?

Something like <img src="images/{$post['fid3']}.png" /> and have the images named after the fields? Know what I mean?
Pages: 1 2 3