• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Country Custom Field Made Easy

John L.

Well-known member
#1
What is this?
Just a simple little modification for those of us who want our users to be able to select what country they are from. This tutorial will save you a fair bit of time when setting it up.

field-screenshot.jpg

*Note: The country list WILL NOT be maintained and this IS NOT SUPPORTED in any way, shape or form. This is simply a tutorial to make adding countries easier.

The Setup Process
The setup process is pretty straight forward, but make sure you have access to FTP and phpMyAdmin before you get started.
  • Step 1: Setting Up the Flag Sprites
    • Download the attached file "flag-sprites.zip" and upload the "styles" directory into your root XenForo directory.
    • Login to the Admin CP and within the admin search find "Extra.css". Paste the contents of flags.css into that template and save.
  • Step 2: Setting Up the Custom Field
    • Login to the Admin CP and head to "Custom Fields" under the "User" tab.
    • Click on "Create New Field" and enter the following information in.
    • Under "Basic Information" add the following:
      Field ID: country
      Title: Country
      Description: *Anything you want*
      Display Location: Personal Details
      Display Order: 100
      Field Type: Drop Down Selection
    • Under "Options for Choice Fields" add the following:
      Value: test
      Text: Test
    • Under "General Options" do the following:
      Check off any options you want to set for this field.

      In Value Display, add the following:
      HTML:
      <img src="/styles/default/xenforo/clear.png" class="flag flag-{$choice}" alt="{$value}" /> {$value}
    • Save this field.
  • Step 3: Import the Countries via phpMyAdmin
    • Login to phpMyAdmin and find your XenForo database.
    • Insert the SQL code attached in "countries.txt" and run.
    • Check your Country Field to see if the countries have been successfully added.
    • Remove the "Test" option if it is still there.
  • Step 4: Enjoy! Let me know of your success.
Copyrights
The flag icons are the property of famfamfam.com and I did not create them. The sprite image was provided by flag-sprites.com.
 

Attachments

Andrej

Well-known member
#3
22-10-2011 22-40-55.png
The flag does not appear properly. Everything is done according to the guide.

EDIT:
Code:
<img src="/styles/default/xenforo/clear.png" class="flag.flag-{$choice}" alt="{$value}" /> {$value}
There was a dot missing between flag.flag , but that didn't solve the problem.
 

Andrej

Well-known member
#5
Show me your Extra.css contents and double check the flag sprite file has been added to the proper location.
The only Extra.css content i have, is what is in the countries.txt file. And I checked the flag sprite file, and it's at the right location. I guess this is happening because of that missing dot between flag.flag in Value Display HTML.

Unable to save the changes due to a annoying "The server did not respond in time. Please try again." error, so I respond later when I get around to check this. I can't get past this error right now.
 

John L.

Well-known member
#6
The only Extra.css content i have, is what is in the countries.txt file. And I checked the flag sprite file, and it's at the right location. I guess this is happening because of that missing dot between flag.flag in Value Display HTML.

Unable to save the changes due to a annoying "The server did not respond in time. Please try again." error, so I respond later when I get around to check this. I can't get past this error right now.
That doesn't seem right:

Login to the Admin CP and within the admin search find "Extra.css". Paste the contents of flags.css into that template and save.
According to my instructions the Extra.css file should contain whats in flags.css, not countries.txt. That code is meant for phpMyAdmin.
 

John L.

Well-known member
#8
View attachment 20446
The flag does not appear properly. Everything is done according to the guide.

EDIT:
Code:
<img src="/styles/default/xenforo/clear.png" class="flag.flag-{$choice}" alt="{$value}" /> {$value}
There was a dot missing between flag.flag , but that didn't solve the problem.
That dot is not necessary. Remove the dot so it looks like my original instructions. Please post the contents of your Extra.css file and also the link to your forum.
 

Andrej

Well-known member
#11
Okay, this seems to be resolved now. I forgot that /f/ is missing from .flag{background:url(/f/styles/default/xenforo/flags/flags.png since this is where the xenforo installed at.

I have learned that I should not be up at night... Apologize for my stupidity.
 

John L.

Well-known member
#12
Okay, this seems to be resolved now. I forgot that /f/ is missing from .flag{background:url(/f/styles/default/xenforo/flags/flags.png since this is where the xenforo installed at.

I have learned that I should not be up at night... Apologize for my stupidity.
:) No worries. I have done things many times that leave me scratching my head.
 

Andrej

Well-known member
#19
Was anyone with 1.1.1 able to get this to work? For whatever reason the flags don't display correctly for me.

View attachment 23210
Couldn't get it working either. Uninstalled everything, but now the flag is stuck on my postbit :(
Did you change the
Code:
.flag{background:url(/styles/default/xenforo/flags/flags.png) no-repeat;height:11px;width:16px;}
to the directory the flags sprite is in at your site?