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

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

24.06.2015194615

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

Установка


Для начало нужно зайти в ПУ > Управление дизайном (CSS) и в самый низ установить код:
Код
td#cid1  
  { background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid2
{ background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid3  
{ background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }
td#cid4  
{ background: url("http://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("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }


Разбор кода


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

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



Сохраните в социальную сеть
Комментарии (15)
О вот то что я искал многие годы! Ты просто молодец ЧУВАК!
0
Домнин Роман 24.06.2015 в 12:38
Не плохое решение
0
testus 24.06.2015 в 16:11Спам
Замечательно, только во втором коде решётку пропустил td#cid1,#cid2,#cid3,#cid4
0
Денис Абдуллин 24.06.2015 в 16:20
Я думаю здесь не ошибка, а просто нет объяснения, имелось ввиду cid1 или cid2 или cid3 и т.д., но на всякий случай исправил.
0
Правша 24.06.2015 в 20:30Спам
Будьте добры, объясните, у Вас прописана микроразметка <meta property="og:image" content="$IMG_URL1$" /> , чтобы при расшарке новости соцсети верно подхватывали картинку новости?
0
David 24.06.2015 в 17:31Спам
Было бы лучше если без скобки
0
Домнин Роман 24.06.2015 в 21:27
С помощью этого кода, можно скрыть квадратные скобки.
<script type="text/javascript">
$('.catNumData').each(function () {
$(this).html($(this).html().replace(/\[|\]/g, ''));
});
</script>
1
David 25.06.2015 в 13:59Спам
Без скрипта вед можно, с помощи css.
0
Владислав 25.06.2015 в 14:12
Вед, это ведь, или вид?
0
David 26.06.2015 в 23:17Спам
Ведь
0
Крупин Юрий 29.06.2015 в 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
0
Владислав 29.06.2015 в 15:14
Как нибудь постарайтесь это уложить следующий раз в лс.
0
У меня работает если делаю вот так

{ 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; }

Может кто объяснить?
0
не работает
0
Какой то баг, на главной не работает, в остальных разделах отлично работает..
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт