Thêm icon vào bảng đăng ký 2013-06-27

FontAwesome!

  1. H.B.T_Binh
    fontawesomeregister

    Công dụng :
    Thêm icon vào khung đăng ký

    Cách làm :
    1. Tải file đính kèm về và up lên host của bạn. ( ai làm theo http://vxf.vn/resources/295/ , http://vxf.vn/resources/293/ thì có thể bỏ qua bước này)

    2. Vào AdminCP > Styles > Templates > PAGE_CONTAINER thêm đoạn sau vào bất kỳ nơi đâu trong thẻ <head>:
    Mã:
    <link href="http://domain.com/font-awesome/css/font-awesome.css" rel="stylesheet">
    3. Vào AdminCP > Styles > Templates > register_form thay toàn bộ code trong đó bằng code sau :
    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>
    antv thích bài này.
comments powered by Disqus