lurk lurk lurk lurk lurk...

OHAI

With SMF2.1, we decided to move some profile fields to more customizable and editable place, this also contains Gender, now you can edit/add/remove Gender(s) from SMF. Adding new Gender also brings a bit work, which involves CSS editing.

After adding new Gender you see its not showing any icon, first of all you need to upload a image for that gender. After uploading image to required place, you have to edit your index.css file to give gender class required background (image). This is very simple step, open your index.css file which is located in Themes/{your-theme}/css/.

Example of adding new gender;

Step 1

First navigate to Admin > Configuration > Features and Options > Profile Fields

Step 2

Click modify on Gender Field In here you can either change the gender name or add new one with clicking [More] button. For this example I'm going to add new gender named "Cat". After adding new gender now SMF will put gender_Cat as class of new gender.

Step 3

After creating your profile field you need icon for that gender, you need to upload your icon under /images folder (which can be found under /Themes/{your-theme}/images - due to complications we suggest you to upload the icon to images folder but you can always use different folder, even a new folder but please be reminded it needs to be under images folder.

Step 4

Now you can navigate to your index.css and open the file. Navigate end of your CSS file or any other place you like to add your code, and add this code;

.gender_Cat { background: url(../images/cat.png) no-repeat; display: inline-block; height: 16px; width: 16px; }

We strongly suggest you to use 16x16 transparent icon but changes must effect height/width directly. If you have 20x20 icon, height-width must change respectively. You also need to change the Cat part to your gender name (case sensitive) and icon name, and if you didn't upload the file under image folder on Step 3, you also need to change the url() part to reflect your changes.