FontAwesome Icons trong Registration Form

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,981
Được Like
11,328
FontAwesome Icons trong Registration Form

Thêm biểu tượng FontAwesome trong Registration Form.

1. Trước tiên vào template PAGE_CONTAINER và thêm vào sau <head> đoạn code sau:
Mã:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

2. Vào template register_form và thay thế tất cả mọi thứ với:
Mã:
<xen:title>{xen:phrase sign_up}</xen:title>

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"
    data-fieldValidatorUrl="{xen:link register/validate-field}"
    data-normalSubmit="1"
>
    <xen:if is="{$errors}">
        <div class="errorPanel">
            <h3 class="errorHeading">{xen:phrase please_correct_following_errors}:</h3>
            <div class="baseHtml errors">
                <ol>
                <xen:foreach loop="$errors" value="$error">
                    <li>{xen:raw $error}</li>
                </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>
    <dl class="ctrlUnit">
        <dt><label for="ctrl_username">{xen:phrase name}:</label></dt>
        <dd>
            <i class="icon-user icon-large icon-fixed-width" style="padding-right:7px;"></i><input type="text" name="username" value="{$fields.username}" class="textCtrl" id="ctrl_username" autofocus="true" autocomplete="off" />
            <p class="explain">{xen:phrase this_is_name_that_will_be_shown_with_your_messages}</p>
        </dd>
    <dl class="ctrlUnit">
    </dl>
        <dt><label for="ctrl_email">{xen:phrase email}:</label></dt>
        <dd><i class="icon-envelope-alt icon-large icon-fixed-width" style="padding-right:7px;"></i><input type="email" name="email" value="{$fields.email}" dir="ltr" class="textCtrl" id="ctrl_email" /></dd>
    </dl>
    <fieldset>
        <dl class="ctrlUnit">
            <dt><label for="ctrl_password">{xen:phrase password}:</label></dt>
            <dd><i class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></i><input type="password" name="password" class="textCtrl OptOut" id="ctrl_password" autocomplete="off" /></dd>
        </dl>
        <dl class="ctrlUnit">
            <dt><label for="ctrl_confirm_password">{xen:phrase confirm_password}:</label></dt>
            <dd>
                <i class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></i><input type="password" name="password_confirm" class="textCtrl OptOut" id="ctrl_confirm_password" />
                <p class="explain">{xen:phrase enter_your_password_in_first_box_and_confirm_it_in_second}</p>
            </dd>
        </dl>
    </fieldset>

    <dl class="ctrlUnit OptOut">
        <dt>{xen:phrase date_of_birth}:</dt>
        <dd>
            <i class="icon-calendar icon-large icon-fixed-width" style="padding-right:7px;"></i><xen:include template="helper_birthday_input">
                <xen:map from="$fields" to="$user" />
            </xen:include>
            <xen:if is="{$dobRequired}"><p class="explain">{xen:phrase your_date_of_birth_is_required}</p></xen:if>
        </dd>
    </dl>

    <dl class="ctrlUnit">
        <dt>{xen:phrase gender}:</dt>
        <dd>
            <ul>
                <li><label for="ctrl_gender_male"><input type="radio" name="gender" value="male" id="ctrl_gender_male" {xen:checked "{$fields.gender} == 'male'"} /> {xen:phrase male}</label></li>
                <li><label for="ctrl_gender_female"><input type="radio" name="gender" value="female" id="ctrl_gender_female" {xen:checked "{$fields.gender} == 'female'"} /> {xen:phrase female}</label></li>
                <li><label for="ctrl_gender_"><input type="radio" name="gender" value="" id="ctrl_gender_" {xen:checked "!{$fields.gender}"} /> ({xen:phrase unspecified})</label></li>
            </ul>
        </dd>
    </dl>

    <xen:include template="custom_fields_edit" />
    <dl class="ctrlUnit">
        <dt><label for="ctrl_timezone">{xen:phrase time_zone}:</label></dt>
        <dd><i class="icon-time icon-large icon-fixed-width" style="padding-right:7px;"></i>
            <select name="timezone" class="textCtrl {xen:if $fields.timezoneAuto, 'AutoTimeZone'} OptOut" id="ctrl_timezone">
                <xen:foreach loop="$timeZones" key="$identifier" value="$name">
                    <option value="{$identifier}" {xen:selected "{$identifier} == {$fields.timezone}"}>{$name}</option>
                </xen:foreach>
            </select>
        </dd>
    </dl>
    <xen:if hascontent="true">
        <fieldset>
            <xen:contentcheck>
                <xen:include template="helper_captcha_unit" />
            </xen:contentcheck>
        </fieldset>
    </xen:if>
    <dl class="ctrlUnit submitUnit">
        <dt></dt>
        <dd>
            <xen:set var="$timerHtml"><xen:if is="{$xenOptions.registrationTimer}">
                <span id="RegTimer">({xen:phrase please_wait_x_seconds, "seconds=<span>{$xenOptions.registrationTimer}</span>"})</span>
            </xen:if></xen:set>
            <xen:if is="{$tosUrl}">
                <ul>
                    <li>
                        {xen:phrase i_agree_to_terms_and_rules, 'checkbox=<input type="checkbox" name="agree" value="1" id="ctrl_agree" class="Disabler" />', 'terms_attributes=href="{$tosUrl}" target="_blank"'}
                        <ul id="ctrl_agree_Disabler">
                            <li><input type="submit" value="{xen:phrase sign_up}" accesskey="s" class="button primary" id="SubmitButton" /> {xen:raw $timerHtml}</li>
                        </ul>             
                    </li>
                </ul>
            <xen:else />
                <input type="submit" value="{xen:phrase sign_up}" accesskey="s" class="button primary" id="SubmitButton" /> {xen:raw $timerHtml}
            </xen:if>
        </dd>
    </dl>
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    <input type="hidden" name="reg_key" value="{$regKey}" />
</form>
<xen:if is="{$xenOptions.registrationTimer}">
    <script>
    (function($) {
        $(function() {
            var rt = $('#RegTimer'), s = rt.find('span'), t = parseInt(s.text(), 10),
                sub = $('#SubmitButton'),
                i = setInterval(function() {
                    t--;
                    if (t <= 0) {
                        rt.hide();
                        clearInterval(i);
                    } else {
                        s.text(t);
                    }
                }, 1000);
                var f = function(e) {
                    if (t > 0) {
                        e.preventDefault();
                    }
                };
                sub.click(f);
                sub.closest('form').submit(f);
        });
    })(jQuery);
    </script>
</xen:if>

fontawesomeregister.png

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom