• Страница 1 из 1
  • 1
Форум » Самоучитель HTML и CSS » Вопросы по uCoz » Как переделать кнопка скачать с DLE на uCoz
Как переделать кнопка скачать с DLE на uCoz
Webmaster32
Дата: Вторник, 23.01.2018, 20:50 | Сообщение 1
Модераторы
Сообщений:351
Награды: 5


Кнопка скачать с фоновой загрузкой для DLE если кто сможет подогнать под Ucoz думаю данная кнопка будет вполне оригинальна, т к она не выводит ссылок в браузере, а после окончания фоновой загрузки вам только остаётся сохранить файл.

Установка:

1. Подключаемся через FTP либо через файловый менеджер
2. Скачиваем архив и распаковываем его в корень сайта
3. Далее в main.tpl перед закрывающим тегом , подключить скрипт:
Код
<script type="text/javascript" src="/js/download_button.js"></script>

4. Тут же в секции подключаем шрифт
Код
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

5. Далее в стили в самый низ добавляем следующее:
Код
/** Copyright (c) 2018 Artem Malcov | https://artem-malcov.ru/moduli_....lya-dle **/

.black_button * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.black_button *:before, .black_button *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.black_button {
    height: 61px;
    width: 265px;
    border-top: 1px solid #4b4b4b;
    border-bottom: 1px solid #090909;
    border-left: 1px solid #090909;
    border-right: 1px solid #090909;
    border-radius: 99px;
    background: #313131;
    background: -moz-linear-gradient(top, #313131 0%, #242424 100%);
    background: -webkit-linear-gradient(top, #313131 0%, #242424 100%);
    background: linear-gradient(to bottom, #313131 0%, #242424 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#242424', GradientType=0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: .2s;
    margin: 0 auto;
}

.black_button:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: .2s;
}

.black_button_one {
    color: #838383;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    width: 200px;
    margin: 0 auto;
    background: url('../img/download.png') no-repeat center right;
}

.left_button span {
    font-size: 13px;
}

.black_button_progress {
    width: 200px;
    margin: 0 auto;
    color: #838383;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    display: none;
}

.right_button {
    font-size: 24px;
    float: left;
    width: 60px;
    text-align: right;
    height: 60px;
    line-height: 60px;
}

.left_button {
    float: left;
    width: 140px;
    padding: 8px 0 0 0;
}

.progress_bar {
    background: #222;
    border-bottom: 1px solid #393939;
    height: 10px;
    border-radius: 99px;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 2px 0 0 0;
    margin: 7px 0 0 0;
}

.progress_line {
    background: #2c4c7f;
    background: -moz-linear-gradient(left,  #2c4c7f 0%, #c95cc6 50%, #f7b401 100%);
    background: -webkit-linear-gradient(left,  #2c4c7f 0%,#c95cc6 50%,#f7b401 100%);
    background: linear-gradient(to right,  #2c4c7f 0%,#c95cc6 50%,#f7b401 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c4c7f', endColorstr='#f7b401',GradientType=1 );
    height: 5px;
    margin: 0 2px 0 2px;
    border-radius: 99px;
    position: relative;
    max-width: 136px;
    width: 0;
}

.progress_line div {
    position: absolute;
    height: 1px;
    background: #fff;
    border-radius: 99px;
    opacity: 0.4;
    left: 1px;
    right: 1px;
}

Цитата
Обязательно проставьте корректную ссылку до иконки загрузки.


6. В папке с темой находим файл attachment.tpl и заменяем всё содержимое на:
Код
[allow-download]
    <div class="black_button" data-item="{link}">
  <div class="black_button_one">Нажми & Скачай</div>
  <div class="black_button_progress">
   <div class="left_button">
    <span>Идет скачивание...</span>
    <div class="progress_bar">
     <div class="progress_line">
      <div></div>
     </div>
    </div>
   </div>

   <div class="right_button">0%</div>
  </div>
    </div>
[/allow-download]


Очищаем кэш и радуемся)))

Источник: «Malcov B.»
Прикрепления: black_button_ar.zip(3.7 Kb)


Когда уходят герои, на их места приходят клоуны!..

Comsecurity - Информационный-новостной интернет портал


Сообщение отредактировал
Webmaster32 - Вторник, 23.01.2018, 20:50
Страна: (RU)
Kosten
Дата: Среда, 24.01.2018, 01:38 | Сообщение 2
Администраторы
Сообщений:16811
Награды: 55


Webmaster32, что то не могу найти, как визуально смотрится. 11a
Страна: (RU)
Kosten
Дата: Среда, 24.01.2018, 01:39 | Сообщение 3
Администраторы
Сообщений:16811
Награды: 55


Все, нашел, не дурно бы на uCoz смотрелось, может, кто переведет на рельсы конструктора.
Страна: (RU)
Webmaster32
Дата: Среда, 24.01.2018, 03:41 | Сообщение 4
Модераторы
Сообщений:351
Награды: 5


Kosten, да я как то сам пробовал, но у юкоза условных операторов как блох у собаки, в общем ничего так и не вышло.

Когда уходят герои, на их места приходят клоуны!..

Comsecurity - Информационный-новостной интернет портал
Страна: (RU)
Slavik
Дата: Среда, 24.01.2018, 19:04 | Сообщение 5
Гл. Модератор
Сообщений:1738
Награды: 4


Цитата Kosten ()
Webmaster32, что то не могу найти, как визуально смотрится.

Я думаю всё бы хотели посмотреть как смотрится)), прикрепить изображение не можешь? 07a


MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
-SAM-
Дата: Пятница, 26.01.2018, 08:43 | Сообщение 6
Друзья сайта
Сообщений:415
Награды: 18


В качестве Источник-а следовало указать прямую ссылку к материалу, Доступно только для пользователей (чтобы подобных вопросов в теме не задавали, мол, как смотрится)... там 8 пунктов, в 7 как раз написано, что {link} должен быть как прямая ссылка к файлу, а ее аналог в uCoz: $FILE_DIRECT_URL$ (для файла, что залит на сервер) и $RFILE_DIRECT_URL$ (соответственно для удаленного скачивания, если только в поле указана прямая ссылка к файлу, а не на ФО по типу Я.Диск).

Страна: (UA)
Форум » Самоучитель HTML и CSS » Вопросы по uCoz » Как переделать кнопка скачать с DLE на uCoz
  • Страница 1 из 1
  • 1
Поиск: