BBCode

Проблемы с установкой или работой phpBB 3.0.х. Решение проблем связанных с модами, стилями, доработками и так далее.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

BBCode

Сообщение Slash » Ср авг 15, 2012 5:25 pm

Что бы добавить свой BBcode на форум phpBB 3.0.х надо перейти: Администраторский раздел > Сообщения > BBCodes, нажать кнопку Добавить BBCode.
Откроется страница с формой добавления BBCode:
BBCode — это специальная реализация языка HTML, предоставляющая более удобные возможности по форматированию сообщений. С помощью этой страницы вы можете добавлять, удалять и изменять BBCodes.

И так:
Использование BBCode - Здесь определяется использование BBCode. Любая вводимая переменная может быть заменена на соответствующую лексему.
Замена HTML - Здесь определяются замены HTML. Не забывайте добавить лексемы, использованные выше!
Подсказка - Данное поле содержит текст, который появится при наведении указателя мыши на кнопку с BBCode.
Настройки - Поставьте галочку на против надписи: Показывать на странице ответа, и ваш BBCode будет отображаться при ответе и при создании новой темы. Если галочку не ставить BBCode придётся писать в форму ответа самостоятельно.

Пример спойлера для вставки в поле добавления пользовательских BBCode:
Спойлер - позволяет спрятать информацию и показать её при нажатии на кнопку:
Использование BBCode:

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

[spoiler={TEXT1}]{TEXT2}[/spoiler]

Замена HTML:

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

<div style='width: 99%; border: 1px dotted #6F5E42; border-left: 4px solid #6F5E42;'>
    <script language='javascript' type='text/javascript'>
    <!--
    if(!_s_id)
    {
        var _s_id = 0;
        var sp_title = "";
        function switch_spoiler(id, title)
        {
            if(document.getElementById("sp_d_" + id).style.display == "block")
            {
                document.getElementById("sp_a_" + id).innerHTML = "+ " + title;
                document.getElementById("sp_d_" + id).style.display = "none";
            }
            else
            
{
                document.getElementById("sp_a_" + id).innerHTML = "- " + title;
                document.getElementById("sp_d_" + id).style.display = "block";
            }
        }
    }
    _s_id++;

    document.write("<div id='sp_a_" + _s_id + "' onclick='switch_spoiler(" + _s_id + ", \"{TEXT1}\");' style='vertical-align: middle; height: auto; line-height: 30px; padding-left:10px; background-color: #DDDDDD; font-size: 12px; font-weight: bold; color: #020202; cursor: hand;'>{TEXT1}<br />+ <span style='font-size: 9px;'>нажать для просмотра скрытого текста</span></div><div id='sp_d_" + _s_id + "' style='display: none; min-height: 25px; background-color: #F6F6F6; padding-left:10px; padding-top:5px; padding-bottom:5px;'>");
    -->
    </script>
    {TEXT2}</div></div>

Подсказка:

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

Свёрнутый текст [spoiler]текст[/spoiler]


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

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

[spoiler]{TEXT}[/spoiler]

Замена HTML:

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

<script type="text/javascript">
function disp_spoiler_alert()
{
alert("{TEXT}")
}
</script>
<form>
<input type="button" onclick="disp_spoiler_alert()" value="Показать текст">
</form>

Текст подсказки:

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

Скрытый текст [spoiler]текст[/spoiler]


Забавный BBcode: Я думаю
1. Залить смайлик в папку: /images/
Изображение
2. Использование BBCode:

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

[think]{TEXT}[/think]

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

<table border="0" cellpadding="0" cellspacing="0"><tr><td style="margin: 0;padding: 0;border: 0;"><div style=" background-color: #FFEBD5;color: #000000; -moz-border-radius: 16px; -webkit-border-radius: 16px; border: 2px solid #FFFFFF; padding: 4px;font-size: 1em;" > &nbsp; {TEXT} &nbsp; </div><img src="./images/think.gif"></td></tr></table>


