как вывести иконки в категории новостей, чтобы они отображались на главной странице Дизайн 1321

голоса: 0

поставил

td#cid1    

  1. { background: url("") no-repeat scroll 0 50% transparent;padding: 3px 0 4px 24px; }   
  2.  
  3.  
  4. Как решить это,подскажите!
Адрес сайта http://kldou24.ucoz.ru/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
 
Лучший ответ

Как пример отредактировать вид материалов модуля новости, найти код:

<span class="e-category">

который заменить на:

<span class="e-category icocat$CID$">

после в стилях прописать код вида:

.icocat1:after {position:relative;content:""; width:10px;height:10px;margin:2px 2px;background:#000;float:left;}

1 - это айди категории, вот так вы для первой категории зададите иконку, вместо кода:

background:#000;

пропишите свой с картинкой:

background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk

вот мой код вида материалов там этого нет

<div class="news-element relative">
<div class="row">
<div class="col-sm-3">
<div class="img-wrapper relative">
<?if($IMG_URL1$)?><a href="$ENTRY_URL$">
<img src="http://kldou24.ucoz.ru/img/news-empty.png" alt="$TITLE$" style="background: url($IMG_URL1$) 50% 50% no-repeat; background-size: cover;" /><?else?>
<a href="$ENTRY_URL$">
<img src="http://kldou24.ucoz.ru/img/news-empty.png" alt="$TITLE$" style="background: url(http://kldou24.ucoz.ru/img/noimage-iloveimg-compressed.gif) 50% 50% no-repeat; background-size: cover;" /><?endif?>
<div class="news-date">$DATE$</div>
</a>
</div>
</div>
<div class="col-sm-9">
<div class="element-content">
<h5><a href="$ENTRY_URL$">$TITLE$</a></h5>
<div class="element-info">
<span class="e-category"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>
<span class="e-reads">$READS$</span>
<span class="e-comments"><a href="$ENTRY_URL$#comments">$COMMENTS_NUM$</a></span>
</div>
<div class="text"><?if(len($MESSAGE$)>160)?><?substr($MESSAGE$,0,160)?>...<?else?>$MESSAGE$<?endif?></div>
<div class="tex"><?$RSTARS$('16','http://kldou24.ucoz.ru/img/stars_1.png','1','float')?> </div>
</div>
</div>
</div>
</div>

Татьяна Подвойская,

Выделил в вашем сообщении.

Yuri_Geruk,

что выделели поменял в ccs вставил так .

icocat1:after {position:relative;content:""; width:10px;height:10px;margin:2px 2px;background:#000;float:left;}
 background:#000; 
 background: url("........") no-repeat scroll 0 50% transparent;

тишина.Все по старому 

Yuri_Geruk,
иконки в блоке категории раздела ,а не в виде новостей.Вы меня наверное не поняли
Татьяна Подвойская,

Вы так хорошо описали - "вывести иконки в категории новостей, чтобы они отображались на главной странице", вроде ни единого слова о блоке категории раздела. Тогда реализация для блока новостей будет выглядеть так:

.catsTable tr:nth-child(1):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(2):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(3):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(4):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}
.catsTable tr:nth-child(5):before {content:"";width:10px;height:10px;margin:2px 2px;background: url("ссылка на фото иконки") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}

 

Yuri_Geruk,
Огромное спасибо !!!
Татьяна Подвойская,

Хотя стили выше можно оптимизировать чтобы не было лишнего кода и установить одной строкой:

.catsTable tr:nth-child(odd):before,.catsTable tr:nth-child(even):before {content:"";width:30px;height:10px;margin:2px 2px;background: url("http://yraaa.ru/_ld/6/638_catalog.png") no-repeat scroll 0 50% transparent;float:left;position: relative;top: 8px;}

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

Yuri_Geruk,
Хорошо.Я хочу поискать разные иконки по категориям   Спасибо вам!
...