Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.

DLE FAQ » Все вопросы » Стили (CSS) » Как добавить CSS кнопку

Как добавить CSS кнопку

Wawarezz css, кнопка, анимация Все вопросы » Стили (CSS) 3457

вопрос

Здравствуйте! Который день уже бьюсь - не могу поставить CSS кнопку на DLE 10.1 сайт. Пользуюсь WYSIWYG-редактором TinyMCE, инструментом "исходный код".
CSS-код прописываю в файле engine.css, но при добавлении кнопки последняя не появляется, а появляется только ссылка. Обычная ссылка. Помогите, пожалуйста. Кажется, что-то не так делаю

Ответил: Wawarezz

Ответ в комментариях эксперта в своем деле и просто хорошего человека Gopr. Так же благодарю frizoro

14 комментариев

Юзер

frizoro - - #23130

Ты хочешь сделать тоже самое , что по ссылке?
но у тебя ничего не получается?
Правильно понял!?

Юзер

Wawarezz - - #23131

Именно оно, не выходит, не могу найти в интернете инструкцию или видео как это делается

Юзер

Wawarezz - - #23133

Первую было бы не плохо

Юзер

frizoro - - #23132

Wawarezz,там 7 вариантов кнопок, какую вам нужно?

Юзер

frizoro - - #23134

Ну я себе поставил, вроде ничего сложно нету.
Здесь все ясно написано:
http://www.rudebox.org.ua/animated-buttons-for-your-site/

Что делаем:
1)Вот это вставить в css (в style.css или engine.css, можете отдельное добавить)


 .a-btn{
    background:#a9db80;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
    background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:90px;
    display:inline-block;
    position:relative;
    border:1px solid #80ab5d;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#6d954e;
    opacity:0;
    text-shadow:0px 1px 1px rgba(255,255,255,0.4);
    -webkit-transition:opacity 0.2s ease-in-out;
    -moz-transition:opacity 0.2s ease-in-out;
    -o-transition:opacity 0.2s ease-in-out;
    transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top:13px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #80ab5d;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#4e5c50 url(../images/arrow_down.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    -webkit-transform:scale(10);
    -moz-transform:scale(10);
    -ms-transform:scale(10);
    -o-transform:scale(10);
    transform:scale(10);
    opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#80ab5d;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
    transform:scale(1.4);
}

2)Вставляем кнопку в main.tpl , там где хотите видеть её

<a href="#" class="a-btn">
 <span class="a-btn-slide-text">$29</span>
 <img src="{THEME}/images/icons/1.png" alt="Photos" />
 <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
 <span class="a-btn-icon-right"><span></span></span>
</a>

А вот этот архив скачать, и залить картинки в шаблон:
http://yadi.sk/d/Gc3TqmdzHaiM6

Вот что у меня получилось:
http://kino-sea.ru/

Юзер

Wawarezz - - #23185

Большое спасибо, сейчас попробую

Юзер

Wawarezz - - #23188

Не вышло, выглядит вот так

Юзер

frizoro - - #23186

Wawarezz,Хорошо, если что пишите в этой теме, помогу.

Юзер

frizoro - - #23191

Wawarezz,
Дайте сайт свой, сам посмотрю.

Юзер

Wawarezz - - #23192

Видите ли, я вставляю кнопку непосредственно в новость на DLE 10.1

Юзер

494

Gopr - - #23193

Вот способ для непосредственного подключения кнопки в новости.
1. Админка
2. Список всех разделов
3. Дополнительные поля новостей
4. Добавить поле!
5. Название поля пишем downloads
6. Описание поля пишем ссылка на файл
7. Категория - выбираем нужные или не трогаем!
8. Тип поля одна строка
9. Значение по умолчанию оставляем пустым
10. Использовать при желании (можно оставить поле пуcтым) ставим галочку.
11. Список всех разделов
12. Шаблоны сайта.
13. Вытираем пот с лица!
14. открываем addnews.tpl
15. В нужное место вставляем {xfields} или

