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

Стильный вид материала файлов Grez для uCoz

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

Тени остались, они также небольшие и на светлом фоне отлично отображаются. Тематика может быть на нем различная, глядя на сам каркас, очень большая. Были в низу координаты, которые заключены в синем цвете было. Просто убрал, так как большие обводы и так корректней будет отображаться. Хочется сказать, что у каждого свой CSS и что то может встать не ровно, так быстро можно все исправить. Код заключу в архив, который вы можете скачать. Убрал редактирование и поставил прозрачный и он стал правее, а чтоб еще глаза не кидался.
27 Июня 2015 Загрузок: 28 Просмотров: 2056 Комментариев: (5)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 5
Kosten
Kosten 27 Июня 2015 19:591
0
Кто поставил этот фон, отпишитесь и ссылку дайте посмотреть.
Canon
Canon 06 Сентября 2015 03:162
0
Видел исходник как этот вид смотрится с исходника и переделано здесь красиво, что не поспоришь. Все сделано по уму и только кнопка красная не по теме, хотя нормальный вид.
Kolinkor
Kolinkor 14 Ноября 2016 16:333
0
Поставил этот вид материала, так проверить, что хотел сказать, что добавить шрифтовые иконки, и намного красивее смотрится.
Kosten
Kosten 14 Ноября 2016 16:384
0
Здесь согласен, но просто когда его ровнял, вид материала, то в то время как то не применял эти кнопки, а так полностью согласен, что подойдут они на этот материал.
Kosten
Kosten 14 Ноября 2016 17:145
0
Вообщем добавил стильные кнопки к информации, также изменил кнопку, думаю она больше подходит к этому вид материалу, что полностью код ниже будет. А по шрифтовым иконкам, они поставлены, но нужно стиль еще установить, это можно сделать.



Вверх сайта в самый его потолок прописать.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


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

Код
<div class="post">  
  <div class="post-header">  
  <img class="post-img" src="$IMG_URL1$" alt="$TITLE$">  
  <div class="post-author">  

  </div>  
  <div class="post-title">  
  <a href="$ENTRY_URL$">$TITLE$</a>
<?if($MODER_PANEL$)?><div style="float:right;display: block; margin: -5px auto;z-index: 100; opacity: 0.5; padding-right: 30px;">$MODER_PANEL$</div><?endif?>  
  </div>  
  </div>  
  <div class="post-content">  
  $MESSAGE$  
  </div>  
  <div class="post-counters">  
  Дата добавления: <i class="fa fa-calendar-o" aria-hidden="true"></i><span>$DATE$</span>  
  Автор: <i class="fa fa-user" aria-hidden="true"></i><span>$USERNAME$</span>  
  Комментариев: <i class="fa fa-comments" aria-hidden="true"></i><span>$COMMENTS_NUM$</span>  
  Просмотров: <i class="fa fa-eye" aria-hidden="true"></i><span>$READS$</span>  
  <a href="$ENTRY_URL$" class="rep-do-add button-user-reputation">Читать</a>  
  </div>  
  </div>

<style>  
.button-user-reputation {
  display: inline-block;
  width: 7em;
  font-size: 90%;
  color: rgb(255, 253, 253);
  text-shadow: #3886B1 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #99BBD6 #6F8698 #386992 #80B0D8;
  border-radius: 6px;
  outline: none;
  background: #6A93B5 linear-gradient(#D7EEFF, #091B2B 50%, #B7DAF7);
  box-shadow: inset rgba(255, 255, 255, 0.5) 1px 1px;
  text-shadow: 0 1px 0 #171515;
}  
</style>


CSS

Код
.post {  
border-radius: 10px;  
  margin: 20px 0px;  
  background: #F5F5F5;  
  border: 1px solid #9A9992;  
  box-shadow: 0 0 10px rgba(0,0,0,0.5);  
}  
.post-content {  
  padding: 10px;  
}  
.post-img{
  border-radius: 10px 10px 0px 0px;  
  
  width: 100%;  
  max-height: 300px;  
  overflow: hidden;  
}  
.post-author {  
  position: absolute;  
  top: 100px;  
  left: 319px;  
}  
.post-author img {  
  border-radius:100%;  
  border: 2px solid #FFFFFF;  
}  
.post-author a, .post-author img {  
  display: block;  
}  
.post-author a{  
  text-align: center;  
  color: white;  
  text-shadow: 1px 1px 2px black, 0 0 1em black;  
  font-weight: bold;  
  font-size: 16px;  
}  
.post-author a:hover{  
  color: white;  
  text-decoration: none;  
}  
.post-title {  
  padding: 10px;  
  background: #00446C;  
}  
.post-title a {  
  color: white;  
  font-weight: bold;  
}  
.post-title img{  
  float: right;  
}  
.post-counters {  
  padding: 10px;  
  border-top: 1px solid #9A9A93;  
}  
.post-counters span {  
  font-weight: bold;  
  /* border-right: 1px solid #9A9A93; */  
  margin-right: 10px;  
  /* background: #2693D3; */  
  border-radius: 5px;  
  /* color: white; */  
  padding: 5px;  
}  
.post-counters a {
  border-radius: 8px;
  float: right;
  /* background: #2693D3; */
  color: white;
  /* padding: 1px 10px; */
  margin: -8px;
  }  
.post-counters a:hover{  
  color: white;  
  text-decoration: none;  
}
Войдите:
avatar