Foren / National / Russian / Скины и дизайн / Butterfly - Современная тема админки для Cotonti CMF

Легкая, простая и адаптивная тема админки на базе Pico CSS

Edward
#1 21. März 2026, 20:06

Members

Thanked:
31 mal

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

 

🎨 Легковесный CSS фреймворк Pico CSS + SVG Tabler Icons

📱 Адаптивная верстка (Mobile-first)

🌓 Cветлая/темная темы

🎯 Flexbox/CSS Grid макеты

♿ WCAG 2.1 Level AA accessibility

🚀 Оптимизированная производительность

💅 Семантичный HTML5

 

Точно работает в Cotonti >= 0.9.23.

В более старых версиях может быть проблема (в 19 точно не работает), т.к. менялись функции отрисовки форм.

В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀

Есть желающие, а главное умеющие в UX/UI буду рад помощи.

Тема на Github:

https://github.com/Edd-G/cotonti-butterfly-admin-theme

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Thanked: Kabak (21. März 2026)
Kabak
#2 21. März 2026, 20:14

Members

Thanked:
48 mal

Что добавили по сравнению со стандартной админкой ?
Edward
#3 22. März 2026, 13:39

Members

Thanked:
31 mal
  • адаптив, в т.ч. таблицы
  • темная тема
  • новый стиль уведомлений (toast)

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

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Thanked: vpktz (5. Mai 2026)
Kort
#4 23. März 2026, 09:21

Administrators

Thanked:
227 mal

#48628 Edward: 
В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀

Привет, а что не так с формами? Почему Pico CSS? Надо бы и на сайт выложить в "Файлы". Стукни в личку если надо помочь с переводом)

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Edward
#5 24. März 2026, 16:22

Members

Thanked:
31 mal

Привет!

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

PicoCSS просто тест, решил проверить, как он.

Простой, легкий, ничего лишнего. Можно даже class-less использовать, т.е. чистый семантичный html, что-то вроде

<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>

Файлы - ок, выложу, спасибо за предложение)

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Kort
#6 25. März 2026, 07:10

Administrators

Thanked:
227 mal

Ну, семантика семантичность это вообще такая штука. Ее что нет, что есть -- никакой разницы. 

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

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

SED.by - создание сайтов, разработка плагинов и тем для Котонти

Dieser Beitrag wurde von Kort (am 25. März 2026, 08:11, vor 1 Monat) bearbeitet
Edward
#7 25. März 2026, 15:48

Members

Thanked:
31 mal

#48633 Kort: 

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

Так именно этим я занят. Выложил тему и выразил надежду на помощь в улучшении UX.

Никаких споров о вкусах.

Если вы не видите необходимости, значит вопрос не к вам.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Kort
#8 25. März 2026, 18:56

Administrators

Thanked:
227 mal

Хмм. Так я вопроса что-то и не увидел. Как и ответов на свои.

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Edward
#9 26. März 2026, 09:43

Members

Thanked:
31 mal

Привет!

Я читал по диагонали)

Вопрос - имею ввиду запрос на помощь в приведении в порядок форм.

Что не так с формами на вскидку:

  • отсутвуют required для обязательных , вместо этого такое требование отмечено рядом подписями
  • нет более ясных подсказок - placeholder
  • нет логической группировки fieldset, legend
  • кое-где жестко зашиты размеры size, cols, rows

Касательно UX/UI

Например, форма добавления группы юзеров.

Что есть сейчас:

Что здесь не так:

  • Что такое уровень?
  • Что значит "Пропустить права для этой группы"?

Что примерно ожидает домохозяйка, когда заходит поадминить:

Также внутри генерации элементов форм местами зашито форматирование, теги типа br, заданы стили.

Но это реашаемо костылями. Понятно, что тянется из прошлого века и выпиливается по мере возможностей.

Вообщем это был запрос на помощь с приведением в порядок форм.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Kort
#10 26. März 2026, 11:54

Administrators

Thanked:
227 mal

Ок, все, что дальше, читаем слева направо и сверху вниз)

Так а помогать-то тебе зачем? Ну вот ты сделал отличную админку (с какого хрена на Pico CSS, правда, не знаю, но это так, риторический вопрос). Запилил там все по-джедайски. Я только не совсем понял про 'required' и про костыли. Валидатор в админке "серверный" для всех форм, так что пустое имя и так не прокатит, и пояснений что это обязательное поле вполне достаточно. Зачем там еще JS-проверки? Если я правильно понял.

Если костыли это ресурсные строки и функции типа cor_rc_modify(), то это не костыли, а функционал, который позволяет тебе кастомизировать разметку и использовать классы для своего CSS-фреймворка. В дефолтных, видимо, можно найти "некрасивую" разметку и стайлзы, но это либо просто не мешает отлаживать какой-то функционал или просто не мешает. Я многие дефолтные ресурсы переопределяю и не чувствую себя униженным)

То, что находится в папке system/admin/tpl, это заготовка, которая должна одинаково подходить для:

  1. Разработчика движка (минимум всего + кроссбраузерно)
  2. Разработчика админки для сайта (п. 1 + максимально универсально)

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

Не надо считать, что system/admin/tpl это, @#$%ь, готовое решение, особенно для домохозяек. Как, собственно, и сам движок. Ты скачал конструктор, выбрал на свой вкус админку и сделал сайт под свои требования. Зашло? Со временем наработал свои плагины, собрал свою админку, поделился с другими и пошел дальше по схеме.

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

На всякий случай, всем миль пардон))

P.S. Не забудь про выкладку.

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Edward
#11 26. März 2026, 21:02

Members

Thanked:
31 mal

Да, значит я верно прочитал, хоть и по диагонали. Запрос точно был не вам адресован)

Атрибут required, как пример, элементарная семантика, встроенная в браузеры валидация. При чем здесь js.

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

Движок как раз и генерит "мусор" из коробки: теги, размеры полей, намертво вкорячен bootstrap/jquery - это ли не свистоперделки?

Честно говоря не понял, от чего так бомбит)

Сворачиваюсь на этом с улучшениями.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Kort
#12 26. März 2026, 21:23

Administrators

Thanked:
227 mal

Меня не бомбит совершенно. Но хозяин - барин. 

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Sergeich
#13 23. April 2026, 16:28

Editors

Thanked:
17 mal

Выглядит очень даже! Надо поползать внутри. 
Kabak
#14 4. Mai 2026, 18:40

Members

Thanked:
48 mal

Благодарю автора темы 👍️
vpktz
#15 5. Mai 2026, 20:28

Members

Thanked:
10 mal

Вау, круто. Я бы хотел такую себе, эргономично, комфортно