Дмитрий

Элементарная ситуация: на странице последовательно идут блоки с разным фоном (белый/серый/белый/серый), но содержимое этих блоков должно находиться в контейнере с фиксированной шириной. Как быть? Вот так:

<div class = "wrapper bg-grey">
    <div class = "container">
        ...
    </div>
</div>

Это позволит в конечном итоге избежать ненужных зависимостей между блоками, даже если потребуется перенести их в другое место на странице.
А к body применять стили вообще не стоит, кроме некоторых базовых, которые будут наследоваться всеми элементами.

Нет такого инструмента.
Таблицу можно прикрепить в виде документа, или в виде скриншота.
Других вариантов нет.

Дело в том, что у вас само окно вложено в слой с оверлеем.
Вынесите оверлей в отдельный слой, и по клику на него реализуйте скрытие и окна и оверлея:

$('.wall_moadl').click(function(){
    $(this).fadeOut();
    $('.modal_content').fadeOut();
});

Разметка:

<div class="wall_moadl">... </div>
<div class="modal_content">...</div>

xPDO вполне позволяет работать с произвольными таблицами из БД. Ссылка для ознакомления.
Пример:

$sql = "SELECT * FROM modx_users WHERE active = 1";
// Вариант 1.
$statement = $modx->query($sql);
$users = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($users as $user) {
    print $user['username'] .'<br/>';
}
// Вариант 2. Если не нужно зачитывать данные в массив
foreach ($modx->query($sql) as $user) {
    print $user['username'] .'<br/>';
}

Если же вы хотите работать с данными из своей таблицы как с объектами MODX, то вам нужно разобраться с пакетами. Ссылка.

Самый простой метод: получить информацию из $_SERVER['HTTP_USER_AGENT']. Эта суперглобальная переменная содержит строку вроде такой:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Её можно распарсить, чтобы конкретно определить ОС, версию браузера и устройство, и на основе этого слепить что-то вроде фингерпринта, идентификатора устройства пользователя. Записать в базу, затем проверять. Изменилось - выводим предупреждение.
Это если очень упростить, в реальной работе нужно продумать всё тщательнее.

.menu-main__item {
    display: block;
    background-color: green;
    transform: rotate(-90deg);
    padding:20px;
    transform-origin:center;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/t...

Отвечу вам снова)
Для работы с MIGXdb есть сниппет migxLoopCollection, который поставляется с MIGX. С его помощью можно выводить кастомные записи из MIGXdb.
Примеры из документации:

[[!migxLoopCollection?
&packageName=`mygallery`
&classname=`myGallery`
&sortConfig=`[{"sortby":"pos","sortdir":"ASC"}]`
&where=`{"resource_id":"[[*id]]","published":"1"}`
]]

Если нужна какая-либо более плотная работа на уровне PHP, посмотрите исходный код этого сниппета и сам класс migx.

Исходя из вашей разметки:
Внутрь блока со вложенным меню добавить обёртку, которая будет стилизовать фон, отступы и т.д.
Сам блок растянуть по высоте при помощи padding и отпозиционировать так, чтобы он располагался вплотную к ссылке.
Блоку добавить display:block на ховере, чтобы он не пропадал.

Да, от jQuery сейчас отказываются, потому что при в целом довольно слабой функциональности (по-сути, обилие синтаксической карамели вместо реальных функций) он нагружает страницу и тянет за собой не лучшие подходы в разработке фронтенд-части, когда на каждый чих подключается по стороннему плагину весом по 250 кб каждый.
Большую часть тривиальных манипуляций можно решить без jQuery, на чистом JS, и довольно просто. Примеры.
Для более сложной логики есть современные инструменты вроде Vue.JS и React.
Так что в целом да, jQuery лучше уже не использовать.