FontAwesome Icons trong Registration Form

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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​
 
Back
Top