Кнопки + и -

  • 24 Ответов
  • 621 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

maxoh

Кнопки + и -
« : 23.12.2015, 18:13:48 »
Добрый день уважаемые посетители форума! Прошу извинить меня за мою техническую неопытность и прошу Вас дать подробный ответ на мой глупый вопрос.

Подскажите, пожалуйста, как вставить в кнопку + и - ( или изображение )

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Re: Кнопки + и -
« Ответ #1 : 23.12.2015, 18:16:06 »
Если без кастомизации, то input type="number"
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

maxoh

Re: Кнопки + и -
« Ответ #2 : 23.12.2015, 18:20:52 »
Если без кастомизации, то input type="number"
Извините, я понимаю, что для Вас это абсолютно обыденный вопрос. Но войдите в моё положение, и разъясните, пожалуйста, более подробно. У меня есть изображение стрелок, в какой файл мне зайти и куда вставить путь к этим стрелкам? Заранее огромное человеческое спасибо!

*

maxoh

Re: Кнопки + и -
« Ответ #3 : 23.12.2015, 18:25:09 »

*

umbabaraumba

  • *******
  • 2441
  • [+]153 / [-]1
  • если помог можете поставить +
Re: Кнопки + и -
« Ответ #4 : 23.12.2015, 18:26:41 »
Извините, я понимаю, что для Вас это абсолютно обыденный вопрос. Но войдите в моё положение, и разъясните, пожалуйста, более подробно. У меня есть изображение стрелок, в какой файл мне зайти и куда вставить путь к этим стрелкам? Заранее огромное человеческое спасибо!
Я так понял что вы хотите вставить эти стрелки справа и слева от поля с числом, тогда это можно сделать через CSS .
Найдите как в коде выводятся эти элементы и для них в CSS пропишите background: url(images/стрелка.png);
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Re: Кнопки + и -
« Ответ #5 : 23.12.2015, 18:30:05 »
У вас там классы все прописаны. Открываете файл templates/shaper_vocal/css/template.css и после последней строчки добавляете:

Код: css
.product_plus {
background: url('путь до картинки плюсика') center center no-repeat;
}
.product_minus {
background: url('путь до картинки минусика') center center no-repeat;
}
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

maxoh

Re: Кнопки + и -
« Ответ #6 : 23.12.2015, 18:48:23 »
У вас там классы все прописаны. Открываете файл templates/shaper_vocal/css/template.css и после последней строчки добавляете:

Код: css
.product_plus {
background: url('путь до картинки плюсика') center center no-repeat;
}
.product_minus {
background: url('путь до картинки минусика') center center no-repeat;
}
Что я делаю не так ?

*

umbabaraumba

  • *******
  • 2441
  • [+]153 / [-]1
  • если помог можете поставить +
Re: Кнопки + и -
« Ответ #7 : 23.12.2015, 18:57:25 »
Картинка лежит в docs/images
добавьте слеш
.product_minus {
    background: url("/images/arrow_down.gif") no-repeat scroll center center;
}
« Последнее редактирование: 23.12.2015, 19:03:11 от umbabaraumba »
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

Wertos

Re: Кнопки + и -
« Ответ #8 : 23.12.2015, 19:05:35 »
Код
<input type="image" src="путь/к/картинке" onclick="..............>

*

maxoh

Re: Кнопки + и -
« Ответ #9 : 23.12.2015, 19:19:16 »

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Re: Кнопки + и -
« Ответ #10 : 23.12.2015, 19:25:31 »
Положите картинку в ту же папку, где css-файл. Пропишите:
Код: css
.product_minus {
    background: url("arrow_down.gif") no-repeat scroll center center;
}
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

umbabaraumba

  • *******
  • 2441
  • [+]153 / [-]1
  • если помог можете поставить +
Re: Кнопки + и -
« Ответ #11 : 23.12.2015, 19:28:50 »

Допишите !important
../images/arrow_up.gif") no-repeat scroll 0px 2px!important
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

maxoh

Re: Кнопки + и -
« Ответ #12 : 23.12.2015, 19:38:49 »

*

maxoh

Re: Кнопки + и -
« Ответ #13 : 23.12.2015, 19:45:31 »
Может проблема быть в самом шаблоне? При заходе в этот шаблон, он не реагирует на "закрыть" "сохранить". С остальными все нормально.

