Иконки в объявлениях вместо папок
ЕСТЬ РЕШЕНИЕ
ЗАКРЫТО
- Предыдущая
- 1
- 2
- Показаны 16-24 из 24
#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;
далее дописываеми затем для каждой нужной категории указываем строку .widget_content_tree li > a[href^="/articles/astronomija"]:before {background: url("../images/icons/add.png") no-repeat left 1px;},
где [href^="/articles/astronomija"] — ссылка не страницу куда ведет категория для которой задается иконка
Тут можно проявить фантазию и к примеру засунуть в каждую ссылку какой нибудь идентификатор, и уже по нему делать выборку. В общем простор безграничен))
Таким образом должно получиться примерно следующее:
Путь к иконке указываете свой, конечно же))
файл ../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;
далее дописываем
.widget_content_tree li > a:before { content:""; display: inline-block; position: absolute; width: 18px; height: 18px; top: 1px; left: 0; background: url("../images/icons/folder.png") no-repeat left 1px; }
где [href^="/articles/astronomija"] — ссылка не страницу куда ведет категория для которой задается иконка
Тут можно проявить фантазию и к примеру засунуть в каждую ссылку какой нибудь идентификатор, и уже по нему делать выборку. В общем простор безграничен))
Таким образом должно получиться примерно следующее:
... .widget_content_tree li{ margin-left: 0px; list-style: none; padding-left:20px; background: none; position: relative; } .widget_content_tree li > a:before { content:""; display: inline-block; position: absolute; width: 18px; height: 18px; top: 1px; left: 0; background: url("../images/icons/folder.png") no-repeat left 1px; } .widget_content_tree li > a[href^="/articles/astronomija"]:before {background: url("../images/icons/add.png") no-repeat left 1px;} .widget_content_tree li > a[href^="/articles/geologija"]:before {background: url("../images/icons/cancel.png") no-repeat left 1px;} .widget_content_tree li > a[href^="/articles/literatura"]:before {background: url("../images/icons/edit.png") no-repeat left 1px;} ...
#18
4 декабря 2014 в 10:10
А Вы уверены, что код здесь править надо? Может здесь?
/* ========================================================================== */ .content_categories + .filter-panel { margin-top: -21px; } .content_categories { padding:10px 15px; } .content_categories ul, .content_categories li { margin:0; padding:0; } .content_categories li { display: inline-block; height: 32px; line-height: 32px; font-size: 18px; padding-left: 20px; background: url("../images/icons/folder.png") no-repeat left center; margin-right: 10px; } .content_categories li a { color:#68809B; } .content_categories li a:hover { color:#d35400; } /* ========================================================================== */
Сегодня в 22:51
#19
4 декабря 2014 в 11:33
Gudan, я показал для виджета с перечнем категорий, для поля над фильтром сверху контента — да, нужно менять/дополнять в .content_categories
В целом смысл был продемонстрировать принципиальную возможность
В целом смысл был продемонстрировать принципиальную возможность
#20
4 декабря 2014 в 20:38
Val, костыль конечно, но за неимением лучшего и это можно использовать.
#21
4 декабря 2014 в 21:25
Делал по аналогии, но где-то накосячил наверное, так как папки исчезли, а иконки не появились. Может кто-то подаст руку помощи?
Куралесил в файле \templates\tseso\css\theme-content.css
Куралесил в файле \templates\tseso\css\theme-content.css
.content_categories ul, .content_categories li { margin:0; padding:0; } /************************/ .content_categories li { display: inline-block; height: 32px; line-height: 32px; font-size: 18px; padding-left: 20px; background: none; position: relative; } .content_categories li a { color:#68809B; } .content_categories li a:hover { color:#d35400; } .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
.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");}
#23
5 декабря 2014 в 09:33
Ой спасибочки, мил человек! Дай бог тебе здоровья. Сегодня попробую.
#24
5 декабря 2014 в 09:50
Зачет 100%. Хоть и костыль, но работает
- Предыдущая
- 1
- 2
- Показаны 16-24 из 24