Навигация

DataLife Engine v.10.5

Адаптирование шаблона dle 9.5 на 9.6

17 янв 2013 | Комментариев: 0 | Просмотров: 1074

Расскажу как сделать адаптирование шаблона dle с версии 9.5 на 9.6

1. Скопируйте файл картинки из стандартного шаблона /templates/Default/bbcodes/typograf.gif в папку вашего шаблона.

2. Скопируйте файлы изображений button.png, loading.gif, offline.png, online.png, shadow.png, tableft.gif, tabright.gif из папки стандартного шаблона /templates/Default/images/ в папку вашего шаблона.

3. Откройте файл style/engine.css и в самый низ добавьте:

/*---прогресс бар заполненности персональных сообщений---*/
	.pm_progress_bar {
	    border: 1px solid #d8d8d8;
	    padding: 1px;
	    margin-top: 10px;
	    margin-bottom: 10px;
	}
	
	.pm_progress_bar span {
	    background: #000000;
	    font-size: 0em;
	    text-indent: -2000em;
	    height: 10px;
	    display: block;
	    overflow: hidden;
	}

4. Откройте файл style/styles.css и в самый низ добавьте:

.pm_status {
	    float:left;
	    border: 1px solid #d8d8d8;
	    padding: 0px;
	    background-color: #fff;
	    width: 280px;
	    height: 100px;
	    margin-left: 20px;
	    margin-right: 5px;
	}
	
	.pm_status_head {
	    border-bottom: 1px solid #d8d8d8;
	    font-size: 0.9em; 
	    background: #fff url("../images/bbcodes.png") repeat-x 0 100%;
	    height: 22px;
	    padding: 0;
	    font-weight: bold;
	    text-align: center;
	    color: #4e4e4e;
	}
	
	.pm_status_content {
	    padding: 5px;
	}

5. Откройте файл frame.css и найдите:

html,body{
	    height:100%;
	    margin:0px;
	    padding: 0px;
	    background: none;
	}

Замените на:

