Стилизация кнопок и форм с помощью jQuery.Uniform

Небольшие моды и хаки для форума phpBB3
Правила форума
При размещении мода/статьи взятой с другого форума/сайта обязательно необходимо указывать первоисточник сообщения.
 • Просмотры: 2824
Аватара пользователя
PPK
Администратор
Благодарил (а): 82 раза
Поблагодарили: 1621 раз
Сообщения: 10284
Зарегистрирован: 21 мар 2009, 17:13
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

07 мар 2013, 13:47

Существует jQuery-скрипт Uniform (http://uniformjs.com/) для изменения внешнего вида кнопок и форм без правки html и css кода, пример использования этого скрипта в форуме phpBB3:
minimods_uniform.zip
Скачать, распаковать, заменить файлы форума файлами из директории /root/

1. В phpmyadmin выполнить (если префикс таблиц не phpbb_ - заменить на свой):

Код: Выделить всё

INSERT INTO `phpbb_config` (`config_name`, `config_value`, `is_dynamic`) VALUES ('uniform_style', '', '0');
2. Переделать файлы:
includes/acp/acp_board.php после

Код: Выделить всё

						'allow_birthdays'		=> array('lang' => 'ALLOW_BIRTHDAYS',		'validate' => 'bool',	'type' => 'radio:yes_no', 'explain' => true),
						'allow_quick_reply'		=> array('lang' => 'ALLOW_QUICK_REPLY',		'validate' => 'bool',	'type' => 'custom', 'method' => 'quick_reply', 'explain' => true),
добавить

Код: Выделить всё

						//PPK START US
						'uniform_style'		=> array('lang' => 'UNIFORM_STYLE',		'validate' => 'string',	'type' => 'custom', 'method' => 'select_uniform_style', 'explain' => true),
						//PPK END US
перед

Код: Выделить всё

	function store_feed_forums($option, $key)
	{
добавить

Код: Выделить всё

	//PPK START US
	function select_uniform_style($value, $key)
	{
		$style_list=array('default', 'aristo', 'agent', 'jeans');
		
		$s_style_options = '<select id="' . $key . '" name="config[' . $key . ']">';
		$s_style_options .= '<option value=""></option>';
		foreach ($style_list as $style)
		{
			$s_style_options .= '<option value="' . $style . '"' . ($value==$style ? ' selected="selected"' : '') . '>' . $style . '</option>';
		}
		$s_style_options .= '</select>';

		return $s_style_options;
	}
	//PPK END US
includes/functions.php после

Код: Выделить всё

	// The following assigns all _common_ variables that may be used at any point in a template.
	$template->assign_vars(array(
добавить

Код: Выделить всё

		//PPK START US
		'S_UNIFORM_STYLE' => $config['uniform_style'] ? basename($config['uniform_style']) : false,
		//PPK END US
language/ru/acp/board.php после

Код: Выделить всё

	'BOARD_PM'					=> 'Разрешить личные сообщения',
	'BOARD_PM_EXPLAIN'			=> 'Включение обмена личными сообщениями для всех пользователей.',
добавить

Код: Выделить всё

	//PPK START US
	'UNIFORM_STYLE' => 'Стилизация кнопок и форм',
	'UNIFORM_STYLE_EXPLAIN' => 'Стилизовать кнопки и формы форума с помощью Uniform используя указанный стиль',
	//PPK END US
styles/prosilver/template/overall_header.html перед

Код: Выделить всё

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
добавить

Код: Выделить всё

<!-- IF S_UNIFORM_STYLE -->
<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform._base.css" />
<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform.{S_UNIFORM_STYLE}.css" />
<script src="{ROOT_PATH}tracker/addons/js/jquery.uniform.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
	 jQuery(document).ready(
		function($)
		{
			$("select, input, button, textarea").uniform();
		}
	);
// ]]>
</script>	
<!-- ENDIF -->
styles/subsilver2/template/overall_header.html перед

Код: Выделить всё

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
	popup('{UA_POPUP_PM}', 400, 225, '_php
добавить

Код: Выделить всё

<!-- IF S_UNIFORM_STYLE -->
<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform._base.css" />
<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform.{S_UNIFORM_STYLE}.css" />
<script src="{ROOT_PATH}tracker/addons/js/jquery.uniform.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
	 jQuery(document).ready(
		function($)
		{
			$("select, input, button, textarea").uniform();
		}
	);
// ]]>
</script>
<!-- ENDIF -->
3. Очистить кеш, обновить переделанные стили, включить опцию (адм. раздел - функции конференции - Стилизация кнопок и форм)

Скриншоты:
Опция в адм. рахзделе


Стандартный стиль prosilver

Стиль prosilver стилизация default

Стиль prosilver стилизация agent

Стиль prosilver стилизация aristo

Стиль prosilver стилизация jeans


Стиль subsilver2 стилизация default

Стиль subsilver2 стилизация agent

Стиль subsilver2 стилизация aristo

Стиль subsilver2 стилизация jeans


--
Для работы скрипта необходимо предварительное подключение библиотеки JQuery.
На некоторых стилях возможно некорректное отображение форм и кнопок.
Для стилизации только каких-то конкретных элементов (например только кнопок), нужно редактировать в файле overall_header.html строку:

Код: Выделить всё

			$("select, input, button, textarea").uniform();
select - это выпадающие списки и списки со множественным выбором
input - однострочные поля ввода, радио и чекбоксы
button - кнопки
textarea - многострочные поля ввода
На данный момент доступно 4 стиля для стилизации: default, agent, aristo, jeans, если на форуме имеется несколько стилей, можно не привязывая к опции в адм. разделе отдельно стилизовать стили следующим образом, в файле overall_header.html нужного стиля перед указанным кодом добавлять:

Код: Выделить всё

<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform._base.css" />
<link rel="stylesheet" href="{ROOT_PATH}tracker/addons/css/uniform.{S_UNIFORM_STYLE}.css" />
<script src="{ROOT_PATH}tracker/addons/js/jquery.uniform.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
	 jQuery(document).ready(
		function($)
		{
			$("select, input, button, textarea").uniform();
		}
	);
// ]]>
</script>
вместо {S_UNIFORM_STYLE} указать нужный стиль (default, agent, aristo, jeans)
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Se
SelinaAnt
Откуда: Украина
Благодарил (а): 67 раз
Поблагодарили: 67 раз
Сообщения: 359
Зарегистрирован: 25 окт 2011, 01:31
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

07 мар 2013, 22:08

Еще один, самый простой способ:

открыть

/styles/Ваш стиль/posting_buttons.html

найти

Код: Выделить всё

<input class="button" type="button" value=" B " name="codeB" title="Bold (Ctrl+B)" style="font-weight: bold; width: 30px" />
редактируем всю группу BBcode

после слова input значение class изменяем на type

пример редактирования
до:

Код: Выделить всё

<input class="button" type="button" value=" B " name="codeB" title="Bold (Ctrl+B)" style="font-weight: bold; width: 30px" />
после:

Код: Выделить всё

<input type="button" type="button" value=" B " name="codeB" title="Bold (Ctrl+B)" style="font-weight: bold; width: 30px" />
Пример ТУТ
Аватара пользователя
9CaraTT
Благодарил (а): 230 раз
Поблагодарили: 228 раз
Сообщения: 3085
Зарегистрирован: 13 мар 2011, 15:23
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

08 мар 2013, 13:55

На каком стиле работает? ) По моему это наоборот вредительство получается, так как мы классы на тайпы заменяем, другими словами мы сносим стандартные классы бб кодов )))
Se
SelinaAnt
Откуда: Украина
Благодарил (а): 67 раз
Поблагодарили: 67 раз
Сообщения: 359
Зарегистрирован: 25 окт 2011, 01:31
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

09 мар 2013, 18:07

9CaraTT писал(а):На каком стиле работает?
На почти всех работает отлично. Стандартный Просилвер красивее смотрится. Серия шаблонов ART (легкие воздушные стили) вообще идеально! 8-) У меня сейчас АРТ-Елегант стоит и отлично все.
Аватара пользователя
9CaraTT
Благодарил (а): 230 раз
Поблагодарили: 228 раз
Сообщения: 3085
Зарегистрирован: 13 мар 2011, 15:23
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

