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

[PPK]

Существует 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)

[SelinaAnt]

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

открыть

/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]

На каком стиле работает? ) По моему это наоборот вредительство получается, так как мы классы на тайпы заменяем, другими словами мы сносим стандартные классы бб кодов )))

[SelinaAnt]

На каком стиле работает?

На почти всех работает отлично. Стандартный Просилвер красивее смотрится. Серия шаблонов ART (легкие воздушные стили) вообще идеально! У меня сейчас АРТ-Елегант стоит и отлично все.

[9CaraTT]

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

[SelinaAnt]

На саб сильвере снеси этот класс и увидешь что получается

Значит этот вариант только к Просилверам клонам применять. Да, однако нежданчик....

с праздником, единственная ты наша

Спасибо.

[vulkan3]

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

только изменилась калонка поиск

[vulkan3]

перепроверил на http://noginsk-forum.ru/ тоже не показывает

[PPK]

Для работы скрипта необходимо предварительное подключение библиотеки JQuery.

[vulkan3]

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