» »

Вид материала широкий для файлов uCoz

Вид материала широкий для файлов uCoz

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

Можно его увидеть и на других тематических площадках, просто он создан на стилях и вывести на другую гамму цвета не составит труда. А так все идет в нем как нужно, это само название материала, может и статьи или мануала. Также можно увидеть краткое описание. Когда материал был размещен и сколько просмотров, не говоря скачали в цифрах. Он также будет на шрифтовых иконках, если кто-то не подключил на сайте, то подключаем. При наведении эффект контраст. Есть 3 изображение вид каталога файлов на темном фоне и каталог статей на темном фоне и каталог файлов на светлом

Так увидите после установки:

Вид материалов широкий на файлы uCoz

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

Код: выделить всё


А и самое главное чтобы показывались все категории в виде материалов нужно

Панель Управление - Страница материала и комментариев к нему. Находим оператор ENTRY_CATS меняем на этот код.

Код: выделить всё
$ENTRY_CATS$

Панель Управление - Вид материалов и там ставим код, где хотим видеть его.

Код
<span id="cats$ID$">Загрузка...</span>


В конце вида материалов ставим следующий скрипт:

Код
<script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script>


Саму основу вид материала и к нему стили, что нужно прописать в 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$"><i class="fa fa-spinner fa-spin fa-1x fa-fw"></i>
<span class="sr-only">Загрузка...</span></span>
  <p><?if(len($MESSAGE$)>135)?><?substr($MESSAGE$,0,135)?>.....<?else?>$MESSAGE$<?endif?></p>
  <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: 98%;
  min-width: 300px;
  height: 200px;  
  overflow: hidden;
  position: relative;
  margin: 5px;
  float: left;
}
.service-details img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  margin-left: 5px;
  border: 10px solid #17212b;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;

}

.service-details:hover img {
  -webkit-filter: contrast(185%);
}

.service-details .service-hover-text h3 {
  padding: 0px;
  margin: 0px;
  color:#56B8FF;
  text-align:left;
  text-shadow:1px 1px 1px #777;
  font-size:20px;
  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:#C9EEFF;
  z-index:10;
  font-size:22px;
  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;
  bottom:5px;
  padding: 0px;
  margin: 0px;
  color:#56B8FF;
  text-align:left;
  text-shadow:1px 1px 1px #777;
  font-size:15px;
  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 h2 {
  padding: 0px;
  margin: 0px;
  color:#00FA9A;
  z-index:10;
  font-size:18px;
  text-shadow:0 0 20px #fff;
}
.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: rgba(255, 255, 255, 0.4);
  margin-right: 0;
  padding: 0 5px 2px;
  color: #000;
  border: px solid #ccc;
  border-radius: 2px;
  font-family: tahoma,arial,sans-serif;
  margin-bottom: 10px;
  display: inline-block;
}
.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: 300px -3px 67px -17px rgba(0, 0, 0, 0.7) inset;
  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;
  left:5px;
}
.service-details .service-text p {
  padding:5px;
  margin-right: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(15, 77, 94, 0.1);
  width: 100%;
  height: 25px;
}

Источник: uCozz.pRo
Поддержите автора для новых идей: WMID: 197995398961
16.03.2017 Загрузок: 3 Просмотров: 571 Комментарий: (11)

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

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

Комментарий: 11
Kolinkor
Kolinkor 16.03.2017 20:231
0
Мне интересен вид материала на всю ширину, но здесь не пойму, вид материала вижу полностью переставлен, а зачем превьюшку писать.
Kolinkor
Kolinkor 16.03.2017 20:252
0
О, заметил, а что разрешают просилку кошелька ставить если материал заливаешь?
Kosten
Kosten 16.03.2017 20:283
0
Нет, но здесь особый и наглый случай. :)
Kosten
Kosten 16.03.2017 20:294
0
Пока материал не проверял, но maniacvn не первый заливаем материал, там как у всех. всегда нужно подгонять под свой дизайн.
Scheme
Scheme 16.03.2017 20:335
0
Это почему только игровая, вообще на кухонном сайте видел и там намного красивее смотрится.
maniacvn
maniacvn 16.03.2017 20:456
0


вот вид в каталоге файлов)
Марковичь
Марковичь 16.03.2017 20:517
0
Жесть, не чего не понять.
maniacvn
maniacvn 16.03.2017 21:048
0
Что именно непонятно?
Kosten
Kosten 16.03.2017 22:489
0
Да, здесь нужно было просто код и стили разместить и все было бы понятно.
maniacvn
maniacvn 16.03.2017 23:3210
0
Немного сменил стили )
Kosten
Kosten 17.03.2017 00:4111
0
Этот намного красивей!
avatar