Country Flags for Xenforo 1

VIPR

Founder
Administrator
Messages
289
Reaction score
143
Points
93
Best answers
0
PSN
VIP-Racing
Country
Australia
Easily add country flags to your users profile and messages with small SQL mod.
xf1flags.jpg

This tutorial will help you add a "Country" field to your forum so your users can easily select their country of origin and have a flag show in their profile and messages.

** BACK UP YOUR SQL DATABASE NOW **

Step 1: Download resource and upload the files to the root of your forum installation.
Step 2: Login to your Admin CP and find the "Extra.css" template. Add the following code to the bottom of this template:
Code:
/* START FLAGS */
.flag{background:url(@imagePath/xenforo/flags/flags.png) no-repeat;height:11px;width:16px;}
.flag.flag-ad{background-position:-16px 0;}
.flag.flag-ae{background-position:-32px 0;}
.flag.flag-af{background-position:-48px 0;}
.flag.flag-ag{background-position:-64px 0;}
.flag.flag-ai{background-position:-80px 0;}
.flag.flag-al{background-position:-96px 0;}
.flag.flag-am{background-position:-112px 0;}
.flag.flag-an{background-position:-128px 0;}
.flag.flag-ao{background-position:-144px 0;}
.flag.flag-ar{background-position:-160px 0;}
.flag.flag-as{background-position:-176px 0;}
.flag.flag-at{background-position:-192px 0;}
.flag.flag-au{background-position:-208px 0;}
.flag.flag-aw{background-position:-224px 0;}
.flag.flag-az{background-position:-240px 0;}
.flag.flag-ba{background-position:0 -11px;}
.flag.flag-bb{background-position:-16px -11px;}
.flag.flag-bd{background-position:-32px -11px;}
.flag.flag-be{background-position:-48px -11px;}
.flag.flag-bf{background-position:-64px -11px;}
.flag.flag-bg{background-position:-80px -11px;}
.flag.flag-bh{background-position:-96px -11px;}
.flag.flag-bi{background-position:-112px -11px;}
.flag.flag-bj{background-position:-128px -11px;}
.flag.flag-bm{background-position:-144px -11px;}
.flag.flag-bn{background-position:-160px -11px;}
.flag.flag-bo{background-position:-176px -11px;}
.flag.flag-br{background-position:-192px -11px;}
.flag.flag-bs{background-position:-208px -11px;}
.flag.flag-bt{background-position:-224px -11px;}
.flag.flag-bv{background-position:-240px -11px;}
.flag.flag-bw{background-position:0 -22px;}
.flag.flag-by{background-position:-16px -22px;}
.flag.flag-bz{background-position:-32px -22px;}
.flag.flag-ca{background-position:-48px -22px;}
.flag.flag-catalonia{background-position:-64px -22px;}
.flag.flag-cd{background-position:-80px -22px;}
.flag.flag-cf{background-position:-96px -22px;}
.flag.flag-cg{background-position:-112px -22px;}
.flag.flag-ch{background-position:-128px -22px;}
.flag.flag-ci{background-position:-144px -22px;}
.flag.flag-ck{background-position:-160px -22px;}
.flag.flag-cl{background-position:-176px -22px;}
.flag.flag-cm{background-position:-192px -22px;}
.flag.flag-cn{background-position:-208px -22px;}
.flag.flag-co{background-position:-224px -22px;}
.flag.flag-cr{background-position:-240px -22px;}
.flag.flag-cu{background-position:0 -33px;}
.flag.flag-cv{background-position:-16px -33px;}
.flag.flag-cy{background-position:-32px -33px;}
.flag.flag-cz{background-position:-48px -33px;}
.flag.flag-de{background-position:-64px -33px;}
.flag.flag-dj{background-position:-80px -33px;}
.flag.flag-dk{background-position:-96px -33px;}
.flag.flag-dm{background-position:-112px -33px;}
.flag.flag-do{background-position:-128px -33px;}
.flag.flag-dz{background-position:-144px -33px;}
.flag.flag-ec{background-position:-160px -33px;}
.flag.flag-ee{background-position:-176px -33px;}
.flag.flag-eg{background-position:-192px -33px;}
.flag.flag-eh{background-position:-208px -33px;}
.flag.flag-england{background-position:-224px -33px;}
.flag.flag-er{background-position:-240px -33px;}
.flag.flag-es{background-position:0 -44px;}
.flag.flag-et{background-position:-16px -44px;}
.flag.flag-eu{background-position:-32px -44px;}
.flag.flag-fi{background-position:-48px -44px;}
.flag.flag-fj{background-position:-64px -44px;}
.flag.flag-fk{background-position:-80px -44px;}
.flag.flag-fm{background-position:-96px -44px;}
.flag.flag-fo{background-position:-112px -44px;}
.flag.flag-fr{background-position:-128px -44px;}
.flag.flag-ga{background-position:-144px -44px;}
.flag.flag-gb{background-position:-160px -44px;}
.flag.flag-gd{background-position:-176px -44px;}
.flag.flag-ge{background-position:-192px -44px;}
.flag.flag-gf{background-position:-208px -44px;}
.flag.flag-gh{background-position:-224px -44px;}
.flag.flag-gi{background-position:-240px -44px;}
.flag.flag-gl{background-position:0 -55px;}
.flag.flag-gm{background-position:-16px -55px;}
.flag.flag-gn{background-position:-32px -55px;}
.flag.flag-gp{background-position:-48px -55px;}
.flag.flag-gq{background-position:-64px -55px;}
.flag.flag-gr{background-position:-80px -55px;}
.flag.flag-gs{background-position:-96px -55px;}
.flag.flag-gt{background-position:-112px -55px;}
.flag.flag-gu{background-position:-128px -55px;}
.flag.flag-gw{background-position:-144px -55px;}
.flag.flag-gy{background-position:-160px -55px;}
.flag.flag-hk{background-position:-176px -55px;}
.flag.flag-hm{background-position:-192px -55px;}
.flag.flag-hn{background-position:-208px -55px;}
.flag.flag-hr{background-position:-224px -55px;}
.flag.flag-ht{background-position:-240px -55px;}
.flag.flag-hu{background-position:0 -66px;}
.flag.flag-id{background-position:-16px -66px;}
.flag.flag-ie{background-position:-32px -66px;}
.flag.flag-il{background-position:-48px -66px;}
.flag.flag-in{background-position:-64px -66px;}
.flag.flag-io{background-position:-80px -66px;}
.flag.flag-iq{background-position:-96px -66px;}
.flag.flag-ir{background-position:-112px -66px;}
.flag.flag-is{background-position:-128px -66px;}
.flag.flag-it{background-position:-144px -66px;}
.flag.flag-jm{background-position:-160px -66px;}
.flag.flag-jo{background-position:-176px -66px;}
.flag.flag-jp{background-position:-192px -66px;}
.flag.flag-ke{background-position:-208px -66px;}
.flag.flag-kg{background-position:-224px -66px;}
.flag.flag-kh{background-position:-240px -66px;}
.flag.flag-ki{background-position:0 -77px;}
.flag.flag-km{background-position:-16px -77px;}
.flag.flag-kn{background-position:-32px -77px;}
.flag.flag-kp{background-position:-48px -77px;}
.flag.flag-kr{background-position:-64px -77px;}
.flag.flag-kw{background-position:-80px -77px;}
.flag.flag-ky{background-position:-96px -77px;}
.flag.flag-kz{background-position:-112px -77px;}
.flag.flag-la{background-position:-128px -77px;}
.flag.flag-lb{background-position:-144px -77px;}
.flag.flag-lc{background-position:-160px -77px;}
.flag.flag-li{background-position:-176px -77px;}
.flag.flag-lk{background-position:-192px -77px;}
.flag.flag-lr{background-position:-208px -77px;}
.flag.flag-ls{background-position:-224px -77px;}
.flag.flag-lt{background-position:-240px -77px;}
.flag.flag-lu{background-position:0 -88px;}
.flag.flag-lv{background-position:-16px -88px;}
.flag.flag-ly{background-position:-32px -88px;}
.flag.flag-ma{background-position:-48px -88px;}
.flag.flag-mc{background-position:-64px -88px;}
.flag.flag-md{background-position:-80px -88px;}
.flag.flag-me{background-position:-96px -88px;}
.flag.flag-mg{background-position:-112px -88px;}
.flag.flag-mh{background-position:-128px -88px;}
.flag.flag-mk{background-position:-144px -88px;}
.flag.flag-ml{background-position:-160px -88px;}
.flag.flag-mm{background-position:-176px -88px;}
.flag.flag-mn{background-position:-192px -88px;}
.flag.flag-mo{background-position:-208px -88px;}
.flag.flag-mp{background-position:-224px -88px;}
.flag.flag-mq{background-position:-240px -88px;}
.flag.flag-mr{background-position:0 -99px;}
.flag.flag-ms{background-position:-16px -99px;}
.flag.flag-mt{background-position:-32px -99px;}
.flag.flag-mu{background-position:-48px -99px;}
.flag.flag-mv{background-position:-64px -99px;}
.flag.flag-mw{background-position:-80px -99px;}
.flag.flag-mx{background-position:-96px -99px;}
.flag.flag-my{background-position:-112px -99px;}
.flag.flag-mz{background-position:-128px -99px;}
.flag.flag-na{background-position:-144px -99px;}
.flag.flag-nc{background-position:-160px -99px;}
.flag.flag-ne{background-position:-176px -99px;}
.flag.flag-nf{background-position:-192px -99px;}
.flag.flag-ng{background-position:-208px -99px;}
.flag.flag-ni{background-position:-224px -99px;}
.flag.flag-nl{background-position:-240px -99px;}
.flag.flag-no{background-position:0 -110px;}
.flag.flag-np{background-position:-16px -110px;}
.flag.flag-nr{background-position:-32px -110px;}
.flag.flag-nu{background-position:-48px -110px;}
.flag.flag-nz{background-position:-64px -110px;}
.flag.flag-om{background-position:-80px -110px;}
.flag.flag-pa{background-position:-96px -110px;}
.flag.flag-pe{background-position:-112px -110px;}
.flag.flag-pf{background-position:-128px -110px;}
.flag.flag-pg{background-position:-144px -110px;}
.flag.flag-ph{background-position:-160px -110px;}
.flag.flag-pk{background-position:-176px -110px;}
.flag.flag-pl{background-position:-192px -110px;}
.flag.flag-pm{background-position:-208px -110px;}
.flag.flag-pn{background-position:-224px -110px;}
.flag.flag-pr{background-position:-240px -110px;}
.flag.flag-ps{background-position:0 -121px;}
.flag.flag-pt{background-position:-16px -121px;}
.flag.flag-pw{background-position:-32px -121px;}
.flag.flag-py{background-position:-48px -121px;}
.flag.flag-qa{background-position:-64px -121px;}
.flag.flag-re{background-position:-80px -121px;}
.flag.flag-ro{background-position:-96px -121px;}
.flag.flag-rs{background-position:-112px -121px;}
.flag.flag-ru{background-position:-128px -121px;}
.flag.flag-rw{background-position:-144px -121px;}
.flag.flag-sa{background-position:-160px -121px;}
.flag.flag-sb{background-position:-176px -121px;}
.flag.flag-sc{background-position:-192px -121px;}
.flag.flag-scotland{background-position:-208px -121px;}
.flag.flag-sd{background-position:-224px -121px;}
.flag.flag-se{background-position:-240px -121px;}
.flag.flag-sg{background-position:0 -132px;}
.flag.flag-sh{background-position:-16px -132px;}
.flag.flag-si{background-position:-32px -132px;}
.flag.flag-sk{background-position:-48px -132px;}
.flag.flag-sl{background-position:-64px -132px;}
.flag.flag-sm{background-position:-80px -132px;}
.flag.flag-sn{background-position:-96px -132px;}
.flag.flag-so{background-position:-112px -132px;}
.flag.flag-sr{background-position:-128px -132px;}
.flag.flag-ss{background-position:-144px -132px;}
.flag.flag-st{background-position:-160px -132px;}
.flag.flag-sv{background-position:-176px -132px;}
.flag.flag-sy{background-position:-192px -132px;}
.flag.flag-sz{background-position:-208px -132px;}
.flag.flag-tc{background-position:-224px -132px;}
.flag.flag-td{background-position:-240px -132px;}
.flag.flag-tf{background-position:0 -143px;}
.flag.flag-tg{background-position:-16px -143px;}
.flag.flag-th{background-position:-32px -143px;}
.flag.flag-tj{background-position:-48px -143px;}
.flag.flag-tk{background-position:-64px -143px;}
.flag.flag-tl{background-position:-80px -143px;}
.flag.flag-tm{background-position:-96px -143px;}
.flag.flag-tn{background-position:-112px -143px;}
.flag.flag-to{background-position:-128px -143px;}
.flag.flag-tr{background-position:-144px -143px;}
.flag.flag-tt{background-position:-160px -143px;}
.flag.flag-tv{background-position:-176px -143px;}
.flag.flag-tw{background-position:-192px -143px;}
.flag.flag-tz{background-position:-208px -143px;}
.flag.flag-ua{background-position:-224px -143px;}
.flag.flag-ug{background-position:-240px -143px;}
.flag.flag-um{background-position:0 -154px;}
.flag.flag-us{background-position:-16px -154px;}
.flag.flag-uy{background-position:-32px -154px;}
.flag.flag-uz{background-position:-48px -154px;}
.flag.flag-va{background-position:-64px -154px;}
.flag.flag-vc{background-position:-80px -154px;}
.flag.flag-ve{background-position:-96px -154px;}
.flag.flag-vg{background-position:-112px -154px;}
.flag.flag-vi{background-position:-128px -154px;}
.flag.flag-vn{background-position:-144px -154px;}
.flag.flag-vu{background-position:-160px -154px;}
.flag.flag-wales{background-position:-176px -154px;}
.flag.flag-wf{background-position:-192px -154px;}
.flag.flag-ws{background-position:-208px -154px;}
.flag.flag-ye{background-position:-224px -154px;}
.flag.flag-yt{background-position:-240px -154px;}
.flag.flag-za{background-position:0 -165px;}
.flag.flag-zm{background-position:-16px -165px;}
.flag.flag-zw{background-position:-32px -165px;}
Step 3: While still logged into the Admin CP, head to "Users" > "User Custom Fields" and "Create a New Field" with the following settings:
  • Field ID: country
    Do not change this to anything else!
  • Title: Country
  • Description: Whatever you want...
  • Field Type: Drop down selection
  • Option for Field Choices: Add a test field with a value of "test" and text of "Test".
  • General Options: Set the "Value Display HTML" to:
Code:
<img src="/styles/default/xenforo/clear.png" class="flag flag-{$choice}" alt="{$value}" /> {$value}
Step 4:Login to your Control Panel and access phpMyAdmin. Find your XenForo database and locate the table called "xf_user_field". Execute the following SQL code:
Hidden content
You need to reply to this thread in order to see this content.
Step 5: Head back to your Admin CP and head to "Users" > "User Custom Fields" and edit the "Country" field. Save it one more time to ensure the changes have taken effect.

Enjoy!
 

Attachments

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Thread starter Similar threads Forum Replies Date
VIPR VIPR Multimedia 2

Similar threads

Top