Форма добавления комментариев как на DLE
Опубликовано 24.04.2016 в 15:12
Установка:
1. В форму добавления комментариев заменяем код на этот:
2. В CSS добавим:
3. Залить папку images/bbcodes к себе на сайт
Мне нравится (1)
Загрузить (12.6 Kb)
1. В форму добавления комментариев заменяем код на этот:
Код
<div class="base">
<div class="static_c">
<div class="tableform" id="blocksize">
<div style="display:none;">$BBCODES$</div>
<?if($ERROR$)?><div class="commError" id="eMessage" align="center">$ERROR$</div><?endif?>
<dl>
<dd class="editorcomm">
<div class="bb-editor">
<?if($BBCODES$)?>
<div class="bb-pane">
<span id="b_b" class="bb-btn" href="javascript:if;;" onclick="simpletag('b','','','message','')" title="Полужирный"><b>Полужирный</b></span>
<span id="b_i" class="bb-btn" href="javascript:if;;" onclick="simpletag('i','','','message','')" title="Наклонный текст"><b>Наклонный текст</b></span>
<span id="b_u" class="bb-btn" href="javascript:if;;" onclick="simpletag('u','','','message','')" title="Подчеркнутый текст"><b>Подчеркнутый текст</b></span>
<span id="b_url" class="bb-btn" href="javascript:if;;" onclick="tag_url('message','')" title="Вставка ссылки"><b>Вставка ссылки</b></span>
<span id="b_emo" class="bb-btn" title="Вставка смайликов" onclick="new _uWnd('Sml',' ',-250,-350,{autosize:0,closeonesc:1,resize:0},{url:'/index/35-1-'});" href="#"><b>Вставка смайликов</b></span>
<span id="b_hide" class="bb-btn" href="javascript:if;;" onclick="simpletag('hide','','','message','')" title="Скрытый текст"><b>Скрытый текст</b></span>
<span id="b_left" class="bb-btn" href="javascript:if;;" onclick="simpletag('l','','','message','')" title="Выравнивание по левому краю"><b>Выравнивание по левому краю</b></span>
<span id="b_center" class="bb-btn" href="javascript:if;;" onclick="simpletag('c','','','message','')" title="По центру"><b>По центру</b></span>
<span id="b_right" class="bb-btn" href="javascript:if;;" onclick="simpletag('r','','','message','')" title="Выравнивание по правому краю"><b>Выравнивание по правому краю</b></span>
</div>
<?endif?>
<div class="bb_area">
<textarea name="message" id="message" cols="70" rows="10">$MESSAGE$</textarea>
</div>
</div>
</dd></dl>
</div>
<div align="center"><br>
<input class="f_button" id="addcBut" name="submit" value="Добавить" type="submit">
</div>
<div class="clr"></div>
</div></div>
<div class="static_c">
<div class="tableform" id="blocksize">
<div style="display:none;">$BBCODES$</div>
<?if($ERROR$)?><div class="commError" id="eMessage" align="center">$ERROR$</div><?endif?>
<dl>
<dd class="editorcomm">
<div class="bb-editor">
<?if($BBCODES$)?>
<div class="bb-pane">
<span id="b_b" class="bb-btn" href="javascript:if;;" onclick="simpletag('b','','','message','')" title="Полужирный"><b>Полужирный</b></span>
<span id="b_i" class="bb-btn" href="javascript:if;;" onclick="simpletag('i','','','message','')" title="Наклонный текст"><b>Наклонный текст</b></span>
<span id="b_u" class="bb-btn" href="javascript:if;;" onclick="simpletag('u','','','message','')" title="Подчеркнутый текст"><b>Подчеркнутый текст</b></span>
<span id="b_url" class="bb-btn" href="javascript:if;;" onclick="tag_url('message','')" title="Вставка ссылки"><b>Вставка ссылки</b></span>
<span id="b_emo" class="bb-btn" title="Вставка смайликов" onclick="new _uWnd('Sml',' ',-250,-350,{autosize:0,closeonesc:1,resize:0},{url:'/index/35-1-'});" href="#"><b>Вставка смайликов</b></span>
<span id="b_hide" class="bb-btn" href="javascript:if;;" onclick="simpletag('hide','','','message','')" title="Скрытый текст"><b>Скрытый текст</b></span>
<span id="b_left" class="bb-btn" href="javascript:if;;" onclick="simpletag('l','','','message','')" title="Выравнивание по левому краю"><b>Выравнивание по левому краю</b></span>
<span id="b_center" class="bb-btn" href="javascript:if;;" onclick="simpletag('c','','','message','')" title="По центру"><b>По центру</b></span>
<span id="b_right" class="bb-btn" href="javascript:if;;" onclick="simpletag('r','','','message','')" title="Выравнивание по правому краю"><b>Выравнивание по правому краю</b></span>
</div>
<?endif?>
<div class="bb_area">
<textarea name="message" id="message" cols="70" rows="10">$MESSAGE$</textarea>
</div>
</div>
</dd></dl>
</div>
<div align="center"><br>
<input class="f_button" id="addcBut" name="submit" value="Добавить" type="submit">
</div>
<div class="clr"></div>
</div></div>
2. В CSS добавим:
Код
/* бб панель */
.bb-editor{-webkit-box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; -moz-box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; background:#fff; padding:1px 0;}
.bb-pane{background:#ffffff;
/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#f7f8fc));
/* Chrome, Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* Chrome10+, Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* IE10+ */
background:linear-gradient(to bottom,#ffffff 0%,#f7f8fc 100%);
/* W3C */
filter:progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff',endcolorstr='#f7f8fc',gradienttype=0 );
/* IE6-9 */
border-bottom:1px solid #eef0f0; height:31px; margin:0 1px; position:relative;}
.bb-sel{float:left; padding:4px 2px 0 2px; }
.bb-sel select{font-size:11px; }
.bb-btn{background:url("../images/bbcodes/sep.png") no-repeat right 0; width:28px; padding:0 1px 0 0; height:31px; float:left; display:block; overflow:hidden; text-indent:-9999px; white-space:nowrap; cursor:pointer; box-shadow:none;}
.bb-btn:hover{background-color:rgba(241,245,250,1); padding:0; margin:0 1px 0 0;}
.bb-btn b{height:30px; width:26px; background:url("../images/bbcodes/bbcodes.png") no-repeat; display:block; text-indent:-9999px;}
.bb-btn b:hover{}
#b_font{width:118px;}
#b_size{width:65px;}
#b_font select{padding:0px;}
#b_size select{padding:0px;}
#b_b b,.b_b b{background-position:0 0;}
#b_i b,.b_i b{background-position:-28px 0;}
#b_u b,.b_u b{background-position:-56px 0;}
#b_s b,.b_s b{background-position:-84px 0;}
#b_img b,.b_img b{background-position:-308px 0;}
#b_up b{background-position:-56px -35px;}
#b_emo b,.b_emo b{background-position:-224px 0;}
#b_url b,.b_url b{background-position:-252px 0;}
#b_leech b,.b_leech b{background-position:-280px 0;}
#b_mail b{background-position:-84px -35px;}
#b_video b{background-position:-112px -35px;}
#b_audio b{background-position:-140px -35px;}
#b_hide b{background-position:-336px 0;}
#b_quote b,.b_quote b{background-position:-364px 0;}
#b_code b{background-position:-168px -35px;}
#b_left b{background-position:-112px 0;}
#b_center b{background-position:-140px 0;}
#b_right b{background-position:-168px 0;}
#b_color b,.b_color b{background-position:-196px 0;}
#b_spoiler b{background-position:-28px -35px;}
#b_fla b{background-position:-280px -35px;}
#b_yt b{background-position:-252px -35px;}
#b_tf b{background-position:-308px -35px;}
#b_list b{background-position:-336px -35px;}
#b_ol b{background-position:-364px -35px;}
#b_tnl b{background-position:0 -35px;}
#b_br b{background-position:-196px -35px;}
#b_pl b{background-position:-224px -35px;}
.bb-editor textarea{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding:2px; width:100%; color:#adadad;}
.bb_area{padding:0; }
.lc_textarea textarea{background:url('../images/bbcodes/cloud.png') no-repeat scroll center center transparent !important; height:112px; }
.lc_textarea textarea{box-sizing:border-box;padding:2px;width:100%;color:#adadad;/*box-shadow:0px 1px 4px 0px rgba(238,240,240,0.58) inset;*/}
.f_button {
padding: 5px 22px;
border: none;
border-bottom: 1px solid #179315;
background-color: #23a720;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#aee218), to(#23a720));
background-image: -webkit-linear-gradient(top, #aee218, #23a720);
background-image: -o-linear-gradient(top, #aee218, #23a720);
background-image: linear-gradient(to bottom, #aee218, #23a720);
background-repeat: repeat-x;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
-webkit-border-radius: 18px;
border-radius: 18px;
color: #fff;
font-size: 1em;
text-shadow: 0 -1px 0 #42b51e;
margin-left: 4px;
font-weight: bold;
}
.f_button:hover {
background-position: 0 -10px;
}
.bb-editor{-webkit-box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; -moz-box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; box-shadow:inset 0px 0px 0px 1px #eef0f0,0px 0px 0px 3px #f8fbfb; background:#fff; padding:1px 0;}
.bb-pane{background:#ffffff;
/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#f7f8fc));
/* Chrome, Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* Chrome10+, Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#f7f8fc 100%);
/* IE10+ */
background:linear-gradient(to bottom,#ffffff 0%,#f7f8fc 100%);
/* W3C */
filter:progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff',endcolorstr='#f7f8fc',gradienttype=0 );
/* IE6-9 */
border-bottom:1px solid #eef0f0; height:31px; margin:0 1px; position:relative;}
.bb-sel{float:left; padding:4px 2px 0 2px; }
.bb-sel select{font-size:11px; }
.bb-btn{background:url("../images/bbcodes/sep.png") no-repeat right 0; width:28px; padding:0 1px 0 0; height:31px; float:left; display:block; overflow:hidden; text-indent:-9999px; white-space:nowrap; cursor:pointer; box-shadow:none;}
.bb-btn:hover{background-color:rgba(241,245,250,1); padding:0; margin:0 1px 0 0;}
.bb-btn b{height:30px; width:26px; background:url("../images/bbcodes/bbcodes.png") no-repeat; display:block; text-indent:-9999px;}
.bb-btn b:hover{}
#b_font{width:118px;}
#b_size{width:65px;}
#b_font select{padding:0px;}
#b_size select{padding:0px;}
#b_b b,.b_b b{background-position:0 0;}
#b_i b,.b_i b{background-position:-28px 0;}
#b_u b,.b_u b{background-position:-56px 0;}
#b_s b,.b_s b{background-position:-84px 0;}
#b_img b,.b_img b{background-position:-308px 0;}
#b_up b{background-position:-56px -35px;}
#b_emo b,.b_emo b{background-position:-224px 0;}
#b_url b,.b_url b{background-position:-252px 0;}
#b_leech b,.b_leech b{background-position:-280px 0;}
#b_mail b{background-position:-84px -35px;}
#b_video b{background-position:-112px -35px;}
#b_audio b{background-position:-140px -35px;}
#b_hide b{background-position:-336px 0;}
#b_quote b,.b_quote b{background-position:-364px 0;}
#b_code b{background-position:-168px -35px;}
#b_left b{background-position:-112px 0;}
#b_center b{background-position:-140px 0;}
#b_right b{background-position:-168px 0;}
#b_color b,.b_color b{background-position:-196px 0;}
#b_spoiler b{background-position:-28px -35px;}
#b_fla b{background-position:-280px -35px;}
#b_yt b{background-position:-252px -35px;}
#b_tf b{background-position:-308px -35px;}
#b_list b{background-position:-336px -35px;}
#b_ol b{background-position:-364px -35px;}
#b_tnl b{background-position:0 -35px;}
#b_br b{background-position:-196px -35px;}
#b_pl b{background-position:-224px -35px;}
.bb-editor textarea{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding:2px; width:100%; color:#adadad;}
.bb_area{padding:0; }
.lc_textarea textarea{background:url('../images/bbcodes/cloud.png') no-repeat scroll center center transparent !important; height:112px; }
.lc_textarea textarea{box-sizing:border-box;padding:2px;width:100%;color:#adadad;/*box-shadow:0px 1px 4px 0px rgba(238,240,240,0.58) inset;*/}
.f_button {
padding: 5px 22px;
border: none;
border-bottom: 1px solid #179315;
background-color: #23a720;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#aee218), to(#23a720));
background-image: -webkit-linear-gradient(top, #aee218, #23a720);
background-image: -o-linear-gradient(top, #aee218, #23a720);
background-image: linear-gradient(to bottom, #aee218, #23a720);
background-repeat: repeat-x;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
-webkit-border-radius: 18px;
border-radius: 18px;
color: #fff;
font-size: 1em;
text-shadow: 0 -1px 0 #42b51e;
margin-left: 4px;
font-weight: bold;
}
.f_button:hover {
background-position: 0 -10px;
}
3. Залить папку images/bbcodes к себе на сайт