«cPanel» - шаблон административной панели управления для CMS Cotonti Siena. Простой скин админки, который не перегружен элементами интерфейса. Шаблон бесплатный, его работоспособность проверена на актуальном релизе движка котонти, версии 0.9.24.2.

• Автор разработки шаблона: Alex300 (Алексей Кальнов)
• Обзор установки шаблона и составил инструкцию: webitproff

Ключевые особенности основного шаблона «cPanel» (Си-Панель):

1. Использует Bootstrap v.3.4

Bootstrap - это самый популярный фреймворк HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете.

2. Использует Font Awesome v5

это интернет-библиотека иконок и набор инструментов, которыми пользуются миллионы дизайнеров, разработчиков и создателей контента.

3. Cotonti lib

Библиотека компонентов на php, которая расширяет текущий API CMF Сotonti.
"Cotonti lib" предоставляет дополнительные функции для создания новых модулей и плагинов, а также необходима для совместимости некоторых дополнительных расширений от разработчика Alex300.

4. К шаблону, прилагается одноименный модуль cpanel,

который расшряет возможности стандартной панели администратора Cotonti.

При установке, нужно внимательно отнестить к требованиям и последовательности шагов.

1. Подготовка. Совместимость и требования | Compatibility & Requirements:

• PHP v.7.4+
• Cotonti v.0.9.24.2

Собираем в кучу всё необходимое:

1.1 Архив "Cotonti-master.zip",

в котором актуальный код движка Cotonti (если еще не установлен)
https://github.com/Cotonti/Cotonti

1.2 Архив "cotonti-cpanel-master.zip"

из актуального репозитория автора  
https://github.com/Alex300/cotonti-cpanel

1.3 Архив "cotonti-lib-master.zip"

из актуального репозитория автора  
https://github.com/Alex300/cotonti-lib

1.4 Архив "bootstrap-3.4.1-dist.zip",

в котором библиотека "Bootstrap" версии 3.4.1
Скачиваем архив с официального сайта
https://getbootstrap.com/docs/3.4/getting-started/

Там три способа скачать, но качают они разное.

Нам нужна кнопка на скачивание "Download Bootstrap" под текстом:

"Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included."

1.5 Архив "fontawesome-free-5.15.4-web.zip",

в котором библиотека "FontAwesome" версии 5 https://fontawesome.com/v5/download

В итоге, собирая всё в кучу, у вас должно получится 5-ть новых скачанных архивов.

2. Поэтапная и последовательная загрузка на сайт через FTP-менеджер.

Создаем папку, например с именем "theme-cpanel-install-pack" в которой сделаем "пакет" установки:

2.1. Комбинацией клавишь клавиатуры ("Ctrl" + "A") выделяем все архивы, и правым кликом мышки, вызываем контекстное меню проводника. Жмем "Распаковать каждый архив в отельную папку".

Теперь все архивы удаляем, больше они не понадобятся.
В нашем пакете, у вас должно получится 5 папок, смотрите скриншот и сразу устанавливаем, в каком порядке, мы будем обращаться к папкам. Это важно, соблюсти последовательность при закачивании, потому, что затем вам будет проще, уже устанавливать этот "пакет" в таком же порядке. Запоминаем, что к папке "cotonti-cpanel-master" как и к установке самого шаблона «cPanel» приступаем завершающим шагом, каждого этапа инструкции.

    1. "Cotonti-master"
Рекомендуется использовать актуальный релиз "кота".
Если вы по каким-то причинам не можете или не желаете обновлять движок Cotonti, - значит этот шаг пропускаем.
Если обновляемся, то согласно инструкции "Обновление сайта на Cotonti Siena".

    2. "bootstrap-3.4.1-dist"
2.1. В корне сайта находим каталог "lib" и в нем создаем папку "bootstrap"
2.2. В скачаном архиве вы найдете три папки, - "css", "fonts" и "js" - закачиваем на сайт в "lib/bootstrap".

Обращайте внимание на скриншоты в этой инструкции. Кликая по ним, вы можете их видеть в полном размере, чтобы наглядно увидеть то, что "сходу" новичку сложно понять, или, что не исключенно, может я не правильно подбираю слова, чтоб максимально просто и подробно расписать всё это руководство.

    3. "fontawesome-free-5.15.4-web"