BBcode Текст за курсором мышки
Использование BBCode:

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

[circle]{TEXT}[/circle]

Замена HTML:

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

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-styleitalic;
font-weightbold;
font-family'comic sans ms'verdanaarial;
color#000;
/* End Optional */

/* Start Required - Do Not Edit */
positionabsolute;top0;left0;z-index3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<
script type="text/javascript">

/* Circling text trail- Tim Tilton
 Website: http://www.tempermedia.com/
 Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
 Modified Here for more flexibility and modern browser support
 Modifications as first seen in http://www.dynamicdrive.com/forums/
 username:jscheuer1 - This notice must remain for legal use
 */

;(function(){

// Your message here (QUOTED STRING)
var msg "{TEXT}";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY 0.75; var circleX 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg msg.split('');
var 
msg.length 1Math.round(size diameter 0.208333), currStep 20,
ymouse circleY 20xmouse circleX 20= [], = [], = [], = [],
document.createElement('div'), oi document.createElement('div'),
document.compatMode && document.compatMode != "BackCompat"document.documentElement document.body,

mouse = function(e){
|| window.event;
ymouse = !isNaN(e.pageY)? e.pageY e.clientY// y-position
xmouse = !isNaN(e.pageX)? e.pageX e.clientX// x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
 
o.style.top = (|| document.body).scrollTop 'px';
 
o.style.left = (|| document.body).scrollLeft 'px';
};
currStep -= rotation;
for (var 
dn> -1; --i){ // makes the circle
 
document.getElementById('iemsg' i).style;
 
d.top Math.round(y[i] + Math.sin((currStep i) / letter_spacing) * circleY 15) + 'px';
 
d.left Math.round(x[i] + Math.cos((currStep i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse Y[0]) * speed;
x[0] = X[0] += (xmouse 20 X[0]) * speed;
for (var 
n0; --i){
 
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
 
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
 
ymouse += window.pageYOffset;
 
xmouse += window.pageXOffset;
} else 
init.nopy true;
for (var 
dn> -1; --i){
 
document.createElement('div'); d.id 'iemsg' i;
 
d.style.height d.style.width 'px';
 
d.appendChild(document.createTextNode(msg[i]));
 
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll'ascrollfalse);
};

o.id 'outerCircleText'o.style.fontSize size 'px';

if (
window.addEventListener){
window.addEventListener('load'initfalse);
document.addEventListener('mouseover'mousefalse);
document.addEventListener('mousemove'mousefalse);
 if (/
Apple/.test(navigator.vendor))
 
window.addEventListener('scroll'ascrollfalse);
}
else if (
window.attachEvent){
window.attachEvent('onload'init);
document.attachEvent('onmousemove'mouse);
};

})();

</script>


Вставить видео с youtube.com:
Использование BBCode:

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

[youtube]{SIMPLETEXT}[/youtube]

Замена HTML:

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

<iframe width="420" height="315" src="http://www.youtube.com/embed/{SIMPLETEXT}" frameborder="0" allowfullscreen></iframe>
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Ср сен 05, 2012 2:27 pm

BBcode аудио плеера
1. Скачать архив
2. Выложить папку с плеером audio в корень форума
3. Создать bbcode:
Использование BBCode:

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

[audio]{URL}[/audio

Замена HTML:

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

<object type="application/x-shockwave-flash" data="/audio/player.swf" width="250" height="20"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-bubble.swf" /><param name="flashvars" value="mp3={URL}&amp;showtime=1&amp;nopointer=1" />
</
object>

Текст подсказки:

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

Вставить аудио файл: [audio]url на файл[/audio]

Скачать плеер: http://yadi.sk/d/vE_s75bq4Tg-T
Аватара пользователя
Татьяна5
Сообщения: 81

Re: BBCode

Сообщение Татьяна5 » Чт окт 18, 2012 2:56 am

Назрел вопрос
Как сделать, чтобы некоторый пользовательский bbcode вырезался из текста при цитировании (вместе со своим содержимым)?
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Чт окт 18, 2012 7:38 am

Думаю здесь кроме написания BBcode, придётся ещё редактировать файлы конференции, создавать условие и т.д.
Ещё: если получится собрать такой BBcode, то навряд ли он будет работать при Быстрой цитаты.
Аватара пользователя
Татьяна5
Сообщения: 81

Re: BBCode

Сообщение Татьяна5 » Чт окт 18, 2012 6:01 pm

Это понятно, что без редактирования php не обойтись. Не понятно, что, где и как редактировать :?:
С быстрой цитатой и не требуется, чтобы работало. У меня тот случай, когда при полной цитате раскрывается что не надо.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Сб окт 27, 2012 8:11 pm

Код внутри строки icode
Использование BBCode:

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

[icode]{TEXT}[/icode

Замена HTML:

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

<code style="background: #ffffff; border: 1px solid #006600; padding: 0 1px;">{TEXT}</code

Подсказка:

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

Код внутри строки: [icode]код[/icode]
Аватара пользователя
dqdmitry
Сообщения: 6

Re: Вложение по горизонтали

Сообщение dqdmitry » Вс янв 20, 2013 12:36 pm

Алексей, спасибо за кучу полезной информации!!!
Вопросик по теме.
Установлен BB-код, который уменьшает изображение со стороннего хостинга, а при нажатии - открывает полноразмерное фото.
Вот он:

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

[miniimg]{URL}[/miniimg

Замена html:

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

<div style="text-align: left;"><a href="{URL}" class="highslide" onclick="return hs.expand(this)"><img src="{URL}" alt="Уменьшенное фото" title="Нажмите для увеличения" style="max-width:500px; max-height:500px;" /></a></div

(Размеры можно свои поставить)
Highslide картинки прекрасно листает, если их несколько в посте.
Но вот стоят они все столбиком :( ...
Возможно-ли и миниатюры со стороннего хостинга картинок тоже выставить в ряд?
Ещё раз спасибо.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Вс янв 20, 2013 12:45 pm

dqdmitry, попробуй убрать тег <div> и выстраивать BBcode таким образом:

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

[miniimg]картинка.jpg[/miniimg] [miniimg]картинка2.jpg[/miniimg] [miniimg]картинка3.jpg[/miniimg

Что получается? Не проверял.
Аватара пользователя
dqdmitry
Сообщения: 6

Re: BBCode

Сообщение dqdmitry » Вс янв 20, 2013 12:53 pm

Алексей писал(а):Что получается? Не проверял.

Вот спасибо, Алексей!!! :D
Все в ряд встало!!!
Аватара пользователя
angst66
Сообщения: 21

Re: BBCode

Сообщение angst66 » Пн мар 04, 2013 2:14 am

BBCode OFF
Увидел у вас на форуме прозрачные счетчики, которые теряли прозрачность при наведении и решил себе так же сделать. Сделал. Потом решил сделать бб код офф на этой основе. Все бледно пока не наведешь курсор, в офф можно обернуть любые теги, и код, и изображения, и текст, естественно.
Создаем класс transparency в css

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

.transparency {
    opacity: 0.3;
}
.
transparency:hover {
    opacity: 1;

Создаём бб код офф или изменяем существующий

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

[off]{TEXT}[/off

Замена HTML

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

<span class="transparency">{TEXT}</span

Подсказка

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

Выделение оффтопикатеряет прозрачность при наведении
Аватара пользователя
angst66
Сообщения: 21

Re: BBCode

Сообщение angst66 » Пн мар 04, 2013 4:18 pm

Иногда возникает желание поменять местами стандартные bb code, или убрать ненужные, или вставить пользовательские между стандартными.
Редактируем posting_buttons.html вашего стиля (на основе Просильвер, так как Субсильвер не использую). Строчки с кнопками можно менять местами, ненужные удалять. Если мы хотим вставить туда кнопку пользовательского кода, выбираем рядом с какой кнопкой будем ставить. Вот пример кнопки Icode, вставленной рядом с кнопкой code

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

<input type="button" class="button2" accesskey="z" name="addbbcode_icode" value="icode" style="width: 40px" onclick="bbfontstyle('[icode]','[/icode]')" title="{L_BBCODE_IC_HELP}" />

В language/ru/posting.php найти

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

    'BBCODE_I_HELP'                => 'Наклонный текст: [i]text[/i]',

Добавить после

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

    'BBCODE_IC_HELP'            => 'Код внутри строки: [icode]code[/icode]',

Если у вас создан этот код, снимаем отметку в чекбоксе "Показывать на странице ответа", если нет то создаем
[icode]{TEXT}[/icodе]
Замена HTML

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

<span style="color:#2e8b57;background-color: #ffffff; border: 1px solid #C9D2D8; margin-top:1px;padding-left: 2px;padding-right: 2px;white-space: nowrap;"><code>{TEXT}</code></span

А вот пример кнопки зачеркнутый текст
Изображение

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

<input type="button" class="button2" accesskey="k" name="addbbcode_s" value=" text " style="text-decoration: line-through; width: 40px" onclick="bbfontstyle('[s]','[/s]')" title="{L_BBCODE_K_HELP}" /> 
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Вт апр 30, 2013 8:16 pm

Программный код в строке
Использование BBCode:

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

[icode]{TEXT}[/icode

Замена HTML:

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

<code style="font-family: Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 0.9em; font-style: normal; line-height: 1.3em; background: #FFF; border: 1px solid #C9D2D8; padding: 0 3px; color: #0040FF; display: inline;">{TEXT}</code>

Подсказка:

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

Программный код в строке [icode]текст[/icode]

Пример данного BBcode. Помещается в одну строчку среди текста.
hunter_ua
Сообщения: 1

Re: BBCode

Сообщение hunter_ua » Вт ноя 12, 2013 6:17 pm

Всем привет :!:
Аngst66 спасибо все поставил все работает, но немного изменил добавив значок:
BBCode - off.png
BBCode - off.png (1018 байт) 3472 просмотра

который появляется перед офф сообщением, ну и соответственно изменил немного код:

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

<img src="URL вашего значка" width="ширина" height="высота" alt="OFF:" />&nbsp;&nbsp;&nbsp;<span class="transparency">{TEXT}</span

:!: Указать урл значка
:!: Указать ширину значка
:!: Указать высоту значка
Возможно кому-то пригодится ;)
С уважением ...
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: BBCode

Сообщение Slash » Пт ноя 15, 2013 9:36 pm

Вот еще один простой спойлер:
Использование BBCode:

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

[spoiler]{TEXT}[/spoiler]

Замена HTML:

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

<script type='text/javascript'>
  function showHide(divId)
  {
      if ( document.getElementById(divId).style.display == 'block' )
          document.getElementById(divId).style.display = 'none';
      else
          document
.getElementById(divId).style.display = 'block';
  }
  </script>
<a href="#first" onclick="showHide('first');">Показать/Скрыть</a>
<div style="display:none">{TEXT}</div>
Аватара пользователя
angst66
Сообщения: 21

Re: BBCode

Сообщение angst66 » Сб ноя 16, 2013 8:30 pm

bbcode Acronym
Один из моих любимых кодов. При наведении на слово курсор меняется на Изображение, всплывает пояснение к слову.
Использование BBCode:

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

[acronym={INTTEXT}]{TEXT}[/acronym

Замена HTML:

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

<acronym style="border-bottom:1px dashed #777; cursor:help;" title="{INTTEXT}">{TEXT}</acronym

Подсказка:

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

Acronym: [acronym=Пояснение к тексту]текст[/acronym]

Вернуться в «phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость