Как прописывать путь к иконкам

Автор Сообщение

didok

#1/20.10.2013 21:43
0

Аватар

Пользователи

Карма: +15

Как прописывать путь к иконкам в разделах проектов? На демо сайте не обнаружил иконок в левом  меню или их не должно там быть? 

Прописываю пути в виде абсолютного пути на хосте http://мой сайт.ru/docs/themes/bootlance/img/icons/hause.png и в виде ссылки браузер на файл: http://мойсайт/themes/bootlance/img/icons/hause.png иконка в разделе не выводится.

Права в каталоге 777

Делал по аналогии форума: images/icons/default/forums.png

Тоже не работает. На форуме иконка сменилась.

В мазине, так же, не удалось назначить иконку разделу.

Хотелось бы узнать подробнее о выводе иконок. 

Спасибо.

 

Сообщения: 156

zorca

zorca
#2/20.10.2013 22:19
0

Пользователи

Карма: +1

Лучше всего использовать иконочный шрифт из функционала Bootsrtrap. То есть в шаблоне нужно указать скажем

<span class="glyphicon glyphicon-home"></span>

И будет вам домик.

Все иконки тут: http://getbootstrap.com/components/#glyphicons

Этот метод удобен, прост и облегчит сайт. Шрифт с глифами скорее всего подгружается по-умолчанию на вашем сайте. Вообще почитайте про Bootstrap, там много чего интересного можно почерпнуть. Я уже практически с нуля сделал дизайн для своего проекта.

Правда как это применить к динамическим меню, это нужно поковыряться. В верхнем меню иконку можно подставить именно моим методом через редактирование header.tpl.

Сообщения: 81

didok

#3/20.10.2013 22:30
0

Аватар

Пользователи

Карма: +15

Zorca, большой респект. Пойду изучать bootsrap

Я к чему тему открыл с таким вопросом? В настройках разделов вшито включение на ссылки к иконкам.

Поэтому, я думал, это уже легко решаемая проблема.

Сообщения: 156

zorca

zorca
#4/20.10.2013 22:40
0

Пользователи

Карма: +1

Шаблон вывода категорий проектов в левом меню находится в файле: /modules/projects/tpl/projects.tree.tpl

Чтобы шаблоны, которые будем править, не изменялись при обновлении движка, создаем папку modules/projects в папке нашей темы и копируем туда все файлы из папки /modules/projects/tpl/

Теперь осталось только понять, как вывести в шаблоне необходимое поле с картинкой пункта меню. Там уже есть {ROW_HREF} {ROW_TITLE} {ROW_COUNT}. Скорее всего подставить  {ROW_ICON}, судя по инфе в шаблоне админки.

Добавлено 2 минуты спустя:

Ага, угадал. Теперь осталось подставить тег img и в него заключить {ROW_ICON}

Сообщения: 81

didok

#5/20.10.2013 22:46
0

Аватар

Пользователи

Карма: +15

zorca, спасибо. буду пробовать.

Сообщения: 156

zorca

zorca
#6/20.10.2013 22:48
0

Пользователи

Карма: +1

В поле можно просто абсолютный путь прописать, будет работать 100%. После действий, описанных выше конечно.

Добавлено 5 минуты спустя:

А если сделать еще умнее, то делаем так. В шаблон:

<span class="glyphicon glyphicon-{ROW_ICON}"></span>
А в поле в админке просто заносим название иконки из глифа и все!
Сообщения: 81

zorca

zorca
#7/20.10.2013 22:56
0

Пользователи

Карма: +1

Поправочка, вот так правильно:

<i class="icon-{ROW_ICON}"></i>

Код шаблона projects.tree.tpl в итоге такой:

<!-- BEGIN: MAIN -->
<ul<!-- IF {LEVEL} == 0 --> class="nav nav-list"<!-- ENDIF -->>
    <!-- IF {ROW_LEVEL} == 0 -->
    <li><a href="{PHP|cot_url('projects')}">{PHP.L.All}</a></li>        
    <!-- ENDIF -->
    <!-- BEGIN: CATS -->
    <i class="icon-{ROW_ICON}"></i><li<!-- IF {ROW_SELECTED} --> class="active"<!-- ENDIF -->><a href="{ROW_HREF}">{ROW_TITLE} ({ROW_COUNT})</a>
        <!-- IF {ROW_SUBCAT} -->
        {ROW_SUBCAT}
        <!-- ENDIF -->
    </li>
    <!-- END: CATS -->
</ul>
<!-- END: MAIN -->

А в поле Иконка (URL): заносим просто home скажем. Правда надо стили еще настраивать.
Сообщения: 81

didok

#8/20.10.2013 23:03
0

Аватар

Пользователи

Карма: +15

Zorca, спасибо вам.

