Адаптация шаблона DLE 9.7 под 9.8

Адаптация шаблона DLE9.7 на примере сайта SEROVWEB.RUДобрый день. Пришло время адаптировать шаблон на серовском городском портале. SerovWeb.ru
Итак начнем…

1. Скопируйте файлы изображений closemarker.png, marker.png, social-icons.png из стандартного шаблона из папки /templates/Default/dleimages/ в аналогичную папку вашего шаблона.

2. Откройте файл style/engine.css найдите и удалите:

[css] .editor textarea {
font-family: Verdana;
word-spacing: 0.1em;
letter-spacing: 0;
line-height: 1.5em;
font-size: 11px;
color:#000;
background: #fff url("../images/fields.png") repeat-x;
border: 0 none;
}

.editor input[type="text"] {
padding: 2px;
background: #fff url("../images/fields.png") repeat-x;
border: 1px solid #bcc0c2;
}

.editor_button {
float: left;
cursor: pointer;
padding-left: 0;
padding-right: 0;
}

.editor_buttoncl {
float: left;
cursor: pointer;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}

.editbclose {
float: right;
cursor: pointer;
display: none;
}

.editor_button select {
font-size: 11px;
}

.editor_button img {
margin: 0;
padding: 0;
}

.editbclose img {
margin: 0;
padding: 0;
}

.editor_button_brk img {
margin: 0;
padding: 0;
}
[/css] Далее в этом же файле найдите:
[css] .xfields textarea, .xprofile textarea {
width: 98%;
height: 186px;
margin: 0px 1px 0px 0px;
padding: 0px;
}
[/css] Замените на:
[css] .xfields textarea, .xprofile textarea {
height: 186px;
margin: 0px 1px 0px 0px;
padding: 0px;
}
[/css] Далее в этом же файле в самый конец добавьте:
[css] /*—BB Редактор—*/

.bb-pane { height: 1%; overflow: hidden; border: 1px solid #BBB; background-image: url("../bbcodes/bg.gif"); }
.bb-btn, .bb-sep { height: 25px; float: left; display: block; overflow: hidden; text-indent: -9999px; white-space: nowrap; }
.bb-sel { float: left; padding: 4px 2px 0 2px; }
.bb-sel select { font-size: 11px; }
.bb-sep { width: 5px; background-image: url("../bbcodes/brkspace.gif"); }
.bb-btn { cursor: pointer; width: 23px; }

#b_font { width: 118px;}
#b_size { width: 65px;}
#b_font select { padding: 0px;}
#b_size select { padding: 0px;}
#b_b { background-image: url("../bbcodes/b.gif"); }
#b_i { background-image: url("../bbcodes/i.gif"); }
#b_u { background-image: url("../bbcodes/u.gif"); }
#b_s { background-image: url("../bbcodes/s.gif"); }
#b_img { background-image: url("../bbcodes/image.gif"); }
#b_up { background-image: url("../bbcodes/upload.gif"); }
#b_emo { background-image: url("../bbcodes/emo.gif"); }
#b_url { background-image: url("../bbcodes/link.gif"); }
#b_leech { background-image: url("../bbcodes/leech.gif"); }
#b_mail { background-image: url("../bbcodes/email.gif"); }
#b_video { background-image: url("../bbcodes/mp.gif"); }
#b_audio { background-image: url("../bbcodes/mp3.gif"); }
#b_hide { background-image: url("../bbcodes/hide.gif"); }
#b_quote { background-image: url("../bbcodes/quote.gif"); }
#b_code { background-image: url("../bbcodes/code.gif"); }
#b_left { background-image: url("../bbcodes/l.gif"); }
#b_center { background-image: url("../bbcodes/c.gif"); }
#b_right { background-image: url("../bbcodes/r.gif"); }
#b_color { background-image: url("../bbcodes/color.gif"); }
#b_spoiler { background-image: url("../bbcodes/spoiler.gif"); }
#b_fla { background-image: url("../bbcodes/flash.gif"); }
#b_yt { background-image: url("../bbcodes/youtube.gif"); }
#b_tf { background-image: url("../bbcodes/typograf.gif"); }
#b_list { background-image: url("../bbcodes/list.gif"); }
#b_ol { background-image: url("../bbcodes/ol.gif"); }
#b_tnl { background-image: url("../bbcodes/translit.gif"); }
#b_br { background-image: url("../bbcodes/pbreak.gif"); }
#b_pl { background-image: url("../bbcodes/page.gif"); }

.bb-editor textarea {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
padding: 2px; border: 1px solid #bcc0c2; width: 100%; background: #fff url("../images/fields.png") repeat-x;
}
.editorcomm .bb-editor { width: 465px;}
.editorcomm .bb-editor textarea { height: 156px; }

.clr {
clear: both;
}

/*—Выделение текста и всплывающее окно (поделиться ссылкой)—*/
#marker-bar,
#txtselect_marker {
display: block;
visibility: hidden;
position: absolute;
z-index: 1200;
opacity: 0;
-webkit-transition: opacity .4s, visibility .1s linear .4s;
-moz-transition: opacity .4s, visibility .1s linear .4s;
-o-transition: opacity .4s, visibility .1s linear .4s;
transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
cursor: pointer;
background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
background-position: -0px -32px;
}

