Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » » Адаптирование шаблона dle 9.5 на 9.6

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

17 янв 2013 | Комментариев: 0 | Просмотров: 756
Расскажу как сделать адаптирование шаблона 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 9.4 на 9.5

Расскажу как сделать адаптирование шаблона dle c версии 9.4 на версию 9.5
Список изменений в шаблонах между версиями 10.0 и 10.1

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

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

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

Автоматическая проверка логина при регистрации    
Количество непрочитанных писем в favicon.ico

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

  Данный ХАК DLE выводит в favicon количество не прочитанных новых сообщений.
Ссылки на полную новость для DLE с выводом в Fullstory.tpl в формате

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

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

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

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

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

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

Похожие новости в 2 колонки для DLE

Данный хак выводит похожие новости в 2 колонки, Выглядит очень красиво.
Ссылки на следующую и предыдущую новость для DLE

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

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

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

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