Сообщения: 156

zorca

zorca
#9/20.10.2013 23:03
0

Пользователи

Карма: +1

Во все, вот так:

<!-- BEGIN: MAIN -->
<ul<!-- IF {LEVEL} == 0 --> class="nav nav-list"<!-- ENDIF -->>
    <!-- IF {ROW_LEVEL} == 0 -->
    <li><a href="{PHP|cot_url('projects')}">{PHP.L.All}</a></li>        
    <!-- ENDIF -->
    <!-- BEGIN: CATS -->
    <li<!-- IF {ROW_SELECTED} --> class="active"<!-- ENDIF -->><a href="{ROW_HREF}"><i class="icon-{ROW_ICON}"></i> {ROW_TITLE} ({ROW_COUNT})</a>
        <!-- IF {ROW_SUBCAT} -->
        {ROW_SUBCAT}
        <!-- ENDIF -->
    </li>
    <!-- END: CATS -->
</ul>
<!-- END: MAIN -->

Добавлено 45 секунд спустя:

В итоге иконка совпадает с цветом категории и все свойства имеет те же.

Правильная ссылка на доки по иконкам: http://getbootstrap.com/2.3.2/base-css.html#icons

Сообщения: 81

zorca

zorca
#10/20.10.2013 23:15
0

Пользователи

Карма: +1

Дайте ссылку на сайт в личку. Ха, тут нет лички, Кидайте в паблик.

Сообщения: 81

zorca

zorca
#11/20.10.2013 23:21
0

Пользователи

Карма: +1

Проверил на теме bootlance, все так же работает, только стили немножко изменились.

Добавлено 2 минуты спустя:

#1372 didok:

Не могу создавать новые сообщенияв личке. Могу только отвечать. Если не трудно, напишите мне.

 

Та же ерунда. ))) Могу создать сообщение, но не могу ввести пользователя. )))

Сообщения: 81

zorca

zorca
#12/20.10.2013 23:30
0

Пользователи

Карма: +1

Прописал для отделлочных работ домик и еще одну иконку для примера в другой категории.

Сообщения: 81

didok

#13/21.10.2013 01:30
0

Аватар

Пользователи

Карма: +15

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

Сообщения: 156

Rybak85

Алекс
#14/23.04.2014 14:46
0

Пользователи

Карма: 0

Подскажите пожалуйста, как можно выровнять в CSS стилях, чтобы иконки не выше названий разделов находились, а на одной строке меню с ними? И в каком именно файле нужно это править. Просто вижу их два bootstrap.css и bootstrap.min.css

Для примера пробовал меня стиль шрифтов тела body в файле bootstrap.css, но ничего не изменилось, а когда внес изменения в файл bootstrap.min.css, то изменилось. Для чего служит файл bootstrap.css ?

UPD: Вроде разобрался, как выровнять иконки на одну линию с пунктами меню. Прописал в файле bootstrap.min.css для класса

.nav-list [class^="icon-"], .nav-list [class*=" icon-"]

добавил значение:

float: left;

Затем в классе

[class^="icon-"], [class*=" icon-"]

Изменил значение

margin-top:5px;

Вроде все нормально выровнялось. Надеюсь это правильное решение )

P. S. Файл bootstrap.min.css имеет форматирование в одну строку - очень неудобно, спасает только поиск в Notepad++

Сообщения: 13

lanry

Андрей
#15/06.06.2014 21:53
0

Пользователи

Карма: +3

#3489 Rybak85:

P. S. Файл bootstrap.min.css имеет форматирование в одну строку - очень неудобно, спасает только поиск в Notepad++

bootstrap.css - обычный 

bootstrap.min.css - сжатый с тем же содержимым.

Используйте не минифицированный файл bootstrap.css. Переключить на него можно в bootlance.rc.php или одноименном файле вашей темы, если используете другую.

Но лучше добавлять свои стили в style.css, если не ошибаюсь, он более приоритетный и заменяет значения из bootstrap.

Сообщения: 36

vavahov

Владимир
#16/09.02.2016 13:36
0

Аватар

Пользователи

Карма: +4

Не получается вывести иконки категорий.

<i class="icon-{ROW_ICON}"></i>  - не работает. Прописываю путь к иконке в админке в итоге вместо иконки отображается путь или вообще ни чего.

Как сделать? Спасибо заранее.

Сообщения: 4

alexvlad

Влад
#17/09.02.2016 14:15
0

Пользователи

Карма: +85

#12861 vavahov:

Не получается вывести иконки категорий.

<i class="icon-{ROW_ICON}"></i>  - не работает. Прописываю путь к иконке в админке в итоге вместо иконки отображается путь или вообще ни чего.

Как сделать? Спасибо заранее.

<img src="{ROW_ICON}" />

Сообщения: 117