FontAwesome Icons trong Registration Form

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,142
Được Like
12,745
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​
 

Top Bottom