Переделка под bootstrap модуля Авторизация-mod_auth.tpl

Gorec

Опубликовано: 2013-05-08T21:51:23+04:00

Блог: Блог Gorca

Рубрика: Bootstrap3

Редактировалось: 3 раза — последний 6 июня 2023

Просмотров: 4203

Настроение: настроение всем желает -Ассаламу Алейкум

Играет: INNA - NO LIMIT

+1↑

Голосов: 1

Bootstrap, это популярный фраемворк, используемый на многих сайтах, быть может вы его не раз встречали в просторах интернета. Наконец то пришла очередь InstantCMS ощутить на себе все прелести bootstrap`a. В этом блоге я буду показывать как можно изменить внешние виды компонентов и модулей, css стили для них конечно мы возьмем у Bootstrap`a. Начнем мы с модуля авторизации.

За вывод формы авторизации отвечает файл mod_auth.tpl, расположен он в папке модулей. В дефолтном шаблоне он имеет вот такой вот код-

Код PHP:

<form action="/login" method="post" name="authform" style="margin:0px" target="_self" id="authform">
    <table class="authtable" width="100%" border="0" cellspacing="0" cellpadding="2">
        <tr>
            <td width="60">{$LANG.AUTH_LOGIN}:</td>
            <td width=""><input name="login" type="text" id="login" /></td>
        </tr>
        <tr>
            <td height="30" valign="top">{$LANG.AUTH_PASS}:</td>
            <td valign="top"><input name="pass" type="password" id="pass" /></td>
        </tr>
        {if $cfg.autolog}
            <tr>
                <td valign="top">&nbsp;</td>
                <td valign="top" align="right">
                    <table border="0" cellspacing="0" cellpadding="3">
                    <tr>
                        <td width="20">
                            <input name="remember" type="checkbox" id="remember" value="1" checked="checked"  style="margin-right:0px"/> 
                        </td>
                        <td>
                            <label for="remember"> {$LANG.AUTH_REMEMBER}</label>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
        {/if}
        <tr>
            <td height="27" colspan="2" align="right" valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="3">
                    <tr>
                        <td width="87%">                            
                            {if $cfg.passrem}
                                <a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
                            {/if}
                        </td>
                        <td width="13%" align="right"><input id="login_btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" /></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

В форме имеется таблица, которая не совсем полезна для структуры сайта, браузер более быстро работает с div блоками чем с таблицами.
И так у нас имеется код, мы должны удалить все лишнее и если необходимо добавить что то свое. Что должно у нас получиться можно посмотреть здесь http://bootstrap.karmaklot.ru/, нажмите на ссылку ВХОД (вверху справа).

В первую очередь мы избавляемся от кода таблицы и у нас останется лишь это

Код PHP:

<form action="/login" method="post" name="authform" style="margin:0px" target="_self" id="authform">
{$LANG.AUTH_LOGIN}:
<input name="login" type="text" id="login" />
 
{$LANG.AUTH_PASS}:
<input name="pass" type="password" id="pass" />
 
{if $cfg.autolog}
    <input name="remember" type="checkbox" id="remember" value="1" checked="checked"  style="margin-right:0px"/> 
    <label for="remember"> {$LANG.AUTH_REMEMBER}</label>        
{/if}
                            {if $cfg.passrem}
                                <a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
                            {/if}                     
<input id="login_btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" />
</form>

Теперь идем читать документацию бутстрапа bootstrap/forms. В документации имеются несколько примеров кода, но нам нужна Prepended and appended inputs, прокрутите страницу вниз и увидите ее. На примере видно что форма ввода разделена на две части- одну мы используем для текста а другую для иконки.
Как нам переделать код формы авторизации в такую же? очень просто.

Код PHP:

{$LANG.AUTH_LOGIN}:
<input name="login" type="text" id="login" />

{$LANG.AUTH_LOGIN} у нас это слово - Логин а <input name="login" type="text" id="login" /> поле в которую мы должны ввести наш логин.
Теперь все это грамотно расставляем в следующий код:

Код PHP:

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>

<span class="add-on">@</span> Вместо @ мы ставим сюда иконку и получится у нас
<span class="add-on"><i class="icon-user"></i></span>
В следующий код из примера бутстрапа
<input class="span2" id="prependedInput" type="text" placeholder="Username">
мы добавляем из нашей формы свойство name="login", это важно иначе наша форма будет работать не правильно, и вместо placeholder="Username" мы ставим placeholder="{$LANG.AUTH_LOGIN}" и получится у нас

Код PHP:

<div class="input-prepend">
  <span class="add-on"><i class="icon-user"></i></span>
   <input name="login" type="text" class="input-block-level" placeholder="{$LANG.AUTH_LOGIN}">
   <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>

Таким же образом поступаем с остальным кодом, в итоге нас получится

Код PHP:

<form action="/login" method="post" name="authform" target="_self" id="authform">
	<div class="input-prepend">
        <span class="add-on"><i class="icon-user"></i></span>
		<input name="login" type="text" class="input-block-level" placeholder="{$LANG.AUTH_LOGIN}">
		<input class="span2" id="prependedInput" type="text" placeholder="Username">
    </div>	
 
	<div class="input-prepend">
        <span class="add-on"><i class="icon-cog"></i></span><input name="pass" type="password" id="pass" class="input-block-level" placeholder="{$LANG.AUTH_PASS}">
    </div>
	{if $cfg.autolog}
	<label for="remember" class="checkbox">
        <input name="remember" type="checkbox" id="remember" value="1" checked="checked">{$LANG.AUTH_REMEMBER}       
	</label>
	{/if}	
	{if $cfg.passrem}
		<a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
	{/if}
	<input class="btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" />
</form>