Перейти к содержанию

Рекомендуемые сообщения

Добрый день! Столкнулся со следующей проблемой: в каталоге товаров не получается изменить цвет кнопки купить на ocStore  Version 1.5.4.1. Сейчас кнопка очень не примечательная, что доставляет заказчикам некоторые неудобства. 12.jpg

Вопрос в том, как изменить ее цвет или заменить вообще на картинку? Для карточки продукта решение нашел, в стилях вообще не был прописан код для изменения цвета кнопки, решил следующим кодом:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;   - это цвет кнопки
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
 }
a.button, input.button:hover {
background: #32CD32;
}

По идее этот код должен действовать и на каталог товаров, но ничего не изменилось. Как можно это исправить??? Заранее спасибо)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

шаблон у вас не стандартный. давайте  ссылку на ваш сайт - разберемся!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Адрес магазина - http://shopping-ck.com.ua

#content .box-product .cart input.button {
background: url('/image/add_to_cart.gif') left center no-repeat;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px #9C9C9C;
-moz-box-shadow: 0 0px 0px #9C9C9C;
box-shadow: 0 0px 0px #9C9C9C;
color: #005800;
font-weight: normal;
margin-top: 8px;
padding-left: 31px;
}

background: url('/image/add_to_cart.gif') left center no-repeat; вот картинка, её нужно удалить

 

Ниже цвет кнопки background: #FF4500;

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

Или сделайте так в #content .box-product .cart input.button {

background: #32353A url('/image/add_to_cart.gif') 4px 1px no-repeat;

И иконку нужно заменить на прозрачную

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
#content .box-product .cart input.button {
background: url('/image/add_to_cart.gif') left center no-repeat;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px #9C9C9C;
-moz-box-shadow: 0 0px 0px #9C9C9C;
box-shadow: 0 0px 0px #9C9C9C;
color: #005800;
font-weight: normal;
margin-top: 8px;
padding-left: 31px;
}

background: url('/image/add_to_cart.gif') left center no-repeat; вот картинка, её нужно удалить

 

Ниже цвет кнопки background: #FF4500;

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

Или сделайте так в #content .box-product .cart input.button {

background: #32353A url('/image/add_to_cart.gif') 4px 1px no-repeat;

И иконку нужно заменить на прозрачную

 

Не получается(( Надпись Купить не получается сделать по центру, цвет текста не изменяется на белый. И хотелось чтобы рамка (цветная) была скругленная, как в карточке товара. Что можно сделать? 

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Не получается(( Надпись Купить не получается сделать по центру, цвет текста не изменяется на белый. И хотелось чтобы рамка (цветная) была скругленная, как в карточке товара. Что можно сделать? 

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема. 

Что это у меня получается а у вас нет? )))

Странно

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну вот смотрим кнопка купить, удалил корзину так как вы хотите текст по центру

#content .box-product .cart input.button {
color: #FFFFFF;
margin-top: 8px;
background: #FF4500;
font-weight: bold;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
} 

Вышло так

 

post-683955-0-41269000-1413980945_thumb.jpg

 

При наведении 

#content .box-product .cart input.button:hover {
background: #FF4500;
font-weight: bold;
}

Вышло так

post-683955-0-23680000-1413980959_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Как видите всё получается, наверное нужно побольше упорства!!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема. 

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс

#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс

#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

Хм, и правда получилось... а вчера ни в какую! 

Что касается наличия товара. Вот код:

#content .stock {
    background: url("/image/stock.gif") no-repeat scroll left center transparent;
    margin-left: 21px;
    margin-top: 7px;
    padding-left: 28px;
    text-align: left;
}
#content .no-stock {
    background: url("/image/no-stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;
}
#column-left .stock,
#column-right .stock {
    background: url("/image/stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;

Пытался исправить, но не вышло, что посоветуете сделать?  Заранее спасибо за помощь)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс

#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

И еще кстати не нашел каким образом сделать фото товара по центру в каталоге товаров? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Хм, и правда получилось... а вчера ни в какую! 

Что касается наличия товара. Вот код:

#content .stock {
    background: url("/image/stock.gif") no-repeat scroll left center transparent;
    margin-left: 21px;
    margin-top: 7px;
    padding-left: 28px;
    text-align: left;
}
#content .no-stock {
    background: url("/image/no-stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;
}
#column-left .stock,
#column-right .stock {
    background: url("/image/stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;

Пытался исправить, но не вышло, что посоветуете сделать?  Заранее спасибо за помощь)

 

Так это стили, а вам нужно редактировать код модуля, отвечающего за вывод этих блоков - рекомендуемых и тд. Там должно быть условие если в наличии то класс .stock, а если не в наличии то .no-stock  (ну вот как-то так)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

И еще кстати не нашел каким образом сделать фото товара по центру в каталоге товаров? 

Вроде бы всё по центру  :ugeek:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вроде бы всё по центру  :ugeek:

В категориях фото товара сдвинуто влево... 

На главной также возле наличии проставляется зеленая галочка, есть товар в наличии или его нет, а в категориях галочка стоит только возле товаров со статусом есть в наличии, такое ощущение что для галочки нет в наличии (серая) вообще не прописан код, даже зеленая не проставляется, где это можно исправить не нашел. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В категориях фото товара сдвинуто влево... 

.product-grid .image {
display: block;
margin-bottom: 0px;
text-align: center;
}

  в stylesheet.css строка 1123

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

