Иконка категории для uCoz

02015-06-24418215Денис Абдуллин

Данное решение поможет приукрасить вид категорий, маленькой иконкой перед названием. Скрипт прост в установке и не занимает много места.

Установка

Для начало нужно зайти в ПУ > Управление дизайном (CSS) и в самый низ установить код:

Код

td#cid1
  { background: url("https://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid2
{ background: url("https://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid3
{ background: url("https://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid4
{ background: url("https://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }

Таким образом, можно прописать разные картинки к разным категориям. А если, вам захочется использовать одну иконку, просто пропишите код и id категорий, через запятую в одну строчку.

Пример

Код

td#cid1,#cid2,#cid3,#cid4
{ background: url("https://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }

Разбор кода

td#cid1 - id категории перед которой, отображается иконка
background - ссылка на иконку
padding - отступы

Не забудьте загрузить картинку в ваш Файловый менеджер -

.
Готово! На этом установка завершена.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (15)

Порядок вывода комментариев:

Николай Бойцов 2016-03-07 в 17:01 / МатериалСпам

Какой то баг, на главной не работает, в остальных разделах отлично работает..

Корзун Александр 2015-06-30 в 23:59 / Материал

У меня работает если делаю вот так

{ background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid1,#cid2,#cid3,#cid4,#cid5,#cid6,#cid7,#cid8,#cid9,#cid10,#cid11,#cid12,#cid 13,#cid14,#cid15
{ background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }

Может кто объяснить?

Владислав 2015-06-29 в 15:14 / Материал

Как нибудь постарайтесь это уложить следующий раз в лс.

Крупин Юрий 2015-06-29 в 08:19 / МатериалСпам

Сделал вот так:
<style>
#catrightmenu {padding:0px;display:block;}
.catsTable tbody tr td {position:relative;}
.catsTable tbody tr:last-child {padding-bottom:10px;}
td#cid1,#cid2,#cid3,#cid4,#cid5,#cid6,#cid7,#cid8,#cid9,#cid10,#cid11,#cid12,#cid 13,#cid14 {padding:0px 0px 5px 0px;display:block;}
a.catName {padding:5px 10px 5px 40px;margin:0px 10px 0px 10px;display:block;border-radius:10px;}
.catNumData {position:absolute;top:5px;right:20px;}
td#cid1 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid1 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid2 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid2 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid3 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid3 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid4 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid4 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid5 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid5 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid6 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid6 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid7 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid7 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid8 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid8 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid9 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid9 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid10 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid10 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid11 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid11 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid12 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid12 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid13 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid13 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid14 a.catName {background:#fff url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
td#cid14 a.catName:hover {background:#eee url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 10px 50%;}
</style>

Результат: http://i.imgur.com/nTXLZPI.png при наведение меняется backgound

David 2015-06-26 в 23:17 / МатериалСпам

Ведь

Домнин Роман 2015-06-24 в 21:27 / Материал

С помощью этого кода, можно скрыть квадратные скобки.
<script type="text/javascript">
$('.catNumData').each(function () {
$(this).html($(this).html().replace(/\[|\]/g, ''));
});
</script>

David 2015-06-24 в 17:31 / МатериалСпам

Было бы лучше если без скобки

Правша 2015-06-24 в 20:30 / МатериалСпам

Будьте добры, объясните, у Вас прописана микроразметка <meta property="og:image" content="$IMG_URL1$" /> , чтобы при расшарке новости соцсети верно подхватывали картинку новости?