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

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

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

С категориями.

Вид материала

1. В таблицу стилей css:

Код
.category-title {border-top: 5px solid rgba(0, 125, 173, 0.75);bottom: 100%;margin:10px 0px 20px 0px;left: 0;color: #fff; position: absolute;text-align: center;width: 100%;z-index: 4;}  
  .category-title span {background: rgba(0, 125, 173, 0.85);position: absolute;left: 240px;bottom: -14px;padding: 8px;-webkit-border-radius: 3px;border-radius: 3px;color: #fff;font-size: .625rem;font-weight: bold;text-transform: uppercase;}  

  .nlist{display:block;padding:10px;border-bottom:3px solid #fff}  
  .nlist:nth-child(odd){display:block;background:#e4eaed;padding:10px;border-bottom:3px solid #fff}  
  .nlist:hover{background:rgba(0,0,0,.90); color:#fff; border-radius:3px;}  
  .nlist a:hover{color:#fff;}  
  .nlist .images{background:#fff;float:left;height:90px;margin:0 10px 0 0;overflow:hidden;position:relative;width:260px}  
  .nlist .images span{height:500%;position:absolute;top:-200%;width:100%}  
  .nlist .images img{top:0;right:0;bottom:0;left:0;display:block;height:auto;margin:auto;position:absolute;width:100%}  
  .nlist .titleS{font:14px;font-family: "Roboto", Helvetica, Tahoma, Arial;width:100%; line-height: 16px;}  
  .titleS a:hover{color:#fff;font:14px Arial;width:100%; line-height: 16px;}  
  .nlist p{line-height:20px;padding:5px 0;margin:0;color:#555}  
  .nlist .l,.nlist .r{font:14px;color:#555}  
  .news-movie-time {  
  background: 0pt 0pt rgba(0,0,0,0.70);  
  display: block;  
  color: #fff;  
  float: left;  
  font: 10px "Arial";  
  padding: 5px 10px;  
  position: absolute;  
  text-align: left;  
  text-shadow: 20pt 20pt 20px;  
  }


2. В вид материалов:

Код
<a href="$ENTRY_URL$" class="nlist">  
  <div class="images"><span><img src="$IMG_URL1$" alt="$TITLE$"></span></div>  
  <div class="news-movie-time">$CATEGORY_NAME$</div>  
  <span class="titleS">$TITLE$</span><br>  
  <p>$MESSAGE$</p></a>


Теперь у вас совершенно новый дизайн сайта.
27 Января 2016 Просмотров: 2151 Комментариев: (18)

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

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

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

Комментарии: 18
workman
workman 27 Января 2016 19:451
+1
Ребята. Вы когда-нибудь перестанете выставлять здесь чужое?
Ну что в этом виде то хорошего? Стилей много а толку от них ни на грош. Да и тем более не уменьшин размер css
КиношаHD
КиношаHD 27 Января 2016 19:472
-1
Мое твое, если не знаешь не говори чушь! Мой вид материалов со старого сайта новостей спорта.
Kosten
Kosten 27 Января 2016 19:533
0
Вообще в первые такой вид вижу, просто наверно новостей не читаю, норма.
Tergran
Tergran 28 Января 2016 02:0212
0
Но почему вы решили, что новости, это просто так написано, его и на статьи и в блог можно установить.
Tergran
Tergran 28 Января 2016 02:0111
0
Но если стоял, значит работает, но видно что проверен был, просто все изображение знакомы, одни и те же.
Kosten
Kosten 28 Января 2016 03:2816
0
Ну а зачем, что то менять, когда будет понятно все сразу.
Сопрано
Сопрано 27 Января 2016 21:234
0
Но здесь вообще не понять, Костен установи и сделай нормальный скрин.
Kosten
Kosten 27 Января 2016 21:305
0
Поменял и сразу проверил, все как видите нормально, но категорию не выводить, так как не ставил или оператора нет.
Tergran
Tergran 28 Января 2016 02:0313
0
Так так и нужно делать, чем прежде выставлять на сайт, нужно проверить.
Kosten
Kosten 27 Января 2016 21:326
0
Сейчас все поправлю и описание по конкретней напишу.
Сопрано
Сопрано 27 Января 2016 21:427
0
Тут каждый скрипт нужно проверять, возможны ошибки, простая категория была написанной, что это.
Теперь все нормально.
Maryges
Maryges 28 Января 2016 01:138
0
Можно сказать оно не очень отличается от этого вид материала, что на сайте. Все также, только изображение меньше и шире сделали и прописали стиль на темный оттенок.
AnTron
AnTron 28 Января 2016 01:319
0
Мне очень понравился, для файлов не подойдет, а вот для новостей будет как раз.
Сафрон
Сафрон 28 Января 2016 01:3810
0
Так большинство новостей, особенно не Русских идут под таким дизайном, не знаю, для того чтоб больше материала было на главной.
Tergran
Tergran 28 Января 2016 02:0414
0
О, как резко, что для файлов он не подойдет, дай угадаю, так не показано что сколько кто скачал, а это не показатель, если что.
ucozmental
ucozmental 28 Января 2016 02:1015
0
Мне такие эффекты всегда нравятся и еще и стили на его идут можно сказать маленькие.
maniacvn
maniacvn 31 Января 2017 10:5917
0
А тут гдето был такой вид ток там при наведении фото поворачивалась не помните де а то найти не могу
1 2 »
avatar