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

Адаптивный вид материала для uCoz сайтов

Адаптивный вид материала для uCoz сайтов
Если вы хотите сделать адаптивный вид материала, то эта статья вам поможет. Вы сможете выводить материал в несколько колонок в адаптивной верстке. В системе uCoz почти все материалы, будь то новости или статьи, прописаны с помощью определенного div, а именно: <div id="allEntries">. Для него мы и будем прописывать дизайн, чтобы материалы можно было вывести в одну, две, три или четыре колонки. А самое главное, что для разных устройств, разный вид вывода материала.

Добавление от админа:

Как понимаю, здесь затея темы на адаптивность была, и были прописаны стандартные стили от системы. Что немного пришлось преобразить, а это сделать вид материала, что идет в 3 колонки, а также он полностью адаптивный под все мобильные аппараты.

Вид материалов в 3 колонки для сайта uCoz


Это при небольшом мониторе, как пример может быть планшет, где идет в 2 колонки.

Светлый вид материалов сайта

Но здесь автоматически переходит в одну колонку при самом небольшом экране мобильного гаджет.

Мобильный вид в 1 колонку материалов для сайта на CSS

Установка:

HTML

Код
<div class="kaltemeruy-osmiduck">
<tr><td style="padding:3px;">
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$" class="dkimadetun">$TITLE$</a></div>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><p style="text-align: center;"><div class="vid-materiala"><!--IMG1--><a href="$IMG_URL1$" class="ulightbox" target="_blank" title="Нажмите для просмотра в полном размере..."><img style="margin:0;padding:0;border:0;" src="$IMG_URL1$" align=""></a></div> <!--IMG1--></p>
<p><div class="bemerka-text">$MESSAGE$</div></p></div><div class="eDetails" style="clear:both;">
<?if($RATING$)?><div class="rate-stars-wrapper" style="float:right"><?$RSTARS$('16','/.s/t/1816/rating_16.png','0','float')?> </div><?endif?>
   
</div></td></tr>
</div>

CSS

Код
.avuperevoz_perekluchaeum{  
width: 48.5%;  
float:left;  
margin: 3px 10px 3px 0px;  
}  

.kaldenokeremukys {  
  padding: 7px;  
  margin-bottom: 17px;  
  background: #141415;  
  border-radius: 5px 5px 3px 3px;  
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.42), 0px 0px 3px 1px rgba(82, 79, 79, 0.86);  
}  

.kaltemeruy-osmiduck {
  padding: 0 0 0px 10px;
}  

.kaltemeruy-osmiduck a {
  display: block;
  font-size: 18px;
  line-height: 2.25;
  color: #3e3e3e;
  font-weight: bold;
}  

.dkimadetun {
  white-space: nowrap;
  overflow: hidden;
  padding: 3px;
  background: #ffffff;
  position: relative;
  margin: 0px 0px 0px 3px;
  }  
  .dkimadetun::after {  
  content: '';  
  position: absolute;  
  right: 0; top: 0;  
  width: 130px;  
  height: 100%;  
  background: linear-gradient(to right, rgba(255, 255, 255, 0.29), rgb(255, 255, 255) 98%);  
}  

.vid-materiala img {
  /* width: 99%; */
  height: 220px;
  border: 2px solid #fff9f9;
  border-radius: 7px 7px 1px 1px;
  box-shadow: 0px -1px 6px 0px rgba(72, 67, 67, 0.57);
  box-shadow: 0px -1px 3px 1px #968787b3;
}

.vid-materiala img:hover{  
opacity:0.9;  
}  

.bemerka-text {
  lline-height: 20px;
  opacity: 0.8;
  margin-bottom: 15px;
  padding: 0 0px;
  height: 95px;
  overflow: hidden;
   
}

.gTable{padding:0 0 15px}

