[AdminTools] Пользовательские css и js файлы

Всем привет!
Вот решил доделать adminTools. Не хочется оставлять компонент на стадии beta.
В новой версии доработана тема «purple» и добавлены 2 системные настройки — admintools_custom_css и admintools_custom_js, которые позволяют подключать пользовательские файлы стилей и скриптов в админке. Например, можно легко заменить обычный скроллбар в дереве ресурсов на стильный.

Инструкция

Для этого нужно подключить jQuery и библиотеку nicescroll. Скачайте nicescroll.js, сохраните, например, в assets/components/admintools/js/mgr/custom/ (или любое другое место), откройте его и добавьте в конец код

Ext.onReady(
    function() {
        $("#modx-leftbar-tabpanel").parent('div').niceScroll({zindex:1000});
    }
);

Можно создать для этого новый файл, но такой вариант проще.

Теперь нужно добавить в системную настройку admintools_custom_js через запятую обе библиотеки

//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js,{adminToolsJs}custom/jquery.nicescroll.js

* Вместо assets/components/admintools/js/mgr/ можно использовать плейсхолдер {adminToolsJs}, а вместо assets/components/admintools/css/mgr/ — {adminToolsCss}.

Наслаждаемся.

Для подключения стилей используйте системную настройку admintools_custom_css.
На этом всё.

Сергей Шлоков

07 декабря 2016, 07:49

2 874

Поблагодарить автора Отправить деньги

Комментарии: 24

Алексей Федоров

07 декабря 2016, 14:06

Отлично! =))

Владимир

07 декабря 2016, 15:56

AdminTools — прекрасен! Спасибо!

Сергей Шлоков

08 декабря 2016, 12:29

Обратил внимание, что кто-то проставил минусы практически всем новостям на главной. Латентный модыксофоб?

Владимир

08 декабря 2016, 12:41

Это просто обиженные злой судьбой) Наслаждаются иллюзией своего влияния на что-то.

Сергей Шлоков

08 декабря 2016, 12:49

Повелитель минусов? Всемогущий профессор Хаус или генерал Бардак?

Павел Гвоздь

08 декабря 2016, 13:27

У меня всё норм, пока полёт без минусов. :)))

Владимир

10 декабря 2016, 12:21

Что то у меня css не подключилась…
файлик положил в

assets/components/admintools/css/mgr/themes/admincustom.css

там всего несколько строк и к тем уже и !important применял, но нет, сам файлик в админку не грузится

Сергей Шлоков

10 декабря 2016, 12:36

А подключаешь так?

{adminToolsCss}themes/admincustom.css

Владимир

10 декабря 2016, 12:38

нет, указываю адрес как в комменте выше, сейчас укажу {adminToolsCss}themes/admincustom.css

Сергей Шлоков

10 декабря 2016, 12:49

Да это без разницы.
Думаю, проблема в том, ты скорее всего меняешь тему. А кастомные стили подключаются перед стилями с темой. Поэтому твои стили перебиваются. Я то тестировал с обычными стилями админки, а про темы не думал, ведь их можно изменять в отдельном файле темы.
Быстрое решение — добавить айдишник body к твоим стилям для повышения приоритета. А я в следующей версии поменяю порядок загрузки.

#modx-body-tag.dark-theme #modx-navbar {
	background-color: black !important;
}

Владимир

10 декабря 2016, 13:02

ok, сейчас добавлю
PS не помогло. А подкорректировать я хотел

.panel-desc {
    background-color: #2789ce;
    border: none;
    border-radius: 0;
    color: #fff;
    line-height: 1.5;
    margin-top: 0!important; //тут зачем то аж 15 пикселей, ну очень криво, режет глаза ))
}

Сергей Шлоков

10 декабря 2016, 13:22

Создал файл с указанным содержимым. Всё получилось.
Проверь в исходниках страницы этот файл вообще подключается?

Владимир

10 декабря 2016, 13:27

Видимо нет. Подключены

<link href="/assets/components/admintools/css/mgr/main.css" rel="stylesheet" type="text/css" />
<link href="/assets/components/admintools/css/mgr/themes/dark.css" rel="stylesheet" type="text/css" />

сжатие css отключено

Сергей Шлоков

10 декабря 2016, 13:33

А ты точно прописываешь подключение в admintools_custom_css?

Владимир

10 декабря 2016, 13:39

вот скриншот, вроде явных следов криворукости нет
file.modx.pro/files/e/0/d/e0df3f66c74cacc6fbd696bdf8ad576c.jpg
заменил скриншот на новый

Владимир

10 декабря 2016, 13:47

вот кстати, в системных ключ admintools_admintools_custom_css я сейчас изменил на admintools_custom_css (создал новый) и только после этого появилось его описание
Но именно такой ключ и был после обновления.

PS после изменения ключа появилась и css-ка

<link href="/assets/components/admintools/css/mgr/themes/admincustom.css" rel="stylesheet" type="text/css" />

Сергей Шлоков

10 декабря 2016, 13:54

Ага, вот оно что. Это моя криворукость.

Владимир

10 декабря 2016, 13:57

Создал тестовый сайт, там ключи с лишним admintools_, как admintools_admintools_custom_css так и admintools_admintools_custom_js
Ну, вот оно сразу в глаза бросалось что словарь к этим ключам не подключался.
Сейчас кастомная css подключилась и все нормально.

Сергей Шлоков

10 декабря 2016, 14:11

Обновил компонент. Спасибо за баг тестинг.

Владимир

10 декабря 2016, 14:12

Спасибо за компонент!

Владимир

10 декабря 2016, 12:43

Подключаю как

{adminToolsCss}themes/admincustom.css

file.modx.pro/files/b/4/6/b46279ad7cca54cad94881e7add48f26.png
Но нет, не подключился

pro-marduh

18 апреля 2017, 10:20

вопрос нет ли у вас проблемы с отсутствием выделения активного пункта в дереве ресурсов в темной теме?
есть ресурс с большим деревом и когда иду по всем ресурсам добавить/проверить не хватает видеть где я нахожусь в данный момент

Сергей Шлоков

18 апреля 2017, 11:07

Вообще для ориентации удобней хлебные крошки. Кто-то вроде делал пакет с ними.
Для выделения добавьте в файл assets\components\admintools\css\mgr\themes\dark.css

.dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected,
.dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected span,
.dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected .icon {
	background-color: #343b4c;
}

pro-marduh

18 апреля 2017, 11:12

спасибо, выделился активный пункт
не совсем точно выразился, подумали в сторону хлебных крошек.
имелось ввиду что в подпунктах (акции к примеру) штук 30-40 ресурсов, и когда находишься где-то по середине, тяжко без выделения ориентироваться

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

[AdminTools] Пользовательские css и js файлы

Инструкция

Комментарии: 24

Здесь упомянуты