Вывод новостей на главную страницу каталога файлов в шаблоне MoviBazar (5 колонок)

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

В этом материале рассмотрим, как создать новый шаблон вывода новостей с 5 колонками, уменьшить высоту карточек и внести минимальные изменения в CSS для более компактного и аккуратного вида.

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

Код

<style>
/* Контейнер информера */
#news5_container {
display: grid;
grid-template-columns: repeat(0, 2fr);
gap: 10px;
padding: 0px;
width: 100%;
max-width: 1200px; /* подгони под сайт */
margin: 0 auto;
box-sizing: border-box;
}

/* Карточка новости */
.news5_item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
background-color: #111;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news5_item:hover {
transform: translateY(-25px);
box-shadow: 0 0 15px rgba(133,59,151,0.6);
}

/* Картинка */
.news5_img {
  position: relative; /* добавлено */
}

/* Картинка */
.news5_img img {
width: 100%;
height: 180px; /* уменьшено с 250px */
object-fit: cover;
border-bottom: 1px solid #853b97;
margin-top: 8px; /* чуть меньше отступ сверху */
border-radius: 12px;
overflow: hidden;
}

/* Метка поверх */
.news5_label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #853b97;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;

  opacity: 0; /* скрыта по умолчанию */
  transition: opacity 0.3s ease; /* плавное появление */
}

/* Появление при наведении на карточку */
.news5_item:hover .news5_label {
  opacity: 1;
}

/* Заголовок */
.news5_title {
margin-top: 8px;
background-color: #000;
color: #fff;
padding: 6px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 10pt;
text-align: center;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Категория и рейтинг */
.news5_subtitle {
font-size: 12px;
color: #bbb;
margin: 6px 0 10px;
text-align: center;
}
.news5_rate {
margin-top: 4px;
}

/* Адаптивность */
@media (max-width: 1100px) {
#news5_container {
grid-template-columns: repeat(4, 1fr); /* 4 на средних экранах */
}
}
@media (max-width: 800px) {
#news5_container {
grid-template-columns: repeat(3, 1fr); /* 3 на планшете */
}
}
@media (max-width: 550px) {
#news5_container {
grid-template-columns: repeat(2, 1fr); /* 2 на телефоне */
}
}
</style>

<!-- Контент информера -->
<div id="news5_container">

<a class="news5_item" href="$ENTRY_URL$">
<div class="news5_img">
<img src="<?if($SCREEN_URL$)?>$SCREEN_URL$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$">
<?if($OTHER5$)?><div class="news5_label">$OTHER5$</div><?endif?>
</div>
<div class="news5_title">$TITLE$</div>
<ul class="news5_subtitle">
<?if($RATING$)?><div class="news5_rate"><?$RSTARS$('18','/rate/stars_5.png','0','float')?></div><?endif?>
$CATEGORY_NAME$
</ul>
</a>

</div>
<!-- /Информер 5 новостей -->

Находим такие строчки в common.css

Код

#allEntries > *:not(.grid-item), #allEntries {width: 100%;}
#allEntries, .d-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    grid-gap: 30px 30px; grid-auto-flow: row dense;}
[data-src] {opacity: 0; transition: opacity 0.3s;}
[data-src].lazy-loaded {opacity: 1;}

и заменяем их на.

Код

#allEntries, .d-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ровно 5 колонок */
  grid-gap: 30px; /* промежутки между карточками */
  max-width: 1200px; /* ограничение по ширине контейнера, чтобы не вылазило */
  margin: 0 auto; /* центрирование */
  box-sizing: border-box;
}

#allEntries > *:not(.grid-item) {
  width: 100%; /* карточки занимают всю ширину ячейки */
}

@media screen and (max-width: 1200px) {
  #allEntries, .d-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 колонки на чуть меньших экранах */
  }
}

@media screen and (max-width: 992px) {
  #allEntries, .d-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  #allEntries, .d-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  #allEntries, .d-grid {
    grid-template-columns: 1fr; /* 1 колонка на телефоне */
  }
}

Мурчанн

1