#marker-bar{
border: 1px solid #ccc;
border-radius: 15px;
background: #fff;
padding: 5px 10px;
cursor: default;
box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
-webkit-transition: opacity .4s, visibility 0s;
-moz-transition: opacity .4s, visibility 0s;
-o-transition: opacity .4s, visibility 0s;
transition: opacity .4s, visibility 0s;
opacity: 1;
visibility: visible;
}

#txtselect_marker.show {
/* XXX make a common css fadeIn/fadeOut classes */
visibility: visible;
width: 32px;
height: 32px;
-webkit-transition: opacity .4s, visibility 0s;
-moz-transition: opacity .4s, visibility 0s;
-o-transition: opacity .4s, visibility 0s;
transition: opacity .4s, visibility 0s;
opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
cursor: pointer;
display: block;
margin: 0 5px;
float: left;
}

#marker-bar .masha-marker{
line-height: 1em;
color: #aaa;
border-bottom: 1px dotted #aaa;
margin-right: 10px;
}

#marker-bar .masha-marker:hover {
color: #ea3e26;
border-color: #ea3e26;
}

.user_selection, .user_selection_true {
background: #c4f47d;
padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
display: inline-block;
position: absolute;
top: -7px;
left: -5px;
width: 33px;
height: 33px;
background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
background-position: -0px -33px;
}

#share-popup {
background: #fff;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
position: absolute;
width: 414px;
display:none;
z-index: 100;
padding: 10px 0;
opacity: 0;
-webkit-transition: opacity .4s, visibility .1s linear .4s;
-moz-transition: opacity .4s, visibility .1s linear .4s;
-o-transition: opacity .4s, visibility .1s linear .4s;
transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
display:block;
opacity: 1;
-webkit-transition: opacity .4s, visibility 0s;
-moz-transition: opacity .4s, visibility 0s;
-o-transition: opacity .4s, visibility 0s;
transition: opacity .4s, visibility 0s;
opacity: 1;
}

#share-popup .social {
padding: 0 0 10px 17px;
height: 40px;
}

#share-popup .social p {
padding-bottom: 10px;
margin: 0;
font-weight: bold;
}

#share-popup .social ul {
list-style: none;
margin: 0;
padding: 0;
}

#share-popup .social ul li {
float: left;
margin-right: 20px;
padding-top: 2px;
position: relative;
}

#share-popup .social ul a {
text-decoration: none;
font-size: 11px;
display: inline-block;
color: #aaa;
padding-left: 25px;
}

#share-popup .social ul a:hover {
text-decoration: underline;
color: #ea3e26;
}

#share-popup .social a span{
cursor: pointer;
width: 20px;
height: 20px;
background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
position: absolute;
left: 0;
top: 0;
}

#share-popup .social .tw span{
background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
background-position: 0 0;
}

#share-popup .social .fb span{
background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
background-position: -20px 0;
}

#share-popup .social .vk span{
background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
background-position: -40px 0;
}

#share-popup .social .gp span{
background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
background-position: -60px 0;
}

#share-popup .link {
clear: both;
border-top: 1px solid #d9d9d9;
padding: 10px 5px 0 10px;
line-height: 1.2;
overflow: hidden;
margin: 0 7px;
}

#share-popup .link p {
font-weight: bold;
padding: 0 0 3px 0;
margin: 0;
}

#share-popup .link span {
color: #999;
font-size: 10px;
display: block;
padding-top: 3px;
}

