Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Виды материалов
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

    Вид новостей uCoz Minimalism

    Дата добавления: 02.11.2013 - 03:29
    Категория: Виды материалов
    Добавил: newil
    Количество просмотров: 3.3k
    Количество комментариев: 0
    Рейтинг материала: 0.0 / 0
    Вид новостей uCoz Minimalism
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    Всем массовый привет, сегодня в данной заметке готовых решений для uCoz, мы будем создавать очередной вид новостей в стиле минимализма, в котором главным отличием будет отображение стандартной модер панели uCoz поверх изображения, но для начала давайте посмотрим на демо пример!

    Шаг 1 - Установим HTML:
    И так давайте приступим к установки html каркаса, для этого заходим в Админ панель => Дизайн => Управление дизайном => Новости сайта => Вид материалов

    удаляем старый html код и устанавливаем новый:

    HTML

    Код
    <div class="view-news">  
      <span class="view-news-moder">$MODER_PANEL$</span>
      <div class="view-news-img"><img src="$IMG_SMALL_URL1$"><img src="$IMG_URL1$"></div>  
      <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
      <p>$MESSAGE$</p>  
      <span class="view-news-statistics">  
      <img src="http://art-ucoz.ru/files/vid-news/3/fon_img_glaz.png" alt="просмотров"> $READS$ |  
      <img src="http://art-ucoz.ru/files/vid-news/3/fon_img_coment.png" alt="комментарии"> $COMMENTS_NUM$  
      </span>  
      <a class="read-more" href="$ENTRY_URL$">Читать дальше</a>  
    </div>


    Шаг 2 - Установим CSS:
    отлично, теперь когда html код вида новостей установлен, пропишем ему следующие css стили:

    CSS

    Код
    /* Вид новостей для uCoz Minimalism  
    ------------------------------------------*/  
    .view-news{  
      float:left;  
      width:358px;  
      overflow: hidden;  
      position: relative;  
      background: #fff;  
      margin: 0px 0px 15px 0px;  
      border: 1px solid #B6C0CD;  
      border-radius:5px;  
    }  

    .view-news a {text-decoration:none; outline:none}  

    .view-news-img img{  
      width:358px;  
      height:218px;  
      margin: 0px 0px 7px 0px;  
      border-radius:5px 5px 0px 0px;  
    }  

    .view-news h2 {  
      float:left;  
      width:328px;  
      padding-bottom: 5px;  
      margin:0px 15px 10px 15px;  
      border-bottom: 1px solid #D6D6D6;  
      font: 125% Verdana,Arial,Helvetica, sans-serif;  
      font-weight: 700;  
    }  

    .view-news p {  
      float:left;  
      width:328px;  
      padding-bottom: 10px;  
      margin:0px 15px 10px 15px;  
      border-bottom: 1px solid #D6D6D6;  
      font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;  
      text-align:justify;  
    }  

    .view-news-statistics{  
      float:left;  
      margin:0px 0px 10px 15px;  
      font:9px Verdana,Arial,Helvetica, sans-serif;  
      color:#999;  
    }  

    .read-more{  
      float:right;  
      font-weight: 700;  
      margin:0px 15px 10px 0px;  
    }  

    .view-news-moder{  
      float:left;  
      position: absolute;  
      top: 0px;  
      right:0px;  
      padding: 5px;  
      background: #fff;  
    }
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: