Для создания текста с красивым нестандартным шрифтом, будем использовать шрифты от google. Всё очень просто и понятно.

Для начала на google выбираем интересующие нас шрифты. Нас интересуют шрифты поддерживающие кириллицу, значит в боковой панели выбираем - Cyrillic.

Например, мы выбрали шрифт Lobster, такой же который используется в названии форума в шапке, кликаем по Quick-use.
Теперь нам нужно подключить эти шрифты, на выбор нам даётся три способа. Нам будет интересны первые два.
Первый способ.
Открываем шаблон overall_header.html, перед закрывающим тегом </head> ставим:

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

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Второй способ.
В тему стиля добавляем:

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

@import url(http://fonts.googleapis.com/css?family=Lobster);
Теперь создаём BBCode.

Использование BBCode:

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

[text]{TEXT}[/text]
Замена HTML:

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

<font size="3" style="font-family: Lobster; line-height: 1.4em;">{TEXT}</font>
Подсказка:

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

Красивый текст
  • Средний размер, используемый по умолчанию принят 3. На размер шрифта влияет не только заданный атрибут size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Для изменения размера шрифта непосредственно в BBCode.

Использование BBCode:

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

[text={NUMBER}]{TEXT}[/text]
Замена HTML:

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

<font size="{NUMBER}" style="font-family: Lobster; line-height: 1.4em;">{TEXT}</font>
Подсказка:

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

[text=Размер шрифта]Красивый текст[/text]
Последний раз редактировалось CabinetAdmin 27 ноя 2012, 18:51, всего редактировалось 1 раз.
Причина: Изменена "Замена HTML"
Комментарии: 46

silver073000Василий 08 ноя 2015, 17:51 Сообщение

А если пойти таким вот путём? Создать в стиле отдельный файлик, скажем, выбиралка_шрифта.html и через include его подключить. Правда, стиль надо будет перезалить, но то не беда :)
  • 0

CabinetAdmin 08 ноя 2015, 19:24 Сообщение

Ну, а как его подключить в файле расширения?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 08 ноя 2015, 21:23 Сообщение

Да, тоже верно :D Что-то не подумал об этом :)
  • 0

CabinetAdmin 09 ноя 2015, 16:50 Сообщение

В принципе, можно попробовать осуществить задумку с помощью jquery... :scratch: Надо будет попробовать...
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 09 ноя 2015, 16:54 Сообщение

Буду признателен :drink:
  • 0

CabinetAdmin 11 ноя 2015, 13:34 Сообщение

Добавление bbcode шрифты в форму быстрого ответа с помощью jquery. Модификация предназначена для phpbb 3.1 и расширения быстрого ответа, и в первую очередь для тех, кто не имеет доступа к файлам расширений. Для остальных решение на предыдущей странице темы.

Скрипт:

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

<!-- IF S_VIEWTOPIC -->
<script type="text/javascript">
; (function ($, window, document) {
	$('#qr_postform').each(function () {
		var html = '<li class="responsive-menu dropdown-container"><a href="#" class="button2 dropdown-trigger dropdown-toggle">Шрифт</a><div class="dropdown hidden"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>';
		$('#format-buttons').find('.bbcode-size').after('<ul class="bbcode-responsive bbcode-fonts">' + html + '</ul>');
		var fonts = $('.bbcode-fonts').find('.dropdown-contents');
		fonts.prepend(
			'<li><a href="#" onclick="bbfontstyle(\'[font=Arial]\', \'[/font]\'); return false;" style="font-family: Arial;">Arial</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Arial Black]\', \'[/font]\'); return false;" style="font-family: Arial Black;">Arial Black</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Arial Narrow]\', \'[/font]\'); return false;" style="font-family: Arial Narrow;">Arial Narrow</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Book Antiqua]\', \'[/font]\'); return false;" style="font-family: Book Antiqua;">Book Antiqua</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Comic Sans Ms]\', \'[/font]\'); return false;" style="font-family: Comic Sans Ms;">Comic Sans Ms</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Courier New]\', \'[/font]\'); return false;" style="font-family: Courier New;">Courier New</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Fixedsys]\', \'[/font]\'); return false;" style="font-family: Fixedsys;">Fixedsys</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Franklin Gothic Medium]\', \'[/font]\'); return false;" style="font-family: Franklin Gothic Medium;">Franklin Gothic Medium</a>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Garamond]\', \'[/font]\'); return false;" style="font-family: Garamond;">Garamond</a></li>',
			'<li><a href="#" onclick="bbfontstyle(\'[font=Georgia]\', \'[/font]\'); return false;" style="font-family: Georgia;">Georgia</a></li>'
		);
	});
})(jQuery, window, document);
</script>
<!-- ENDIF -->
Добавить его можно в футер перед </body>.

Далее в файле forms.css перед /* Topic and forum Search */ добавляем:

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

/* Responsive bbcode */
.bbcode-responsive {
	display: inline-block;
	list-style: none;
	margin-left: 4px;
	vertical-align: middle;
}
 
.bbcode-responsive a.button2 {
	padding-top: 1px;
	padding-bottom: 1px;
}
Добавить новые шрифты можно по аналогии с уже существующими. Главное на что надо обратить внимание: добавляя новый шрифт с новой строки, в конце предыдущего надо поставить запятую, после последнего запятой быть не должно.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 12 ноя 2015, 19:29 Сообщение

Отлично работает :Yahoo!: Благодарю за помощь :drink:
  • 0

romaamor 14 ноя 2015, 02:09 Сообщение

А чем вас не устраивает стандартная функция выборов шрифта ?
Изображение
  • 0

silver073000Василий 14 ноя 2015, 02:28 Сообщение

А не ABBcodes это стоит? :) У меня изначально не было выбора шрифтов.
  • 0

CabinetAdmin 14 ноя 2015, 07:19 Сообщение

romaamor, дык, в стандарте то его нету.
Кстати, по скриншоту это вроде обычный раскрывающийся список, такой же как размер шрифта. А вот в моём варианте используется стандартная фишка новой версии - всплывающие окна, такое же как при клике на "Ссылки" в списке навигации вверху форума. Плюс каждый шрифт представлен в том же шрифте, который выбираешь.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 14 ноя 2015, 11:29 Сообщение

CabinetAdmin писал(а): А вот в моём варианте используется стандартная фишка новой версии - всплывающие окна, такое же как при клике на "Ссылки" в списке навигации вверху форума. Плюс каждый шрифт представлен в том же шрифте, который выбираешь.
Мне такое больше нравится :)
  • 0

romaamor 14 ноя 2015, 14:53 Сообщение

silver073000 писал(а): А не ABBcodes это стоит?
Там.
CabinetAdmin писал(а): Плюс каждый шрифт представлен в том же шрифте, который выбираешь.
Изображение
  • 0

CabinetAdmin 14 ноя 2015, 15:33 Сообщение

Значит не обычный раскрывающийся список.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 14 ноя 2015, 15:40 Сообщение

CabinetAdmin писал(а): Значит не обычный раскрывающийся список.
Расширение ABBcodes
  • 0

CabinetAdmin 14 ноя 2015, 15:55 Сообщение

То что это расширение я понял, я про то, что это не обычный <select>, так как шрифты отображаются разным шрифтом, а тоже какое-то всплывающее окно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы