Создание bb кода

В данном подфоруме я буду выкладывать разнообразные украшения форума phpbb3, от смайлов до скриптов, от ВВ-кодов до различных полезных программ.

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

BBCode

bbcode - это отдельные тэги для вставки в сообщение. Они были придуманы для удобства создания сообщений.
Разумеется, это ведь так удобно - вы вставляете, предположим, какой-нибудь тэг типа [*proverka*][/*proverka*] в сообщение, а в результате получаете сразу оформленное поле: с рамочкой, картинками, цветом, размером и так далее.
bbcode на самом деле представляет из себя html код, который и вставляется в сообщение (он может быть и достаточно большим). Также в составе bcode могут быть и скрипты и ещё какие-либо коды. То есть он представляет из себя независимый отдельный блок.
bbcode позволяют применять их одновременно при создании сообщения, что даёт возможность выделить часть текста, спрятать или написать другим цветом.
Есть, так называемые, стандартные bbcode, типа жирного текста, наклонного текста, подчёркнутого текста...
bbcode, реализующий то, что вам нужно, возможно (и реально) создать самому.
На форуме phpbb3.0.x bbcode прописываются в административном отделе, по пути Админка - Сообщения - BBCodes...

Разнообразные (готовые) bbcode можно посмотреть здесь: ВВ-коды форума

Итак, поехали.
скан админки 01
скан админки 01
скан админки 02
скан админки 02
На этих двух сканах предоставлены этапы создания bbcode в админке.
На первом - страница создания bbcode, расположенная Админка - Сообщения - BBCodes
На втором показано как именно создаётся bbcode. Немного о его создании:
*1. как показано на скрине, тэг bbcode не должен содержать пробелов в своём названии, т.е. правильно [moi_kod]{TEXT}[/moi_kod], неправильно [moi kod]{TEXT}[/moi kod].
*2. bbcode должен содержать 2 тэга - открывающий (moi_kod) и закрывающий (/moi_kod).
*3. {TEXT} - переменная, разрешающая в html коде применение названий на русском и английском языке, дефисов, цифр и т.д., то есть он является универсальным. если в html коде будут применяться только цифры или будет всё на английском языке, или там будет прописываться только цвет - возможно применение других переменных. писать я их не буду. они размещены и объяснены внизу страницы создания bbcode.
*4. при создании bbcode возможно применение нескольких переменных. выглядеть это будет примерно так: [moi kod={COLOR}]{TEXT}[/moi kod]
в этом примере видно, что возможно не только написание текста, но и выбор цвета.
покажу, как это выглядит на примере bbcode этого форума:
bbcode:

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

[corners=проверка]моё сообщение[/corners]
выглядит так:

проверка

моё сообщение
 
*5. в поле Замена HTML мы прописываем html код, который и будет вставляться в наше сообщение. Лексемы типа {TEXT} вставляются именно туда, куда пользователь должен прописывать свою информацию.
*6. в поле текст подсказки желательно написать информацию по применению этого тэга, чтобы пользователям было удобнее.
*7. если в поле показывать на странице ответа поставить галочку - данный bbcode можно будет видеть в списке при создании темы, если не ставить - этот bbcode будет не виден, НО если в сообщении вручную прописать этот тэг - он всё равно будет работать, хотя его и не видно в списке.
Так как bbcode представляют из себе отдельные блоки - возможно их применение в виде составного кода. Сущёствуют специально разработанные bbcode, которые и применяются в виде составных, но по-одиночке их работа не всегда возможна.
пример: [moi_kod_1][moi_kod_2]{TEXT}[/moi_kod_2][/moi_kod_1]

пример простого составного блока bbcode, использующего тэги corners=, color и img
код:

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

[corners=проверка][color=#BB0000]моё сообщение[/color][img]http://anibelka.ru/images/fon_5.png[/img][/corners]
а выглядеть этот составной bbcode будет так:

проверка

моё сообщение
 
// Так как все bbcode представляют из себя отдельные блоки html, вполне вероятна ситуация, когда Вы соберёте из кучи тэгов один большой bbcode, а он не станет работать (или будет работать частично), а в сообщении будет не вид этого тэга, а его текстовая пропись ([teg][/teg]).
Это будет означать, что какие-то части сборной конструкции "вступили в противоречие" и единственный возможный здесь выход - собрать конструкцию по-иному, либо сделать её по-проще.
Вроде бы ничего не забыл... :du_ma_et: если что ещё вспомню - допишу.

/* все bbcode - это html код. надо "подружиться" (хотя бы немного) с html... */
Последний раз редактировалось белк 13 июн 2015, 12:36, всего редактировалось 3 раза.
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#1
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

тема про суицид

Сообщение skazik »

bbcode. но там, кажется, не учат как их писать.... все bbcode - это чистый html код. надо "подружиться" (хотя бы немного) с html...
Спасибо)) Я как раз справочник сейчас изучаю по ХТМЛ. Пишу русскими, потому что лень клавиатуру переключать :-0=)
#2
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

