Для создания текста с красивым нестандартным шрифтом, будем использовать шрифты от google. Всё очень просто и понятно.
Для начала на google выбираем интересующие нас шрифты. Нас интересуют шрифты поддерживающие кириллицу, значит в боковой панели выбираем -
Например, мы выбрали шрифт Lobster, такой же который используется в названии форума в шапке, кликаем по
Теперь нам нужно подключить эти шрифты, на выбор нам даётся три способа. Нам будет интересны первые два.
Первый способ.
Открываем шаблон
Второй способ.
В тему стиля добавляем:
Теперь создаём BBCode.
Использование BBCode:
Замена HTML:
Подсказка:
Для изменения размера шрифта непосредственно в BBCode.
Использование BBCode:
Замена HTML:
Подсказка:
Для начала на 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:
Код: Выделить всё
[text]{TEXT}[/text]
Код: Выделить всё
<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]
Код: Выделить всё
<font size="{NUMBER}" style="font-family: Lobster; line-height: 1.4em;">{TEXT}</font>
Код: Выделить всё
[text=Размер шрифта]Красивый текст[/text]
Последний раз редактировалось CabinetAdmin 27 ноя 2012, 18:51, всего редактировалось 1 раз.
Причина: Изменена "Замена HTML"
Причина: Изменена "Замена HTML"
Комментарии: 46
Добавление 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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
romaamor, дык, в стандарте то его нету.
Кстати, по скриншоту это вроде обычный раскрывающийся список, такой же как размер шрифта. А вот в моём варианте используется стандартная фишка новой версии - всплывающие окна, такое же как при клике на "Ссылки" в списке навигации вверху форума. Плюс каждый шрифт представлен в том же шрифте, который выбираешь.
Кстати, по скриншоту это вроде обычный раскрывающийся список, такой же как размер шрифта. А вот в моём варианте используется стандартная фишка новой версии - всплывающие окна, такое же как при клике на "Ссылки" в списке навигации вверху форума. Плюс каждый шрифт представлен в том же шрифте, который выбираешь.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Приветствую!
Можно как то соорудить для phpBB Тег ?
То есть сделать в виде ббкода на подобии комментария HTML тега для сообщений, чтобы в сообщениях...