#share-popup .link a {
display: block;
}
[/css]

3. Откройте файл addnews.tpl и найдите:
[html] <tr>
<td colspan="2">
<b>Вводная часть: <span class="impot">*</span></b> (Обязательно)
<div>
[not-wysywyg] <div>{bbcode}</div>
<textarea name="short_story" id="short_story" onfocus="setFieldName(this.name)" style="width:98%;" rows="15" class="f_textarea" >{short-story}</textarea>
[/not-wysywyg] {shortarea}
</div>
</td>
</tr>
<tr>
<td colspan="2">
<b>Подробная часть:</b> (Необязательно)
<div>
[not-wysywyg] <div>{bbcode}</div>
<textarea name="full_story" id="full_story" onfocus="setFieldName(this.name)" style="width:98%;" rows="20" class="f_textarea" >{full-story}</textarea>
[/not-wysywyg] {fullarea}
</div>
</td>
</tr>
[/html] Замените на:
[html 1=»<td» 2=»colspan="2">» 3=»<b>Вводная» 4=»часть:» 5=»<span» 6=»class="impot">*</span></b>» 7=»(Обязательно)» 8=»[not-wysywyg» language=»<tr>»] <div class="bb-editor">
{bbcode}
<textarea name="short_story" id="short_story" onfocus="setFieldName(this.name)" rows="15" class="f_textarea" >{short-story}</textarea>
</div>
[/not-wysywyg] {shortarea}
</td>
</tr>
<tr>
<td colspan="2">
<b>Подробная часть:</b> (Необязательно)
[not-wysywyg] <div class="bb-editor">
{bbcode}
<textarea name="full_story" id="full_story" onfocus="setFieldName(this.name)" rows="20" class="f_textarea" >{full-story}</textarea>
</div>
[/not-wysywyg] {fullarea}
</td>
</tr>
[/html] 4. Откройте файл comments.tpl и найдите:
[html] <ul class="reset">
<li>[complaint]Жалоба[/complaint]</li>
<li>[com-edit]Изменить[/com-edit]</li>
<li>[com-del]Удалить[/com-del]</li>
</ul>
[/html] Замените на:
[html] <ul class="reset">
<li>[spam]Спам[/spam]</li>
<li>[complaint]Жалоба[/complaint]</li>
<li>[com-edit]Изменить[/com-edit]</li>
<li>[com-del]Удалить[/com-del]</li>
</ul>
[/html] 5.(не обязательно) Откройте файл fullstory.tpl и найдите:
[html] <h3 class="btl">{title}</h3>
[/html] Замените на:
[html] <h3 class="btl"><span id="news-title">{title}</span></h3>
[/html]

У меня конструкция была такая:
[html] <h1 class="dtitle">[full-link]{title}[/full-link]</h1>
[/html] Cделал вот так:
[html] <h1 class="dtitle"><span id="news-title">[full-link]{title}[/full-link]</span></h1>
[/html]

6. (Не обязательно)Откройте файл static.tpl и найдите:
[html] <h2 class="heading">{description}</h2>
[/html] Замените на:
[html] <h2 class="heading"><span id="news-title">{description}</span></h2>
[/html] 7. Меняем фото на аватар(граватар).
Добавляем форуму ввода логина в сервисе ГРАВАТАР. Откройте файл userinfo.tpl и найдите:
[html] <tr>
<td class="label">Аватар:</td>
<td>
<input type="file" name="image" class="f_input" /><br />
<div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> <label for="del_foto">Удалить фотографию</label></div>
</td>
</tr>
[/html] Замените на:
[html] <tr>
<td class="label">Аватар:</td>
<td>Загрузить с комьютера: <input type="file" name="image" class="f_input" /><br /><br />
Сервис <a href="http://www.gravatar.com/" target="_blank">Gravatar</a>: <input type="text" name="gravatar" value="{gravatar}" class="f_input" /> (Укажите E-mail на данном сервисе)
<br /><br /><div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> <label for="del_foto">Удалить аватар</label></div>
</td>
</tr>
[/html] 8.(Не обязательно) Откройте файл navigation.tpl и найдите:
[html] <br /><div class="dpad basenavi">
[/html] Замените на:
[html] <br /><div class="dpad basenavi ignore-select">
[/html]

Не забывайте очистить кеш после обновления.

Метки: нет меток

Add a Comment

Your email address will not be published. Required fields are marked *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.