тема про суицид

Сообщение белк »

это не страшно. :-00):

вы работаете со стационарного компа?

могу предложить интересную штуку для обучения. (всё просто)...

//с мобильного варианта сложновато...
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#3
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

тема про суицид

Сообщение skazik »

вы работаете со стационарного компа?

могу предложить интересную штуку для обучения. (всё просто)...
Да, у меня компьютер.

Буду очень благодарна)) Мне понравилось со скриптами возиться. И теперь хочется самой научиться.
#4
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

тема про суицид

Сообщение белк »

я тоже, когда начинал, использовал такую штуку. очень удобно - можно видеть сразу результаты своих обучений-экспериментов.
это файл html. :-00):

он здесь: скачать (сделал и вложение, так как не дружу с депозитом...)
распаковать файл, открыть его в любом браузере. в центре страницы вы увидите пример кода.
я специально ограничил область (и показал) эксперимента, чтобы было нагляднее.
для прописывания своих html кодов (редактирования файла) лучше использовать программу Notepad++,
скачать её можно здесь http://hello-vitebsk.ru/viewtopic.php?f=144&t=854. когда установите программу при клике правой клавишей выбор в списке выбора появится "открыть с помощью notepad++ (или по английски). открываете и редактируете файл. я написал внутри основное.
пример: предположим, вы прочитали, что код <strong></strong> приводит к выделению текста жирным шрифтом.
прописываем в данном файле

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

<!--- здесь находится поле для ваших экспериментов. начало поля.  --->

<h1>Пример сообщения</h1>

Проверка
<strong>Проверка</strong>


<!--- здесь находится поле для ваших экспериментов. конец поля --->

и, открыв файл в браузере (необходимо обновить страницу), вы увидите две надписи

Проверка

Проверка

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

так же можно в файле проверять и скрипты. изучать сразу и то, и другое будет наверное тяжеловато, хотя кто знает...
Вложения
index.rar
маленький html файлик для ваших эскпериментов по постиганию html кода...
(1.05 КБ) 48 скачиваний
Последний раз редактировалось белк 22 май 2015, 13:25, всего редактировалось 2 раза.
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#5
Аватара пользователя
m213480
Зашел немного посидеть
Зашел немного посидеть
Сообщения: 95
Стаж: 9 лет 2 месяца
Откуда: Москва-Сочи

тема про суицид

Сообщение m213480 »

skazik писал(а):И теперь хочется самой научиться
С разрешения своих куда более искушенных товарищей добавлю и свои 5 копеек!
1. Учите хтмл и скрипты, это правильно и похвально, особенно для дамы! Учите, но постепенно. Не переусердствуйте! Избегайте распространенного среди новичков заблуждения будто бы изучение этого всего нужно для того чтобы в один прекрасный денек взять так сесть за комп да и стругануть сайтик-другой. Реально сайты сейчас сами по себе с нуля конечно же не делаются, все что вы видите на просторах интернета сделано из готовых шаблонов, с той или иной степенью глубины проведения изменений, вот для этого-то Вам эти знания и потребуются!
:-00):
2. Не читайте книжки по хтмл, пустая трата времени. Возникает вопрос, спросить не у кого, у книги же не спросишь, она не живая, ищете ответ сами, не находите, не находите, не находите, интерес начинает пропадать. Нужен живой человек который моментально подскажет, в крайнем случае онлайн редактор, хотя бы такой http://xhtml.ru/instr/html_editor/ параметр поменяли - результат сразу увидели, можно использовать любой другой живой редактор, все лучше чем неживая книга, в паре к редактору понадобится конечно еще справочный материал, рекомендую http://htmlbook.ru/ там есть всё и разжевано всё
:a_g_a:
3. Написать даже простую статичную, но приятную страницу с нуля будет непросто, пусть вашей первой программой станет банальный MicrosoftWord, который стоит на ЛЮБОМ компе, он хорош тем что он есть у всех и владеют им все. Всё нужное там есть, можно и картинки вставлять, потом ВНИМАНИЕ ОЧЕНЬ ВАЖНО сохраните свое детище как "Сохранить как" - "выберите тип файла Веб-страница с фильтром", с фильтром она легче и незамусореннее вордовскими кодами, если у Вас страничка с картинками - появится также и папка "имястранички.files". Не поддайтесь соблазну использовать монолитный файл mhtml (без папки с картинками) несмотря на всеобщую глобализацию и унификацию разработчики браузеров так и не достигли согласия как же отображать mhtml-страницы и у Вас будет что ни браузер то новый вид страницы, чаще всего далековатый от желаемого Вами
:)-(:
Ух, ну вроде всё, из того что пришло сходу
Ни пуха!
:-ok-:
Апгрейд форума закончить нельзя! Его можно только временно приостановить! :hudo_zhnik:
#6
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

тема про суицид

Сообщение skazik »

белк, спасибо большое)) А здесь на форуме нет возможности цитирования текста, да? Не вижу такой кнопочки. Или у меня нет доступа пока еще.

