Сегодня я поведаю вам как из стандартных полей авторизации сделать чтонибудь поновее и по прриятнее для глаза:
из такого (стандартного), например в такое:
Дело скурпулёзное и может возникнуть очень много вопросов, но постораюсь объяснить как можно подробнее... Итак приступим.
Весь этот набор элементов (поля ввода, кнопка входа, чек бокс, и прочие кнопки регистрации и помощи) находятся в шаблоне "header" после кода:
<script type="text/javascript" src="/clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>
исходного кода у меня не осталось, т.к. много перебирал, изначально я делал всё в длинну, но заметил что например при размещении рядом с браузером другого окна, все эти строчки наезжают на логотип, поэтому решил переделать на такой более компактный вид, чтобы нчего не заезжало друг на друга.
Так вот, я сделал табличку вида:
<table>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Далее заполняем эту таблицу элементами:
<table>
<tr>
<td rowspan="2"><script src="http://s1.loginza.ru/js/widget.js" type="text/javascript"></script>
<a href="https://loginza.ru/api/widget?token_url=http://www.uazfan.ru/vb_loginza.php&provider=vkontakte" class="loginza">
<img src="http://www.uazfan.ru/siteuazfan/log.png"></a></td>
<td><input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" /></td>
<td><input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /></td>
<td><vb:if condition="$show['registerbutton']">
<li><a class="my321" href="/register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if></td>
</tr>
<tr>
<td><input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" /></td>
<td><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label></td>
<td><a class="my321" rel="help" href="/faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></td>
</tr>
</table>
Вот эта основная готовая заготовка с элементами, далее остаётся перебирать весь CSS нашей булочки, в основном придётся работать с шаблоном "vbulletin-chrome.css", чтобы не запутаться, открываем гугл хром, либо оперу, и исследуем все элементы, смотрим какие параметры за что отвечают и правим, но не забываем оставлять комментарии чтобы потом не запутаться:
насчёт фонового изображения я не парился, сделал скрин шот и в фотошопе пририсовал кнопочки:
и поставил эту картинку параметром фонового изображения:
.toplinks .logindetails{
background: url('images/but.png') no-repeat;
}
Тру кодеры наверно будут смеятся надо мной, типа делал табличку, можно было задать для каждой свой фон и прочее прочее, или вообщесделать всё на дивах. Если честно я не люблю долго сидеть пыхтеть, подгонять эти дивы, вот простой способ реализации, самое главное ещё раз повторюсь, что необходимо коментировать всё что исправляете в коде, иначе в будущем будете долго вспоминать как чё делали.. Ну и в итоге у нас получается вот такая шапка:
Нарисовать и расположить элементы можно как угодно, спасибо за внимание, все вопросы в комментарии.