Замена текста на иконки

[Sexyque]

Всем привет.

Изучаю сижу опенкарт, чтобы выбрать между ним и престой.

Вот сделал иконки, вместо текста купить, добавить в сравнение и вишлист. Но есть подозрение, что они несколько не интуитивно понятны и незаметны (возможно лучше оставить кнопку «купить» большой и с текстом). Буду рад комментариям.

[fllik]

прикольно получилось.

а можно выложить иконки 2отображения" списком

[mva]

Всем привет.

Изучаю сижу опенкарт, чтобы выбрать между ним и престой.

Вот сделал иконки, вместо текста купить, добавить в сравнение и вишлист. Но есть подозрение, что они несколько не интуитивно понятны и незаметны (возможно лучше оставить кнопку «купить» большой и с текстом). Буду рад комментариям.

да, получилось мило, но не по-братски, не по-опенсорсному :)

Как делал-то? просто в перевод запихнул <img>?

Ну и, наверное, было бы хорошо выложить исходники картинок :)

[m899]

тут много исходников: http://www.iconfinder.com/search/1/?q=iconset:iconsweets2

тоже интересно как это грамотно сделать

[Sexyque]

Ну на счет грамотной реализации не уверен :) Я не очень в программировании.

Объясню, как сделал.

У меня сайт на 1 языке всё равно и видимо это не самая лучшая реализация, потому что при мультиязычности получатся косяки.

В catalog.tpl

<div class="cart"><a title="Купить" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button_grid"><span><?php echo " "; ?></span></a></div>
      <div class="wishlist"><a title="Добавить в закладки" onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo " "; ?></a></div>
	  
      <div class="compare"><a title="Добавить в сравнение" onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo " "; ?></a></div>

Т.е. добавил тайтл и удалил строку.

В ксс:

a.button_grid span {
    background: url("../image/buy.png") no-repeat scroll 0 0 transparent;
    font-size: 13px;
    line-height: 12px;
    padding-left: 15px;
}
.product-list .wishlist a {
		text-decoration: none;
		/*display: block;*/
		font-size:15px;
		padding-left: 15px;
		background: url('../image/wish.png') left center no-repeat;
	}
.product-list .compare a {
		text-decoration: none;
		font-size:15px;
		padding-left: 15px;
		background: url('../image/compare.png') left center no-repeat;
	}

Иконки брал отсюда, как уже заметили: http://www.iconfinder.com/search/?q=iconset%3ASiena

Когда делаешь списком, то фигня в том, что иконки всё равно остаются, хотя при таком логичнее было бы, чтобы был уже текст (там больше места). Я не придумал, как сделать так, чтобы он текст добавлял от того, что отображение list. Просто когда такое отображение, в ксс сделал иконку покупки побольше размером.