*

flyingspook

Re: Кнопки + и -
« Ответ #14 : 23.12.2015, 19:49:00 »
залейте картинки если их там нету в папку https://halobeltshop.ru/templates/shaper_vocal/images

и допишите в стилях путь ../images/название картинки вот так
Код
.product_plus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_up.gif") no-repeat scroll 0 2px !important;
    width: 20px;
}
Код
.product_minus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_down.gif") no-repeat scroll 0 2px !important;
    width: 20px;
}

стрелки там есть у вас сейчас arrow_down.gif и arrow_up.gif
просто в стилях пути к картинкам поправьте как выше написал в файле https://halobeltshop.ru/templates/shaper_vocal/css/template.css
« Последнее редактирование: 23.12.2015, 19:53:57 от flyingspook »

*

umbabaraumba

  • *******
  • 2441
  • [+]153 / [-]1
  • если помог можете поставить +
Re: Кнопки + и -
« Ответ #15 : 23.12.2015, 19:53:49 »
Может проблема быть в самом шаблоне? При заходе в этот шаблон, он не реагирует на "закрыть" "сохранить". С остальными все нормально.
Мне кажется проблема в том что вы не знаете как правильно писать CSS .
То вы пишите background: url("/images/arrow_down.gif")
а то background: url("arrow_down.gif") no-repeat scroll 0px 2px !important; без images
Тогда уж так url("../arrow_down.gif")
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

flyingspook

Re: Кнопки + и -
« Ответ #16 : 23.12.2015, 19:55:43 »
@umbabaraumba
он видимо картинки повсюду уже залил  ^-^

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Re: Кнопки + и -
« Ответ #17 : 23.12.2015, 20:06:06 »
Я ж написал самый простой способ, чтоб ТС не парился с путями, положить в ту же папку, что и CSS.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

maxoh

Re: Кнопки + и -
« Ответ #18 : 23.12.2015, 20:08:09 »
Большое спасибо всем, кто помогал! Я новичок в СSS и по-этому Ваша помощь для меня неоценима!
Картинки я вкладывал в папку шаблона, но скорее всего, я что-то сделал не так.

Код
.product_minus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_down.gif") no-repeat scroll 0 2px !important;
    width: 20px;
}.product_plus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_up.gif") no-repeat scroll 0 2px !important;
    width: 20px;
}
Как мне теперь централизовать их?

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Re: Кнопки + и -
« Ответ #19 : 23.12.2015, 20:19:49 »
Код: css
.product_minus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_down.gif") no-repeat center center !important;
    width: 20px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
}.product_plus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_up.gif") no-repeat center center !important;
    width: 20px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
}
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

maxoh

Re: Кнопки + и -
« Ответ #20 : 23.12.2015, 20:24:21 »
Код: css
.product_minus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_down.gif") no-repeat center center !important;
    width: 20px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
}.product_plus {
    background: rgba(0, 0, 0, 0) url("../images/arrow_up.gif") no-repeat center center !important;
    width: 20px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
}
Завтра свечку за Вас поставлю) спасибо

*

voland

  • ********
  • 9335
  • [+]520 / [-]101
  • СКАЙП утерян! Пишите в телеграм @volandku
Re: Кнопки + и -
« Ответ #21 : 23.12.2015, 20:28:25 »
Завтра свечку за Вас поставлю) спасибо
Вот ничего себе, Жека, ты жив хоть?
Зачем тебя хоронят?

*

maxoh

Re: Кнопки + и -
« Ответ #22 : 23.12.2015, 20:30:40 »
Вот ничего себе, Жека, ты жив хоть?
Зачем тебя хоронят?
Разве за здравие не бывает ?)

*

umbabaraumba

  • *******
  • 2441
  • [+]153 / [-]1
  • если помог можете поставить +
Re: Кнопки + и -
« Ответ #23 : 23.12.2015, 21:14:50 »
Завтра свечку за Вас поставлю) спасибо
;D
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

*

flyingspook

Re: Кнопки + и -
« Ответ #24 : 23.12.2015, 21:20:21 »
@maxoh
почитайте хотя бы htmlbook.ru для начала понимания верстки, там все расписано, хоть наберетесь опыта по распространенным
background:
width:
height:
font:
margin:
padding:
border:
и др.