2.1. В этом же каталоге "lib",  создаем папку "font-awesome".
2.2. На компьютере, в папке "fontawesome-free-5.15.4-web" выделяете нам нужные три папки, - "css", "webfonts" и "js" - закачиваем на сайт в "lib/font-awesome".

Смотрите скриншот и обращайте всегда внимание на потери файлов при передаче, если что не закачалось, - докачиваем.

    4. "cotonti-lib-master"

В дереве каталогов, из папки "lib/font-awesome" выходим, поднимаясь в каталог корня сайта.

В левой части окна FTP-менеджера, я использую "FileZilla Client", отрываем папку "cotonti-lib-master". Выделяем папки "lib", "plugins" и файл "cli.php" (см. скриншот) и закачиваем их в корень сайта.

    5. "cotonti-cpanel-master"

Всё также, в левой части окна FTP-менеджера, отрываем папку "cotonti-cpanel-master".

Выделяем папки "modules" и "themes". Их также закачиваем в корень сайта.

Итоги этапа подготовки.

Мы выполнили 5-ть шагов, закачали на сайт необходимые файлы и библиотеки для установки шаблона/темы панели управления.

Установка | Installation:

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

Подчеркну, установка шаблона тестировалась на PHP v.7.4+, а именно на версии PHP 8.2.12, и актуальном релизе Cotonti v.0.9.24.2, на профессиональном виртуальном хостинге от beget.com.

 

В самом конце установки будет ряд мелких ошибок, которые легко устраняются.

Поехали.

1. Плагин "Cotonti Lib"

Находим его в расширениях, путь:

Управление сайтом - Расширения - Cotonti Lib

Устанавливаем плагин и забываем про него.

2. Модуль "cpanel"

Этот модуль вы найдете в самом верху списка расширений под именем "Admin Control Panel"

Управление сайтом - Расширения - Admin Control Panel

Устанавливаем модуль и забываем про него, но совсем не на долго.

3. Файл конфигурации системы "config.php".

В корне сайта есть папка "datas", а в ней файл "config.php", - открываем его для правки.

Здесь, ориентировочно, в строке №53, находим переменную $cfg['admintheme'] = ''; прописываем как это сделано ниже

$cfg['admintheme'] = 'cpanel';

Файл конфигурации сохраняем и закрываем его.

4. Главная страница административной панели управления.

Если у вас установлен плагин для аватарок "userimages", - то увидите примерно такое.

Warning: Undefined variable $L in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 5

Warning: Trying to access array offset on value of type null in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 5

Warning: Undefined variable $L in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 8

Warning: Trying to access array offset on value of type null in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 8

Warning: Undefined variable $L in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 11

Warning: Trying to access array offset on value of type null in 
/home/***/public_html/plugins/userimages/inc/userimages.resources.php on line 11

Не робеем! Ща поправим

Открываем для правки наш файл по адресу:

/public_html/plugins/userimages/inc/userimages.resources.php

в двух местах, в 5-ой и 8-й строке находим

'.$L['Delete'].'

меняем его на

'. Cot::$L['Delete'] .'

в 11 строке находим

alt="'.$L['Avatar'].'"

меняем его на

alt="'. Cot::$L['Avatar'] .'"

Сохраняем и закрываем в редакторе наш файл userimages.resources.php.

Перезагружаем главную страницу админки, - наш "уорнинг" пропал.

5. Нет аватара администратора в админке

Теперь, если ваш аватар в правом вверхнем углу, если так и не появился.

Подчеркну, это если вы используете плагин "из коробки", - «User Images», и у вас не установлен модуль "Files", который тоже от разработчика этого шаблона.

Открываем файл cpanel.header.tags.php, он по адресу

public_html/modules/cpanel/cpanel.header.tags.php

находим строку:

require_once cot_incfile('userimages', 'plug');

и сразу за ней добавляем строку:

require_once cot_incfile('userimages', 'plug', 'resources');

Уверен, аватар подключился как следует. Сам проверял.

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

6. Иконки "fontawesome" не коректно отображаются.

Открываем файл ресурсов темы "cpanel.rc.php", он у нас по адресу:

/public_html/themes/admin/cpanel/cpanel.rc.php

Находим строку №24, которая содержит код:

