Так...
Настройки любой кнопки сводятся к редактированию формы, из которой она вызывается и файла стиля CSS.
В виртуе файл стиля лежит в теме VirtueMart, называется theme.css
Кнопка имеет класс, этот класс прописан в theme.css
Вот у меня к примеру, если заглянуть в форму addtocart_form.tpl.php кнопка имеет стиль class="<?php echo $button_cls ?>"
Если стиль, как в этом примере, прописан не явно (к примеру class="style"), а с помощью переменной $button_cls, то получившийся код в результате обработки этой переменной можно легко посмотреть в исходном коде страницы, которую вывалит твой браузер. В мозилле это Вид - Исходный код страницы. И в каждом браузере это есть. Для Мозилы кстати есть хороший плагин Web Developer. Он при наведении мыши, показывает стили того или иного элемента, будь то кнопка или таблица и путь к нему. Поюзай, понравится.
Вот такой у меня код кнопки
<input type="submit" class="<?php echo $button_cls ?>" value="" title="Добавить в заявку" />
Не понятно сходу, какой класс присваивается кнопке после обработки переменной $button_cls. Я открываю страницу магазина, на которой есть кнопка и смотрю исходный код. В нем уже все совсем иначе. У меня
<input type="submit" class="addtocart_button" value="" title="Добавить в заявку" />
открываем theme.css и смотрим на стиль .addtocart_button
.addtocart_button, .notify_button {
text-align:center;
background-position:bottom left;
width: 141px;
height: 22px;
cursor: pointer;
border: none;
font-weight:bold;
font-family:inherit;
vertical-align: middle;
overflow:hidden;
}
.addtocart_button {
background: url( 'images/addtocart_button.gif' ) no-repeat center transparent;
border-left: 2px solid #999999;
border-right: 2px solid #999999;
}
Ну и что мы видим? А видим мы background: url( 'images/addtocart_button.gif' ) no-repeat center transparent;
Это и есть наша кнопка с параметрами no-repeat - не повторять, center - расположить по центру и transparent - растянуть по размеру, а размер у нас ширина - width: 141px; высота - height: 22px;
Так-то это ваще основы знаний. Стыдно не знать, тем более когда под рукой есть комп с интернетом. Раньше лень было идти в библиотеку, а сейчас лень уже даже читать...
теперь в стиле, для того, чтобы при наведении на объект он менял свою внешность, нужно добавлять дополнительные параметры :hover - курсор мыши на объекте. В стиле это можно задать так:
.addtocart_button : hover {
background: url( 'images/addtocart_button.gif' ) no-repeat center transparent;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
то в результате цвет брдюра с серого (#999999) поменяется на белый (#ffffff)
Разумно предположить, что если нам нужно сменить картинку, то ее тут нужно указать. Это должна быть такого же размера картинка, только другого цвета, с именем, к примеру addtocart_button_red.gif :
.addtocart_button : hover {
background: url( 'images/addtocart_button_red.gif' ) no-repeat center transparent;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
В результате при наведении мыши будет меняться фон и цвет бордюра.
Так везде и всегда. Это основы знаний, самое простое, что можно придумать. Изучайте HTML и CSS.
16.02.2017, 20:28:42