[Статья]

Способ 1

Воспользуемся готовым решением с сайта _http://formalize.me/

Архив несколько переработан, убрано лишнее, поэтому качаем этот вариант (ссылка внизу 1-ого способа) и выполняем следующие инструкции

Скопировать папку forms из архива в папку clientscript вашего форума.

В шаблон headinclude вставить:

PHP Code:

<link rel="stylesheet" href="clientscript/forms/css/formalize.css" />
<script src="clientscript/forms/js/yui.formalize.min.js"></script>
<script>
YUI().use('formalize', function(Y) {
  Y.on('domready', function() {
    Y.formalize.go();
  });
});
</script> 


Вся "красота" занимает около 10 Кб благодаря использованию родной YUI библиотеки для vbulletin.

Скачать 1

Способ 2



А теперь оформим формы с помощью другого готового скрипта, но уже на jQuery.
Для использования понадобится подключенная на форуме библиотека jQuery - многие, конечно не захотят, наверно, использовать целую библиотеку только ради форм (так как весит она около 90 Кб), а тем кто её уже использует можно будет с легкостью преобразить внешний вид своих форм, да и самого форума в целом.

Итак.

Из архива папку forms копируем в папку clientscript вашего форума.

В headinclude вставляем следующий код:

PHP Code:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="clientscript/forms/css/uniform.default.css" type="text/css" media="screen">
<script src="clientscript/forms/jquery.uniform.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function(){
        $("input, textarea, select, button").uniform({
      fileDefaultText: 'Файл не выбран',
      fileBtnText: 'Обзор',
         });
      });
    </script> 


Обратите внимание, тут мы подключаем jQuery, если она у вас уже подключена, то повторно делать этого не нужно!

Тут

PHP Code:

$("input, textarea, select, button").uniform(); 


перечисляем к каким элементам формы будет применен наш эффект.
Подробнее можно почитать на офф. сайте http://uniformjs.com/

В архиве есть еще два стиля, но которые требуют доработки для корректного отображения именно на форуме. А также не ужатый файл jquery.uniform.js

Скачать 2

PS. И добавлю, что CSS файлы в вашем полном распоряжении... меняйте на свой вкус, корректируйте размеры шрифта, отступы и т.д.

красиво да... но есть небольшой косяк с чатом Cyb Chat box

фишка в голубой рамке и жирном тексте?

Отображаться будет во всех браузерах одинаково, + оформления самой формы.



Попозже добавлю ещё ман, в эту же тему

Вектор, Действительно хорошее решение.
Хорошо подано народу.
+1

Originally Posted by Вектор

Отображаться будет во всех браузерах одинаково, + оформления самой формы.



Попозже добавлю ещё ман, в эту же тему

что то я не вкуриваю - на картинке разве одинаково отображается?

Originally Posted by Centurio

что то я не вкуриваю - на картинке разве одинаково отображается?

там же написано... первые два, как отображаются по дефолту в браузерах хром (но в разных ОС).
А нижние два, с использованием данного скрипта.

(PS - первый пост обновлен)