» »

Иконки на категорий раздела для 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.04.2017 Просмотров: 529 Комментарий: (16)

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

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

Комментарий: 16
Kolinkor
Kolinkor 14.04.2017 23:511
0
Так убирают больше не их за этого, у некоторых просто один раздел, и что он будет занимать только место, а что с кнопками сделать, это не ново, но все же лучше чем без них.
-SAM-
-SAM- 15.04.2017 00:322
0
В стилях ерундистика написана, если используется одна иконка для всех пунктов - достаточно прописать один раз, то есть без чередования :nth-child(odd) \ :nth-child(even) (тут уже вопрос к тому, кто материал предоставил - где он такое нарыл).
Kosten
Kosten 15.04.2017 00:333
0
-SAM-, подскажите как правильно вывести стили, на одну кнопку?
-SAM-
-SAM- 15.04.2017 00:444
+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
Kosten 15.04.2017 00:556
0
Но если вы считаете, что подойдет под "подойдёт для чередования заднего фона" то оставить в комментариях, ответ и не чего не менять?
-SAM-
-SAM- 15.04.2017 01:058
0
Можете убирать комментарии уже - это получается, что чередование заднего фона самой иконки, а не строки (просто я написал как такие селекторы обычно используют).
Kosten
Kosten 15.04.2017 00:445
0
Добавлены стили, что для каждого раздела категорий можно выставить свою оригинальную или тематическую кнопку.
Maryges
Maryges 15.04.2017 00:587
0
А что вообще идет он стилей, нет не от этих, просто что не ставлю, то все появляется, но сопровождает прозрачный квадрат, и главное не могу найти, хотя здесь нужно просто запретить что то. Может у кого также получается.
ucozmental
ucozmental 15.04.2017 01:099
0
Один сайт встречал, так там лента до самого подвала. 11a
-SAM-
-SAM- 15.04.2017 01:4011
+1
В таких случаях, если нужно каждому пункту прописать иконку - все общие стили прописываются один раз, а потом лишь отдельно взятые (делается задний фон спрайтом, а потом пунктам задается смещение, позиционирование).
Kosten
Kosten 15.04.2017 01:3010
0
Спасибо пользователю -SAM-, что довел до ума стиль!
-SAM-
-SAM- 15.04.2017 02:4712
+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
Dagada 15.04.2017 07:4813
0
эти стили подогнали отсюда http://www.ucoz.ru/qa/
-SAM-
-SAM- 15.04.2017 21:5115
0
В общем, как и сказал с самого начала, что это для новостей... вот обсуждали они http://www.ucoz.ru/qa/index.php/129664/
Kosten
Kosten 15.04.2017 22:4916
0
На этом сайте, можно не плохой материал по сути найти и делать небольшие мануалы.
1 2 »
avatar