Вид материалов новостей/файлов
22.11.2013 в 18:44
Автор: babygirl | Комментариев (0) | Просмотров: 522 | Скачали: 0
Вид материалов новостей/файлов
Описание файла:
Красивый и простой блок новостей.





Этот код в CSS:
Код
</div><div><br></div><div>/* style news */  </div><div>.clear {  </div><div>  clear:both;  </div><div>}  </div><div>.news {  </div><div>  width:auto;  </div><div>  position:relative;  </div><div>  margin-bottom:20px;  </div><div>  padding:15px;  </div><div>  background:#fff;  </div><div>  border:1px solid #d3d3d3;  </div><div>  font-family:helvetica, arial, sans-serif;  </div><div>}  </div><div>.news_l {  </div><div>  padding-right:145px;  </div><div>  min-height:150px;  </div><div>}  </div><div>.news_r {  </div><div>  width:140px;  </div><div>  height:100%;  </div><div>  background:#f4f4f4;  </div><div>  position:absolute;  </div><div>  top:0;  </div><div>  right:0;  </div><div>  text-align:center;  </div><div>}  </div><div>.news h2 {  </div><div>  margin:0;  </div><div>  background:url(http://mvcreative.ru/example/15/images/stripe.png) 0px 7px repeat;  </div><div>  height:20px;  </div><div>  overflow:hidden;  </div><div>  margin:10px 0 15px 0;  </div><div>  position:relative;  </div><div>}  </div><div>.news h2 a {  </div><div>  background:#fff;  </div><div>  padding:2px 10px 2px 0;  </div><div>  text-decoration:none;  </div><div>  color:#89a0af; /*цвет заголовка новости*/  </div><div>  font-size:16px;  </div><div>}  </div><div>.news h2 span a {  </div><div>  padding-right:0;  </div><div>}  </div><div>.img_news {  </div><div>  float:left;  </div><div>  display:inline-block;  </div><div>  margin:0 14px 5px 0;  </div><div>  padding:5px;  </div><div>  background:#EDF1F2;  </div><div>  border:1px solid #DDE1E2;  </div><div>}  </div><div>.img_news img {  </div><div>  width:220px;  </div><div>  border:1px solid #DDE1E2;  </div><div>}  </div><div>.message {  </div><div>  padding:0 0 10px 0;  </div><div>  margin:0;  </div><div>  font-size:12px;  </div><div>  line-height:19px;  </div><div>  text-align:justify;  </div><div>}  </div><div>.news_r .date {  </div><div>  display:inline-block;  </div><div>  position:relative;  </div><div>  font-size:13px;  </div><div>  padding:7px 10px 4px 10px;  </div><div>  margin:18px 0 -5px 0;  </div><div>  background:#6099bf; /*цвет блока с датой*/  </div><div>  border:1px solid #fff;  </div><div>  color:#fff;  </div><div>  text-align:center;  </div><div>}  </div><div>.news_r ul {  </div><div>  list-style:none;  </div><div>  margin:0;  </div><div>  padding:0;  </div><div>  text-align:left;  </div><div>  width:100px;  </div><div>  margin:18px auto 0 auto;  </div><div>  font-size:12px;  </div><div>}  </div><div>.news_r ul li {  </div><div>  padding:3px 0 3px 5px;  </div><div>  border-bottom:1px dotted #BEBEBE;  </div><div>}  </div><div>.news_r ul li img {  </div><div>  margin-right:10px;  </div><div>  position:relative;  </div><div>  top:4px;  </div><div>}  </div><div>.news_r ul li a, .news_r ul li span {  </div><div>  color:#707070;  </div><div>  text-decoration:none;  </div><div>}

А этот код в вид материала новостей/файлов:
Код
</div><div><br></div><div><div class="news">  </div><div><div class="news_l">  </div><div>  <h2>$MODER_PANEL$ <a href="$ENTRY_URL$">$TITLE$</a></h2>  </div><div>  <div class="img_news">  </div><div>  <img src="$IMG_URL1$" alt="$TITLE$"/>  </div><div>  </div>  </div><div>  <p class="message">$MESSAGE$Описание отсутствует</p>  </div><div>  <div class="clear"></div>  </div><div></div>  </div><div><div class="news_r">  </div><div><div class="date" title="$WDAY$ в $TIME$">$DATE$</div>  </div><div><ul>  </div><div>  <li><img src="http://mvcreative.ru/example/15/images/user.png" alt=""/><a href="$PROFILE_URL$" title="автор материала">$USERNAME$</a></li>  </div><div>  <li><img src="http://mvcreative.ru/example/15/images/cat.png" alt=""/><a href="$CATEGORY_URL$" title="категория">$CATEGORY_NAME$</a></li>  </div><div>  <li><img src="http://mvcreative.ru/example/15/images/comm.png" alt=""/><a href="$COMMENTS_URL$" title="комментариев">$COMMENTS_NUM$</a></li>  </div><div>  <li><img src="http://mvcreative.ru/example/15/images/eye.png" alt=""/><span title="просмотров">$READS$</span></li>  </div><div></ul>  </div><div></div>  </div><div></div><!--/news-->
Если вы хотите избавиться от заголовка с датой, и добавить его к остальному списку информации чуть ниже, уберите код:
Код
<div class="date" title="$WDAY$ в $TIME$">$DATE$</div>
И добавьте к списку ul последним пунктом этот:
Код
</span></div><div><font color="#222222" face="Tahoma"><span style="line-height: 14px;"><br></span></font></div><div><font color="#222222" face="Tahoma"><span style="line-height: 14px;"><li><img src="ttp://mvcreative.ru/example/15/images/clock.png" alt=""/><span title="$WDAY$ в $TIME$">$DATE$</span></li>

Скачать файл

Инструкция по установке шаблонов:
Инструкция, приведенная ниже, поможет Вам быстро установить скачанный у нас с сайта шаблон. Для правильной установки прочтите, пожалуйста, внимательно все пункты инструкции, дабы не возникло дополнительных вопросов.
1. Прежде всего загружаем содержимое папки Файловый Менеджер на Ваш сайт.
2. Далее заходим в Дизайн - Управление дизайном (CSS), копируем содержимое файла Таблица стилей и вставляем с заменой. После используем текстовый файл Конструктор шаблонов для создания каркаса дизайна (Дизайн - Конструктор шаблонов).
3. И в заключении устанавливаем сами модули, находятся они в папках с названием, соответствующему названию модуля.


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]