Главная » Статьи » Вид Материалов |
Вид новостей для кино сайтов на uCoz
![]() Шаг 1 - Установим HTML: Для начала как и полагается установим html каркас, для этого заходим в Админ панель => Дизайн => Управление дизайном => Новости сайта =>Вид материалов, удаляем старый код и устанавливаем новый: HTML Код <div class="cell-news"> <div class="cell-news-l"> <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?><?endif?> <div class="cell-news-rating left"> <div class="left"><?if($RATING$)?><?$RSTARS$('16','http://www.center-dm.ru/ucoz/vid_rating/1/rating_star_01.png','1','float')?><?endif?></div> <div class="cell-news-rating-os right">$RATING$</div> </div> </div> <div class="cell-news-r"> <h2><a href="$ENTRY_URL$">$TITLE$</a></h2> <div class="cell-news-top"> <span title="Вторник в $TIME$" class="west left">$DATE$</span> <span class="right"> <img src="http://www.center-dm.ru/img/fon_img_glaz.png" alt="просмотров" /> $READS$ | <img src="http://www.center-dm.ru/img/fon_img_coment.png" alt="комментарии" /> $COMMENTS_NUM$ <span><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></span> </span> </div> <p class="cell-news-center"><?if($MESSAGE$)?>$MESSAGE$<?endif?></p> <div class="cell-news-bottom"> <span class="left"><?if($CATEGORY_NAME$)?>Рубрика: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?></span> <a class="right" href="$ENTRY_URL$" >Читать дальше</a> </div> </div> </div> Обратите внимание, что в данном html коде я прописал системную переменную uCoz, отвечающею за отображение картинки в новостях, которую вы заливаете через форму Изображения, на странице добавление и редактирование контента. HTML Код <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?><?endif?> Из-за чего в кратком описание должна отсутствовать ссылка на картинку или системная переменная uCoz, отвечающая за вывод изображение (IMAGE1) Шаг 2 - Установим CSS: Теперь давайте пропишем основные css стили: CSS-Code Код /* Вид новостей для кино сайтов на uCoz ------------------------------------------*/ .cell-news { float:left; width:570px; margin-bottom: 15px; background: #fff; border-radius:3px; padding: 15px 15px 15px 15px; border: 1px solid #D6D6D6 } .cell-news-l { float:left; width:180px; margin-right: 15px; } .cell-news-r { float:left; width:375px; } .cell-news-l-img { width:180px; height:240px; margin-bottom: 5px; border-radius:3px; } .cell-news-rating { width:100%; } .cell-news-rating img{ margin-top: 2px; } .cell-news-rating-os{ margin-left: 10px; background: #8EC98C; padding: 3px 10px 3px 10px; text-shadow: 1px 1px 1px #469943; font-weight: bold; color:#fff; border-radius:3px; } .cell-news-r h2 { margin:0; float:left; width:100%; padding-bottom: 10px; border-bottom: 1px solid #D6D6D6; font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700; } .cell-news-top{ float:left; width:100%; padding: 5px 0px; border-bottom: 1px solid #D6D6D6; font:9px Verdana,Arial,Helvetica, sans-serif; color:#999; } .cell-news-center{ float:left; width:100%; margin:0; min-height: 163px; padding: 10px 0px; border-bottom: 1px solid #D6D6D6; font:11px 1.5 Verdana,Arial,Helvetica, sans-serif; text-align:justify; } .cell-news-bottom{ float:left; width:100%; font-weight: bold; padding: 10px 0px 0px 0px; } .left {float:left;} .right {float:right;} А что делать, если вам понравился данный вид новостей для uCoz, но в кратком описании материала у вас прописана или установлена системная переменная на отображение картинки, всё просто, мы запретим в данной ячейки с текстом контента её отображать, благодаря css свойству display:none CSS-Code Код .cell-news-center img{ display:none } На этом все спасибо! Источник: http://www.center-dm.ru/ | |
Просмотров: 278 | | |
Всего комментариев: 0 | |