<input type="text" name="xfield[downloads]" placeholder="Укажите прямую ссылку на файл" id="xfield[downloads]" value=""/>

16. В fullstory.tpl в нужном месте, чаще всего после {full-story} ставим

[xfgiven_downloads]<a href="[xfvalue_downloads]" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/icons/1.png" alt="Photos" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
[/xfgiven_downloads]

17. Подключаем стили в css + заливаем картинку из архива с кнопкой!
18. Все!

Юзер

494

Gopr - - #23197

19. Теперь примочки!

<span class="a-btn-slide-text">$29</span>

Тут у нас цена указана если она нужна и для каждой новости своя, то опять создаем дополнительное поле.
20. Повторяем все с 4-го по 10-й пункт. Одно но! 5, 6 и 9 пункт. В название поля пишем price, в описание поля пишем цена и в значение по умолчанию пишем $

21. Если в шаблоне addnews.tpl используется {xfields} то сразу идем в fullstory.tpl если нет, то пишем в нужном месте:

<input type="text" name="xfield[price]" placeholder="Укажите цену" id="xfield[price]" value=""/>

22. В fullstory.tpl заменяем

<span class="a-btn-slide-text">$29</span>

на

<span class="a-btn-slide-text">[xfgiven_price][xfvalue_price][/xfgiven_price]</span>

Юзер

Wawarezz - - #23207

Ха, да по вашему материалу необходимо создать статью для других пользователей. Спасибо. Доходчиво и ясно, сейчас попробую

Юзер

Wawarezz - - #23219

Спасибо, работает. Вот наглядный пример

Puxlik | Telegram Sender ¹³

Puxlik
Telegram Sender

Версию 17.1 поддерживает ?
TeraMoune | Не загружается изображение [Ошибка HTTP] ... ²

TeraMoune
Не загружается изображение [Ошибка HTTP]. Как исправить?

В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
RedFox | Не загружается изображение [Ошибка HTTP] ... ²

RedFox
Не загружается изображение [Ошибка HTTP]. Как исправить?

"Некоторые картинки загружаются, но большинство нет."

Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
post_max_size = 100M
upload_max_filesize = 100M
max_file_uploads = 20

Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
LMakc | Модуль читалка pdf ¹

LMakc
Модуль читалка pdf

Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
ssssss | Сделать подсчет количества символов в ко ... ⁵

ssssss
Сделать подсчет количества символов в комментариях

Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
alex.sg.spb | Как вывести информацию о обновлении ново ... ⁸

alex.sg.spb
Как вывести информацию о обновлении новости, но на время?

вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Спасибо огромное. Этот вариант самый простой и рабочий!

derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

К черту htaccess давайте проще

к href добавьте id="xfield_value"

<a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

И добавьте скрипт обработчик

<script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>

Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Так сайт не работает вообще. Браузер выдает такое

Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
Попробуйте удалить файлы cookie.

ERR_TOO_MANY_REDIRECTS

Куки чистил не помогает
derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

Попробуйте так
RewriteEngine On
RewriteCond %{REQUEST_URI} %20
RewriteRule (.*)%20(.*) $1+$2 [N]
RewriteRule (.*) $1 [R=301,L]

наверх

Технический сбой

Как добавить CSS кнопку

Ответил: Wawarezz

14 комментариев

Похожие вопросы

Вкладка при нажатии на кнопку

Изменить значение цветов в TinyMce

Некорректно отображается редактор Tinymce DLE10.1

Пробела в добавлении новостей, при нажатии кнопки вставить ссылку или вписывании тега

2 в одном

Впопрос по шаблону sleek by yurta и кнопки красивый цифровой рейтинг

Помогите пожалуйста со слайдом

Как сделать кнопку добавить отзыв?

При добавлении комментариев не работают кнопки. Как исправить?

Как убрать отступ внизу объекта?