Хаки Украшаем формы ( form , input , select )

Администратор · Регистрация: 27.02.2009

Украшаем формы ( form , input , select )

Способ 1

Воспользуемся готовым решением с сайта Formalize CSS - Teach your forms some manners!

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

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

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

PHP код:



<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.

Специально для pcvector.ru

Скачать

Способ 2

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

Итак.

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

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

PHP код:



  <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 код:



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

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

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

Скачать

Пользователь · 12.09.2011, 21:21

У меня 1 способом преобразились только кнопки. Обводки в быстром ответе, в авторизации не хотят работать.

Администратор · 12.09.2011, 21:31

(в wysiwyg не работает)

Пользователь · 12.09.2011, 21:37

Цитата:

Сообщение от Vector

(в wysiwyg не работает)

это что значит? )))

Администратор · 12.09.2011, 21:50

в Быстром ответе (или расширенном) - правая верхняя иконка - Переключить режим редактора

Пользователь · 12.09.2011, 22:00

Странно, но у меня переключение режима ничего не дает. И выходя из системы в форме авторизации так же без изменений.

Добавлено через 3 минуты
Оно походу в IE не работает. Хром показывает всё как надо.

Пользователь · Регистрация: 06.05.2012

Vector, выздоравливай.

по теме:
все хорошо ставится, работает, но

firebug выдает ошибки на формализ:

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от busyava

firebug выдает ошибки на формализ:

такого рода вопросы нужно к разработчикам Formalize CSS - Teach your forms some manners!

Пользователь · Регистрация: 20.04.2012

Цитата:

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

в каком месте ?можно в конец?

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от Vbmaster

в каком месте ?можно в конец?

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

Да, можно в конец.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Хаки Registration form AJAX enchancements - улучшенная регистрация	Vector	Регистрация	9	12.03.2014 17:43
Вопрос Как изменить ширину формы ответа	Gunnerss	Вопросы по vBulletin 4.х	15	03.08.2011 14:59
Хаки Note in pm message form - замечание в форме отправки ЛС	Vector	Личные сообщения	0	06.11.2010 16:35

ZOMBIE #2
220 МГц Пользователь Вес репутации: 0 Регистрация: 13.03.2011 Адрес: Острогожск [36] Сообщений: 563 Сказал(а) спасибо: 40 Спасибок 70 в 61 сообщениях	12.09.2011, 21:21 У меня 1 способом преобразились только кнопки. Обводки в быстром ответе, в авторизации не хотят работать. Nissan Primera Club - WAGON Admin

Vector #3
7590 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,264 Сказал(а) спасибо: 576 Спасибок 2,586 в 1,826 сообщениях	12.09.2011, 21:31 (в wysiwyg не работает)

ZOMBIE #4
220 МГц Пользователь Вес репутации: 0 Регистрация: 13.03.2011 Адрес: Острогожск [36] Сообщений: 563 Сказал(а) спасибо: 40 Спасибок 70 в 61 сообщениях	12.09.2011, 21:37 Цитата: Сообщение от Vector (в wysiwyg не работает) это что значит? )))

Vector #5
7590 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,264 Сказал(а) спасибо: 576 Спасибок 2,586 в 1,826 сообщениях	12.09.2011, 21:50 в Быстром ответе (или расширенном) - правая верхняя иконка - Переключить режим редактора