ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оформление вид материала на сайте

Оформление вид материала на сайте

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

Здесь применяться элементы как :bеfore и :аfter которое вам позволяют добавлять содержимое (это стили) до и после элемента, к которому были применены.
Но также нужно знать и возможно пригодиться, что :before и :after отлично подойдет для такой функций как выделения цитат.

Так идет при создание сайта:

Вид материалов для сайта uCoz

Здесь уже измененный и можно уже увидеть разницу:

Изменяем по дизайн Вид материалов сайта

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

Будем все делать через:

Код
<style> здесь стиль который ниже </style>


И сам стиль:

Код
.eMessage:before {
  background: url("http://zornet.ru/Aben/4.png") no-repeat scroll left top transparent; /*сам уголочек*/
  content: " "; /*оставляем пустым*/
  display: block;
  height: 65px;
  width: 65px;
  float: left;  
}
.eMessage:after {
  background: url("http://zornet.ru/Aben/3.png") no-repeat scroll right bottom transparent; /*сам уголочек*/
  content: " "; /*оставляем пустым*/
  display: block;
  height: 65px; /*высота уголка*/
  width: 65px; /*ширина уголка*/
  float: right;
  margin: 5px 0 10px 10px; /*я указала отступы для уголка после материала для красоты*/
};


Если у вас на главной стоит вид материала и изображением, а к примеру открыт другой модуль, то здесь вы можете его немного переделать не вмешиваясь в код.

PS - но в этом случай вы можете прописать в CSS вашего сайта, но лучше делать через style, чтоб распространялся на один модуль портала. И для понимание редактирование, это для тех кто решит немного подправить как видите его, то все описано подробно в стилях которые представлены в этом материале.
10 Декабря 2016 Просмотров: 1726 Комментариев: (7)

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

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

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

Комментарии: 7
Kosten
Kosten 10 Декабря 2016 20:551
0
Так как на сайте есть вид материала новостного блога, поставил эти стили вид материала, что можете перейти и посмотреть.

Если у кого есть красивые изображение, это уголки, то пожалуйста поделитесь, скиньте в комментариях.
Kolinkor
Kolinkor 10 Декабря 2016 21:072
0
А что сейчас новости гламурные стали, но явно под тематику здесь не подходит. И еще, как на счет мобильного аппарата, как отображается.

Kosten
Kosten 10 Декабря 2016 21:133
0
Здесь же можно все проверить и не переходить на сервис, просто сдвинуть браузер, и там все покажет, нормально или что то будет вылазит, посмотрел все нормально. На счет самого изображение, раньше много мне разных встречалось, сейчас пока некогда искать, то точно менять буду. Если кто менять будет, то делайте под размеры, которые указаны.

Сафрон
Сафрон 10 Декабря 2016 22:145
0
Вот на темном дизайне намного красивее смотрелось, хотя и на светлом видно изменение кардинальное.
FeStemBer
FeStemBer 10 Декабря 2016 22:124
0
Красиво смотрится, здесь согласен, что картинки нужно менять под свою тематику, и не чего смотрятся в новостях эти изображение.
Kosten
Kosten 11 Декабря 2016 20:096
0
Поставил немного другое изображение, так как цветочный угол не очень подходит на тематику, так что кому нужно, то закину сюда.

Так сейчас выглядит.



Но и сами картинки:

Kolinkor
Kolinkor 11 Декабря 2016 22:167
0
Нужно немного прозрачнее сделать и как раз под дизайн подойдет.
avatar