pdoMenu — документация и примеры создания меню в MODX

pdoMenu - документация и примеры создания меню в MODX MODX Revo

Изменена: 31 июля 2020 в 14:38

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

Создавать динамическое меню в MODX мы будем при помощи сниппета PdoMenu (замена устаревшего Wayfinder) из пакета pdoTools. Перед тем как начать ознакомьтесь с основной документацией.

Документация по pdoMenu

pdoMenu по умолчанию принимает общие параметры pdoTools и некоторые свои.

Параметры

Название По умолчанию Описание
&parents Текущий ресурс Список родителей (категорий) для поиска результатов, указываются через запятую. Если поставить 0 (&parents=`0`) — выборка не ограничивается. Если хотите исключить id родителя (и его потомков) из выборки, укажите его через дефис.
&level 0 (не ограниченно) Уровень генерируемого меню.
&resources Список ресурсов для вывода в результатах, через запятую. Как и в случае с родителями, если id ресурса начинается с дефиса, то ресурс исключается из выборки.
&templates Список шаблонов для фильтрации результатов, через запятую. Если id шаблона начинается с дефиса, ресурсы с ним исключается из выборки.
&where Массив дополнительных параметров выборки, закодированный в JSON.
&displayStart 0 Включить показ начальных узлов меню. Полезно при указании более одного «parents».
&context Ограничение выборки по контексту ресурсов.
&showHidden 0 Показывать ресурсы, скрытые в меню.
&showUnpublished 0 Показывать неопубликованные ресурсы.
&previewUnpublished 0 Включить показ неопубликованных ресурсов, если у пользователя есть на это разрешение.
&hideSubMenus 0 Спрятать неактивные ветки меню.
&select Список полей для выборки, через запятую. Можно указывать JSON-строку с массивом, например &select=`{«modResource»:»id,pagetitle,content»}`
&sortby menuindex Любое поле ресурса для сортировки, включая ТВ-параметр, если он указан в параметре &includeTVs, например &sortby=`{«tvname»:»ASC»,»pagetitle»:»DESC»}`. Можно указывать JSON-строку с массивом нескольких полей. Для случайной сортировки укажите &sortby=`RAND()`
&sortdir ASC Направление сортировки: по убыванию или по возрастанию. Если оставить параметры &sortby и &sortdir пустыми, то сортировка будет идти по порядку ресурсов в &resources.
&limit 0 Ограничение количества результатов выборки.
&offset 0 Пропуск результатов от начала. Необходимо использовать вместе с явно указанным &limit
&checkPermissions Укажите, какие разрешения нужно проверять у пользователя при выводе ресурсов, например &checkPermissions=`list`.
&countChildren 0 Точный подсчет количества дочерних ресурсов каждой категории и вывод их в плейсхолдер [[+children]]. Делает дополнительные запросы в БД, поэтому по умолчанию отключен.
&toPlaceholder Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем вместо вывода на экран.
&plPrefix wf. Префикс для выставляемых плейсхолдеров.
&showLog 0 Показывать дополнительную информацию о работе сниппета. Только для авторизованных в контексте «mgr».
&fastMode 0 Быстрый режим обработки чанков. Все необработанные теги (условия, сниппеты и т.п.) будут вырезаны.
&cache 0 Кэширование результатов работы сниппета.
&cacheTime 3600 Время актуальности кэша, в секундах.
&scheme -1 Схема формирования url, передаётся в modX::makeUrl(), поэтому возможные варианты нужно смотреть здесь. Особый тип uri подставляет значение uri ресурса, без запуска функции.
&useWeblinkUrl 1 Генерировать ссылку с учетом класса ресурса.
&rowIdPrefix Префикс id=»» для выставления идентификатора в чанк.
&hereId id текущего ресурса для генерируемого меню. Нужно указывать только если скрипт сам его неверно определяет, например при выводе меню из чанка другого сниппета.
&includeTVs Список ТВ-параметров для выборки, через запятую. Например &includeTVs=`action,time` дадут плейсхолдеры [[+action]] и [[+time]].
&prepareTVs Список ТВ-параметров, с файлами из источников медиа, для которых нужно сгенерировать полные пути. Если установить &prepareTVs=`1`, будут подготовлены все ТВ, указанные в &includeTVs.
&processTVs Список ТВ-параметров, которые нужно обработать и вывести согласно их настроек в менеджере системы. Если установить &processTVs=`1`, будут обработаны все ТВ, указанные в &includeTVs. Замедляет работу.
&tvPrefix Префикс для ТВ-параметров.

