Быстрый и надёжный хостинг на SSD-дисках от 165р в месяц   •   Реклама
4 268 просм
19 комм
Поделиться:

Стильные кнопки «Скачать» для DLE

За последнее время на сайте добавлено много полезных статей, однако наш раздел разработок стал сильно отставать. Наша новая работа – стильные кнопки загрузки (аттачмент) для движка DataLife Engine.

Стильные кнопки «Скачать» для DLE

Чем же хороши эти кнопки? Они включают в себя 2 стиля (вертикальный и горизонтальный) и имеют общую цветовую гамму. По желанию вы можете с легкостью установить понравившийся вам стиль. Оба подойдут для любой версии DLE.

Самое главное, что бы хотелось отметить – это никакой графики и никаких скриптов. Только верстка и чистый CSS.

Приступим к установке.

Горизонтальный стиль

1. Подключитесь к сайту по FTP. Если нет такой возможности, то можно воспользоваться инструментами в самой системе (раздел «Управление шаблонами», пункт «Шаблоны сайта»).

2. Откройте файл attachment.tpl, который находится в папке вашей темы, и замените все его содержимое на:

[allow-download]

	<a href="{link}" class="link_attachment" title="Скачиваний: {count}">
	
		<div class="title_attachment">Скачать сейчас</div>
		
		<span class="effect_malcov">
		
			<div class="info_attachment"><span>{size} .{extension}</span></div>	
			<div class="right_element_attachment"><span><div></div><div></div><div></div><div></div><div></div><div></div></span></div>
			
		</span>
		
	</a>
	
[/allow-download]

3. Откройте файл стилей вашего сайта и в самый низ вставьте:

/** © 2017 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/stilnye-knopki-skachat-dlya-dle **/

.link_attachment {
	border-top: 1px solid #dab347;
	border-left: 1px solid #c59c2f;
	border-right: 1px solid #c59c2f;
	border-bottom: 1px solid #b38a1d;
	display: block;
	width: 158px;
	text-decoration: none;
	color: #835503;
	font-size: 14px;
	font-family: arial;
	text-transform: uppercase;
	font-weight: 700;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	position: relative;
	height: 37px;
}

