Белк на PhpBB 3.0.14
https://belk.info/phpbb/

Оформление полоски bbcode при создании темы как здесь
https://belk.info/phpbb/viewtopic.php?f=5&t=56		 Страница 1 из 2
Автор:  Belk [ 09 янв 2026, 19:49 ]
Заголовок сообщения:  Оформление полоски bbcode при создании темы как здесь
Оформление полоски bbcode при создании темы как здесь

Здравствуйте. недавно меня попросили показать, как именно сделана "полоска bbcode" при создании темы на этом сайте. так как информация не сильно маленькая и может кому ещё пригодиться - решил написать отдельную темку по этому поводу...

Ну вот, вроде вступление закончено, поехали.

напомню, выглядит сия конструкция так

полоска bbcode

код такого вывода выглядит так:

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

<ul class="nav-main">
      <li><input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="width:30px;font-weight:bold;color:#ffffff;margin:2px;" onclick="bbstyle(0)" onmouseover="helpline('b')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="i" name="addbbcode2" value=" i " style="width:30px;font-style:italic;color:#ffffff;margin:2px;" onclick="bbstyle(2)" onmouseover="helpline('i')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="u" name="addbbcode4" value=" u " style="width:30px;text-decoration: underline;color:#ffffff;margin:2px;" onclick="bbstyle(4)" onmouseover="helpline('u')" onmouseout="helpline('tip')" /></li>
      <!-- IF S_BBCODE_QUOTE -->
      <li><input type="button" class="button button-blue" accesskey="q" name="addbbcode6" value="Quote" style="width:50px;color:#ffffff;margin:2px;" onclick="bbstyle(6)" onmouseover="helpline('q')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <li><input type="button" class="button button-blue" accesskey="c" name="addbbcode8" value="Code" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(8)" onmouseover="helpline('c')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="l" name="addbbcode10" value="List" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(10)" onmouseover="helpline('l')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="o" name="addbbcode12" value="List=" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(12)" onmouseover="helpline('o')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="y" name="addlistitem" value="[*]" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(-1)" onmouseover="helpline('e')" onmouseout="helpline('tip')" /></li>            
      <!-- IF S_BBCODE_IMG -->
         <li><input type="button" class="button button-blue" accesskey="p" name="addbbcode14" value="Img" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(14)" onmouseover="helpline('p')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <!-- IF S_LINKS_ALLOWED -->
         <li><input type="button" class="button button-blue" accesskey="w" name="addbbcode16" value="URL" style="width:40px;text-decoration: underline;color:#ffffff;margin:2px;" onclick="bbstyle(16)" onmouseover="helpline('w')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <!-- IF S_BBCODE_FLASH -->
         <li><input type="button" class="button button-blue" accesskey="d" name="addbbcode18" value="Flash" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(18)" onmouseover="helpline('d')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
                <li><input type="button" class="button button-blue" accesskey="t" name="keybo" value="RU &rarr; EN" style="width:80px;color:#ffffff;margin:2px;" onclick="ruen()"  onMouseOver="helpline('t12')" onmouseout="helpline('tip')" /></li>
                <li><input type="button" class="button button-blue" accesskey="t" name="keybo" value="EN &rarr; RU" style="width:80px;color:#ffffff;margin:2px;" onclick="enru()"  onMouseOver="helpline('t13')" onmouseout="helpline('tip')" /></li>
                <!-- IF S_SPECIAL_CHARS --><li><input type="button" class="button button-blue" name="bbchars" value="&Omega;" style="width:40px;color:#ffffff;margin:2px;" onclick="openbox('block1000'); return false" title="{L_BBCODE_CHARS_HELP}" /></li><!-- ENDIF -->
                </ul><br /><br /><br />
                <ul class="nav-main">
      <li><span class="genmed nowrap">{L_FONT_SIZE}: <select class="gensmall" name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" onmouseover="helpline('f')" onmouseout="helpline('tip')">
         <option value="50">{L_FONT_TINY}</option>
         <option value="85">{L_FONT_SMALL}</option>
         <option value="100" selected="selected">{L_FONT_NORMAL}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
            <option value="150">{L_FONT_LARGE}</option>
            <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
               <option value="200">{L_FONT_HUGE}</option>
            <!-- ENDIF -->
         <!-- ENDIF -->
      </select></span></li>
                <li>&nbsp;&nbsp;</li>
                <li><span class="genmed nowrap">{L_IKON_SEL}: <select class="gensmall" name="ikonka" onchange="bbfontstyle('[ikon=' + this.form.ikonka.options[this.form.ikonka.selectedIndex].value + ']', '[/ikon]');" title="{L_IKON_SEL_TITLE}">
                        <option value="" selected="selected">{L_IKON_SEL_TITLE_MAIN}</option>
                        <option value="gal">{L_IKON_GAL}</option>
                        <option value="vnim">{L_IKON_VNIM}</option>
                        <option value="inf">{L_IKON_INF}</option>
                </select></span></li>
                </ul>
