Разделы

Прямой эфир

Блоги

Топ

Wayfinder: очень прошу помочь с подлючением своего css

Вопросы

Всем привет!
Я не совсем новичок, css пользую, html тоже, php чат мною написанный есть, то есть зайчатки присутствуют :). У меня такой вопрос:

Нужно вставить верхнее горизонтальное меню из картинок.
Я вызываю wayfinder &startid=0

Как к нему привязать такие html и css:

<div class="menu">
		<ul>
			<li><a href="#"><img src="images/billa_11.png"></a></li>
			<li><a href="#"><img src="images/billa_13.png"></a></li>
			<li><a href="#"><img src="images/billa_15.png"></a></li>
			<li><a href="#"><img src="images/11_02.png"></a></li>
		</ul>
</div>

.menu
	{
	height:75px;
	text-align:right;
	margin-right:50px;
	}
.menu li {display:inline}

Как сказать сниппету, что стиль использовать такой-то, а код такой-то?

Что делает [+wf.class+]?

Ребята, помогите, пожалуйста!

Спасибо за помощь!

вопрос css+wayfindre

0
5 марта 2010, 12:45
otmoroz095

За несколько часов никто даже не написал, вот почему modx так популярен

otmoroz095

5 марта 2010, 16:41
↓

А во второй половине дня редко кто заходит… :)
Попробую помочь.

Существует внешний контейнер меню, называется outerTpl
Пишешь в вызове &outerTpl=`super-puper`. Создаешь чанк super-puper и в него помещаешь код


<div class="menu">
               <ul[+wf.classes+]>[+wf.wrapper+]</ul[+wf.classes+]>
</div>

Существует единый шаблон для каждого пункта меню, называется rowTpl
Пишешь в вызове &rowTpl=`para-truper` потом создаешь чанк para-truper и в него пишешь код в твоем случае такой:


<li[+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]">
<img src="images/billa_11.png">
</a>
</li[+wf.classes+]>

Теперь тебе нужно, чтобы для каждого пункта меню выводилось свое изображение. Для этого нужно создать параметр TV в формате image, привязать его к шаблону страниц которые будут выводится через меню, а путь к файлу png в шаблоне пункта заменить на вызов с именем этого TV. То есть если TV называется image — нужно прописать:

<img src="[*image*]">

После этого заходишь на каждую страницу, которую выводишь в меню и добавляешь туда свою графическую кнопку через поле TV параметра.

Вроде так.

banev

5 марта 2010, 17:59
↑
↓

спасибо! посмотрю на работе

otmoroz095

6 марта 2010, 13:25
↑
↓

стили как-то криво работают! Напишите, плиз что на что заменяется!

outer=ul

row=li

а inner и innerRow?
ul li ul и ul li ul li? :)

otmoroz095

9 марта 2010, 15:11
↓

прямо в чанках замените

[+wf.classes+] на class="moi_class"

и не мучайтесь.

abadello

9 марта 2010, 17:50
↑
↓

Спасибо! вот внятный ответ! :)

otmoroz095

10 марта 2010, 12:15
↑
↓

Но не забывайте что этот метод отчасти противеречит концепции системы.
Так же вы лишаете себя определенной функциональности.
Допустим вы не можете пометить уникальным CLASS'ом текущий активный элемент меню.

abadello

10 марта 2010, 13:43
↑
↓

а как же шаблон hereTpl?

banev

10 марта 2010, 14:07
↑
↓

а куда он в этом случае выведется?

abadello

10 марта 2010, 14:17
↑
↓

на место текущего пункта меню, точно так же с принудительным выставлением класса.

banev

10 марта 2010, 14:23
↑
↓

как-то все сложно — по-моему легче сделать меню чанками, Wayfinder же всего-лишь дерево документов выводит :)

otmoroz095

10 марта 2010, 18:00
↑
↓

Да нет, все как раз довольно просто, главное понять логику процесса. Кроме того есть куча параметров (все в документации) с помощью которых можно реализовать гибкие настройки.

А как секретарша будет добавлять новые пункты в меню «на чанках»? :)))

banev

10 марта 2010, 18:15
↑
↓

я ей так добавлю!!! :) я понял, спасибо!
Значит [+wf.classes+] подставляет классы, которые я присвоил, а wf.id id'шники? ну и с шаблонами ясно

otmoroz095

11 марта 2010, 12:33
↑
↓

id страницы для ссылки в каждом пункте подставляет [+wf.link+]

[+wf.classes+] подставляет классы, которые прописываются в вызове Wayfinder`а, например:

rowClass — CSS-класс для всех пунктов меню
selfClass — CSS-класс текущего пункта меню
parentClass — CSS-класс документов-контейнеров

А например, если у тебя меню из четырех уровней можно использовать
levelClass — CSS-класс для каждого уровня меню
и каждый уровень в меню выделить своим цветом.

Комбинаций и вариантов много.

banev

11 марта 2010, 18:35
↑
↓

Здеся подробно описано =)

Если вкратце, то outerTpl это «обертка» для всего меню, rowTpl — обертка для пункта меню.

А вот все остально — смотрите по описанию, возможно вас примеры там вдохновят.

Конкртено innerRowTpl — это шаблон для всех элементов чей уровень больше 1, т.е. элементов, находящихся в папках.