html,body{
	    font-size: 11px;
	    font-family: verdana;
	    height:100%;
	    margin:0px;
	    padding: 0px;
	    background: none;
	}
	
	img {
	    border:0px;
	}
	
	/*--- горизонтальное меню в окне загрузки файлов ---*/
	.tabs {
	    font: bold 11px/1.5em Verdana;
	    float:left;
	    width:100%;
	    background:change-background;
	    line-height:normal;
	}
	.tabs ul {
	    margin:0;
	    padding:10px 10px 0 5px;
	    list-style:none;
	}
	.tabs li {
	    display:inline;
	    margin:0;
	    padding:0;
	}
	.tabs a {
	    float:left;
	    background:url("images/tableft.gif") no-repeat left top;
	    margin:0;
	    padding:0 0 0 7px;
	    text-decoration:none;
	}
	.tabs a span {
	    float:left;
	    display:block;
	    background:url("images/tabright.gif") no-repeat right top;
	    padding:5px 15px 4px 6px;
	    color:#6B78A9;
	}
	
	.tabs a span {float:none;}
	
	.tabs a:hover span,
	.tabs a.current span {
	    color:#6B78A9;
	}
	.tabs a:hover,
	.tabs a.current {
	    background-position:0% -42px;
	}
	
	.tabs a:hover span,
	.tabs a.current span {
	    background-position:100% -42px;
	}
	
	/*--- блок загрузки файлов и загруженных файлов ---*/
	
	.box {
	    height: 300px;
	    border:1px solid #B3B3B3;
	    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	    background:#fff url(images/shadow.png) repeat-x;
	    overflow: auto;
	}
	
	.uploadedfile {
	    width: 115px;
	    height: 130px;
	    margin: 10px 5px 5px 5px;
	    border:1px solid #B3B3B3;
	    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
	    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	    float: left;
	    text-align: center;
	    background:#ffffff;
	
	}
	
	.uploadimage {
	    margin-top: 5px;
	    width: 115px;
	    height: 90px;
	    display: table-cell;
	    text-align: center;
	    vertical-align:middle;
	}
	
	.info {
	    text-align: left;
	    white-space: nowrap;
	    margin: 0px 5px 0px 5px;
	    overflow: hidden;
	}
	
	.button {
	    padding:4px 10px 4px 10px;
	    margin-left:2px;
	    margin-top:5px;
	    font: bold 11px/1.5em Verdana;color:#000000;
	    background:#F9F9F9 url('images/button.png') repeat-x;
	    border:1px solid #CACACA;
	    cursor:pointer;
	}
	
	.properties {
	
	    float: left;
	    margin-top:8px;
	}
	
	.linkbox {
	    margin-top:5px;
	    padding:10px;
	    border:1px solid #B3B3B3;
	    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	    background:#fff url(images/shadow.png) repeat-x;
	}
	
	#file-uploader {
	    min-height: 50px;
	}
	
	#flash-uploader {
	    min-height: 50px;
	}
	
	#stmode {
	    padding:10px;
	}
	
	.file-box {
	    width: 95%;
	    border:1px solid #B3B3B3;
	    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	    background-color: #F5F5F5;
	    padding: 10px;
	    margin-top: 10px;
	}
	
	/*--- HTML5 загрузчик файлов ---*/
	
	.qq-uploader { position:relative; width: 100%;}
	
	.qq-upload-button {
	    display:block; /* or inline-block */
	    width: 310px; 
	    padding:4px 10px 4px 10px;
	    margin-left:2px;
	    margin-top:5px;
	    font: bold 11px/1.5em Verdana;color:#000000;
	    background:#F9F9F9 url('images/button.png') repeat-x;
	    border:1px solid #CACACA;
	    cursor:pointer;
	}
	.qq-upload-button-hover {outline:1px dotted black;}
	.qq-upload-button-focus {outline:1px dotted black;}
	
	.qq-upload-drop-area {
	    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 50px; z-index:2;
	    background:#FF9797; text-align:center; 
	}
	.qq-upload-drop-area span {
	    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
	}
	.qq-upload-drop-area-active {background:#FF7171;}
	
	.qq-upload-list {margin:0; padding:0; list-style:disc;}
	.qq-upload-list li { margin:0; padding:2px;}
	.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
	    margin-right: 7px;
	}
	
	.qq-upload-file {}
	.qq-upload-spinner {display:inline-block; background: url("images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
	.qq-upload-size,.qq-upload-cancel {font-size:11px;}
	
	.qq-upload-failed-text {display:none;}
	.qq-upload-fail .qq-upload-failed-text {display:inline;}
	
	
	/*--- флеш загрузчик файлов ---*/
	
	.progressWrapper {
	    width: 99%;
	    overflow: hidden;
	}
	
	.progressContainer {
	    margin: 5px;
	    padding: 4px;
	    border: solid 1px #B3B3B3;
	    background-color: #F5F5F5;
	    overflow: hidden;
	}
	/* Message */
	.message {
	    margin: 1em 0;
	    padding: 10px 20px;
	    border: solid 1px #FFDD99;
	    background-color: #FFFFCC;
	    overflow: hidden;
	}
	/* Error */
	.red {
	    border: solid 1px #B50000;
	    background-color: #FFEBEB;
	}
	
	/* Current */
	.green {
	    border: solid 1px #B3B3B3;
	    background-color: #F5F5F5;
	}
	
	/* Complete */
	.blue {
	    border: solid 1px #B3B3B3;
	    background-color: #F5F5F5;
	}
	
	.progressName {
	    font-size: 8pt;
	    font-weight: 700;
	    color: #555;
	    width: 323px;
	    height: 14px;
	    text-align: left;
	    white-space: nowrap;
	    overflow: hidden;
	}
	
	.progressBarInProgress,
	.progressBarComplete,
	.progressBarError {
	    font-size: 0;
	    width: 0%;
	    height: 2px;
	    background-color: blue;
	    margin-top: 2px;
	}
	
	.progressBarComplete {
	    width: 100%;
	    background-color: green;
	    visibility: hidden;
	}
	
	.progressBarError {
	    width: 100%;
	    background-color: red;
	    visibility: hidden;
	}
	
	.progressBarStatus {
	    margin-top: 2px;
	    width: 99%;
	    font-size: 7pt;
	    font-family: Arial;
	    text-align: left;
	    white-space: nowrap;
	}
	
	a.progressCancel {
	    font-size: 0;
	    display: block;
	    height: 14px;
	    width: 14px;
	    background-image: url(../../engine/classes/uploads/swfupload/cancelbutton.gif);
	    background-repeat: no-repeat;
	    background-position: -14px 0px;
	    float: right;
	}
	
	a.progressCancel:hover {
	    background-position: 0px 0px;
	}

6. Откройте файл comments.tpl и найдите:

<li>Регистрация: {registration}</li>

Добавьте ниже:

            <li>Статус: [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Пользователь Онлайн" alt="Пользователь Онлайн" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Пользователь offline" alt="Пользователь offline" />[/offline]</li>

7. Откройте файл fullstory.tpl и найдите:

<div class="ratebox"><div class="rate">{rating}</div></div>

Замените на:

[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]

8. Откройте файл pm.tpl и найдите:

<div class="dpad">[inbox]Входящие сообщения[/inbox] | [outbox]Отправленные сообщения[/outbox] | [new_pm]Отправить сообщение[/new_pm]</div>

Замените на:

<div class="dpad">
	<div class="pm_status">
	    <div class="pm_status_head">Состояние папок</div>
	    <div class="pm_status_content">Папки персональных сообщений заполнены на:
	{pm-progress-bar}
	{proc-pm-limit}% от лимита ({pm-limit} сообщений)
	    </div>
	</div>
	<div style="padding-top:10px;">[inbox]Входящие сообщения[/inbox]<br /><br />
	[outbox]Отправленные сообщения[/outbox]<br /><br />
	[new_pm]Отправить сообщение[/new_pm]</div>
	</div><br />
	<div class="clr"></div>

9. Откройте файл profile_popup.tpl и найдите:

<li><span class="grey">Дата посещения:</span> <b>{lastdate}</b></li>

Замените на:

<li><span class="grey">Дата посещения:</span> <b>{lastdate}</b>, <span class="grey">cтатус:</span> [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Пользователь Онлайн" alt="Пользователь Онлайн" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Пользователь offline" alt="Пользователь offline" />[/offline]</li>

10. Откройте файл shortstory.tpl и найдите:

<div class="ratebox"><div class="rate">{rating}</div></div>

Замените на:

[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]

11. Откройте файл userinfo.tpl и найдите:

<li><span class="grey">Последнее посещение:</span> <b>{lastdate}</b></li>

Ниже добавьте:

<li><span class="grey">Статус:</span> [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Пользователь Онлайн" alt="Пользователь Онлайн" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Пользователь offline" alt="Пользователь offline" />[/offline]</li>

Вот и все готово.

Ссылка на новость:

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Адаптирование шаблона dle 9.4 на 9.5

Расскажу как сделать адаптирование шаблона dle c версии 9.4 на версию 9.5

Список изменений в шаблонах между версиями 10.0 и 10.1

Предлагаемый список изменений в шаблонах между версиями 10.0 и 10.1

Автоматическая проверка логина при регистрации

Количество непрочитанных писем в favicon.ico

Данный ХАК DLE выводит в favicon количество не прочитанных новых сообщений.

Ссылки на полную новость для DLE с выводом в Fullstory.tpl в формате

Небольшой Хак, который выводит в детальной новости fullstory.tpl несколько видов ссылок на эту новость.

Убрать лишний title для DataLife Engine

В полной новости или же на странице категории, кроме самого названия страницы в title присутствует название сайта, это не хорошо влияет на индексацию сайтов.

Адаптирование шаблона dle 9.6 на 9.7

Представляем список изменений в шаблонах между версиями DLE 9.6 и 9.7 которые нужно выполнить для обновления сайта под актуальную версию движка.

Ссылки на следующую и предыдущую новость для DLE

Небольшой Хак ссылка на следующую и предыдущую новость для DLE. Ссылки на следующую и предыдущую новости, будет полезен для перелинковки внутренних

Чередование фона для краткой новости для DLE

Небольшой хак позволяет сделать на сайте чередование заднего фона краткой новости.

Комментарии
Вконтакте

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.