Кнопка "Скачать" с автоматическим выводом иконок для uCoz

Наверх!
Кнопка "Скачать" с автоматическим выводом иконок для uCoz
Демо Скачать
Доп. услуги

Описание

Как и прошлый скрипт с выводом расширения, этот тоже выводит их при помощи CSS.
Идея пришла мне из Вконтакте, изображение для иконок я взял там же.

Приступим к установке.
Зайдите в ПУ > Управление дизайном > Редактирование шаблонов > Нужный модуль > Страница материала и комментариев к нему и добавьте этот код в удобное место:
Код
<a class="download" href="$FILE_URL$" title="Скачать $ENTRY_TITLE$">
<div class="ico" data="$FILE_URL$"></div>
<div class="text">Скачать</div>
</a>

P.s. если Вы используйте другой тег для вывода ссылки на скачку, то замените в коде $FILE_URL$ на используемый тег.

Далее зайдите в ПУ > Управление дизайном > Редактирование шаблонов > Таблица стилей (CSS) и добавьте в самый конец этот код:
Код
.download {font-family: 'Roboto',sans-serif; font-size: 13px; font-weight: 300; display: block;}
.download .ico {background-image: url('http://pandora.clan.su/download/file-ico.png'); background-size: 32px auto; background-repeat: no-repeat; width: 32px; height: 32px; display: inline-block; content: ''; overflow: hidden; border-radius: 2px; background-position: bottom; float: left;}
.download .text {display: inline-block; height: 32px; line-height: 32px; float: left; margin: 0 5px; color: #597DA3;}
.download .ico[data$=".txt"], .download .ico[data$=".doc"], .download .ico[data$=".docx"], .download .ico[data$=".docm"] {background-position: 0 0;}
.download .ico[data$=".rar"], .download .ico[data$=".zip"], .download .ico[data$=".7z"] {background-position: 0 -32px;}
.download .ico[data$=".jpg"], .download .ico[data$=".jpeg"], .download .ico[data$=".png"], .download .ico[data$=".gif"], .download .ico[data$=".bmp"] {background-position: 0 -64px;}
.download .ico[data$=".mp3"], .download .ico[data$=".wav"], .download .ico[data$=".ogg"] {background-position: 0 -96px;}
.download .ico[data$=".avi"], .download .ico[data$=".mp4"], .download .ico[data$=".3gp"], .download .ico[data$=".flv"] {background-position: 0 -128px;}
.download .ico[data$=".djv"], .download .ico[data$=".fb2"], .download .ico[data$=".fb3"], .download .ico[data$=".mobi"], .download .ico[data$=".pdf"] {background-position: 0 -160px;}

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-16
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2016 года.
Дополнительно
Комментарии
Всего 1
ответить
trem200 06.08.16 в 12:45
Первый раз вижу данный скрипт, но уже заметно, что автор вложил душу в создание скрипта.
Комментарии могут оставлять только зарегистрированные пользователи.