Resources::setAlias('@fontAwesome.css', 'lib/font-awesome/css/font-awesome.min.css');

и в этой строке меняем название подключаемого файла font-awesome.min.css на all.min.css

Сохраняемся и закрываем файл.

Снова перезагружаем главную, - иконки "Font Awesome v5" заработали как нужно.

7. Не работают должным образом другие страницы админки.

Находясь на главной странице в админке, жмем по ссылкам в меню, например "Конфигурация" и при переходе по ссылке на эту страницу получаем бесконечный "спинер".

можно закомментировать в header.tpl строку:

<div id="page-loader" class="fade in"><span class="spinner"></span></div>

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

Так что же делать?

Жмём комбинацией клавишь клавиатуры ("Ctrl" + "U")* и смотрим исходный код.

* работает для "Mozilla Firefox" и "Google Chrome"

Идем в самый низ страницы, и там примерно такая картина:

Warning: Undefined variable $adminpath in 
/home/***/public_html/modules/cpanel/cpanel.admin.tags.php on line 57

Fatal error: Uncaught TypeError: count(): Argument #1 ($value) must be of type Countable|array, null given in 
/home/***/public_html/system/functions.php:1921
Stack trace:
#0 /home/***/public_html/system/functions.php(1921): count(NULL)
#1 /home/***/public_html/modules/cpanel/cpanel.admin.tags.php(57): cot_breadcrumbs(NULL, false, true)
#2 /home/***/public_html/system/admin/admin.main.php(95): include('/home/***...')
#3 /home/***/public_html/admin.php(24): include('/home/***...')
#4 {main}
thrown in /home/***/public_html/system/functions.php on line 1921

Вообще ничего страшного. И не нужно паники. Сейчас будете смеяться насколько просто решается.

Самое время вспомнить про модуль "Admin Control Panel".

Через ФТП-менеджер, отрываем наш cpanel.admin.tags.php

/public_html/modules/cpanel/cpanel.admin.tags.php

находим строку № 57

$crumbs = cot_breadcrumbs($adminpath, false, true);

и меняем перенную массива $adminpath на $adminPath.

По-сути, мы здесь букву "p" из нижнего регистра перевели в верхний.

Кому охота знать об этом больше, - смотрим исходный код тут.

Цитата от раработчика шаблона

Для разработчиков:

Вы можете в полной мере использовать возможности разметки, которые предоставляет Bootstrap.

Контент вашего расширения будет выводиться в панель по-умолчанию. Вы можете отключить такое поведение при необходимости.

Добавление пунктов меню в панели управления:

Модули и плагины могут добавлять свои пункты в меню панели управления.

Для этого необходимо создать файл расшиения с хуком header.tags который внесет нужные изменения в массивы элементов меню:

cpanel::$menu['top'] - Верхнее меню

cpanel::$menu['side'] - Боковое меню

cpanel::$menu['user'] - Меню пользователя

cpanel::$useDefaultPanel = true; - выводить панель-по умолчанию при выводе контента

cpanel::$panelTitle; - свое название для панели по-умолчанию

 

Продолжу от себя.

Как отредактировать ссылки в шаблоне, в меню пользователя, в горизонтальном и левом боковом?

Сначало, лучше, кликнуть по скриншоту ниже и расмотреть его в полном размере

Грубо говоря, у нас три меню, а значит и три масива, открываем cpanel.header.first.php

public_html/modules/cpanel/cpanel.header.first.php

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

    CPanel::$menu['user'] = array(
        'my_page' => array(
            'title' => 'My page',
            'url' => cot_url('users', 'm=details'),
            'icon_class' => 'fa fa-user',
        ),
        'profile' => array(
            'title' => Cot::$L['Profile'],
            'url' => cot_url('users', 'm=profile'),
            'icon_class' => 'fa fa-cog',
        ),
    );

где, код:

        'profile' => array(
            'title' => Cot::$L['Profile'],
            'url' => cot_url('users', 'm=profile'),
            'icon_class' => 'fa fa-cog',
        ),

это массив ссылки, которая помещена в массив CPanel::$menu['user'].

Терерь вы можете эту ссылку отредактировать или создать свою новую, добавив код копированием и редактированием под свои нужды.

Всё точно также с массивами верхнего горизонтального меню и бокового, где стрелочками на скриноте я вывел названия массивов.