Добавляем иконки в форму регистрации

Hope · 17 Июн 2013

Пользователь Hope разместил новый ресурс:

Добавляем иконки в форму регистрации (версия 2013-06-17) - Иконки в форму регистрации.

Код:
Посмотреть вложение 2808

В шаблоне PAGE_CONTAINER находим:

Код:

<head>

И ниже добавляем:

Код:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">

Всё содержимое шаблона register_form заменяем на:

Код:

<xen:title>{xen:phrase sign_up}</xen:title> <form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" data-fieldValidatorUrl="{xen:link...

Узнать больше об этом ресурсе...

Волчья писька · 31 Июл 2013

В шаблоне Flexile бнаружил такую проблему, что при регистрации нельзя указать "Имя", а точнее нельзя нажать в поле "Имя".

Hope · 31 Июл 2013

А на других стилях нормально работает?

Волчья писька · 31 Июл 2013

Hope написал(а):
А на других стилях нормально работает?

Лично у меня и на дефолтном не работает.
Из-за этой фигнямолии я столько народу потерял:(

Homer Jay Simpson · 8 Июл 2014

как исправить отображение иконок?они над строками отображаются

Hope · 8 Июл 2014

Wings1klg написал(а):
как исправить отображение иконок?

Делать всё по инструкции. :)

Improvs · 1 Сен 2014

Wings1klg написал(а):
как исправить отображение иконок?они над строками отображаютсяПосмотреть вложение 19231

Hope написал(а):
Делать всё по инструкции. :-)

Думаю он сделал все по инструкции, как и я. Проблема 1 в 1

Hope · 1 Сен 2014

Там всё устарело уже :)

xcrazyx · 29 Сен 2014

okay..

Dmitry · 23 Ноя 2014

чуть исправил, XenForo 1.4.3

Код:

<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 limited">
        <dt><label for="ctrl_username">{xen:phrase name}:</label></dt>
        <dd>
            <input type="text" name="username" value="" class="textCtrl" id="ctrl_username" autocomplete="off" />
            <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
        </dd>
    </dl>

    <dl class="ctrlUnit">
        <dt><label for="ctrl_{$fieldMap.username}">{xen:phrase name}:</label><i class="icon-user icon-large icon-fixed-width" style="padding-right:7px;"></i></dt>
        <dd>
            <input type="text" name="{$fieldMap.username}" value="{$fields.username}" class="textCtrl" id="ctrl_{$fieldMap.username}" autofocus="true" autocomplete="off" />
            <p class="explain">{xen:phrase this_is_name_that_will_be_shown_with_your_messages}</p>
        </dd>
    </dl>

    <xen:if is="mt_rand(0, 2) == 1">
    <dl class="ctrlUnit limited">
        <dt><label for="ctrl_{$fieldMap.email_hp}">{xen:phrase email}:</label></dt>
        <dd>
            <input type="email" name="{$fieldMap.email_hp}" value="" dir="ltr" class="textCtrl" autocomplete="off" id="ctrl_{$fieldMap.email_hp}" />
            <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
        </dd>
    </dl>
    </xen:if>

    <dl class="ctrlUnit">
        <dt><label for="ctrl_{$fieldMap.email}">{xen:phrase email}:&nbsp;&nbsp;</label><i class="icon-envelope-alt icon-large icon-fixed-width" style="padding-right:7px;"></i></dt>
        <dd>
            <input type="email" name="{$fieldMap.email}" value="{$fields.email}" dir="ltr" class="textCtrl" id="ctrl_{$fieldMap.email}" />
        </dd>
    </dl>

    <fieldset>
        <xen:if is="mt_rand(0, 2) == 1">
        <dl class="ctrlUnit limited">
            <dt><label for="ctrl_password">{xen:phrase password}:</label></dt>
            <dd>
                <input type="password" name="password" class="textCtrl OptOut" id="ctrl_password" autocomplete="off" />
                <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
            </dd>
        </dl>
        </xen:if>

        <dl class="ctrlUnit">
            <dt><label for="ctrl_{$fieldMap.password}">{xen:phrase password}:</label><i class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></i></dt>
            <dd><input type="password" name="{$fieldMap.password}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password}" autocomplete="off" /></dd>
        </dl>

        <dl class="ctrlUnit">
            <dt><label for="ctrl_{$fieldMap.password_confirm}">{xen:phrase confirm_password}:</label><i class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></i></dt>
            <dd>
                <input type="password" name="{$fieldMap.password_confirm}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password_confirm}" />
                <p class="explain">{xen:phrase enter_your_password_in_first_box_and_confirm_it_in_second}</p>
            </dd>
        </dl>

        <xen:if is="mt_rand(0, 2) == 1">
        <dl class="ctrlUnit limited">
            <dt><label for="ctrl_{$fieldMap.password_confirm_hp}">{xen:phrase confirm_password}:</label></dt>
            <dd>
                <input type="password" name="{$fieldMap.password_confirm_hp}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password_confirm_hp}" />
                <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
            </dd>
        </dl>
        </xen:if>
    </fieldset>
      
    <dl class="ctrlUnit">
        <dt>{xen:phrase gender}:</dt>
        <dd>
            <ul>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="male" {xen:checked "{$fields.gender} == 'male'"} /> {xen:phrase male}</label></li>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="female" {xen:checked "{$fields.gender} == 'female'"} /> {xen:phrase female}</label></li>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="" {xen:checked "!{$fields.gender}"} /> ({xen:phrase unspecified})</label></li>
            </ul>
        </dd>
    </dl>
