сайт на данный момент является архивом информации по форуму phpbb 3.0. объяснения и помощь больше не предоставляются. старый сайт

Белк на PhpBB 3.0.14

информация по этому форуму. bbcode, моды и прочее, проверенное Белком. (перенос данных продолжается...)

Сегодня на конференции было 65 посетителей :: 1 зарегистрированный, 0 скрытых, 1 бот и 63 гостей (основано на активности посетителей за последние 24 часа)




 [ Сообщений: 12 ]  На страницу 1, 2  След.
Автор Сообщение
Не в сети
  (Андрей)
Администратор
Аватара пользователя

Стаж: 5 месяцев 21 день
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей


Оформление полоски 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:


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

Стаж: 5 месяцев 19 дней
Сообщения: 26

Стиль сайта: prosilver


Спасибо, Андрей! :arigato: Буду ждать результатов тестов на Prosilvere :)


Не в сети
  (Андрей)
Администратор
Аватара пользователя

Стаж: 5 месяцев 21 день
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей


добавил правки для стиля prosilver.


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

Стаж: 5 месяцев 19 дней
Сообщения: 26

Стиль сайта: prosilver


Очень качественная и вписывающаяся в стиль доработка! Респект!

Поставил, но верстка поехала :(


Не в сети
  (Андрей)
Администратор
Аватара пользователя

Стаж: 5 месяцев 21 день
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей


если хотите новые кнопки в одну строчку - необходимо удалить "блок" на дополнительных 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



(после <!-- ENDIF -->). должно помочь.


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

Стаж: 5 месяцев 19 дней
Сообщения: 26

Стиль сайта: prosilver


Не, Андрей. Хотелось бы что бы новые кнопки оказались на новой строчке, но не с середины экрана как на скрине, а на одном уровне со стандартными кнопками.
У Вас именно так и сделано. Хотелось бы и у себя также что бы было )


Не в сети
  (Андрей)
Администратор
Аватара пользователя

Стаж: 5 месяцев 21 день
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей


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

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

<!-- BEGIN custom_tags -->


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

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

<br /><br />


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


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

Стаж: 5 месяцев 19 дней
Сообщения: 26

Стиль сайта: prosilver


Belk писал(а):

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

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

<!-- BEGIN custom_tags -->


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

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

<br /><br />


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


Действительно помогло, Андрей, Спасибо! :arigato:
Но, опять есть но :facepalm:
Огромные зазоры, как в быстром ответе, так и в стандартном, где эта площадь до неприличия огромная! :( Очень прошу помочь. см. скрины. Откатывать не стал


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

Стаж: 5 месяцев 19 дней
Сообщения: 26

Стиль сайта: prosilver


Хотя проще сделать как в быстром ответе, т.е. что бы смайлы были по горизонтали :)


Не в сети
  (Андрей)
Администратор
Аватара пользователя

Стаж: 5 месяцев 21 день
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей


оставьте один <br /> вместо двух и добавьте <br /> в самый конец файла posting_buttons.html

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

сравните стандартный и ваш posting_editor.html, вроде...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 12 ]  На страницу 1, 2  След.

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

Всего посетителей: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (63) здесь было 23 май 2026, 12:35

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

Часовой пояс: UTC + 3 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  

cron

Текущее время: 27 июн 2026, 22:33

Создано на основе phpBB® Forum Software © phpBB Group
Русская поддержка phpBB.