ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вывод категорий на вид материалов для uCoz

Вывод категорий на вид материалов для uCoz

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

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

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

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

Код
<div class="category-cnop">$CATEGORY_NAME$</div>


Теперь идеи в CSS и пропишем стили.

Код
.category-cnop {  
  position: absolute;  
  margin:25px 0 0 2px;  
  padding: 2px 10px 4px;  
  font-weight:normal;  
  font-style:normal;  
  text-decoration:none;  
  font-size:14px;  
  color:#ffffff;  
  border-radius: 0 2px 2px 0;  
  -moz-border-radius: 0 2px 2px 0;  
  -webkit-border-radius: 0 2px 2px 0;  
  background-color: rgba(26, 207, 216, 0.5);  
}

Здесь вы также можете поставить стили в самой код, только нужно задействовать style стиль /style, хотя они компактные и лучше в CSS разместить. Просто бывает такое, что места не хватает, и тогда делаем в самом скрипте материала.
17 Мая 2017 Просмотров: 2491 Комментариев: (15)

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

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

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

Комментарии: 15
Scheme
Scheme 17 Мая 2017 21:331
0
Это что на вид материала по вверх идет, отлично, нужно попробовать, но и не категорию можно выводить, так если порассуждать, то такой стиль, можно применить и в других функциях, не качаясь вид материала.
frecsarg
frecsarg 17 Мая 2017 21:522
0
На темный дизайн хорошо подойдет, на светлом не очень, в свое время ставил, но смотря какая еще прозрачность.
Kosten
Kosten 18 Мая 2017 22:477
0
На светлом тоже есть - здесь как выведешь цвет.
-SAM-
-SAM- 19 Мая 2017 00:318
0
Кстати, это же независимо от дизайна, так как фоном в данном случае выступает не шаблон сайта, а прикрепленное изображение (данная пропись категории, в которой материал находиться, выводиться поверх постера материала). И по факту - взято из одного вида материалов, который изначально был разработан под светлый дизайн. Также можно переписать код там, чтобы ссылка на эту самую категорию была, а не просто текст - тогда и стилей добавить, чтобы при наводке была смена фона, например, или смена прозрачности (в оригинале там так и сделали были).
Gerat
Gerat 17 Мая 2017 22:133
0
Так, для красоты поставить, просто можно вид материала и комментариев все выставить.
csafrones
csafrones 18 Мая 2017 19:594
0
На любую тематику можно поставить, здесь, чтоб вид материала хорошо подходил. Как в колонку, так и как здесь на сайте.
Gerat
Gerat 18 Мая 2017 21:285
0
Модно и не ставить на вид материала, а где то в другой функций применить.
Kosten
Kosten 18 Мая 2017 22:456
0
Как то под категорий лучше поставить и адаптированные должны или просто не мешать - так можно сделать.
Maryges
Maryges 21 Мая 2017 19:3610
0
Не думаю, что на адаптивность они будут влиять, это же просто надпись в красивой обвертке.
kolin2010
kolin2010 19 Мая 2017 19:219
0
Пригодится, хоть и устаревшая тема.
1 2 »
avatar