Zagruzka-Plus.RU - Скрипты для uCoz - Адаптивный вид материала для uCoz сайтов
Шаблоны

1 Светло синий шаблон форума для uCoz
Дата добавления:23.06.2022

2 Шаблон Cinemak для uCoz
Дата добавления:21.06.2022

3 Шаблон NowFilms для uCoz
Дата добавления:21.06.2022

4 Шаблон Animeway для uCoz
Дата добавления:21.06.2022

5 Шаблон «7ucoz» для uCoz
Дата добавления:19.06.2022
Комментарии
  • 12.06.2022
    Перейти

    Прикольно смотрится на сайте))))))))

  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0




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

    Установка:

    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%;}
    }
    /*== Новости иконками: конец ==*/


    Это действует почти для любого вида материалов. Далее уже настроить можно под себя.

    шаблоны, создать сайт, адаптивный, для uCoz, скрипты, вид материала
    • Категория: Скрипты для uCoz
    • Просмотров: 203
    • Загрузок: 0

    Поделиться файлом или скачать


    Файлы для скачивания отсутствуют

    Коментарии

    • Коментарии к материалу Адаптивный вид материала для uCoz сайтов
    avatar
    Zagruzka-Plus.RU

    ©2022-2023


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