<!-- ENDIF -->
   </td>
</tr>
<!-- IF S_BBCODE_ALLOWED and .custom_tags -->
   <tr valign="middle" align="{S_CONTENT_FLOW_BEGIN}">
      <td colspan="2">
      <!-- BEGIN custom_tags -->
                   <!-- IF custom_tags.DISPLAY_ONLY_FOR_MOD and not S_MOD_BBCODE -->
              <!-- ELSE -->
                        <ul class="nav-main">
         <li><input type="button" class="button button-blue" name="addbbcode{custom_tags.BBCODE_ID}" style="color:#ffffff;margin:2px;" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})"<!-- IF custom_tags.BBCODE_HELPLINE !== '' --> onmouseover="helpline('cb_{custom_tags.BBCODE_ID}')" onmouseout="helpline('tip')"<!-- ENDIF --> /></li>
                   <!-- ENDIF -->     
      <!-- END custom_tags -->
                        </ul>
      </td>
   </tr>
<!-- ENDIF -->


как видите, оформление самой кнопки прописывается добавлением класса кнопки class="button button-blue" и внешней "доводки" в виде style="width:30px;font-weight:bold;color:#ffffff;margin:2px;"

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

<input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="width:30px;font-weight:bold;color:#ffffff;margin:2px;" onclick="bbstyle(0)" onmouseover="helpline('b')" onmouseout="helpline('tip')" />


"уровни" сделаны как отдельные модули <ul class="nav-main">полоска</ul> и разделены отступами <br /><br /><br />