09 мар 2013, 19:14

Ну ты е класс сносишь, погляди по сути, я не против тебя ничего не имею, с праздником, единственная ты наша :) На саб сильвере снеси этот класс и увидешь что получается, тайп это же не класс а типо как там атрибут вроде бы ... пьяный сегодня, отвечу как протрезвею = )
Se
SelinaAnt
Откуда: Украина
Благодарил (а): 67 раз
Поблагодарили: 67 раз
Сообщения: 359
Зарегистрирован: 25 окт 2011, 01:31
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

10 мар 2013, 12:20

9CaraTT писал(а):На саб сильвере снеси этот класс и увидешь что получается
:shock: :o Значит этот вариант только к Просилверам клонам применять. Да, однако нежданчик....
9CaraTT писал(а):с праздником, единственная ты наша
Спасибо. :oops:
vu
vulkan3
Благодарил (а): 45 раз
Поблагодарили: 36 раз
Сообщения: 1801
Зарегистрирован: 28 сен 2009, 03:36
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

30 мар 2013, 00:25

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

только изменилась калонка поиск
vu
vulkan3
Благодарил (а): 45 раз
Поблагодарили: 36 раз
Сообщения: 1801
Зарегистрирован: 28 сен 2009, 03:36
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

30 мар 2013, 00:53

перепроверил на http://noginsk-forum.ru/ тоже не показывает
Аватара пользователя
PPK
Администратор
Благодарил (а): 82 раза
Поблагодарили: 1621 раз
Сообщения: 10284
Зарегистрирован: 21 мар 2009, 17:13
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

30 мар 2013, 10:08

PPK писал(а):Для работы скрипта необходимо предварительное подключение библиотеки JQuery.
vu
vulkan3
Благодарил (а): 45 раз
Поблагодарили: 36 раз
Сообщения: 1801
Зарегистрирован: 28 сен 2009, 03:36
Сообщение

Стилизация кнопок и форм с помощью jQuery.Uniform

30 мар 2013, 10:30

А разве она не подключенна ?

Вернуться в «Минимоды и хаки для phpBB3»