<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>
    <xen:if is="{$xenOptions.registrationSetup.requireLocation}">
        <dl class="ctrlUnit">
            <dt>
                {xen:phrase location}:
                <dfn>{xen:phrase required}</dfn>
            </dt>
            <dd>
                <input type="text" name="location" value="{$fields.location}" class="textCtrl" />
            </dd>
        </dl>
    </xen:if>
  
    <xen:set var="$honeyPotPosition" value="{xen:helper rand, 0, 2}" />
    <xen:if is="{$customFieldHoneyPot} && {$honeyPotPosition} == 1">
    <xen:include template="custom_field_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
        <xen:set var="$field" value="{$customFieldHoneyPot}" />
        <xen:set var="$customFieldExtraClass" value="limited" />
    </xen:include>
    </xen:if>
  
    <xen:include template="custom_fields_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
    </xen:include>

    <xen:if is="{$customFieldHoneyPot} && {$honeyPotPosition} == 2">
    <xen:include template="custom_field_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
        <xen:set var="$field" value="{$customFieldHoneyPot}" />
        <xen:set var="$customFieldExtraClass" value="limited" />
    </xen:include>
    </xen:if>

    <dl class="ctrlUnit" style="display: none">
        <dt><label for="ctrl_{$fieldMap.timezone}">{xen:phrase time_zone}:</label><i class="icon-time icon-large icon-fixed-width" style="padding-right:7px;"></i></dt>
        <dd>
            <select name="{$fieldMap.timezone}" class="textCtrl {xen:if $fields.timezoneAuto, 'AutoTimeZone'} OptOut" id="ctrl_{$fieldMap.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>
                        <div class="text">{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"'}</div>
                        <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>

xsacha · 30 Апр 2015

У меня на XF 1.4.6 с версией 4.3.0 нечего не появилось

Mirovinger · 30 Апр 2015

Вы в каждой теме, это писать будете.
Да, мануал устарел, есть желание, но пока нет возможности подправить под новые версии FA.

xsacha · 30 Апр 2015

А вы для себе создаете посты или для людей, ну так вот думаю если люди будут знать, то время тратить не будут на проверку работы.

Mirovinger · 30 Апр 2015

Будьте добры, внимательно читайте описание ресурса и метод подключения FA, а так же версию.
И в описании, указанно, что нужно FA3.1.0.

xsacha · 30 Апр 2015

Верно, но я же не просто так указал версию с которой пробовал, не подключать же их для каждого блока по 10 разных версий. Внимательние читайте сообщения и версии указанные.

hasvanbinsun · 30 Апр 2015

У меня всё прекрасно работает на FA 3.2.1 с кодом дмитрия.

xsacha написал(а):
Верно, но я же не просто так указал версию с которой пробовал, не подключать же их для каждого блока по 10 разных версий

Одна версия на весь форум должна быть

Mirovinger · 30 Апр 2015

Всё из-за того, что с версии 4.0.0, изменился синтаксис для вывода иконок, ранее.

<i class="icon-book"></i>

Теперь.

<i class="fa fa-book"></i>

xsacha · 30 Апр 2015

Вот она как раз у меня FA 4.3.0

Короче что у меня получилось, после подсказок....

Код:

<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" style="padding-right: 10px;">{xen:phrase name}:</label></dt>
        <dd>
            <i class="fa fa-user fa fa-large fa fa-fixed-width" style="padding-right:9px; margin-left: -20px;"></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" style="padding-right: 10px;">{xen:phrase email}:</label></dt>
        <dd><i class="fa fa-envelope fa fa-large fa fa-fixed-width" style="padding-right:7px; margin-left: -20px;"></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" style="padding-right: 10px;">{xen:phrase password}:</label></dt>
            <dd><i class="fa fa-lock fa fa-large fa fa-fixed-width" style="padding-right:11px; margin-left: -20px;"></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" style="padding-right: 10px;">{xen:phrase confirm_password}:</label></dt>
            <dd>
                <i class="fa fa-lock fa fa-large fa fa-fixed-width" style="padding-right:11px; margin-left: -20px;"></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 style="padding-right: 25px;">{xen:phrase date_of_birth}:</dt>
        <dd>
            <i class="fa fa-calendar fa fa-large fa fa-fixed-width" style="padding-right:7px; margin-left: -20px;"></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="fa fa-time fa fa-large fa fa-fixed-width" style="padding-right:7px; margin-left: -20px;"></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>

Проверено на XF 1.4.6, работал за спасибо :beach:

Mirovinger · 30 Апр 2015

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

xsacha · 30 Апр 2015

Во я вторую залепил, нашел ее в css

Добавляем иконки в форму регистрации

Hope

Волчья писька

Hope

Волчья писька

Homer Jay Simpson

Hope

Improvs

Hope

xcrazyx

Dmitry

xsacha

Mirovinger

xsacha

Mirovinger

xsacha

hasvanbinsun

Mirovinger

xsacha

Mirovinger

xsacha

Похожие темы

Мы ценим вашу конфиденциальность