заменить папки на картинки

что нужно сделать

#1 18 декабря 2014 в 11:18

для удобства хочу заменить папки на картинки, скажите как это сделать и что и куда нужно прописать? спасибо

Развитие Туристического Сервиса в Крыму http://крымтуринфо.рф/

#2 18 декабря 2014 в 12:54

Я уже решил эту проблему, надеюсь Вам поможет: instantcms.ru/forum/thread20130.html
А на сайте можно посмотреть здесь, пока еще в разработке: mastergrad.in.ua/places

#3 18 декабря 2014 в 21:57

Код CSS:
.content_categories li {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    padding-left: 27px;
    margin-right: 10px;
    position: relative;
}
 
.content_categories li a { color:#68809B; }
.content_categories li a:hover { color:#d35400; }
 
.content_categories li a:before {
	content:""; 
	display: inline-block; 
	position: absolute; 
	width: 24px; 
	height: 24px; 
	background: url("../images/icons32/folder.png") no-repeat left center;
	background-size: cover;
	left: 0;
	top: 4px;
}
 
.content_categories li > a[href$="astronomija"]:before {background-image: url("../images/icons32/brick.png");}
.content_categories li > a[href$="geologija"]:before {background-image: url("../images/icons32/page.png");}
.content_categories li > a[href$="literatura"]:before {background-image: url("../images/icons32/user.png");}

я понимаю этот код ставим и все?

Развитие Туристического Сервиса в Крыму http://крымтуринфо.рф/

Сегодня в 08:47

#4 18 декабря 2014 в 22:30

Gudan, joke

#5 18 декабря 2014 в 22:34

Геннадий, посмотрите вот это http://htmlbook.ru/samcss/selektory-atributov
Но, думаю вам лучше обратиться к специалисту =)

#6 18 декабря 2014 в 23:24

Val Еще раз спасибо за помощь, теперь все по полочкам, сам такой же-)

1. В своем шаблоне ищем файл: \templates\tseso\css\theme-content.css
2. В районе 45 строки ищем и заменяем на:

 
.content_categories li {
    display: inline-block;
	height: 47px;
	line-height: 50px;
	font-size: 16px;
	padding-left: 60px;
	margin-right: 25px;
	position: relative;
	width: 35%;
}
 
.content_categories li a { color:#68809B; }
.content_categories li a:hover { color:#d35400; }
 
.content_categories li a:before {
	content:""; 
	display: inline-block; 
	position: absolute; 
	width: 50px; 
	height: 50px; 
	background: url("../images/icons/category/folder1.png") no-repeat left center;
	background-size: cover;
	left: 0;
	top: 4px;
}
 
.content_categories li > a[href$="/places/stroitelstvo"]:before {background-image: url("../images/icons/category/001.png");}

3. Я привожу в пример одну строчку, их должно быть столько, сколько категорий:
.content_categories li > a[href$="/places/stroitelstvo"]:before {background-image: url("../images/icons/category/001.png");}

4. А что бы все заработало, главное правильно указать категории: "/places/stroitelstvo" и путь к картинке "../images/icons/category/001.png", я их поместил в отдельную папку.

Теперь все обязательно получиться!

Профессионалы почитают засмеют-)

#7 22 декабря 2014 в 20:38

Еще одно! Если добавить популярные и рейтинг, соответственно надо будет продублировать с -all и -rating, соответственно, иначе иконки пропадут-)

#8 14 марта 2015 в 09:55

Если добавить популярные и рейтинг, соответственно надо будет продублировать с -all и -rating, соответственно, иначе иконки пропадут-)
Gudan

Меня не устраивало, что для страниц с фильтрами типа контента, необходимо было дублировать все записи.
Поэтому решил, немного модернизировать код.
В файле templates/default/controllers/content/category_view.tpl.php необходимо дописать на строке 128
было

<?php foreach($subcats as $c){?>
<li>

стало

<?php foreach($subcats as $c){?>
<li class="<?php echo $ctype['name'];?>_icon <?php echo $c['slug'];?>">

Теперь в файле стилей /templates/default/css/theme-content.css после свойства:

.content_categories.categories_small li {
    font-size:14px;
    height: 24px;
    line-height: 24px;    
}

Добавляем новые стили.

.content_categories .board_icon {
    background: url("../images/catalog_sprite.png") no-repeat 0 -7px;
    padding-left: 40px;
}

Здесь board — это системное имя типа контента, для которого делаем категории.

Я использовал спрайт-изображение, поэтому для каждой категории, добавляем лишь свойства позиции изображения в спрайте.

.content_categories .board_icon.avtotransport-perevozki{background-position: 0px -500px;}
.content_categories .board_icon.gorod-i-vlast{background-position: 0px -7px;}
.content_categories .board_icon.kompyutery-svyaz{background-position: 0px -306px;}
.content_categories .board_icon.nauka-obrazovanie{background-position: 0px -38px;}
.content_categories .board_icon.pravo-zakony{background-position: 0px -677px;}
.content_categories .board_icon.sport-krasota{background-position: 0px -416px;}
.content_categories .board_icon.uslugi-raboty{background-position: 0px -614px;}
.content_categories .board_icon.bezopasnost{background-position: 0px -342px;}
.content_categories .board_icon.dosug-razvlecheniya{background-position: 0px -523px;}
.content_categories .board_icon.kultura-iskusstvo{background-position: 0px -169px;}
.content_categories .board_icon.oborudovanie{background-position: 0px -558px;}
.content_categories .board_icon.promyshlennost{background-position: 0px -239px;}
.content_categories .board_icon.stroitelstvo{background-position: 0px -382px;}
.content_categories .board_icon.flora-i-fauna{background-position: 0px -584px;}
.content_categories .board_icon.biznes-finansy{background-position: 0px -133px;}
.content_categories .board_icon.zdorove-medicina{background-position: 0px -99px;}
.content_categories .board_icon.magaziny-tovary{background-position: 0px -274px;}
.content_categories .board_icon.otdyh-razvlecheniya{background-position: 0px -475px;}
.content_categories .board_icon.reklama-smi{background-position: 0px -204px;}
.content_categories .board_icon.torgovye-firmy{background-position: 0px -644px;}
.content_categories .board_icon.sport-i-turizm{background-position: 0px -416px;}

Преимущество данного способа в двух вещах:
1)Использование спрайтов это однократная загрузка сервером сразу всех элементов в одном файле и уменьшение количества HTTP-запросов.
2)При добавлении фильтров, популярные и рейтинг, отсутвует необходимость дублирования стилей для указанных свойств.

Надеюсь, кому-то еще пригодится.