Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

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

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

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

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

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

    Шаг 1 - Установим 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/1/fon_img_glaz.png" alt="просмотров"> $READS$ |  
      <img src="http://art-ucoz.ru/files/vid-news/1/fon_img_coment.png" alt="комментарии"> $COMMENTS_NUM$  
      </span>  
      <a class="read-more" href="$ENTRY_URL$">Читать дальше</a>  
    </div>


    Шаг 2 - Установим CSS:
    =====================================================================================================
    Теперь когда html код вида новостей установлен, пропишем ему следующие css стили:
    Код
    .view-news{float:left;width:358px;overflow:hidden;position:relative;background:#fff;margin:0 0 15px 0;border:1px solid #b6c0cd;border-radius:5px}
    .view-news a{text-decoration:none;outline:0}
    .view-news-img img{width:358px;height:218px;margin:0 0 7px 0;border-radius:5px 5px 0 0}
    .view-news h2{float:left;width:328px;padding-bottom:5px;margin:0 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:0 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:0 0 10px 15px;font:9px Verdana,Arial,Helvetica,sans-serif;color:#999}
    .read-more{float:right;font-weight:700;margin:0 15px 10px 0}
    .view-news-moder{float:left;position:absolute;top:0;right:0;padding:5px;background:#fff}


    На этом всё, спасибо за внимание!
    Добавлять комментарии могут только зарегистрированные пользователи.


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