ZorNet.Ru — сайт для вебмастера » HTML и CSS » Иконки на категорий раздела для uCoz

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

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

Нужна только одна, так как тематическая площадка, то не думаю, что под каждую категорию нужно особую устанавливать, но и стиль сам сделан под одну. Как нашли, то выпрямляем ее под ссылку и где написано "здесь ссылка" ставим туда и потом копируем полный стиль и идем в CSS и можно в самый подвал, в низ его прописать и все сохранить. И после этого вы увидите как визуально категорий изменились.

Это идет по умолчанию:

Оформление на категорий uCoz

После установки:

Установка на категорий сайта кнопки

Переходим к установки:

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

Код

.catsTable tr:before {content:"";width:30px;height:10px;margin:2px 2px;background: url("Здесь ссылка на иконку") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}

После этого возможно уже не будут убирать этот информационный блог, так как основном его сразу сносят, здесь он уже приобретает свою стилистику.

Также есть стили, которые предполагают выводить иконки под каждый раздел.

Код

.catsTable tr:nth-child(1):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(2):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(3):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(4):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(5):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}

Спасибо пользователю Dagada, за предоставленный материал.

14 Апреля 2017 Просмотров: 2002 Комментариев: (16)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 16
Порядок вывода комментариев: Kolinkor 14 Апреля 2017 23:51¹ 0 Так убирают больше не их за этого, у некоторых просто один раздел, и что он будет занимать только место, а что с кнопками сделать, это не ново, но все же лучше чем без них. -SAM- 15 Апреля 2017 00:32² 0 В стилях ерундистика написана, если используется одна иконка для всех пунктов - достаточно прописать один раз, то есть без чередования :nth-child(odd) \ :nth-child(even) (тут уже вопрос к тому, кто материал предоставил - где он такое нарыл). Kosten 15 Апреля 2017 00:33³ 0 -SAM-, подскажите как правильно вывести стили, на одну кнопку? -SAM- 15 Апреля 2017 00:44⁴ +3 То, что тут выложили - больше подойдёт для чередования заднего фона (чтобы одна строка была белой, к примеру, а за ней - серой, то есть две строки нужно стилей разных сделать). А так, если работает - значит пусть будет. Вот чего я имею в виду: Код .catsTable tr:before {content:"";width:30px;height:10px;margin:2px 2px;background: url("Здесь ссылка на иконку") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;} .catsTable tr:nth-child(odd):before {background-color:white;} .catsTable tr:nth-child(even):before {background-color:gray;} Не проверял, если что. Лично я не так в своё время делал, я делал блок категории наподобие меню, чтобы у каждого пункта была своя иконка (стили вешал исходя из анкора). Kosten 15 Апреля 2017 00:55⁶ 0 Но если вы считаете, что подойдет под "подойдёт для чередования заднего фона" то оставить в комментариях, ответ и не чего не менять? -SAM- 15 Апреля 2017 01:05⁸ 0 Можете убирать комментарии уже - это получается, что чередование заднего фона самой иконки, а не строки (просто я написал как такие селекторы обычно используют). Kosten 15 Апреля 2017 00:44⁵ 0 Добавлены стили, что для каждого раздела категорий можно выставить свою оригинальную или тематическую кнопку. Maryges 15 Апреля 2017 00:58⁷ 0 А что вообще идет он стилей, нет не от этих, просто что не ставлю, то все появляется, но сопровождает прозрачный квадрат, и главное не могу найти, хотя здесь нужно просто запретить что то. Может у кого также получается. ucozmental 15 Апреля 2017 01:09⁹ 0 Один сайт встречал, так там лента до самого подвала. -SAM- 15 Апреля 2017 01:40¹¹ +1 В таких случаях, если нужно каждому пункту прописать иконку - все общие стили прописываются один раз, а потом лишь отдельно взятые (делается задний фон спрайтом, а потом пунктам задается смещение, позиционирование). Если без спрайта, то можно так еще: Код .catsTable tr:before {content:"";width:10px;height:10px;margin:2px 2px;background-repeat:no-repeat;background-attachment:scroll;background-position:0 50%;background-color:transparent;float:left;position: relative;top: 8px;} .catsTable tr:nth-child(1):before {background-image: url("ссылка на фото иконки 1");} .catsTable tr:nth-child(2):before {background-image: url("ссылка на фото иконки 2");} [и так далее...] Или так: Код .catsTable tr:before {content:"";width:10px;height:10px;margin:2px 2px;background: url("") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;} .catsTable tr:nth-child(1):before {background-image: url("ссылка на фото иконки 1") !important;} .catsTable tr:nth-child(2):before {background-image: url("ссылка на фото иконки 2") !important;} [и так далее...] Kosten 15 Апреля 2017 01:30¹⁰ 0 Спасибо пользователю -SAM-, что довел до ума стиль! -SAM- 15 Апреля 2017 02:47¹² +2 Вообще-то там вопросы остались. Стилизация по позиции в блоке - не универсальна (сами подумайте, если стиль применяется к первому элементу блока раздела, то это же происходит и с первым элементом категории раздела + при сортировке разделов\категорий через ПУ - получаются потом несоответствия в выводимых иконках). Вот и выходит, что описанное выше - больше всего подходит для стилизации категорий модуля новости. В том же каталоге файлов, где есть разделы и категории, в строки таблицы категорий дописывается идентификатор, к примеру, вот код: Код <table border="0" cellspacing="1" cellpadding="0" width="100%" class="catsTable"><tr><td style="width:100%" class="catsTd" valign="top" id="cid1"><a href="и так далее Видно, что идёт id="cid1" - исходя из этого и нужно стили цеплять. Можно еще иначе делать, а именно так: Код td.catsTd a[href$="1"] {тут стили на вывод иконки перед ссылкой} То есть привязка по анкору (естественно, если он не менялся используя SEO-модуль, в нём прослеживается ID категории... так в своё время цеплял стили для категории модуля новости, ибо нет там id="cid1", как говорил выше). Dagada 15 Апреля 2017 07:48¹³ 0 эти стили подогнали отсюда http://www.ucoz.ru/qa/ -SAM- 15 Апреля 2017 21:51¹⁵ 0 В общем, как и сказал с самого начала, что это для новостей... вот обсуждали они http://www.ucoz.ru/qa/index.php/129664/ Kosten 15 Апреля 2017 22:49¹⁶ 0 На этом сайте, можно не плохой материал по сути найти и делать небольшие мануалы.
1 2 »