то есть первый уровень (вместе с кнопками по умолчанию (стандарт)

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

<ul class="nav-main">
      <li><input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="width:30px;font-weight:bold;color:#ffffff;margin:2px;" onclick="bbstyle(0)" onmouseover="helpline('b')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="i" name="addbbcode2" value=" i " style="width:30px;font-style:italic;color:#ffffff;margin:2px;" onclick="bbstyle(2)" onmouseover="helpline('i')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="u" name="addbbcode4" value=" u " style="width:30px;text-decoration: underline;color:#ffffff;margin:2px;" onclick="bbstyle(4)" onmouseover="helpline('u')" onmouseout="helpline('tip')" /></li>
      <!-- IF S_BBCODE_QUOTE -->
      <li><input type="button" class="button button-blue" accesskey="q" name="addbbcode6" value="Quote" style="width:50px;color:#ffffff;margin:2px;" onclick="bbstyle(6)" onmouseover="helpline('q')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <li><input type="button" class="button button-blue" accesskey="c" name="addbbcode8" value="Code" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(8)" onmouseover="helpline('c')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="l" name="addbbcode10" value="List" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(10)" onmouseover="helpline('l')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="o" name="addbbcode12" value="List=" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(12)" onmouseover="helpline('o')" onmouseout="helpline('tip')" /></li>
      <li><input type="button" class="button button-blue" accesskey="y" name="addlistitem" value="[*]" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(-1)" onmouseover="helpline('e')" onmouseout="helpline('tip')" /></li>            
      <!-- IF S_BBCODE_IMG -->
         <li><input type="button" class="button button-blue" accesskey="p" name="addbbcode14" value="Img" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(14)" onmouseover="helpline('p')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <!-- IF S_LINKS_ALLOWED -->
         <li><input type="button" class="button button-blue" accesskey="w" name="addbbcode16" value="URL" style="width:40px;text-decoration: underline;color:#ffffff;margin:2px;" onclick="bbstyle(16)" onmouseover="helpline('w')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
      <!-- IF S_BBCODE_FLASH -->
         <li><input type="button" class="button button-blue" accesskey="d" name="addbbcode18" value="Flash" style="width:40px;color:#ffffff;margin:2px;" onclick="bbstyle(18)" onmouseover="helpline('d')" onmouseout="helpline('tip')" /></li>
      <!-- ENDIF -->
                <li><input type="button" class="button button-blue" accesskey="t" name="keybo" value="RU &rarr; EN" style="width:80px;color:#ffffff;margin:2px;" onclick="ruen()"  onMouseOver="helpline('t12')" onmouseout="helpline('tip')" /></li>
                <li><input type="button" class="button button-blue" accesskey="t" name="keybo" value="EN &rarr; RU" style="width:80px;color:#ffffff;margin:2px;" onclick="enru()"  onMouseOver="helpline('t13')" onmouseout="helpline('tip')" /></li>
                <!-- IF S_SPECIAL_CHARS --><li><input type="button" class="button button-blue" name="bbchars" value="&Omega;" style="width:40px;color:#ffffff;margin:2px;" onclick="openbox('block1000'); return false" title="{L_BBCODE_CHARS_HELP}" /></li><!-- ENDIF -->
                </ul><br /><br /><br />


второй уровень (это размер шрифта и выбор иконок)

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

<ul class="nav-main">
      <li><span class="genmed nowrap">{L_FONT_SIZE}: <select class="gensmall" name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" onmouseover="helpline('f')" onmouseout="helpline('tip')">
         <option value="50">{L_FONT_TINY}</option>
         <option value="85">{L_FONT_SMALL}</option>
         <option value="100" selected="selected">{L_FONT_NORMAL}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
            <option value="150">{L_FONT_LARGE}</option>
            <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
               <option value="200">{L_FONT_HUGE}</option>
            <!-- ENDIF -->
         <!-- ENDIF -->
      </select></span></li>
                <li>&nbsp;&nbsp;</li>
                <li><span class="genmed nowrap">{L_IKON_SEL}: <select class="gensmall" name="ikonka" onchange="bbfontstyle('[ikon=' + this.form.ikonka.options[this.form.ikonka.selectedIndex].value + ']', '[/ikon]');" title="{L_IKON_SEL_TITLE}">
                        <option value="" selected="selected">{L_IKON_SEL_TITLE_MAIN}</option>
                        <option value="gal">{L_IKON_GAL}</option>
                        <option value="vnim">{L_IKON_VNIM}</option>
                        <option value="inf">{L_IKON_INF}</option>
                </select></span></li>
                </ul>


третий уровень (дополнительные bbcode, добавленные через админку) реализован через отдельную строку tr, как это сделано в оригинальном файле. я только добавил в этот блок свой и оформление <ul class="nav-main">

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

<!-- IF S_BBCODE_ALLOWED and .custom_tags -->
   <tr valign="middle" align="{S_CONTENT_FLOW_BEGIN}">
      <td colspan="2">
      <!-- BEGIN custom_tags -->
                   <!-- IF custom_tags.DISPLAY_ONLY_FOR_MOD and not S_MOD_BBCODE -->
              <!-- ELSE -->
                        <ul class="nav-main">
         <li><input type="button" class="button button-blue" name="addbbcode{custom_tags.BBCODE_ID}" style="color:#ffffff;margin:2px;" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})"<!-- IF custom_tags.BBCODE_HELPLINE !== '' --> onmouseover="helpline('cb_{custom_tags.BBCODE_ID}')" onmouseout="helpline('tip')"<!-- ENDIF --> /></li>
                   <!-- ENDIF -->     
      <!-- END custom_tags -->
                        </ul>
      </td>
   </tr>
<!-- ENDIF -->



 Оформление css  // css оформление создано на основе кодов, выловленных мной давно на просторах интернета и я просто уже не помню где. если автор появится - с удовольствием пропишу ссылку на его авторство. :)

в коде присутствуют 3 цвета кнопок - синий, зелёный и красный.

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

