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

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

 
Посетитель
small user social cms
Медаль
Сообщений: 126
для удобства хочу заменить папки на картинки,скажите как это сделать и что и куда нужно прописать?спасибо
заменить папки на картинки
Развитие Туристического Сервиса в Крыму
http://крымтуринфо.рф/
Посетитель
small user social cms
Медаль
Сообщений: 383
Я уже решил эту проблему, надеюсь Вам поможет: http://instantcms.ru/forum/thread20130.html
А на сайте можно посмотреть здесь, пока еще в разработке: http://mastergrad.in.ua/places
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 126
Код PHP:
  1. Код CSS:
  2. .content_categories li {
  3. display: inline-block;
  4. height: 32px;
  5. line-height: 32px;
  6. font-size: 18px;
  7. padding-left: 27px;
  8. margin-right: 10px;
  9. position: relative;
  10. }
  11.  
  12. .content_categories li a { color:#68809B; }
  13. .content_categories li a:hover { color:#d35400; }
  14.  
  15. .content_categories li a:before {
  16. content:"";
  17. display: inline-block;
  18. position: absolute;
  19. width: 24px;
  20. height: 24px;
  21. background: url("../images/icons32/folder.png") no-repeat left center;
  22. background-size: cover;
  23. left: 0;
  24. top: 4px;
  25. }
  26.  
  27. .content_categories li > a[href$="astronomija"]:before {background-image: url("../images/icons32/brick.png");}
  28. .content_categories li > a[href$="geologija"]:before {background-image: url("../images/icons32/page.png");}
  29. .content_categories li > a[href$="literatura"]:before {background-image: url("../images/icons32/user.png");}
я понимаю этот код ставим и все?
Редактировалось: 1 раз (Последний: 18 декабря 2014 в 21:58)
Развитие Туристического Сервиса в Крыму
http://крымтуринфо.рф/
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Gudan, joke
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Геннадий, посмотрите вот это http://htmlbook.ru/samcss/selektory-atributov
Но, думаю вам лучше обратиться к специалисту =)
Посетитель
small user social cms
Медаль
Сообщений: 383
Val Еще раз спасибо за помощь, теперь все по полочкам, сам такой же-)

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

Код PHP:
  1.  
  2. .content_categories li {
  3. display: inline-block;
  4. height: 47px;
  5. line-height: 50px;
  6. font-size: 16px;
  7. padding-left: 60px;
  8. margin-right: 25px;
  9. position: relative;
  10. width: 35%;
  11. }
  12.  
  13. .content_categories li a { color:#68809B; }
  14. .content_categories li a:hover { color:#d35400; }
  15.  
  16. .content_categories li a:before {
  17. content:"";
  18. display: inline-block;
  19. position: absolute;
  20. width: 50px;
  21. height: 50px;
  22. background: url("../images/icons/category/folder1.png") no-repeat left center;
  23. background-size: cover;
  24. left: 0;
  25. top: 4px;
  26. }
  27.  
  28. .content_categories li > a[href$="/places/stroitelstvo"]:before {background-image: url("../images/icons/category/001.png");}
  29.  
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" , я их поместил в отдельную папку.

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

Профессионалы почитают засмеют-)
Посетитель
small user social cms
Медаль
Сообщений: 383
Еще одно! Если добавить популярные и рейтинг, соответственно надо будет продублировать с -all и -rating, соответственно, иначе иконки пропадут-)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 118
Gudan:
Если добавить популярные и рейтинг, соответственно надо будет продублировать с -all и -rating, соответственно, иначе иконки пропадут-)

Меня не устраивало, что для страниц с фильтрами типа контента, необходимо было дублировать все записи.
Поэтому решил, немного модернизировать код.
В файле templates/default/controllers/content/category_view.tpl.php необходимо дописать на строке 128
было
Код PHP:
  1. <?php foreach($subcats as $c){?>
  2. <li>
стало
Код PHP:
  1. <?php foreach($subcats as $c){?>
  2. <li class="<?php echo $ctype['name'];?>_icon <?php echo $c['slug'];?>">
Теперь в файле стилей /templates/default/css/theme-content.css после свойства:

Код PHP:
  1. .content_categories.categories_small li {
  2. font-size:14px;
  3. height: 24px;
  4. line-height: 24px;
  5. }
Добавляем новые стили.
Код PHP:
  1. .content_categories .board_icon {
  2. background: url("../images/catalog_sprite.png") no-repeat 0 -7px;
  3. padding-left: 40px;
  4. }
Здесь board - это системное имя типа контента, для которого делаем категории.

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

Код PHP:
  1. .content_categories .board_icon.avtotransport-perevozki{background-position: 0px -500px;}
  2. .content_categories .board_icon.gorod-i-vlast{background-position: 0px -7px;}
  3. .content_categories .board_icon.kompyutery-svyaz{background-position: 0px -306px;}
  4. .content_categories .board_icon.nauka-obrazovanie{background-position: 0px -38px;}
  5. .content_categories .board_icon.pravo-zakony{background-position: 0px -677px;}
  6. .content_categories .board_icon.sport-krasota{background-position: 0px -416px;}
  7. .content_categories .board_icon.uslugi-raboty{background-position: 0px -614px;}
  8. .content_categories .board_icon.bezopasnost{background-position: 0px -342px;}
  9. .content_categories .board_icon.dosug-razvlecheniya{background-position: 0px -523px;}
  10. .content_categories .board_icon.kultura-iskusstvo{background-position: 0px -169px;}
  11. .content_categories .board_icon.oborudovanie{background-position: 0px -558px;}
  12. .content_categories .board_icon.promyshlennost{background-position: 0px -239px;}
  13. .content_categories .board_icon.stroitelstvo{background-position: 0px -382px;}
  14. .content_categories .board_icon.flora-i-fauna{background-position: 0px -584px;}
  15. .content_categories .board_icon.biznes-finansy{background-position: 0px -133px;}
  16. .content_categories .board_icon.zdorove-medicina{background-position: 0px -99px;}
  17. .content_categories .board_icon.magaziny-tovary{background-position: 0px -274px;}
  18. .content_categories .board_icon.otdyh-razvlecheniya{background-position: 0px -475px;}
  19. .content_categories .board_icon.reklama-smi{background-position: 0px -204px;}
  20. .content_categories .board_icon.torgovye-firmy{background-position: 0px -644px;}
  21. .content_categories .board_icon.sport-i-turizm{background-position: 0px -416px;}
Преимущество данного способа в двух вещах:
1)Использование спрайтов это однократная загрузка сервером сразу всех элементов в одном файле и уменьшение количества HTTP-запросов.
2)При добавлении фильтров, популярные и рейтинг, отсутвует необходимость дублирования стилей для указанных свойств.

Надеюсь, кому-то еще пригодится.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.