Все скачаю и начну пробовать. Я именно так и люблю изучать. Вот, например, я брала ваши ББ коды и смотрела как там и что, и пыталась понять. Уже поняла про отступ, как цвет менять. Сделала сама ББ код с картинкой.

Просьба к модераторам - пожалуйста, выделите в отдельную тему этот оффтоп: "Как научиться самой делать bb code"
#7
Аватара пользователя
m213480
Зашел немного посидеть
Зашел немного посидеть
Сообщения: 95
Стаж: 9 лет 2 месяца
Откуда: Москва-Сочи

тема про суицид

Сообщение m213480 »

skazik писал(а):Просьба к модераторам - пожалуйста, выделите в отдельную тему этот оффтоп: "Как научиться самой делать bb code"
Кнопка "Цитата" есть в каждом посте в правом нижнем углу, но возможно у новичков она не видна, не помню уже
Присоединяюсь к просьбе "отломить" эту ветку форума и пересадить ее на другое дерево начиная с поста #20 данной темы
:hang:
Апгрейд форума закончить нельзя! Его можно только временно приостановить! :hudo_zhnik:
#8
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

тема про суицид

Сообщение белк »

skazik писал(а): Я именно так и люблю изучать
рад, что вам пригодилось. что непонятно - спрашивайте - "бумага всё стерпит". конечно, надо и самому постигать, но даже в школе сначала объясняют а потом спрашивают... :-|-:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#9
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

m213480 , спасибо за советы) Мне до сайта ещё далеко, хотя книгу уже купила, как его сделать в ВордПрессе и залить на хостинг. Только сделать несложно, сложнее проявлять фантазию и наполнять контентом, а так же его продвигать. Так что, мне пока это не по силам.
3. Написать даже простую статичную, но приятную страницу с нуля будет непросто, пусть вашей первой программой станет банальный MicrosoftWord, который стоит на ЛЮБОМ компе, он хорош тем что он есть у всех и владеют им все. Всё нужное там есть, можно и картинки вставлять, потом ВНИМАНИЕ ОЧЕНЬ ВАЖНО сохраните свое детище как "Сохранить как" - "выберите тип файла Веб-страница с фильтром", с фильтром она легче и незамусореннее вордовскими кодами, если у Вас страничка с картинками - появится также и папка "имястранички.files". Не поддайтесь соблазну использовать монолитный файл mhtml (без папки с картинками) несмотря на всеобщую глобализацию и унификацию разработчики браузеров так и не достигли согласия как же отображать mhtml-страницы и у Вас будет что ни браузер то новый вид страницы, чаще всего далековатый от желаемого Вами
Вот это немного не поняла, буду думать. Я в Ворде совсем не бываю. Придется открыть и разобраться :k_i_n_g:
#10
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

не надо пытаться объять необъятное. если до сего времени эта программа была вам не нужна - не факт, что она понадобится уже завтра. у меня она тоже стоит, но пользуюсь я ей от силы пару раз в год. и что - теперь её надо изучать?

насчёт ворлдпресса ничего не посоветую. я как-то пытался с ним общаться - но быстро "остыл". решать, конечно, вам.
просто этот форум посвящён другому движку. :-00):

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

на данный момент ваша цель - нарисовать с помощью HTML красивую страничку или сообщение, или картинку - что-то, что понравится вам и для чего вы САМИ напишите (пускай даже простой) HTML код...

Даже Рим не сразу строился... :sh_ok:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#11
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

Вот я сделала себе ББ код. Белк, помоги мне в нем изменить так, чтобы можно было самому делать цвет рамочки, а шрифт чтобы оставался обычным. Я сегодня пол-дня возилась с этим, но так и не получилось у меня. Сделала один вариант - цвет поменять можно, но делается тогда и шрифт такого же цвета.

(я не могу вам ответить, у меня нет возможности писать в личку. Вы не правы.. Я просто не умею, как нужно. Удалите там, как cчитаете нужным и правильным. Мне не зачем что то рекламировать, потому что это тестовое, там даже регистрация отключена)