ul.nav-main,
ul.nav-main li{list-style:none;margin:0;padding:0;}
ul.nav-main{position:relative;}
ul.nav-main li{float:left;display:block;height:26px;}
ul.nav-main li a{color:#FFFFFF;font-weight:normal;text-decoration:none;}
ul.nav-main li a:hover{color:#FFFFFF;font-weight:normal;text-decoration:none;}
.button{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739));background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');}
.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95));background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');}
.button-green:active{background:#428739;}
.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741));background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');}
.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E));background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');}
.button-red:active{background:#D82741;}


для стиля prosilver необходимо сначала протестировать возможность применения. как проверю - допишу в тему. → сделал.

полоска в prosilver
Ладненько, добрался, протестировал - получилось вот так:

вывод кнопок belk в prosilver


немного пояснений:
1. установлено на чистый стандартный стиль
2. оформление (css) прописано прямо в файле кнопок (для удобства применения)

Итак, открываем файл posting_buttons.html

Находим

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

<div id="format-buttons">
   <input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" />
   <input type="button" class="button2" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" />
   <input type="button" class="button2" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" />
   <!-- IF S_BBCODE_QUOTE -->
      <input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />
   <!-- ENDIF -->
   <input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" />
   <input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" />
   <input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" />
   <input type="button" class="button2" accesskey="y" name="addlistitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" />
   <!-- IF S_BBCODE_IMG -->
      <input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" />
   <!-- ENDIF -->
   <!-- IF S_LINKS_ALLOWED -->
      <input type="button" class="button2" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" />
   <!-- ENDIF -->
   <!-- IF S_BBCODE_FLASH -->
      <input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />
   <!-- ENDIF -->
   <select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">
      <option value="50">{L_FONT_TINY}</option>
      <option value="85">{L_FONT_SMALL}</option>
      <option value="100" selected="selected">{L_FONT_NORMAL}</option>
      <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
         <option value="150">{L_FONT_LARGE}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
            <option value="200">{L_FONT_HUGE}</option>
         <!-- ENDIF -->
      <!-- ENDIF -->
   </select>
   <input type="button" class="button2" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />
   <!-- BEGIN custom_tags -->
      <input type="button" class="button2" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" />
   <!-- END custom_tags -->
</div>


Заменить найденное на

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

<style>
ul.nav-main,
ul.nav-main li{list-style:none;margin:0;padding:0;}
ul.nav-main{position:relative;}
ul.nav-main li{float:left;display:block;height:26px;}
ul.nav-main li a{color:#FFFFFF;font-weight:normal;text-decoration:none;}
ul.nav-main li a:hover{color:#FFFFFF;font-weight:normal;text-decoration:none;}
.button{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<div id="format-buttons">
  <ul class="nav-main">
   <li><input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;color:#FFFFFF" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;color:#FFFFFF" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;color:#FFFFFF" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" /></li>
   <!-- IF S_BBCODE_QUOTE -->
      <li><input type="button" class="button button-blue" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px;color:#FFFFFF" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" /></li>
   <!-- ENDIF -->
   <li><input type="button" class="button button-blue" accesskey="c" name="addbbcode8" value="Code" style="width: 40px;color:#FFFFFF" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="l" name="addbbcode10" value="List" style="width: 40px;color:#FFFFFF" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="o" name="addbbcode12" value="List=" style="width: 40px;color:#FFFFFF" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="y" name="addlistitem" value="[*]" style="width: 40px;color:#FFFFFF" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" /></li>
   <!-- IF S_BBCODE_IMG -->
      <li><input type="button" class="button button-blue" accesskey="p" name="addbbcode14" value="Img" style="width: 40px;color:#FFFFFF" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_LINKS_ALLOWED -->
      <li><input type="button" class="button button-blue" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px;color:#FFFFFF" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_BBCODE_FLASH -->
      <li><input type="button" class="button button-blue" accesskey="d" name="addbbcode18" value="Flash" style="color:#FFFFFF" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" /></li>
   <!-- ENDIF -->
   <select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}" style="margin:2px;"></li>
      <option value="50">{L_FONT_TINY}</option>
      <option value="85">{L_FONT_SMALL}</option>
      <option value="100" selected="selected">{L_FONT_NORMAL}</option>
      <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
         <option value="150">{L_FONT_LARGE}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
            <option value="200">{L_FONT_HUGE}</option>
         <!-- ENDIF -->
      <!-- ENDIF -->
   </select>
   <li><input type="button" class="button button-blue" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" style="color:#FFFFFF" onclick="change_palette();" title="{L_BBCODE_S_HELP}" /></li>
 </ul>
<br /><br />
   <!-- BEGIN custom_tags -->
 <ul class="nav-main">
      <li><input type="button" class="button button-blue" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" style="color:#FFFFFF" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" /></li>
 </ul>
   <!-- END custom_tags -->
</div>


Теперь, для корректного изображения панели кнопок надо сделать ещё одну правку:
Открываем файл posting_editor.html

Найти

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

   <!-- INCLUDE posting_buttons.html -->


Добавить после найденного




Теперь надо очистить кэши (темы, шаблона и браузера) и любоваться нововведением. :-D



Надеюсь кому-нибудь пригодится. :arigato:
Автор:  Dmitry [ 09 янв 2026, 19:52 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
Спасибо, Андрей! :arigato: Буду ждать результатов тестов на Prosilvere :)
Автор:  Belk [ 09 янв 2026, 19:53 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
добавил правки для стиля prosilver.
Автор:  Dmitry [ 09 янв 2026, 19:54 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
Очень качественная и вписывающаяся в стиль доработка! Респект!

Поставил, но верстка поехала :(
Автор:  Belk [ 09 янв 2026, 19:55 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
если хотите новые кнопки в одну строчку - необходимо удалить "блок" на дополнительных bbcode. то есть, открыть posting_buttons.html

найти

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

<style>
ul.nav-main,
ul.nav-main li{list-style:none;margin:0;padding:0;}
ul.nav-main{position:relative;}
ul.nav-main li{float:left;display:block;height:26px;}
ul.nav-main li a{color:#FFFFFF;font-weight:normal;text-decoration:none;}
ul.nav-main li a:hover{color:#FFFFFF;font-weight:normal;text-decoration:none;}
.button{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<div id="format-buttons">
  <ul class="nav-main">
   <li><input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;color:#FFFFFF" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;color:#FFFFFF" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;color:#FFFFFF" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" /></li>
   <!-- IF S_BBCODE_QUOTE -->
      <li><input type="button" class="button button-blue" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px;color:#FFFFFF" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" /></li>
   <!-- ENDIF -->
   <li><input type="button" class="button button-blue" accesskey="c" name="addbbcode8" value="Code" style="width: 40px;color:#FFFFFF" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="l" name="addbbcode10" value="List" style="width: 40px;color:#FFFFFF" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="o" name="addbbcode12" value="List=" style="width: 40px;color:#FFFFFF" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="y" name="addlistitem" value="[*]" style="width: 40px;color:#FFFFFF" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" /></li>
   <!-- IF S_BBCODE_IMG -->
      <li><input type="button" class="button button-blue" accesskey="p" name="addbbcode14" value="Img" style="width: 40px;color:#FFFFFF" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_LINKS_ALLOWED -->
      <li><input type="button" class="button button-blue" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px;color:#FFFFFF" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_BBCODE_FLASH -->
      <li><input type="button" class="button button-blue" accesskey="d" name="addbbcode18" value="Flash" style="color:#FFFFFF" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" /></li>
   <!-- ENDIF -->
   <select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}" style="margin:2px;"></li>
      <option value="50">{L_FONT_TINY}</option>
      <option value="85">{L_FONT_SMALL}</option>
      <option value="100" selected="selected">{L_FONT_NORMAL}</option>
      <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
         <option value="150">{L_FONT_LARGE}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
            <option value="200">{L_FONT_HUGE}</option>
         <!-- ENDIF -->
      <!-- ENDIF -->
   </select>
   <li><input type="button" class="button button-blue" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" style="color:#FFFFFF" onclick="change_palette();" title="{L_BBCODE_S_HELP}" /></li>
 </ul>
   <!-- BEGIN custom_tags -->
 <ul class="nav-main">
      <li><input type="button" class="button button-blue" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" style="color:#FFFFFF" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" /></li>
 </ul>
   <!-- END custom_tags -->
</div>


и заменить на

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

<style>
ul.nav-main,
ul.nav-main li{list-style:none;margin:0;padding:0;}
ul.nav-main{position:relative;}
ul.nav-main li{float:left;display:block;height:26px;}
ul.nav-main li a{color:#FFFFFF;font-weight:normal;text-decoration:none;}
ul.nav-main li a:hover{color:#FFFFFF;font-weight:normal;text-decoration:none;}
.button{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<div id="format-buttons">
  <ul class="nav-main">
   <li><input type="button" class="button button-blue" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;color:#FFFFFF" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;color:#FFFFFF" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;color:#FFFFFF" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" /></li>
   <!-- IF S_BBCODE_QUOTE -->
      <li><input type="button" class="button button-blue" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px;color:#FFFFFF" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" /></li>
   <!-- ENDIF -->
   <li><input type="button" class="button button-blue" accesskey="c" name="addbbcode8" value="Code" style="width: 40px;color:#FFFFFF" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="l" name="addbbcode10" value="List" style="width: 40px;color:#FFFFFF" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="o" name="addbbcode12" value="List=" style="width: 40px;color:#FFFFFF" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" /></li>
   <li><input type="button" class="button button-blue" accesskey="y" name="addlistitem" value="[*]" style="width: 40px;color:#FFFFFF" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" /></li>
   <!-- IF S_BBCODE_IMG -->
      <li><input type="button" class="button button-blue" accesskey="p" name="addbbcode14" value="Img" style="width: 40px;color:#FFFFFF" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_LINKS_ALLOWED -->
      <li><input type="button" class="button button-blue" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px;color:#FFFFFF" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" /></li>
   <!-- ENDIF -->
   <!-- IF S_BBCODE_FLASH -->
      <li><input type="button" class="button button-blue" accesskey="d" name="addbbcode18" value="Flash" style="color:#FFFFFF" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" /></li>
   <!-- ENDIF -->
   <li><select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}" style="margin:2px;"></li>
      <option value="50">{L_FONT_TINY}</option>
      <option value="85">{L_FONT_SMALL}</option>
      <option value="100" selected="selected">{L_FONT_NORMAL}</option>
      <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
         <option value="150">{L_FONT_LARGE}</option>
         <!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
            <option value="200">{L_FONT_HUGE}</option>
         <!-- ENDIF -->
      <!-- ENDIF -->
   </select></li>
   <li><input type="button" class="button button-blue" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" style="color:#FFFFFF" onclick="change_palette();" title="{L_BBCODE_S_HELP}" /></li>
   <!-- BEGIN custom_tags -->
      <li><input type="button" class="button button-blue" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" style="color:#FFFFFF" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" /></li>
   <!-- END custom_tags -->
  </ul> 
</div>


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

выглядеть будет так:

bbcode в линию


смотрю, у вас шаблон вывода уже изменённый... попробуйте добавить в самый конец файла posting_buttons.html

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

<br/>


(после <!-- ENDIF -->). должно помочь.
Автор:  Dmitry [ 09 янв 2026, 19:56 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
Не, Андрей. Хотелось бы что бы новые кнопки оказались на новой строчке, но не с середины экрана как на скрине, а на одном уровне со стандартными кнопками.
У Вас именно так и сделано. Хотелось бы и у себя также что бы было )
Автор:  Belk [ 09 янв 2026, 19:57 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
просто поставьте перед

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

<!-- BEGIN custom_tags -->


переход строки

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

<br /><br />


должно помочь.
Автор:  Dmitry [ 09 янв 2026, 19:58 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
Belk писал(а):

просто поставьте перед

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

<!-- BEGIN custom_tags -->


переход строки

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

<br /><br />


должно помочь.


Действительно помогло, Андрей, Спасибо! :arigato:
Но, опять есть но :facepalm:
Огромные зазоры, как в быстром ответе, так и в стандартном, где эта площадь до неприличия огромная! :( Очень прошу помочь. см. скрины. Откатывать не стал
Автор:  Dmitry [ 09 янв 2026, 19:59 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
Хотя проще сделать как в быстром ответе, т.е. что бы смайлы были по горизонтали :)
Автор:  Belk [ 09 янв 2026, 20:02 ]
Заголовок сообщения:  Re: Оформление полоски bbcode при создании темы как здесь
оставьте один <br /> вместо двух и добавьте <br /> в самый конец файла posting_buttons.html

в таком варианте смайлы ( в стандартном варианте) уберутся за поле для сообщения.
у вас где-то уже что-то изменено, раз они выводятся полоской - смотрите изменения.

сравните стандартный и ваш posting_editor.html, вроде...
Страница 1 из 2 Часовой пояс: UTC + 3 часа
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/