Иконки в объявлениях вместо папок

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#16 3 декабря 2014 в 20:32
Буду очень признателен, думаю не только я один. А то уже и иконки есть-)
#17 4 декабря 2014 в 00:18
Если лезть глубоко в дебри кода неохота и названия категорий заранее известно (точнее в моем примере атрибут href) предлагаю следующий "костыль":
файл ../templates/default/css/theme-widgets.css ориентировочно в районе 463 строки.
в .widget_content_tree li{...} заменяем background: url("../images/icons/folder.png") no-repeat left 1px; на background: none; и добавляем position: relative;

далее дописываем
  1. .widget_content_tree li > a:before {
  2. content:"";
  3. display: inline-block;
  4. position: absolute;
  5. width: 18px;
  6. height: 18px;
  7. top: 1px;
  8. left: 0;
  9. background: url("../images/icons/folder.png") no-repeat left 1px;
  10. }
и затем для каждой нужной категории указываем строку .widget_content_tree li > a[href^="/articles/astronomija"]:before {background: url("../images/icons/add.png") no-repeat left 1px;},
где [href^="/articles/astronomija"] — ссылка не страницу куда ведет категория для которой задается иконка
Тут можно проявить фантазию и к примеру засунуть в каждую ссылку какой нибудь идентификатор, и уже по нему делать выборку. В общем простор безграничен))

Таким образом должно получиться примерно следующее:
  1. ...
  2. .widget_content_tree li{
  3. margin-left: 0px;
  4. list-style: none;
  5. padding-left:20px;
  6. background: none;
  7. position: relative;
  8. }
  9.  
  10. .widget_content_tree li > a:before {
  11. content:"";
  12. display: inline-block;
  13. position: absolute;
  14. width: 18px;
  15. height: 18px;
  16. top: 1px;
  17. left: 0;
  18. background: url("../images/icons/folder.png") no-repeat left 1px;
  19. }
  20.  
  21. .widget_content_tree li > a[href^="/articles/astronomija"]:before {background: url("../images/icons/add.png") no-repeat left 1px;}
  22. .widget_content_tree li > a[href^="/articles/geologija"]:before {background: url("../images/icons/cancel.png") no-repeat left 1px;}
  23. .widget_content_tree li > a[href^="/articles/literatura"]:before {background: url("../images/icons/edit.png") no-repeat left 1px;}
  24. ...
Путь к иконке указываете свой, конечно же))
#18 4 декабря 2014 в 10:10
Val

А Вы уверены, что код здесь править надо? Может здесь?
  1. /* ========================================================================== */
  2.  
  3. .content_categories + .filter-panel {
  4. margin-top: -21px;
  5. }
  6. .content_categories {
  7. padding:10px 15px;
  8. }
  9.  
  10. .content_categories ul,
  11. .content_categories li { margin:0; padding:0; }
  12.  
  13. .content_categories li {
  14. display: inline-block;
  15. height: 32px;
  16. line-height: 32px;
  17. font-size: 18px;
  18. padding-left: 20px;
  19. background: url("../images/icons/folder.png") no-repeat left center;
  20. margin-right: 10px;
  21. }
  22.  
  23. .content_categories li a { color:#68809B; }
  24. .content_categories li a:hover { color:#d35400; }
  25.  
  26. /* ========================================================================== */
  27.  
#19 4 декабря 2014 в 11:33
Gudan, я показал для виджета с перечнем категорий, для поля над фильтром сверху контента — да, нужно менять/дополнять в .content_categories
В целом смысл был продемонстрировать принципиальную возможность joke
#20 4 декабря 2014 в 20:38
Val, костыль конечно, но за неимением лучшего и это можно использовать.
#21 4 декабря 2014 в 21:25
Делал по аналогии, но где-то накосячил наверное, так как папки исчезли, а иконки не появились. Может кто-то подаст руку помощи?
Куралесил в файле \templates\tseso\css\theme-content.css scratch
  1. .content_categories ul,
  2. .content_categories li { margin:0; padding:0; }
  3. /************************/
  4. .content_categories li {
  5. display: inline-block;
  6. height: 32px;
  7. line-height: 32px;
  8. font-size: 18px;
  9. padding-left: 20px;
  10. background: none;
  11. position: relative;
  12. }
  13.  
  14. .content_categories li a { color:#68809B; }
  15. .content_categories li a:hover { color:#d35400; }
  16.  
  17. .content_categories li > a[href^="/board/nedvizhimost"]:before {background: url("../images/icons/category/gruz_per.png") no-repeat left 1px;}
#22 5 декабря 2014 в 09:08
  1. .content_categories li {
  2. display: inline-block;
  3. height: 32px;
  4. line-height: 32px;
  5. font-size: 18px;
  6. padding-left: 27px;
  7. margin-right: 10px;
  8. position: relative;
  9. }
  10.  
  11. .content_categories li a { color:#68809B; }
  12. .content_categories li a:hover { color:#d35400; }
  13.  
  14. .content_categories li a:before {
  15. content:"";
  16. display: inline-block;
  17. position: absolute;
  18. width: 24px;
  19. height: 24px;
  20. background: url("../images/icons32/folder.png") no-repeat left center;
  21. background-size: cover;
  22. left: 0;
  23. top: 4px;
  24. }
  25.  
  26. .content_categories li > a[href$="astronomija"]:before {background-image: url("../images/icons32/brick.png");}
  27. .content_categories li > a[href$="geologija"]:before {background-image: url("../images/icons32/page.png");}
  28. .content_categories li > a[href$="literatura"]:before {background-image: url("../images/icons32/user.png");}
joke
#23 5 декабря 2014 в 09:33
Ой спасибочки, мил человек! Дай бог тебе здоровья. Сегодня попробую.
#24 5 декабря 2014 в 09:50
Зачет 100%. Хоть и костыль, но работает dance
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.