» »

Светлый вид материала блога и статьи для uCoz


Светлый вид материала блога и статьи для uCoz

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

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

Установка:

Панель управление, и там вы выбираете модуль и скрипт ставим вид материала.

Код
<div class="post clearfix">  
<h2 class="entry-title"><a href="$ENTRY_URL$">$TITLE$</a></h2>  
<div class="date">  
<div class="day"><h2><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></h2></div>  
<div class="month-year">Коммент.</div>  
</div>  
<div class="blog-img-wrap">  
<div class="banner-wrap clearfix">  

<a href="$ENTRY_URL$"><img width="790" height="230" src="$IMG_URL1$" class="post-img" alt="$TITLE$" title="$TITLE$"></a>  
</div>  
</div> <div class="infoload1">
<div class="entry-meta"><i class="fa fa-eye"></i> Просмотров: <b>$READS$</b> | <i class="fa fa-user"></i> Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> | <i class="fa fa-calendar"></i> Дата: <span>$DATE$</span> <span style="float: right;"> <?$RSTARS$('16','http://zornet.ru/CSS-ZORNET/Kodak_saita/stars_1.png','1','float')?></span> </div>  
<div class="entry-content clearfix">
<div align="justify">$MESSAGE$</div>  
</div>  
</div></div>


CSS:

Код
.blog-wrap {}  
.post {
  margin-bottom: 20px;
  position: relative;
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/opacity.png);
  background-repeat: repeat;
  border-bottom-width: 1px;
  /* border-bottom-style: solid; */
  border-bottom-color: #bbb;
  width: 790px;
}  
.post .entry-content {
  background-repeat: repeat-x;
  background-position: left top;
  padding: 10px;
  font: 15px 'PT Sans', sans-serif;
}  
h2.entry-title {
  padding: 0;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 19px;
  line-height: 28px;
  padding: 4px 10px 5px 10px;
  background-repeat: repeat-x;
  background-position: left top;
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/blog-title-bg.png);
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-left-style: solid;
  border-top-color: #bbb;
  border-left-color: #bbb;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #bbb;

  border-radius: 5px 5px 0px 0px;  
}  
h2.entry-title a {
  display: block;
  color: #6F6F6F;
  padding-right: 70px;
  padding-bottom: 2px;
  text-shadow: 1px 1px 0 #FFF;
}  
h2.entry-title a:hover {
  color: #204C71;
  text-decoration: none;
  border: none;
}  
.post .entry-meta {
  font-size: 11px;
  line-height: 17px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: #232323;
  background-repeat: repeat-x;
  background-position: left top;
  border: 1px solid #908C8C;
  border-radius: 5px;
}  
.post .date {
  position: absolute;
  top: -4px;
  right: -4px;
  text-align: center;
  padding: 5px;
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/blog-date-bg.png);
  height: 45px;
  width: 68px;
  background-repeat: no-repeat;
  background-position: left top;
  z-index: 11;
}  
.date .day h2 {  
  font-weight: normal;  
  font-size: 23px;  
  line-height: 24px;  
  letter-spacing: 2px;  
  margin-top: 0;  
  margin-bottom: 0;  
  margin-left: 0;  
  padding-top: 0;  
  padding-right: 0;  
  padding-bottom: 0;  
  padding-left: 4px;  
  text-shadow: 1px 1px 0 #fff;  
}  
.date .day {  
  height: 30px;  
}  
.date .month-year {  
  font-size:10px;  
  height: 15px;  
  line-height: 15px;  
  text-align: center;  
  padding-left: 4px;  
}  
.date .year {  
}  

.post .read-more-link {  
  padding-right: 10px;  
  padding-left: 10px;  
  padding-bottom: 10px;  
}  
.blog-img-wrap {  
  margin-top: -1px;  
  border-top: 1px solid #3B3B3B;  
}  
.img-right-style .blog-img-wrap {  
  border-bottom: 1px solid #3B3B3B;  
  margin-bottom: -1px;  
}  
.blog-img-wrap a {  
  display: block;  
  line-height: 0;  
}  

.clearfix:before, .clearfix:after {  
  content: "";  
  display: table;  
}  

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 12px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.infoload1 {
  border: 1px solid #969696;
  background: #E6E6E6;
  -webkit-border-radius: 0px 0px 5px 5px;
  padding: 5px;
}


И осталось стиль поставить вверх сайта, чтоб иконки или по другому кнопки появились, так как не ссылками они идут.

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


Первая установка завершена, но есть и вторая, с которого переделывали.

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

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

Вид материала блога для uCoz


Он будет таким, согласитесь, что есть изменение, так что первый представлен скриптом и стилями, этот вы просто скачиваем и устанавливаем, все для этого находиться в архиве, что скачать с материала.
Источник: http://internetempire.ru/
13.02.2016 Загрузок: 4 Просмотров: 474 Комментарий: (9)

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

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

Комментарий: 9
tsakonter
tsakonter 13.02.2016 21:021
0
Так они почти одинаковы, это хорошо, когда есть из чего выбрать, главное не написали, что в стилях ширина на картинку не делается, как видно по коду. А так нужно его подгонять под сайт, что мне больше нравиться, поставил как нужно.
Сопрано
Сопрано 13.02.2016 21:062
0
tsakonter, это просто изображение фигуративное дает и смотрится, так как они одинаковы. А так совершенно не похоже, да есть небольшие сходства, но не скажу, что одно и тоже.
Sargon
Sargon 13.02.2016 21:123
0
А ещё хорошо когда сам не умеешь и берёшь не своё, я его настраивал а он ту пару иконок добавил на более не способен вовсе. Я рад что ты берёшь мои работы тем самым своё безрукое создание показываешь!
Kosten
Kosten 13.02.2016 22:084
0
Да, ты что бессмертен что ли, и по IP блокируешь. он пролазит. Но реально не рады тебе здесь. но можно понять, кажется взрослый, а нет нужно нагадить.
Maryges
Maryges 13.02.2016 22:146
0
Костен, так совет, не отвечай на всякие гадости, просто или школьник, но если говоришь уже в годах, не нужно этого делать, эта такая натура, она только и ждет, чтоб ответили.
Kosten
Kosten 13.02.2016 22:197
0
Maryges, в курсе, давайте по теме!
Maryges
Maryges 13.02.2016 22:135
0
Больше на блог подойдет, так как вообще не вижу его на каталоге файлов.
Сафрон
Сафрон 13.02.2016 22:248
0
Kosten, я по теме! Кто там пишет, что он его настраивал, а скажите, где вы взяли, или сами написали код, а потом на фотошоп нарисовали детали, просто такие люди поражают, настроят, все теперь мое.

И большая просьба, поставите этому человеку Но Аварат, ак вижу он в бане, так что не существует.

А так вид обычный, только комментарий его отличают.
Kosten
Kosten 14.02.2016 03:389
0
Сафрон, давай без личности, особенно как кто смотрится, это вообще после этого можно начальные классы открывать.
avatar