Автор
Сообщение
Belk (Андрей)
Администратор
Стаж: 5 месяцев 21 деньСообщения: 228Откуда: здешние мы
Стиль сайта: subsilver2
Настоящее имя: Андрей
Оформление полоски 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 → 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 → 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="Ω" 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> </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 → 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 → 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="Ω" 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> </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
Ладненько, добрался, протестировал - получилось вот так:
немного пояснений:
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 Найти
Добавить после найденного
Теперь надо очистить кэши (темы, шаблона и браузера) и любоваться нововведением. :-D
Надеюсь кому-нибудь пригодится.
трёхголовый белк семейства рептилоидов: "три головы - хорошо, на как же трудно придти к согласию..."
Dmitry
Стаж: 5 месяцев 19 днейСообщения: 26
Стиль сайта: prosilver
Спасибо, Андрей!
Буду ждать результатов тестов на Prosilvere
Belk (Андрей)
Администратор
Стаж: 5 месяцев 21 деньСообщения: 228Откуда: здешние мы
Стиль сайта: subsilver2
Настоящее имя: Андрей
добавил правки для стиля prosilver.
трёхголовый белк семейства рептилоидов: "три головы - хорошо, на как же трудно придти к согласию..."
Dmitry
Стаж: 5 месяцев 19 днейСообщения: 26
Стиль сайта: prosilver
Очень качественная и вписывающаяся в стиль доработка! Респект!
Поставил, но верстка поехала
Belk (Андрей)
Администратор
Стаж: 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>или, если у вас новая доработка не стоит - просто поставить второй вариант.
выглядеть будет так:
смотрю, у вас шаблон вывода уже изменённый... попробуйте добавить в самый конец файла
posting_buttons.html (после
<!-- ENDIF --> ). должно помочь.
трёхголовый белк семейства рептилоидов: "три головы - хорошо, на как же трудно придти к согласию..."
Dmitry
Стаж: 5 месяцев 19 днейСообщения: 26
Стиль сайта: prosilver
Не, Андрей. Хотелось бы что бы новые кнопки оказались на новой строчке, но не с середины экрана как на скрине, а на одном уровне со стандартными кнопками. У Вас именно так и сделано. Хотелось бы и у себя также что бы было )
Belk (Андрей)
Администратор
Стаж: 5 месяцев 21 деньСообщения: 228Откуда: здешние мы
Стиль сайта: subsilver2
Настоящее имя: Андрей
просто поставьте перед
переход строки
должно помочь.
трёхголовый белк семейства рептилоидов: "три головы - хорошо, на как же трудно придти к согласию..."
Dmitry
Стаж: 5 месяцев 19 днейСообщения: 26
Стиль сайта: prosilver
просто поставьте перед
переход строки
должно помочь.
Действительно помогло, Андрей, Спасибо!
Но, опять есть но
Огромные зазоры, как в быстром ответе, так и в стандартном, где эта площадь до неприличия огромная!
Очень прошу помочь. см. скрины. Откатывать не стал
Dmitry
Стаж: 5 месяцев 19 днейСообщения: 26
Стиль сайта: prosilver
Хотя проще сделать как в быстром ответе, т.е. что бы смайлы были по горизонтали
Belk (Андрей)
Администратор
Стаж: 5 месяцев 21 деньСообщения: 228Откуда: здешние мы
Стиль сайта: subsilver2
Настоящее имя: Андрей
оставьте один <br /> вместо двух и добавьте <br /> в самый конец файла posting_buttons.html в таком варианте смайлы ( в стандартном варианте) уберутся за поле для сообщения. у вас где-то уже что-то изменено, раз они выводятся полоской - смотрите изменения. сравните стандартный и ваш posting_editor.html , вроде...
трёхголовый белк семейства рептилоидов: "три головы - хорошо, на как же трудно придти к согласию..."