Не нравятся результаты поиска? Попробуйте другой поиск!

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

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

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

вопрос

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

Ответил: Wawarezz

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

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

Юзер

frizoro - 2015-03-279 февраля 2014 19:13 - #23130

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

Юзер

Wawarezz - 2015-03-279 февраля 2014 19:16 - #23131

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

Юзер

Wawarezz - 2015-03-279 февраля 2014 19:23 - #23133

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

Юзер

frizoro - 2015-03-279 февраля 2014 19:20 - #23132

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

Юзер

frizoro - 2015-03-279 февраля 2014 19:49 - #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 - 2015-03-2710 февраля 2014 14:00 - #23185

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

Юзер

Wawarezz - 2015-03-2710 февраля 2014 14:13 - #23188

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

Юзер

frizoro - 2015-03-2710 февраля 2014 14:01 - #23186

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

Юзер

frizoro - 2015-03-2710 февраля 2014 14:21 - #23191

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

Юзер

Wawarezz - 2015-03-2710 февраля 2014 14:27 - #23192

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

Юзер

494

Gopr - 2015-03-2710 февраля 2014 14:54 - #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 - 2015-03-2710 февраля 2014 15:24 - #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 - 2015-03-2710 февраля 2014 16:26 - #23207

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

Юзер

Wawarezz - 2015-03-2710 февраля 2014 17:44 - #23219

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

mondolfo | Шаблон waitlogin при авторизации через с ...

mondolfo
Шаблон waitlogin при авторизации через соцсеть?
Вчера, 01:31

/engine/modules/social.php
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
28-10-2024, 01:05

Я же написал, продублирую: нужно использовать [[:punct:]]

И проблема в условии проверяющее версию mysql, можно поменять местами true и false, изменить знак меньше на больше или вовсе убрать код строки с version_compare и оставить ту строку кода $tempArray[] где используется [[:punct:]].

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы

Там у человека совершенно другое условие поиска. Он не теги ищет которые строго разделены запятыми, он просто слова ищет и ему как раз подойдёт граница слова. И это когда-то давно поиск был разделяя по границе слова, теперь есть character_class и используется другой метод. Но это не отменяет того, что вы нашли вопрос и решение которое никак не связано с темой новости поиска новостей с наличием тегов.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:33

Если вы готовы предложить какое-то решение для исправление проблемы 3685, отлично. Иначе к сожалению на последних версиях MySQL хак не рабочий, согласно вашему трактату.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:20

Я буквально 2 часа назад столкнулся с проблемами при установке этого хака, проблема была именно в ошибке 3685, сайт не просто переставал работать, использовалась стандартная заглушка при критических ошибках MySQL исправить получилось методом описанным выше, для версия до 8 хак работает исправно, но выше, требуется доработка, так как синтаксис считается ошибочным, вы можете проверить самостоятельно.

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
27-10-2024, 22:32

Напротив нужно использовать [[:punct:]] вместо скобок, про это написано в документации на которую вы ссылаетесь. А \b означает границу слова и не способен правильно отображать результаты. Граница слова это когда выражение будет находить отдельные слова. Например новость имеет теги (Социальная сеть, Блокировка) и tags REGEXP '\\b(сеть)\\b' найдёт новость с тегом Социальная сеть, а так же Рыбацкая сеть и в принципе найдёт все новости где присутствует слово "Сеть" и будет много лишних результатов, а не только нужные.

В хаке как раз присутствует проверка на старую версию и новую mysql и в каждом случае используется тот вариант который является валидным для используемой версии.
homa152 | Как изменить вывод custom по нескольким ... ¹¹
homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 21:30
Добавлю касаемо обновления архитектуры MySQL
При добавлении хака с версии MySQL 8.0, возможно появление ошибки: 3685. Неверный аргумент для регулярного выражения.

Можно пофиксить самостоятельно внеся корректировки в сам хак из панели админа.

Строку:
```
$tempArray[] = "tags REGEXP '[[:<:]](" . $value  . ")[[:>:]]'";
```
Заменить на:
```
$tempArray[] = "tags REGEXP '\\\\b(" . $value  . ")\\\\b'";
```
Согласно справочному руководству MySQL 8.0 / ... / Регулярные выражения, «MySQL поддерживает регулярные выражения с помощью международных компонентов для Unicode (ICU)».

То есть, вместо "[[:<:]] и [[:>:]]", нужно использовать: "\b"
vitnet | Есть ли возможность изменить язык сайта? ¹

vitnet
Есть ли возможность изменить язык сайта?
25-10-2024, 16:22

Ну как вариант можно использовать тег {lang text=***} подробнее

{lang text="LANG_PARAMETER"}

Данный тег предназначен для вывода информации из языкового файла website.tpl, который в данный момент используется, где LANG_PARAMETER это значение параметра, который необходимо вывести. Например, тег {lang text="attach_images"} выведет надпись “Прикрепить изображения” из языкового пакета, в случае использования русского языка и если используется английский язык, то “Attach Images”
vitnet | Есть готовый модуль рейтинга комментарие ... ¹
vitnet
Есть готовый модуль рейтинга комментариев?
25-10-2024, 13:12
Вариант 1 (вручную)

1.0 Открываете файл engine/modules/show.full.php находите в нем
```
$where_approve . " ORDER BY " . PREFIX . "_comments.id " . $comm_msort;
```
И меняете здесь id на rating
Пример:
```
$where_approve . " ORDER BY " . PREFIX . "_comments.rating " . $comm_msort;
```
2.0 Затем переходите в админку /admin.php?mod=options&action=syscon --> Настройки комментариев --> Порядок сортировки комментариев --> По убыванию

2.1 Далее --> Тип рейтинга комментариев выставляете "Нравится или Не нравится"

Готово!

Вариант 2 (плагин)
Для просмотра содержимого спойлера, перейдите к выбранному событию.

Graf | Как сделать аякс кнопку "загрузить еще"? ²

Graf
Как сделать аякс кнопку "загрузить еще"?
23-10-2024, 16:03

Вот рабочий пример со скрытие пагинатора и кнопки.
Полный код файла navigation.tpl

[not-available=userinfo]
<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

<nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]>
	<div class="page_next-prev">
		<span class="page_prev" title="Предыдущая страница">
			[prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link]
		</span>
		<span class="page_next" title="Следующая страница">
			[next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link]
		</span>
	</div>
	<ul class="pagination">
		{pages}
	</ul>
</nav>
<script type="text/javascript">
$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('.navigation').remove();
                    $('#nav-load').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});
</script>
[/not-available]

vitnet | Как перенести категории в DLE? ²

vitnet
Как перенести категории в DLE?
22-10-2024, 11:30

Для начала проверьте наличие файла /engine/cache/system/category.php и если он был до замены БД то удалите его а ещё лучше очистить кеш.

наверх

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

Ответил: Wawarezz

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

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

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

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

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

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

2 в одном

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

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

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

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

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