Иконки категорий объявлений в Classipress
Для начала необходимо скопировать вам этот скрипт в какой-либо редактор.
|
1 2 3 4 5 6 7 8 9 10 |
#directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } #directory .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } |
Каждая строка на одну категорию. Если у вас категорий меньше, то несколько строк уберите, или удалите при большем количестве категорий.
Затем необходимо установить плагин Reveal IDs. Теперь напротив каждой категории в админке появился свой ID.
Теперь вставляем id каждой категории в каждую строку нашего кода вместо знаков ХХ.
Следующее, это необходимо подготовить иконки. Чтобы легче было, приготовьте их в папке images и пропишите их названия в нашем коде вместо названия category_icon.png. Заметьте, что не только должно быть название прописано, но и какого формата иконки. После того, как вы вписали все в код, загрузите ваши иконки в папку темы images. Теперь вставляем готовый уже код в файл style.min.css в самый низ. Готово!
Это было меню категорий на главной странице. Чтобы добавить иконки и в меню категорий, необходимо прописать то же самое (id категории и заменить название иконки с category_icon.png на название вашей иконки) в следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } div#adv_categories .catcol ul li.maincat.cat-item-XX { padding: 8px 0 8px 42px; background: url(images/category_icon.png) no-repeat left center; background-size:30px auto; } |
Теперь вставляем этот код в тот же файл style.min.css ниже предыдущего кода.
Готово!!!
Автор публикации
Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959