.title_attachment {
	width: 156px;
	height: 35px;
	line-height: 32px;
	border-top: 1px solid #f9f0af;
	background: #f4e675;
	background: -moz-linear-gradient(top,  #f4e675 0%, #edd13a 100%);
	background: -webkit-linear-gradient(top,  #f4e675 0%, #edd13a 100%);
	background: linear-gradient(to bottom,  #f4e675 0%, #edd13a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4e675", endColorstr="#edd13a", GradientType=0);
	text-align: center;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	text-shadow: 0 1px 0 #f6e790;
	position: absolute;
	z-index: 9;
}

.link_attachment:hover .title_attachment {
	border-top: 1px solid #faf5c7;
	background: #f7ed9d;
	background: -moz-linear-gradient(top,  #f7ed9d 0%, #eed53f 100%);
	background: -webkit-linear-gradient(top,  #f7ed9d 0%, #eed53f 100%);
	background: linear-gradient(to bottom,  #f7ed9d 0%, #eed53f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7ed9d", endColorstr="#eed53f", GradientType=0);
}

.effect_malcov {
	z-index: 5;
	transition: .4s;
	position: absolute;
	right: -13px;
	top: -1px;
}

.link_attachment:hover .effect_malcov {
	right: -119px;
	transition: .4s;
}

.info_attachment {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	margin: 4px 0 0 0;
	width: 105px;
	height: 29px;
	border-top: 1px solid #bfbfbf;
	border-bottom: 1px solid #8b8b8b;
	background: #e0dfdc;
	background: -moz-linear-gradient(top,  #e0dfdc 0%, #ceccca 100%);
	background: -webkit-linear-gradient(top,  #e0dfdc 0%, #ceccca 100%);
	background: linear-gradient(to bottom,  #e0dfdc 0%, #ceccca 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0dfdc", endColorstr="#ceccca", GradientType=0);
	float: left;
	text-transform: uppercase;
}

.info_attachment span {
	border-top:1px solid #ecebea;
	display: block;
	height: 29px;
	line-height: 26px;
	color: #5e5e5d;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.right_element_attachment {
	width: 13px;
	height: 37px;
	border-top: 1px solid #dab347;
	border-left: 1px solid #c59c2f;
	border-right: 1px solid #c59c2f;
	border-bottom: 1px solid #b38a1d;
	float: left;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	background: #f3d56d;
	background: -moz-linear-gradient(top,  #f3d56d 0%, #eab135 100%);
	background: -webkit-linear-gradient(top,  #f3d56d 0%, #eab135 100%);
	background: linear-gradient(to bottom,  #f3d56d 0%, #eab135 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3d56d", endColorstr="#eab135", GradientType=0);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

.right_element_attachment span {
	width: 11px;
	height: 35px;
	border-top: 1px solid #f8e7aa;
	border-left: 1px solid #ead88c;
	display: block;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 13px 0 0 1px;
}

.right_element_attachment span div {
	float: left;
}

.right_element_attachment span div:nth-of-type(1), .right_element_attachment span div:nth-of-type(3), .right_element_attachment span div:nth-of-type(5) {
	height: 7px;
	border-left: 1px solid #f6e0a3;
}

.right_element_attachment span div:nth-of-type(2), .right_element_attachment span div:nth-of-type(4), .right_element_attachment span div:nth-of-type(6) {
	height: 7px;
	border-left: 1px solid #ad8131;
}

4. Почистите кэш на сайте. Установка горизонтального стиля закончена.

Вертикальный стиль

1. Подключитесь к сайту по FTP. Если нет такой возможности, то можно воспользоваться инструментами в самой системе (раздел «Управление шаблонами», пункт «Шаблоны сайта»).

2. Откройте файл attachment.tpl, который находится в папке вашей темы, и замените все на:

[allow-download]

	<a href="{link}" class="link_attachment_v2" title="Скачиваний: {count}">
	
		<div class="title_attachment_v2">Скачать сейчас</div>
		
		<span class="effect_malcov_v2">
		
			<div class="info_attachment_v2"><span>{size} .{extension}</span></div>	
			<div class="bottom_element_attachment_v2"><span><div></div><div></div><div></div><div></div><div></div><div></div></span></div>
			
		</span>
		
	</a>
	
[/allow-download]

3. Откройте файл стилей вашего сайта и в самый низ вставьте:

/** © 2017 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/stilnye-knopki-skachat-dlya-dle **/

.link_attachment_v2 {
	width: 170px;
	height: 30px;
	border-top:1px solid #dab347;
	border-left:1px solid #c8a033;
	border-right:1px solid #c8a033;
	border-bottom:1px solid #c79f37;
	display: block;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	position: relative;
}

.title_attachment_v2 {
	color: #835503;
	font-size: 14px;
	font-family: arial;
	text-transform: uppercase;
	font-weight: 700;
	border-top: 1px solid #f9f0af;
	background: #f4e675;
	background: -moz-linear-gradient(top,  #f4e675 0%, #edd13a 100%);
	background: -webkit-linear-gradient(top,  #f4e675 0%, #edd13a 100%);
	background: linear-gradient(to bottom,  #f4e675 0%, #edd13a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4e675", endColorstr="#edd13a", GradientType=0);
	text-align: center;
	text-shadow: 0 1px 0 #f6e790;
	position: absolute;
	z-index: 9;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	height: 28px;
	width: 168px;
	line-height: 27px;
}

.link_attachment_v2:hover .title_attachment_v2 {
	border-top: 1px solid #faf5c7;
	background: #f7ed9d;
	background: -moz-linear-gradient(top,  #f7ed9d 0%, #eed53f 100%);
	background: -webkit-linear-gradient(top,  #f7ed9d 0%, #eed53f 100%);
	background: linear-gradient(to bottom,  #f7ed9d 0%, #eed53f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7ed9d", endColorstr="#eed53f", GradientType=0);
}

.effect_malcov_v2 {
	z-index: 3;
	transition: .4s;
	position: absolute;
	right: -1px;
	top: 2px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.link_attachment_v2:hover .effect_malcov_v2 {top: 28px;
	transition: .4s;
}

.info_attachment_v2 {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	margin: 1px 0 0 3px;
	width: 164px;
	height: 25px;
	border-right: 1px solid #ababab;
	border-left: 1px solid #ababab;
	background: #d9d9d6;
	text-transform: uppercase;
}

.info_attachment_v2 span {
	border-top:1px solid #d2d1ce;
	display: block;
	height: 26px;
	line-height: 25px;
	color: #5e5e5d;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	font-family: arial;
	border-left: 1px solid #d1d0ce;
	border-right: 1px solid #d1d0ce;
}

.bottom_element_attachment_v2 {
	width: 170px;
	height: 11px;
	border-top: 1px solid #c79f37;
	border-bottom: 1px solid #ad851c;
	border-left: 1px solid #bd952d;
	border-right: 1px solid #bd952d;
	display: block;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.bottom_element_attachment_v2 span {
	width: 168px;
	height: 9px;
	border-top: 1px solid #f7e3a3;
	display: block;
	background: #f0cc5e;
	background: -moz-linear-gradient(top,  #f0cc5e 0%, #edba44 100%);
	background: -webkit-linear-gradient(top,  #f0cc5e 0%,#edba44 100%);
	background: linear-gradient(to bottom,  #f0cc5e 0%,#edba44 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0cc5e", endColorstr="#edba44", GradientType=0);
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 1px 0 0 0;
}

.bottom_element_attachment_v2 span div{
	width: 17px;
	margin:0 auto;
}

.bottom_element_attachment_v2 span div:nth-of-type(1), .bottom_element_attachment_v2 span div:nth-of-type(3), .bottom_element_attachment_v2 span div:nth-of-type(5) {
	width: 17px;
	border-top: 1px solid #b78c38;
}

.bottom_element_attachment_v2 span div:nth-of-type(2), .bottom_element_attachment_v2 span div:nth-of-type(4), .bottom_element_attachment_v2 span div:nth-of-type(6) {
	width: 17px;
	border-top: 1px solid #f5da95;
}

4. Почистите кэш на сайте. Установка вертикального стиля закончена.

По желанию вы можете изменить цветовую гамму, но в разумных пределах, чтобы не нарушить функционал.

Для представления того, как в итоге все должно получиться, посмотрите это видео:

Читайте наш сайт, и совершенствуйтесь вместе с нами!

Дизайнер: Richard Tabor

19
комментариев
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    766
      •  Гости
    11 сен в 11:03

    Кнопка не работает на 12.0 версии дле. Тема не актуально.

    • 11
    839
      •  Администратор
    13 янв в 00:38

    Сергей,

    1. Так происходит - потому что эта функция немного засоряет код сайта.

    2. Для этого, скопируйте код кнопки и адаптируйте ее под дополнительное поле.

    • 0
    766
      •  Гости
    13 янв в 00:36

    Можете ответить на предыдущий вопрос?)

    • 0
    766
      •  Гости
    12 янв в 22:46

    О Помогло, СПАСИБО!) Но почему такое происходит при включенной опции? И еще, как к этой кнопке, привязать ссылку скачки на внешние ресурсы, к примеру напрямую с файлообменниками?

    • 8
    839
      •  Администратор
    12 янв в 22:27

    Сергей, панель управления сайтом - настройки системы - настройки вывода новостей - Разрешить посетителям сайта делиться интересными материалами вашего сайта - отключить.

    Сохранить изменения.

    Очистить кэш сайта.

    Проверить изменения. glass

    • 0
    766
      •  Гости
    12 янв в 22:12

    Сорри , не тот был шаблон..

    • 9
    839
      •  Администратор
    12 янв в 22:04

    Сергей, не увидел на указанном сайте установленной кнопки.

    • 1
    766
      •  Гости
    12 янв в 20:57

    Привет! Посмотри почему надпись размера файла съехала вниз... Все делал как по инструкции.

    • 8
    839
      •  Администратор
    10 окт в 02:26

    kolya, Полагаю что не как. Поскольку в самом скайпе Вы не узнаете статус пользователя до тех пор, пока он не примет Вашу заявку.

    • 0
    766
      •  Гости
    9 окт в 20:22

    нашел способ по поводу кнопки, вопрос админу : как показать статус скайпа на сайте ? не поможите

    • 1
    766
      •  Гости
    8 окт в 22:22

    а как создать и вставить красивую кнопку в новость ? не кнопка для скачивании, при нажатия кнопки открывает стр. или форму , прошу помогите!

    • 5
    839
      •  Администратор
    30 апр в 12:23

    Ричард, Вы точно все сделали по инструкции? Я в коде вижу 2 ссылки на файл, вместо 1 - https://cloud.mail.ru/public/BoJM/4e1MPNN7z

    + ко всему этому, у вас ссылки скрытые на другие сайты - почитайте об этой здесь - https://www.pandoge.com/stati_i_sovety/ubiraem-standartnye-kopirayty-levye-ssylki-na-dle

    • 0
    766
      •  Гости
    30 апр в 10:43

    Не знаю в чем проблема,но сейчас слетела рамка кнопки скачать *link*

    • 5
    839
      •  Администратор
    29 апр в 23:34

    Ричард, перейдите в настройки - настройки вывода новостей - Разрешить посетителям сайта делиться интересными материалами вашего сайта - выключить. После чего, сохраняете настройки и чистите кэш на сайте.

    • 0
    766
      •  Гости
    29 апр в 22:22

    *link* сайт на бесплатном хостинге

    • 10
    839
      •  Администратор
    29 апр в 21:30

    Ричард, пришлите ссылку на сайт - посмотрим что не так.

    • 0
    766
      •  Гости
    29 апр в 18:46

    Здравствуйте,помогите пожалуйста пофиксить . Сделал все по инструкции .

    • 10
    839
      •  Администратор
    19 апр в 22:47

    Ричард, эту кнопку, вы устанавливаете согласно инструкции. После чего, в новости, загружаете файл и по окончанию, вам будет предложен код для вставки.

    Пример кода: [attachment=31:artem_malcov.zip]

    Его то вы и вставляете в новость, в нужное Вам место.

    • 2
    766
      •  Гости
    19 апр в 21:17

    не могу понят,как вставить эту кнопку в новость,если не сложно помогите .

Подняться наверх
«Pandoge» - помощник вебмастера