- 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:
2. Vào template register_form và thay thế tất cả mọi thứ với:
Chúc các bạn thành công.
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>
Nguồn: xenforo.com
Bài viết liên quan
Được quan tâm
Bài viết mới