На главной также возле наличии проставляется зеленая галочка, есть товар в наличии или его нет, а в категориях галочка стоит только возле товаров со статусом есть в наличии, такое ощущение что для галочки нет в наличии (серая) вообще не прописан код, даже зеленая не проставляется, где это можно исправить не нашел. 

Нужно дописать код в шаблоне этих модулей

 

Что за шаблон у вас, название?

 

 

Измените это, а то логотип перекрывает букву Г (главная)

#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 3px; было так 0px 0px 0px 7px;
color: #000;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Нужно дописать код в шаблоне этих модулей

 

Что за шаблон у вас, название?

 

 

Измените это, а то логотип перекрывает букву Г (главная)

#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 3px; было так 0px 0px 0px 7px;
color: #000;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}

Изменил, получилось. Спасибо за помощь.

Шаблон называется - "Электроника для жизни" 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

//////

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема. 

 

Например берем файл модуля  /catalog/controller/module/featured.php 

Открываем и правим:

Находим 

<div class="stock"><?php echo $product['stock'];?></div>

И меняем на 

			        <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Например берем файл модуля  /catalog/controller/module/featured.php 

Открываем и правим:

Находим 

<div class="stock"><?php echo $product['stock'];?></div>

И меняем на 

			        <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

Не могу найти подобного кода в модуле, и нужно подправить код именно в каталоге товаров, там вообще проблемы с этим. Если в модулях галочку дублирует на все товары, то в каталоге товаров только на те что есть в наличии.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Не могу найти подобного кода в модуле, и нужно подправить код именно в каталоге товаров, там вообще проблемы с этим. Если в модулях галочку дублирует на все товары, то в каталоге товаров только на те что есть в наличии.

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

 

Вот код для категории

Внимательно смотрите - высылаю пути файлов

/catalog/view/theme/electronics/template/product/category.tpl

Здесь находим код (у меня 143 строка)

      <?php echo $product['stock'];?>

меняем на 

      <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

Далее, если дублируется зеленая галочка в наличии, то идем по пути

/catalog/language/russian/product/category.php

Находим последнюю строку

$_['text_instock']      = '<div class = "stock">Есть в наличии</div>';

В ней оставляем только 

$_['text_instock']      = 'Есть в наличии';

Сохраняемся.

Вот и всЁ. Теперь у вас должно быть так как на сайте http://opencart3.esy.es/index.php?route=product/category&path=25_28

 

Да забыл, картинки влево съехали, находим 

 

/catalog/view/theme/electronics/stylesheet/stylesheet.css

.product-grid .image {
	display: block;
	margin-bottom: 0px;
	text-align: center;
}

Добовляем выравнивание по центру.

 

Разжевал подробней некуда, должно получиться  :eek:

post-683955-0-18017100-1414274838_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

есть и другие мнения :)

http://uniofweb.ru/analytics/1484/ - вторая часть статьи

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

есть и другие мнения :)

http://uniofweb.ru/analytics/1484/ - вторая часть статьи

 

Ну мне все эти исследование больше "напоминают" социологические "опросы" и т.п.

Кто такие эти [censored] сайты, что проводили "исследования"?

Дело в том, что тут важен даже полутон кнопки! 60% людей не видят полутона (да каждый второй не различает салатовый и зеленый цвет, для них он один и тот же, а очень светло салатовый может быть для них вообще желтым и т.п.) , и если цвет кнопки "зеленый" будет не в том полутоне, они его могут видеть совсем в другом цвете! Поэтому здесь субъективные исследования и совершенно не упоминается про дальтоников и тех кто не видит полутона, отсюда вывод, я не верю им (извините но опыт 10 летний опыт работы шеф-дизайнеров чему-то да научил, и цвета очень важны в пром  дизайне и веб дизайне. И есть свои табу и приоритеты а также менталитет региона (к примеру америкосы привыкли к оранжево- синей  кнопке paypal, для них это ассоциация с оплатой, вот откуда могут быть "ноги" таких "исследований"), "светофоры тоже разные :)) ).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

 Совершенно с вами согласен, оранжевая кнопка не вписывается в дизайн, наверняка лучше бы сделать или зеленую кнопку в цвет меню с салатовой подсветкой, или темносерую (ближе к черному) с зеленой подсветкой при наведении 8-).

 

Я бы сделал бы темно серую с зеленой подсветкой, и изменил бы розовую акцию на зеленую

post-683955-0-30994300-1414318288_thumb.png

 

И получится так

post-683955-0-54368600-1414317333_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 Совершенно с вами согласен, оранжевая кнопка не вписывается в дизайн, наверняка лучше бы сделать или зеленую кнопку в цвет меню с салатовой подсветкой, или темносерую (ближе к черному) с зеленой подсветкой при наведении 8-).

 

Я бы сделал бы темно серую с зеленой подсветкой, и изменил бы розовую акцию на зеленую

attachicon.gifspecial.png

 

И получится так

attachicon.gifImag88888e 1.png

wipper Хорошая идея! Стикер в цвет дизайна, цену основную зеленым, а акционную красной. Кнопку зеленой, но при наведении красной (оранжевой), мол остановись и купи) Как это все реализовать.

 

 

С галочкой возле наличия не получилось, можете посмотреть на сайте, к примеру здесь - http://shopping-ck.com.ua/sportivnoe-pitanie/kreatin/ получился хаос, плюс в некоторых случаях наличии сдвинулось в сторону. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.