» »

Вид материала Verga 2 колонки для uCoz

Вид материала Verga 2 колонки для uCoz

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

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

Так визуально, после установки:

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

Устанавливаем на сайт:

Для начало подключим шрифтовые иконки, копируем и ставим вверх сайта.

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


Выбираем модуль и вид материала полностью меняем.

Код
<a href="$ENTRY_URL$">
  <div class="service-details">
  <img src="$IMG_URL1$" alt="$TITLE$">
  <div class="service-hover-text">
  <h3>$TITLE$</h3>
  <span id="cats$ID$">Загрузка...</span>
   
  <h2><i class="fa fa-star-o"></i> $RATING$ <i class="fa fa-clock-o"></i> $DATE$</h2>
  </div>
  <div class="service-white service-text">
  <p>
  <i class="fa fa-eye fa-fw"></i> $READS$  
<i class="fa fa-download fa-fw"></i> $LOADS$  
<i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$
  </p>
  </div>
  </div>
</a>
<script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script>


CSS

Код
.service-details {
  width: 48%;
  min-width: 300px;
  height: 200px;  
  overflow: hidden;
  position: relative;
  margin: 5px;
  float: left;
  background: #10161e;
}
.service-details img {
  position: absolute;
  top: 0;
  left: 50px;
  width: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  margin-left: px;
  border: 0px solid #17212b;
  -webkit-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
}

.service-details:hover img {
   
}

.service-details .service-hover-text h3 {
  padding: 0px;
  margin: 0px;
  color:#56B8FF;
  text-align:left;
  text-shadow:1px 1px 1px #777;
  font-size:18px;
  font-family:Arial Narrow, Arial, sans-serif;
  transition: color 1s, font-size 1s, text-shadow 1s;
  -moz-transition: color 1s, font-size 1s, text-shadow 1s;
  -webkit-transition: color 1s, font-size 1s, text-shadow 1s;
  -o-transition: color 1s, font-size 1s, text-shadow 1s;
}
.service-details:hover h3 {
  padding: 0px;
  margin: 0px;
  color:#fff;
  z-index:10;
  font-size:18px;
  text-shadow:0 0 20px #EAF8FF;
}
.service-details .service-hover-text h4 {
  margin-right: 0;
  padding: 0 5px 2px;
  color: #9A9A9A;
  border: 1px solid #5D5D5D;
  border-radius: 2px;
  font-family: tahoma,arial,sans-serif;
  margin-bottom: 10px;
  display: inline-block;
}
.service-details .service-hover-text h2 {
  position: absolute;
  z-index: 100;
  bottom:5px;
  padding: 0px;
  margin: 0px;
  color:#fff;
  text-align:left;
  text-shadow:1px 1px 1px #000;
  font-size:14px;
  font-family:Arial Narrow, Arial, sans-serif;
   
  transition: color 1s, font-size 1s, text-shadow 1s;
  -moz-transition: color 1s, font-size 1s, text-shadow 1s;
  -webkit-transition: color 1s, font-size 1s, text-shadow 1s;
  -o-transition: color 1s, font-size 1s, text-shadow 1s;
}
.service-details .service-hover-text p {
  padding: 0px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  margin:0px;
  font-family: "Open Sans";
}
.service-details .service-hover-text a {
  font-size: 12px;
  background: #313b46;
  margin-right: 0;
  padding:5px;
  color: #FFF;
  border-radius: 2px;
  font-family: tahoma,arial,sans-serif;
  margin-bottom: 10px;
  display: inline-block;
  border: 0px solid #00BFFF;
}
.service-details:hover a {
  font-size: 12px;
  background: rgba(21, 126, 232, 0.8);
  color: #fff;
}
.service-details .service-hover-text{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 10px;
  box-shadow: ;
  color: #ccc;
/* display: none;*/
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.4s;
  margin-left:5px;
}

.service-details:hover .service-hover-text {
  display: block !important;
  color: ;
  left: 0px;
  top: 0px;
   
}
.service-details .service-text {
  position: absolute;
  bottom: 0px;
}
.service-details .service-text p {
  padding:5px;
  text-align:right;
  font-size: 12px;
  font-family: "Open Sans";
  font-weight:300;
  color:#fafafa;
  font-style:italic;
  text-shadow:0 0 20px #fafafa;
  box-shadow: -100px 1px 67px -31px #DC143C inset;
}  
.service-white {
  background: rgba(43, 139, 161, 0.8);
  width: 100%;
  height: 25px;
}

До этого был точно такой материал в одну колонку, здесь уже переделан и создан в две колонки, что больше актуален.
17.03.2017 Загрузок: 1 Просмотров: 700 Комментарий: (24)

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

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

Комментарий: 24
Scheme
Scheme 17.03.2017 14:421
0
Один вид крутить можно и разбрасывать по файлам - как все серьезно. 11a
Kosten
Kosten 17.03.2017 14:542
0
Но видать на то и конструктор, чтоб можно лепить с одного материала на несколько.
Tergran
Tergran 17.03.2017 15:183
0
Все нормально, его можно еще редактировать, но у меня вопрос, кто ставил, он адаптирован?
maniacvn
maniacvn 17.03.2017 15:224
+2
Марковичь
Марковичь 17.03.2017 15:275
0
Хороший вид материала и главное уже настроен, кому не нравится, может просто зайти в стили и переделать его, это что касается дизайн, чтоб не сбить адаптацию.
Марковичь
Марковичь 17.03.2017 19:146
0
Мне интересно, уже не первый раз встречаю, это одна загрузка, а когда все открывается, то не чего скачивать, или вся информация файле была и потом ее выносят в материал, но прежде скачивают, так только могу понять.
Tergran
Tergran 17.03.2017 19:177
0
Все верно, некоторые в текстовом документе представляют, и тут видать так было.
maniacvn
maniacvn 31.03.2017 16:588
0
Скоро обнова )
Марковичь
Марковичь 31.03.2017 18:219
0
Что это - информер или вид материал.
maniacvn
maniacvn 31.03.2017 18:4110
0
Вид материала)
avatar
JK_Torosyan 11.10.2017 17:0111
0
Дратути, поставил себе вид, но.. картинки на виде не отображаются, и снизу выступает синяя полоса.
Kosten
Kosten 11.10.2017 17:1812
0
JK_Torosyan, этот вид полностью рабочий, возможно стили покрутить.
1 2 »
avatar