Дизайн кнопки для аттачмента Дле

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{5-09-2013, 01:15
1 713
0}

Attachment DLE - це силка для завантаження, що з'являється коли до новини прикріплений файл.

Але, виглядає стандартний аттачмент в CMS DataLife Engine дуже сіро і не красиво.

Тому будемо його міняти, У всіх варіантах потрібно спочатку у файлі templates/ваш шаблон/css/engine.css видалити:

/*---Ссылка на скачивание прикрепленного файла---*/.attachment { color: #808080; }

Потім знайти у файлі enginemodulesfunctions.php таку строку:

В ДЛЕ 10.0 це 764 строка.

            $replace_1[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >{$row['name']}</a> [{$size}] ({$lang['att_dcount']} {$row['dcount']})</span>";
            $replace_2[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >\1</a> [{$size}] ({$lang['att_dcount']} {$row['dcount']})</span>";
 
        } else {
 
            $replace_1[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >{$row['name']}</a> [{$size}]</span>";
            $replace_2[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >\1</a> [{$size}]</span>";

Кнопка 1:

Мінаємо код в enginemodulesfunctions.php:


$replace_1[] = "<a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" ><div class="mknop"><div class="mknoplink">{$row['name']}</div><div class="mknorazt">Вес:</div><div class="mknopsize">{$size}</div><div class="mknopdownload">Загрузок: <div class="mknopcifr">{$row['dcount']}</div></div></div></a>";
            $replace_2[] = "<a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" ><div class="mknop"><div class="mknoplink">\1</div><div class="mknorazt">Вес:</div><div class="mknopsize">{$size}</div><div class="mknopdownload">Загрузок: <div class="mknopcifr">{$row['dcount']}</div></div></div></a>";
 
        } else {
 
            $replace_1[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >{$row['name']}</a> [{$size}]</span>";
            $replace_2[] = "<span class="attachment"><a href="{$config['http_home_url']}engine/download.php?id={$row['id']}{$area}" >\1</a> [{$size}]</span>";

Добавляємо стиль:

Показать / Скрыть текст


.mknop{
    display: inline-block;
    margin: 10px 0px;
    height: 30px;
    border: 1px solid #419DB8;
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #90C9D8;
    background: #58bedc;
    background: -moz-linear-gradient(top,  #58bedc 11%, #3097b5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#3097b5));
    background: -webkit-linear-gradient(top,  #58bedc 11%,#3097b5 100%);
    background: -o-linear-gradient(top,  #58bedc 11%,#3097b5 100%);
    background: -ms-linear-gradient(top,  #58bedc 11%,#3097b5 100%);
    background: linear-gradient(to bottom,  #58bedc 11%,#3097b5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#3097b5',GradientType=0 );
}
 
.mknop:hover{
    display: inline-block;
    margin: 10px 0px;
    height: 30px;
    border: 1px solid #419DB8;
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #2186A2;
    background: #58bedc;
    background: -moz-linear-gradient(top,  #58bedc 11%, #21819D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#21819D));
    background: -webkit-linear-gradient(top,  #58bedc 11%,#21819D 100%);
    background: -o-linear-gradient(top,  #58bedc 11%,#21819D 100%);
    background: -ms-linear-gradient(top,  #58bedc 11%,#21819D 100%);
    background: linear-gradient(to bottom,  #58bedc 11%,#21819D 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#21819D',GradientType=0 );
}
 
.mknoplink {
        padding: 2px 8px;
        display: inline-block;
        background: #efefef;
        background: -moz-linear-gradient(top,  #efefef 0%, #dbdbdb 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb));
        background: -webkit-linear-gradient(top,  #efefef 0%,#dbdbdb 100%);
        background: -o-linear-gradient(top,  #efefef 0%,#dbdbdb 100%);
        background: -ms-linear-gradient(top,  #efefef 0%,#dbdbdb 100%);
        background: linear-gradient(to bottom,  #efefef 0%,#dbdbdb 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 );
        box-shadow: inset 0px 1px 0px #fff,0px 1px 0px #E5E5E5;
        border-radius: 3px;
 
        text-shadow: 0px 1px 0px #fff;
        margin: 4px 10px 0px 5px;
        color: #15586A;
        font: 14px Arial;
    }
 
.mknopsize {
    margin: 0px 10px 0px 7px;
    display: inline-block;
    padding: 2px 5px;
    background: #1A6479;
    box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;
    border-radius: 3px;
    color: #C9F5FF;
    text-shadow: 0px -1px 0px #0D3E4B;
    
}
    
.mknopdownload {
    display: inline-block;
    color: #D6F7FF;
    text-shadow: 0px -1px 0px #1A6479;
}
 
.mknopcifr {
    margin: 0px 5px 0px 5px;
    display: inline-block;
    padding: 2px 5px;
    background: #1A6479;
    box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;
    border-radius: 3px;
    color: #C9F5FF;
    text-shadow: 0px -1px 0px #0D3E4B;
}
.mknorazt {
    display: inline-block;
    color: #D6F7FF;
    text-shadow: 0px -1px 0px #1A6479;
}

Розробка сайтів | Створення сайтів

⟪ Попередня Наступна ⟫

Кабінет клієнта

Дизайн кнопки для аттачмента Дле

Коментарі

⤹ Залишити свій коментар ⤸

Останнє на сайті

Останнє в магазині

Коментарі

Популярне на сайті

Тарифні плани