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

Опубликовано:
Блог: Блог Gorca
Рубрика: Bootstrap3
Редактировалось: 3 раза — последний сегодня в 00:21
Просмотров: 2230
Настроение: настроение всем желает -Ассаламу Алейкум
Играет: INNA - NO LIMIT
+1
Голосов: 1
Bootstrap, это популярный фраемворк, используемый на многих сайтах, быть может вы его не раз встречали в просторах интернета. Наконец то пришла очередь InstantCMS ощутить на себе все прелести bootstrap`a. В этом блоге я буду показывать как можно изменить внешние виды компонентов и модулей, css стили для них конечно мы возьмем у Bootstrap`a. Начнем мы с модуля авторизации.

За вывод формы авторизации отвечает файл mod_auth.tpl, расположен он в папке модулей. В дефолтном шаблоне он имеет вот такой вот код-
Код PHP:
  1. <form action="/login" method="post" name="authform" style="margin:0px" target="_self" id="authform">
  2. <table class="authtable" width="100%" border="0" cellspacing="0" cellpadding="2">
  3. <tr>
  4. <td width="60">{$LANG.AUTH_LOGIN}:</td>
  5. <td width=""><input name="login" type="text" id="login" /></td>
  6. </tr>
  7. <tr>
  8. <td height="30" valign="top">{$LANG.AUTH_PASS}:</td>
  9. <td valign="top"><input name="pass" type="password" id="pass" /></td>
  10. </tr>
  11. {if $cfg.autolog}
  12. <tr>
  13. <td valign="top">&nbsp;</td>
  14. <td valign="top" align="right">
  15. <table border="0" cellspacing="0" cellpadding="3">
  16. <tr>
  17. <td width="20">
  18. <input name="remember" type="checkbox" id="remember" value="1" checked="checked" style="margin-right:0px"/>
  19. </td>
  20. <td>
  21. <label for="remember"> {$LANG.AUTH_REMEMBER}</label>
  22. </td>
  23. </tr>
  24. </table>
  25. </td>
  26. </tr>
  27. {/if}
  28. <tr>
  29. <td height="27" colspan="2" align="right" valign="top">
  30. <table width="100%" border="0" cellspacing="0" cellpadding="3">
  31. <tr>
  32. <td width="87%">
  33. {if $cfg.passrem}
  34. <a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
  35. {/if}
  36. </td>
  37. <td width="13%" align="right"><input id="login_btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" /></td>
  38. </tr>
  39. </table>
  40. </td>
  41. </tr>
  42. </table>
  43. </form>
В форме имеется таблица, которая не совсем полезна для структуры сайта, браузер более быстро работает с div блоками чем с таблицами.
И так у нас имеется код, мы должны удалить все лишнее и если необходимо добавить что то свое. Что должно у нас получиться можно посмотреть здесь http://bootstrap.karmaklot.ru/, нажмите на ссылку ВХОД (вверху справа).

В первую очередь мы избавляемся от кода таблицы и у нас останется лишь это
Код PHP:
  1. <form action="/login" method="post" name="authform" style="margin:0px" target="_self" id="authform">
  2. {$LANG.AUTH_LOGIN}:
  3. <input name="login" type="text" id="login" />
  4.  
  5. {$LANG.AUTH_PASS}:
  6. <input name="pass" type="password" id="pass" />
  7.  
  8. {if $cfg.autolog}
  9. <input name="remember" type="checkbox" id="remember" value="1" checked="checked" style="margin-right:0px"/>
  10. <label for="remember"> {$LANG.AUTH_REMEMBER}</label>
  11. {/if}
  12. {if $cfg.passrem}
  13. <a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
  14. {/if}
  15. <input id="login_btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" />
  16. </form>
Теперь идем читать документацию бутстрапа bootstrap/forms. В документации имеются несколько примеров кода, но нам нужна Prepended and appended inputs, прокрутите страницу вниз и увидите ее. На примере видно что форма ввода разделена на две части- одну мы используем для текста а другую для иконки.
Как нам переделать код формы авторизации в такую же? очень просто.
Код PHP:
  1. {$LANG.AUTH_LOGIN}:
  2. <input name="login" type="text" id="login" />
{$LANG.AUTH_LOGIN} у нас это слово - Логин а <input name="login" type="text" id="login" /> поле в которую мы должны ввести наш логин.
Теперь все это грамотно расставляем в следующий код:
Код PHP:
  1. <div class="input-prepend">
  2. <span class="add-on">@</span>
  3. <input class="span2" id="prependedInput" type="text" placeholder="Username">
  4. </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:
  1. <div class="input-prepend">
  2. <span class="add-on"><i class="icon-user"></i></span>
  3. <input name="login" type="text" class="input-block-level" placeholder="{$LANG.AUTH_LOGIN}">
  4. <input class="span2" id="prependedInput" type="text" placeholder="Username">
  5. </div>
Таким же образом поступаем с остальным кодом, в итоге нас получится
Код PHP:
  1. <form action="/login" method="post" name="authform" target="_self" id="authform">
  2. <div class="input-prepend">
  3. <span class="add-on"><i class="icon-user"></i></span>
  4. <input name="login" type="text" class="input-block-level" placeholder="{$LANG.AUTH_LOGIN}">
  5. <input class="span2" id="prependedInput" type="text" placeholder="Username">
  6. </div>
  7.  
  8. <div class="input-prepend">
  9. <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}">
  10. </div>
  11. {if $cfg.autolog}
  12. <label for="remember" class="checkbox">
  13. <input name="remember" type="checkbox" id="remember" value="1" checked="checked">{$LANG.AUTH_REMEMBER}
  14. </label>
  15. {/if}
  16. {if $cfg.passrem}
  17. <a href="/passremind.html">{$LANG.AUTH_FORGOT}</a>
  18. {/if}
  19. <input class="btn" type="submit" name="Submit" value="{$LANG.AUTH_ENTER}" />
  20. </form>
Комментарии (2)
Letsgo #
: 0
Отлично изложил!
VopisUVD #
: 0
Все понятно, молодец
На концовку только чего-то не хватает...

Голосуем

Самый нужный компонент