.module-shop .eTitle{padding:0;background:transparent;box-shadow:none}
.calMdayIsA .calMdayLink:hover,.eTitle a:hover{text-decoration:none;color:#2196f3}
.eMessage,#casing .eText{font-size: 14px;background: #ffffff;border-radius:0 0 4px 4px;position:relative;box-shadow: 0px 0px 5px 1px rgba(1, 1, 1, 0.57);padding: 10px 10px;line-height: 1.73;border-radius: 5px;}
#casing table.eBlock td[width="85%"],#casing table.eBlock td[align="right"]{background-color:#fff;padding:0 30px;text-align:left;box-shadow:0 5px 4px rgba(1,1,1,0.2)}
.eAttach{padding:10px 30px 30px;margin-top:-5px;background:#fff;border-radius:0 0 4px 4px;box-shadow:0 4px 4px rgba(1,1,1,0.2);position:relative}
.eMessage .eAttach{padding:10px 0;background:#fff;border-radius:0;box-shadow:none;position:relative}
.eMessage,.eText{word-break:break-word;-ms-word-wrap:break-word;word-wrap:break-word}
.eMessage img,.eText img{max-width:100%;width:100%;}

#allEntries {display: flex;flex-wrap: wrap;margin: -3px;}
#allEntries > div {flex: 0 0 50%;max-width: 50%;}

@media (min-width: 240px) and (max-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 768px) {
  #allEntries > div {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 992px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}
@media (min-width: 1200px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}

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

От автора материала:

Чтобы это реализовать, вам нужно прописать в дизайне следующий код:
Код
/*== Новости иконками: начало ==*/
#allEntries {display: flex;flex-wrap: wrap;margin: -3px;}
#allEntries > div {flex: 0 0 50%;max-width: 50%;}

@media (min-width: 240px) and (max-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 768px) {
  #allEntries > div {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 992px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}
@media (min-width: 1200px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}
/*== Новости иконками: конец ==*/


Это действует почти для любого вида материалов. Далее уже настроить можно под себя.
2020-05-21 Загрузок: 3 Просмотров: 279 Комментарий: (9)

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

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

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

Комментарий: 9
Kosten
Kosten 2020-05-21 14:491
0
Здравствуйте, вы можете скинуть в текстовом документе этот вид, чтоб разместить, так как не полон.
-SAM-
-SAM- 2020-05-21 15:052
0


UPD.:





Процентное соотношение:
100% - на всю ширину;
50% - на 2 колонки;
33.3% - на 3 колонки;
25% - на 4 колонки.

Если не помещается по ширине, то значит в вашем шаблоне вида материалов есть фиксированная ширина или же отступы (когда они идут слева-справа), то при разбивке на несколько колонок потом нужно процентов ставить меньше (допустим, с учётом этих отступов).

О том как делать медийные стили для адаптивности, для разного показа в зависимости от разрешения экрана pda-устройств, расписано здесь (как пример).

И кажется, что более правильно делать разбивку с привязкой к системному идентификатору по #allEntries div[id*="entryID"] { ... } или же #allEntries div[id^="entry"] { ... } (а хотя, посмотрел еще только что - если работает просто через #allEntries > div { ... }, то значит и так сойдёт, главное чтобы они там в системе не умудрились запихать рекламу свою сразу после блока с этим идентификатором).

Там еще можно делать поправку на то, что в категории может быть всего один материал, допустим, или есть же страница материалов пользователя - чтобы в таком случае этот материал был без разбивки на колонки (но это уже не столь важно)... кажется, что так: #allEntries > div:not(:only-child) { ... }
Помню, что в своё время пробовал делать, но именно в новостях почему-то не хотело действовать, то еще можете попробовать так: #allEntries > div[id^="entryID"]:not(:only-child) { ... } или же
#allEntries > div[id^="entryID"]:not(:only-of-type) { ... } (или нужно без знака ">").
Kosten
Kosten 2020-05-21 15:193
0
Сто лет не занимался, это как вытянуть код, а так просто его прописал, как системный, а ссылку снесу,оставил, чтоб кто то помог перейдя по ней.
avatar
mailbestfilms 2020-05-21 15:354
0
Рекламировать сайт никто не собирался, это всего лишь демо. И я не дублирую материал, а просто показываю как адаптировать любой материал на ucoz. А показано это на стандартном шаблоне системы, который в целом адаптивный сам по себе, изменено только количество колонок для материалов.
Kosten
Kosten 2020-05-21 15:445
0
По сути здесь материала то нет.. что приходится его вытягивать сайта.
Kosten
Kosten 2020-05-21 17:156
0
Здесь вам лучше писать такую тему на форуме, здесь больше идет материал, а информативное в большинстве на форуме пишется.
Kosten
Kosten 2020-05-21 17:177
0
Здесь согласен, что код по сути нужно переписывать, так как там системные классы выставлены, и чтоб вид материала установить, возможно некоторые нужно закрыть.
Kosten
Kosten 2020-05-21 18:128
0
-SAM-, вы даже не представляете как этот вид материал пилил, просто их на сайте тьма, как от одной колонки, и по этой же стилистике 2, 3, колонки, разве только дизайн немного изменяя.

И так почти со всеми видами, что приходилось адаптировать под мобильные аппараты, а с этим просто вспомнил, как все было, и думаю одной адаптивности хватит, а остальное веб разработчик добавит по существу.
Сопрано
Сопрано 2020-05-22 19:519
0
По сути id="allEntries можно поставить под вид материала и выставить стили и он должен быть адаптивным - как этот вид материала.
avatar