Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Создание bb кода 
#1 

Аватар пользователя

BBCode

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

Разнообразные (готовые) bbcode можно посмотреть здесь: viewtopic.php?f=144&t=551

Итак, поехали.
Вложение :
Комментарий к файлу: скан админки 01

Вложение :
Комментарий к файлу: скан админки 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... */


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

Теги темы
BBCode

Информация о редактировании
Последний раз редактировалось белк 13 июн 2015, 12:36, всего редактировалось 3 раз(а).
          Вернуться наверх  
 

#2 

Аватар пользователя

Цитата:
bbcode. но там, кажется, не учат как их писать.... все bbcode - это чистый html код. надо "подружиться" (хотя бы немного) с html...


Спасибо)) Я как раз справочник сейчас изучаю по ХТМЛ. Пишу русскими, потому что лень клавиатуру переключать :-0=)


          Вернуться наверх  
 

#3 

Аватар пользователя

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

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

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

//с мобильного варианта сложновато...


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

#4 

Аватар пользователя

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

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


Да, у меня компьютер.

Буду очень благодарна)) Мне понравилось со скриптами возиться. И теперь хочется самой научиться.


          Вернуться наверх  
 

#5 

Аватар пользователя

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

он здесь:
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
(сделал и вложение, так как не дружу с депозитом...)

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

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

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


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



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

Проверка

Проверка

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


если будет возникать вопросы - спрашивайте. постараемся ответить.

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


Вложения:
Комментарий к файлу: маленький html файлик для ваших эскпериментов по постиганию html кода...
index.rar [1.05 KiB]
Скачиваний: 33
_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *

Информация о редактировании
Последний раз редактировалось белк 22 май 2015, 13:25, всего редактировалось 2 раз(а).
          Вернуться наверх  
 

#6 

Аватар пользователя

skazik писал(а):

И теперь хочется самой научиться

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


_________________
Подпись:
Апгрейд форума закончить нельзя! Его можно только временно приостановить! :hudo_zhnik:
          Вернуться наверх  
 

#7 

Аватар пользователя

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

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

Просьба к модераторам - пожалуйста, выделите в отдельную тему этот оффтоп: "Как научиться самой делать bb code"


          Вернуться наверх  
 

#8 

Аватар пользователя

skazik писал(а):

Просьба к модераторам - пожалуйста, выделите в отдельную тему этот оффтоп: "Как научиться самой делать bb code"

Кнопка "Цитата" есть в каждом посте в правом нижнем углу, но возможно у новичков она не видна, не помню уже
Присоединяюсь к просьбе "отломить" эту ветку форума и пересадить ее на другое дерево начиная с поста #20 данной темы
:hang:


_________________
Подпись:
Апгрейд форума закончить нельзя! Его можно только временно приостановить! :hudo_zhnik:
          Вернуться наверх  
 

#9 

Аватар пользователя

skazik писал(а):

Я именно так и люблю изучать

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


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


Аватар пользователя

m213480 , спасибо за советы) Мне до сайта ещё далеко, хотя книгу уже купила, как его сделать в ВордПрессе и залить на хостинг. Только сделать несложно, сложнее проявлять фантазию и наполнять контентом, а так же его продвигать. Так что, мне пока это не по силам.

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


Вот это немного не поняла, буду думать. Я в Ворде совсем не бываю. Придется открыть и разобраться :k_i_n_g:


          Вернуться наверх  
 


Аватар пользователя

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

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

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

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

Даже Рим не сразу строился... :sh_ok:


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


Аватар пользователя

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

(я не могу вам ответить, у меня нет возможности писать в личку. Вы не правы.. Я просто не умею, как нужно. Удалите там, как 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


          Вернуться наверх  
 


Аватар пользователя

я имел ввиду
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
- то, что стоит у вас в профиле. не может быть форум тестовым при таких показаниях ТИЦ и PR... ну ладно - это ваше дело...


Применение

[cv={COLOR}]{TEXT}[/cv]
 


Замена HTML

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


{COLOR} - это и есть ваш цвет рамки. прописывается либо как #FF4000, либо red

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


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


Аватар пользователя

Спасибо, я сейчас попробую ваш вариант.

Я удалю все из профиля. Ну чесс, я не понимаю, что не так. Там написано - укажите только основной домен. А у меня форум на бесплатном хостинге. Поэтому так и написала. Могу в личку выслать ссылку на мой тестовый форум. Тестовый - значит я там просто тренируюсь с друзьями, и общаюсь. Но, все основное скрыто и от ботов и от гостей.


          Вернуться наверх  
 


Аватар пользователя

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


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


Аватар пользователя

Да, все получилось)) :ro_za: Только мне нужно, чтобы эта рамка была не фиксированная, а заканчивалась после слова. Что для этого нужно добавить? В моем ББ коде, как раз так и есть.


          Вернуться наверх  
 


Аватар пользователя

понятно. тогда да, нужен 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>
 


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


Аватар пользователя

Все получилось. Спасибо)) :son-ce: Теперь буду это осмысливать и запоминать.

Я думала, вы меня ругаете за ссылку)) На многих форумах нельзя ссылки давать, вот я и боялась. Поставила в профиль точную ссылку, раз так удобнее для всех.


Я пытаюсь изучать ХТМЛ через построение и изменение ББ кодов. Мне очень нравится видеть результат - просто символы, и вдруг нажимаешь на кнопочку, а у тебя оформление становится ярким и красочным)


          Вернуться наверх  
 


Аватар пользователя

skazik писал(а):

Я пытаюсь изучать ХТМЛ через построение и изменение ББ кодов. Мне очень нравится видеть результат - просто символы, и вдруг нажимаешь на кнопочку, а у тебя оформление становится ярким и красочным)
:-00):


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


Аватар пользователя

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

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

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

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

Замена ХТМЛ
<span style="border:1.5px solid#FF0040">{TEXT}</span>
 


Смотреть образец:

Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку


          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Кусочек кода который отображает линк на панель модератора
Подскажите пожалуйста кусок кода который который выводит ссылку на панель модератора

lex0013

2

486

Аватар пользователя

12 фев 2016, 18:28

lex0013

Аватар пользователя Создание простого модуля HelloWorld
Создание простого модуля HelloWorld

Безликий

2

700

Аватар пользователя

19 июл 2012, 19:06

Безликий

Случайный аватар. Пользователю рекомендуется загрузить свой аватар в Настройках профиля Создание, продвижение и оптимизация сайта

Evgenij83

1

285

Аватар пользователя

22 июн 2017, 11:34

Atlas

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


Самая неформальная поддержка phpBB :P