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

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


     09.02.2014    Стили (CSS)    1690

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

Ответил: Wawarezz


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

Комментарии пользователей (14)

frizoro
33

95 | 135

frizoro - 9 февраля 2014 19:13 - Юзер

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

Wawarezz
9 | 1

Wawarezz - 9 февраля 2014 19:16 - Юзер

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

Wawarezz
9 | 1

Wawarezz - 9 февраля 2014 19:23 - Юзер

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

frizoro
33

95 | 135

frizoro - 9 февраля 2014 19:20 - Юзер

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

frizoro
33

95 | 135

frizoro - 9 февраля 2014 19:49 - Юзер

Ну я себе поставил, вроде ничего сложно нету.
Здесь все ясно написано:
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
9 | 1

Wawarezz - 10 февраля 2014 14:00 - Юзер

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

Wawarezz
9 | 1

Wawarezz - 10 февраля 2014 14:13 - Юзер


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

frizoro
33

95 | 135

frizoro - 10 февраля 2014 14:01 - Юзер

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

frizoro
33

95 | 135

frizoro - 10 февраля 2014 14:21 - Юзер

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

Wawarezz
9 | 1

Wawarezz - 10 февраля 2014 14:27 - Юзер

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

Gopr
10

494 | 164

Gopr - 10 февраля 2014 14:54 - Юзер

Вот способ для непосредственного подключения кнопки в новости.
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. Все!

Gopr
10

494 | 164

Gopr - 10 февраля 2014 15:24 - Юзер

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
9 | 1

Wawarezz - 10 февраля 2014 16:26 - Юзер

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

Wawarezz
9 | 1

Wawarezz - 10 февраля 2014 17:44 - Юзер


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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

 23.01.2014 NeZoX  Стили (CSS)