Текст в оранжевой рамке

Код:

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

[cv]{TEXT}[/cv]

Замена ХТМЛ

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

<table border="0" cellpadding="0" cellspacing="0"><tr>
<td style="margin: 0;padding: 0;border: 0;">
<div style="border:2px solid #FF4000;padding:5px">{TEXT}</div></div></tr></table>
Может быть с ошибками его сделала, но он у меня работает на форуме. Вот в нем, что изменить, чтобы можно было самому задавать нужный цвет рамочки?

В этом ББ коде можно изменить толщину рамки и её цвет:
border:2px solid #FF4000
#12
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

я имел ввиду http://5nx.org/ - то, что стоит у вас в профиле. не может быть форум тестовым при таких показаниях ТИЦ и PR... ну ладно - это ваше дело...
Применение

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

[cv={COLOR}]{TEXT}[/cv]
Замена HTML

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

<div style="border:2px solid {COLOR};padding:5px">{TEXT}</div>
{COLOR} - это и есть ваш цвет рамки. прописывается либо как #FF4000, либо red

при таком варианте должно работать. табличные данные table там лишние, так как не используются.
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#13
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

Спасибо, я сейчас попробую ваш вариант.
Я удалю все из профиля. Ну чесс, я не понимаю, что не так. Там написано - укажите только основной домен. А у меня форум на бесплатном хостинге. Поэтому так и написала. Могу в личку выслать ссылку на мой тестовый форум. Тестовый - значит я там просто тренируюсь с друзьями, и общаюсь. Но, все основное скрыто и от ботов и от гостей.
#14
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

ну некоторые пытаются использовать этот сегмент как лишнюю активную ссылку на свой сайт, чтобы поднять PR, просто не знают, что здесь это не работает.
а зачем вам вообще прописывать ваш сайт... просто так удобнее ПОМОГАТЬ при каких-то проблемах, когда можно самому глянуть что да как и какой стиль.
так просто намного удобнее. и вам, и нам. некоторые не пишут, а общаются сканами страниц. по-всякому.
никто вам ничего плохого не говорит и не обещает. :-00):
обращайтесь и дальше. чем сможем - поможем.
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#15
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

Да, все получилось)) :ro_za: Только мне нужно, чтобы эта рамка была не фиксированная, а заканчивалась после слова. Что для этого нужно добавить? В моем ББ коде, как раз так и есть.
#16
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

понятно. тогда да, нужен table. у div по-умолчанию ширина 100%...
тогда так:

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

<table><tr><td><div style="border:2px solid {COLOR};padding:5px">{TEXT}</div></td></tr></table>
....

можно попроще вообще без дива:

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

<table><tr><td style="border:2px solid {COLOR};padding:5px">{TEXT}</td></tr></table>
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#17
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

Все получилось. Спасибо)) :son-ce: Теперь буду это осмысливать и запоминать.
Я думала, вы меня ругаете за ссылку)) На многих форумах нельзя ссылки давать, вот я и боялась. Поставила в профиль точную ссылку, раз так удобнее для всех.
Я пытаюсь изучать ХТМЛ через построение и изменение ББ кодов. Мне очень нравится видеть результат - просто символы, и вдруг нажимаешь на кнопочку, а у тебя оформление становится ярким и красочным)
#18
Аватара пользователя
белк
Хорошо тут живется
Хорошо тут живется
Сообщения: 1322
Стаж: 10 лет 6 месяцев
Откуда: Россия
Контактная информация:

Создание bb кода

Сообщение белк »

skazik писал(а):Я пытаюсь изучать ХТМЛ через построение и изменение ББ кодов. Мне очень нравится видеть результат - просто символы, и вдруг нажимаешь на кнопочку, а у тебя оформление становится ярким и красочным)
:-00):
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
#19
skazik
Заглянул на огонек
Заглянул на огонек
Сообщения: 23
Стаж: 9 лет 2 месяца
Откуда: г.Оренбург

Создание bb кода

Сообщение skazik »

Белк , что я опять не так сделала :hi_hi_hi:

Вот я написала ББ код, на основе маркера. Мне нужно, чтобы маркер был просто из линии вокруг слова. Это наподобие того, что я делала, но немного другое. В этом варианте слово обводится рамкой и остается на той же строке.

НО. С одной стороны, полоска тоньше, чем с других. А это значит, что что то не так. Ну и некрасиво :smu:sche_nie:

Подскажи, где моя ошибка? )

Замена ХТМЛ

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

<span style="border:1.5px solid#FF0040">{TEXT}</span>
Смотреть образец:

#20
Ответить