Параметры шаблонов

Эти параметры устанавливают чанки, которые содержат шаблоны для генерации меню.

Название Описание
&tplOuter Чанк оформления всего блока меню. По умолчанию: @INLINE <ul [[+classes]]>[[+wrapper]]</ul>
&tpl Чанк оформления пункта меню. Если не указан, то содержимое полей ресурса будет распечатано на экран. По умолчанию: @INLINE <li [[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>
&tplHere Чанк оформления текущего пункта меню.
&tplStart Чанк оформления корневого пункта, при условии, что включен &displayStart. По умолчанию: @INLINE <h2 [[+classes]]>[[+menutitle]]</h2>[[+wrapper]]
&tplParentRow Чанк оформления родителя с потомками, не подпадающего под условия &tplCategoryFolder. Например: @INLINE <li class="submenu_wrapp [[+classnames]]"><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>
&tplParentRowHere Чанк оформления текущего документа, если он содержит потомков.
&tplParentRowActive Чанк оформления родителей с потомками в активной ветке меню.
&tplCategoryFolder Специальный чанк оформления категории. Категорией считается родитель с потомками, у которого указан пустой шаблон или rel="category" в поле link_attributes.
&tplInner Чанк оформления всего блока подпунктов меню. Если пуст — будет использовать &tplOuter. Например: @INLINE <ul class="submenu [[+classnames]]">[[+wrapper]]</ul>
&tplInnerRow Чанк оформления подпункта меню. Например: @INLINE <li class="submenu_item [[+classnames]]"><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>
&tplInnerHere Чанк оформления активного подпункта меню.

Параметры CSS классов

Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class=»», в отличие от плейсхолдера [[+classes]].

Название Описание
&firstClass Класс для первого пункта меню. По умолчанию: first
&lastClass Класс последнего пункта меню. По умолчанию: last
&hereClass Класс для активного пункта меню. По умолчанию: active
&parentClass Класс категории меню.
&rowClass Класс пункта меню.
&outerClass Класс обертки блока меню.
&innerClass Класс обертки блока подпунктов меню.
&levelClass Класс уровня меню. Например если укажите «level», то будет «level1», «level2» и т.д.
&selfClass Класс текущего ресурса в меню.
&webLinkClass Класс ресурса-ссылки.

Официальные примеры

Обычный вывод меню из корня сайта в один уровень:

[[pdoMenu?
    &parents=`0`
    &level=`1`
]]

Вывод с исключением определенных родителей и проверкой разрешений пользователя:

[[pdoMenu?
    &parents=`-10,-15`
    &level=`2`
    &checkPermissions=`load,list,view`
]]

Вывод меню сразу из двух родителей, с показом корневых точек:

[[pdoMenu?
    &parents=`10,15`
    &displayStart=`1`
]]

Вывод двух уровней ресурсов с подсчетом количества вложенных:

[[pdoMenu?
    &parents=`0`
    &level=`2`
    &tplInner=`@INLINE [[+wrapper]]`
    &tplParentRow=`@INLINE <li [[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a> ([[+children]])</li>[[+wrapper]]`
    &countChildren=`1`
]]

Официальную документацию можете почитать здесь. А сейчас разберем самые типовые вызовы меню.

Вызов PdoMenu

Вариант 1. На месте этого статического меню вызовем сниппет pdoMenu, для этого в дереве ресурсов, на вкладке “Элементы” в разделе сниппеты разверните ветку pdoTools, далее нажмите на pdoMenu левой кнопкой мыши (не отпускайте кнопку) и перетащите этот сниппет в место, где вы хотите вызвать меню, далее в открывшемся окошке заполните необходимые параметры и нажмите «Сохранить«.

Вариант 2. Просто вручную пишем вызов.

Типовые примеры

Обычное одноуровневое меню

К примеру у нас самое обычное меню, со следующей html разметкой.

<div class="menu">
    <ul class="top-menu">
        <li class="menu-item current-menu-item"><a href="/">Главная</a></li><!-- активный элемент -->
        <li class="menu-item"><a href="#">О компании</a></li>
        <li class="menu-item"><a href="#">Галерея работ</a></li>
        <li class="menu-item"><a href="#">Оплата и акции</a></li>
        <li class="menu-item"><a href="#">Отзывы</a></li>
        <li class="menu-item"><a href="#">Контакты</a></li>
    </ul>
</div>

В дереве MODX у нас множество страниц и вывести нужно только определенные ресурсы (к примеру id с 1 по 6). Получился вот такой код с вызовом меню:

<div class="menu">
    [[pdoMenu? 
    &parents=`0` 
    &level=`1` 
    &resources=`1,2,3,4,5,6` 
    &firstClass=`0` 
    &lastClass=`0` 
    &outerClass=`top-menu` 
    &hereClass=`current-menu-item` 
    &rowClass=`menu-item` 
    ]] 
</div>

где

  • &parents=`0` — список родителей (в моем случае я не ограничиваю выборку, так как я все равно выведу только определенные страницы);
  • &level=`1` — уровень вложенности (в данном случае ее нет);
  • &resources=`2,3,4,5` — список ресурсов которые нужно вывести в меню;
  • &firstClass=`0` — класс для первого пункта меню (не какого);
  • &lastClass=`0` — класс последнего пункта меню (не какого);
  • &outerClass=`top-menu` — класс обертки меню (подставляется в ul);
  • &hereClass=`current-menu-item` — класс для активного пункта меню (подставляется в li);
  • &rowClass=`menu-item`— класс одной строки меню (подставляется в li).

Bootstrap 4 выпадающее меню на MODX

На данный момент bootstrap версии 4.5: https://getbootstrap.com/docs/4.5/components/navbar/#supported-content

bootstrap 4 меню

Если убрать обвертку с бургером (кнопкой) и окошко поиска, то статический html код выглядит так:

<ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>

Вывод при помощи pdoMeny будет следующим:

[[!pdoMenu?
    &level=`2`
    &parents=`0`
    &firstClass=`0`
    &lastClass=`0`
    &rowClass=`nav-item`
    &tpl=`@INLINE <li[[+classes]]><a class="nav-link" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
    &parentClass=`dropdown`
    &outerClass=`navbar-nav ml-auto`
    &tplOuter=`@INLINE <ul[[+classes]]>[[+wrapper]]</ul>` 
    &tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdown">[[+wrapper]]</div>`
    &tplInnerRow=`@INLINE <a class="dropdown-item" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]`
    &tplParentRow=`@INLINE <li[[+classes]]><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]

Внимание! Заметил странный баг. Если указываем полную обвертку &tplOuter=`@INLINE <ul[[+classes]]>[[+wrapper]]</ul>`,то меню ведет себя странно. По этому лучше указывать &tplOuter=`@INLINE [[+wrapper]]`, соответственно вызов нужно обернуть в <ul class="navbar-nav mr-auto">Вызов</ul>.

Внедрение микроразметки schema.org в MODX меню

Простенькое меню с микроразметкой выглядит так:

<ul itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope">
   <li itemprop="name"><a itemprop="url" href="#">Link1</a></li>
   <li itemprop="name"><a itemprop="url" href="#">Link2</a></li>
</ul>

Вывод 2-х уровеневого bootstrap 4 меню со schema.org при помощи fenom

Вывод сделан, с учетом вышеописанного бага.

<ul class="navbar-nav mr-auto" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope">
{'!pdoMenu' | snippet : [ 
    'level' => 2, 
    'parents' => 0, 
    'firstClass' => '0', 
    'lastClass' => '0', 
    'rowClass' => 'nav-item', 
    'tpl' => '@INLINE <li itemprop="name"{$classes}><a class="nav-link" itemprop="url" href="{$link}"{$attributes}>{$menutitle}</a>{$wrapper}</li>', 
    'parentClass' => 'dropdown', 
    'tplOuter' => '@INLINE {$wrapper}', 
    'tplInner' => '@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdown">{$wrapper}</div>', 
    'tplInnerRow' => '@INLINE <a itemprop="url" class="dropdown-item" href="{$link}"{$attributes}>{$menutitle}</a>{$wrapper}',
    'tplParentRow' => '@INLINE <li{$classes}><a itemprop="url" class="nav-link dropdown-toggle" href="{$link}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{$attributes}>{$menutitle}</a>{$wrapper}</li>' 
]}
</ul>

Проверить правильность микроразметки можно в инструментах от яндекс и google.

Css код для тех кто хочет, чтобы меню выпадало при наведении курсора мышки.

.dropdown:hover > .dropdown-menu {display:block;}

Так же в следующем уроке я приведу вывод нестандартного многоуровневого (с неограниченной вложенностью) на bootstrap 3, это для тех кто не уловил суть.

Трехуровневое (многоуровневое) меню с валидной микроразметкой.

Данное меню из шаблона Eterna (для 2х уровней нужно выставлять атирбуты rel="category").

<nav class="nav-menu d-none d-lg-block" itemscope itemtype="http://schema.org/SiteNavigationElement">
  <ul itemprop="about" itemscope itemtype="http://schema.org/ItemList">
    {'!pdoMenu' | snippet : [
        'level' => 3,
        'parents' => 0,
        'firstClass' => '0',
        'lastClass' => '0',
        'tpl' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a href="{$link}"{$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>',
        'parentClass' => 'drop-down',
        'tplOuter' => '@INLINE {$wrapper}',
        'tplInner' => '@INLINE <ul>{$wrapper}</ul>',
        'tplInnerRow' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/></li>{$wrapper}',
        'tplParentRow' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>',
        'tplCategoryFolder' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList" class="drop-down"><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>'
    ]}
</ul>
</nav>

Совет. Комментируйте код своего меню <!—код меню—> делайте свой вывод, если что-то не работает сравнивайте его с закоментированным и правьте недочеты.

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 2 оценки, среднее 5 из 5 )
web-revenue.ru
Добавить комментарий

  1. Yulya

    Здравствуйте, скажите пожалуйста, как вывести этот меню, на основе bootstrap 4. Заранее благодарю.

    Ответить
    1. Алексей автор

      Здравствуйте. Форма комментирования ест код. Можете мне в вк написать, я вам там подскажу.

      Ответить
  2. Юрий

    Здравствуйте! Сделал меню по Вашему уроку. Все получилось, кроме одного момента:
    Не выводятся ссылки на том пункте меню, который является контейнером для подпунктов:
    [[pdoMenu?
    &level=`2`
    &parents=`0`
    &displayStart=`1`
    &outerClass=`nav navbar-nav mr-auto`
    &tplOuter=`@INLINE [[+wrapper]]`
    &tplInner=`@INLINE [[+wrapper]]`
    &tplParentRow=`@INLINE [[+menutitle]][[+wrapper]]`
    &tplParentRowActive=`@INLINE [[+menutitle]][[+wrapper]]`
    &tplInnerRow=`@INLINE [[+menutitle]][[+wrapper]]`
    ]]

    Можете подсказать, что неправильно сделано?

    Ответить
    1. Алексей автор

      Половину кода съела форма, так что не подскажу

      Ответить
  3. VoodooSystem

    Добрый день. Вопрос может кто сталкивался уже? Существует проблема в данный момент, при использовании сниппета pdoMenu (как и устаревшего аналогичного wayfinder), на странице перестает работать другой скрипт фильтрации данных css filters-list… Просто «отваливается» его функциональность, при статичном же меню все ок… что это? Несовместимость обработки php или конфликт классов какой-то?

    Ответить
    1. Алексей автор

      Скорее вы не правильно конструкцию меню выводите) Сделал более 50 сайтов с различными меню (в том числе с мега меню) и все норм. Да и вызывайте сниппет не кэшируемым.

      Ответить
      1. VoodooSystem

        Вы имеете ввиду неправильное распределение классов элементов ul и li? Но парадокс в том что другой скрипт на странице «отваливается» именно во время корректной работоспособности, именно после интеграции pdopage или wayfinder с 2 и 3-ех уровнями… тоесть меню работает, скрипт фильтрации галереи prettyphoto в это время нет =/ при обычном коде (без сниппета) все ок.

        Ответить
        1. Алексей автор

          PdoMenu ничего не добавляет в код — следовательно не может нарушить работу сторонних скриптов. Если не работает меню — значит вы не правильно его строите. Если отваливается какой нибудь скрипт — значит искать проблему нужно в другом месте.

          Ответить
  4. Денис

    Добрый день. Могли бы вы мне подсказать?

    Я делаю свой первый сайт на modx. Обрезал весь комментарий — не вижу проблемы на вашем сайте которая указана в комментарии.

    Ответить
    1. Денис

      Ребята. Нашел решение. Подсказали на форуме
      Нужно Добавить в head:

      Добавил, в теперь все работает как надо!

      Ответить
      1. Алексей автор

        Код из комментариев вырезается к сожалению. У вас не хватала тега base? правильно?

        Ответить
  5. Василий Парсалиди

    Добрый день как сделать меню из вот такого кода

    Ответить
    1. Alex87

      Думайте) Классы придется немного переписывать скорее всего. Вот урок посмотрите https://web-revenue.ru/modx-revo/mnogourovnevoe-menyu-s-ispolzovaniem-bootstrap

      Ответить
  6. Татьяна

    Добрый день.
    Подскажите, пожалуйста, можно ли сделать доп.меню для одного пункта из раздела основного?
    Например, имея вид меню:
    О компании
    Доставка и оплата
    Блог
    Сотрудничество
    Контакты
    Отзывы

    Сделать так, чтобы при нажатии на «Сотрудничество» выдавало доп вкладки, которые можно выбрать, вроде: «Оптовикам» , «Франшиза»?

    Никак не могу разобраться.
    Заранее благодарю.

    Ответить
    1. Alex87

      ну как вариант так (см. скриншот)

      Ответить
  7. Светлана

    Добрый день! Может быть сможете подсказать:
    у меня такое меню:
    [[pdoMenu?
    &parents=`149`
    &level=`1`
    &resources=`150,151,152`
    ]]
    Но есть еще ресурс с ID=153.
    И в результате у меня выводятся все 4 пункта, что не верно. Как мне вывести только нужные ресурсы?
    Спасибо!

    Ответить
    1. Alex87

      &resources=`150,151,152,-153`

      Ответить
  8. Владимир

    Подскажите а можно вот такое меню сделать — где первая позиция отличается от остальных?

    Меню
    Портфолио
    Отзывы
    Контакты

    Ответить
    1. Alex87

      Меню
      [[pdoMenu? &level=`1` &parents=`0` &firstClass=« &lastClass=« &tplOuter=`@INLINE [[+wrapper]]`]]

      Ответить
  9. Ярослав Васильченко

    Подскажите, пожалуйста, как можно реализовать при помощи pdoMenu такое меню:

    MENU

    Home
    Blog
    Gallery
    About
    Contact

    Ответить
    1. Алексей Мордовский

      MENU

      [[pdoMenu?
      &level=`1`
      &parents=`4`
      &firstClass=`0`
      &lastClass=`0`
      &tplOuter=`@INLINE [[+wrapper]]`
      &tplStart=`@INLINE [[+menutitle]][[+wrapper]]`
      ]]

      Ответить
    1. Alex87

      Тут все довольно сложно и не под всякое меню подгонишь, нужно код смотреть. А так либо переписывайте классы, либо просто статичное меню делайте)

      Ответить
      1. Larisa Bekasova

        Спасибо за быстрый ответ!
        Можно ещё небольшой вопросик, уже по поводу Bootstrap-кода, у меня меню при изменениях размера окна скачет и сдвигается, но при нажатии на него тут же становится нормальным. В чём там может быть беда, захламлённость css?

        Ответить
        1. Alex87

          Скорее всего дело в css.

          Ответить
  10. Ruslan Пушин

    Почему у меня не активная ссылка при заходе она должна быть другим цветом ?
    [[pdoMenu?
    &level=`2`
    &parents=`1,2,3,4,5,6,7`
    &displayStart=`1`
    &firstClass=`0`
    &lastClass=`0`
    &outerClass=`menu`
    &hereClass=`current-active`
    &parentClass=`0`
    &rowClass=`menu-item`
    &tplOuter=`@INLINE [[+wrapper]]`
    &tplInner=`@INLINE [[+wrapper]]`
    &tplStart=`@INLINE [[+menutitle]][[+wrapper]]`
    ]]

    Ответить
    1. Alex87

      Наверное прописать стили в css, для активного элемента)

      Ответить
  11. Роман Шкріба

    по поводу предыдущего сообщения о неприменяющемся меню, проблема в том что он выводи li без пробелов и text-alighn: justify не применяется к неразделенным «словам» а в моем случае инлайн блокам ли, в окне что вылазит при перестакивании чанка это можно поправить)

    Ответить
    1. Alex87

      Вы бы ссылку на сайт скинули, так не чего не могу сказать

      Ответить
  12. Роман Шкріба

    сделал, все супер, только стиль не применяется, тоисть он прописан все аналогично как на статическом праобразе загрузилось, такой же класс и иерархия ul.main_menu>li*6 но почемуто main_menu не срабатывает и прописаные параметры стилей не применяются.

    Ответить