03
июн
2013
Симпатичные кнопки скачивания аттачмента Dle с 6ю разными вариациями! Сделано на чистом HTML и CSS.
По умолчанию стоит вариант с двумя полосками в бок!
Кнопки работают даже в IE 8!
Установка для версии 9.6. В более ранних версиях возможно, есть небольшие отличия в коде.
В engine\modules\functions.php примерно на 621 строке. Заменяем всё, что между этим:
и этим:
на это:
Если хотите изменить стиль кнопки, например, что бы выскакивал текст снизу - меняем
на
, а
удаляем!
Таким образом можно поэкспериментировать, и сделать например, сверху и справа или слева и снизу!
В engine.css ищем "Вложения" или "attachment" и удаляем всё с ними связанное!
Вставляем это:
Если у вас слишком длинные названия файлов, которые не умещаются на кнопке, вы можете дописать к классу
Таким образом, всё лишнее будет скрыто.
Анимированная кнопка скачать для аттачмента Дле
Симпатичные кнопки скачивания аттачмента Dle с 6ю разными вариациями! Сделано на чистом HTML и CSS.
По умолчанию стоит вариант с двумя полосками в бок!
Кнопки работают даже в IE 8!
Установка для версии 9.6. В более ранних версиях возможно, есть небольшие отличия в коде.
В engine\modules\functions.php примерно на 621 строке. Заменяем всё, что между этим:
} elseif( $config['files_count'] == 'yes' ) {
и этим:
} else {
на это:
$replace_1[] = "<div class=\"button_download\">
<a href=\"{$config['https_home_url']}engine/download.php?id={$row['id']}{$area}\">{$row['name']}</a>
<div class=\"leftbt\">{$lang['att_dcount']} {$row['dcount']}</div>
<div class=\"rightbt\">{$size}</div>
</div>";
$replace_2[] = "<div class=\"button_download\">
<a href=\"{$config['https_home_url']}engine/download.php?id={$row['id']}{$area}\" >\\1</a>
<div class=\"leftbt\">{$lang['att_dcount']} {$row['dcount']}</div>
<div class=\"rightbt\">{$size}</div>
</div>";
<a href=\"{$config['https_home_url']}engine/download.php?id={$row['id']}{$area}\">{$row['name']}</a>
<div class=\"leftbt\">{$lang['att_dcount']} {$row['dcount']}</div>
<div class=\"rightbt\">{$size}</div>
</div>";
$replace_2[] = "<div class=\"button_download\">
<a href=\"{$config['https_home_url']}engine/download.php?id={$row['id']}{$area}\" >\\1</a>
<div class=\"leftbt\">{$lang['att_dcount']} {$row['dcount']}</div>
<div class=\"rightbt\">{$size}</div>
</div>";
Если хотите изменить стиль кнопки, например, что бы выскакивал текст снизу - меняем
<div class=\"rightbt\">
на
<div class=\"bottombt\">
, а
<div class=\"leftbt\">{$lang['att_dcount']} {$row['dcount']}</div>
удаляем!
Таким образом можно поэкспериментировать, и сделать например, сверху и справа или слева и снизу!
В engine.css ищем "Вложения" или "attachment" и удаляем всё с ними связанное!
Вставляем это:
.button_download {
width: 200px;
margin: 50px;
}
.button_download a {
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button_download div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button_download a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.leftbt,.rightbt,.topbt,.bottombt {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -45px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*HOVER*/
.button_download:hover .bottombt {
margin: -10px 0 0 10px;
}
.button_download:hover .topbt {
margin: -80px 0 0 10px;
line-height: 35px;
}
.button_download:hover .rightbt {
margin: -45px 0 0 190px;
width: 100px;
}
.button_download:hover .leftbt {
margin: -45px 0 0 -100px;
width: 110px;
}
/*ACTIVE*/
.buttonn1 a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button_download:active .bottombt {
margin: -20px 0 0 10px;
}
.button_download:active .topbt {
margin: -70px 0 0 10px;
}
.button_download:active .rightbt {
margin: -45px 0 0 170px;
width: 100px;
}
.button_download:active .leftbt {
margin: -45px 0 0 -70px;
width: 100px;
}
width: 200px;
margin: 50px;
}
.button_download a {
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button_download div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button_download a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.leftbt,.rightbt,.topbt,.bottombt {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -45px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*HOVER*/
.button_download:hover .bottombt {
margin: -10px 0 0 10px;
}
.button_download:hover .topbt {
margin: -80px 0 0 10px;
line-height: 35px;
}
.button_download:hover .rightbt {
margin: -45px 0 0 190px;
width: 100px;
}
.button_download:hover .leftbt {
margin: -45px 0 0 -100px;
width: 110px;
}
/*ACTIVE*/
.buttonn1 a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button_download:active .bottombt {
margin: -20px 0 0 10px;
}
.button_download:active .topbt {
margin: -70px 0 0 10px;
}
.button_download:active .rightbt {
margin: -45px 0 0 170px;
width: 100px;
}
.button_download:active .leftbt {
margin: -45px 0 0 -70px;
width: 100px;
}
Если у вас слишком длинные названия файлов, которые не умещаются на кнопке, вы можете дописать к классу
.button_download
a это:overflow: hidden;
Таким образом, всё лишнее будет скрыто.
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив.