Недавно Janitor AI обновил названия своих классов и связанные с ними CSS-стили, что затронуло биографии и описания ботов.

Обновлённые названия классов и CSS-селекторы, опубликованные в этом посте, были определены путём изучения исходного кода фронтенда Janitor AI с помощью DevTools браузера. Они предоставлены исключительно для косметического оформления и творческой кастомизации сообществом.

Эти названия классов официально не документированы и не поддерживаются Janitor AI и могут измениться или перестать работать в любой момент без предупреждения после обновления сайта.

Эта информация опубликована исключительно в образовательных и творческих целях.
Никакие проприетарные данные, пользовательские данные или учётные данные не были получены или извлечены.

Это никоим образом не связано с JanitorAI, не одобрено и не утверждено им и его персоналом.

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

Если проблемы сохраняются, попробуйте спросить в Discord J.AI, так как с моей стороны я мало что ещё могу сделать для помощи.

Часто используемые:

div _characterInfoMarkdownContent_123vi_223

_input_jv6cc_126

Сейчас ищу ещё.
Этот список постоянно обновляется по мере обнаружения новых названий классов. Проверяйте позже на наличие дополнений.

• ~101 запись класса
  

• 2026-28-04
  - Обновлено 4+ классов благодаря permanent
  - Список упорядочен от A до Z
  

• 2026-29-04
  - Добавлено <p class="class_name"></p> в раздел личности
  - Открыто Определение
  

• 2026-30-04
  - Обновлён _card_13n8k_2
  - Добавлен _cardTitle_13n8k_402
  

• 2026-01-05
  - Удалены устаревшие классы
  ( _viewAllStandalone_mi467_68, _segmentActive_kwwol_63, _segmented_kwwol_51, _content_1chl9_11, _characterMenu_128g5_496, _count_kwwol_25, _count_mi467_31)
  

• 16/05/2026
  - Обновлены изменённые классы
  ^Спасибо ещё раз, permanent(puppy)^
  

• 2026-19-10
  - Удалены устаревшие классы
  - Обновлены классы-замены

A

_appModalBadge_xxqvx_134

_appModalContent_xxqvx_85

_appModalCta_xxqvx_195

_archiveButton_di476_217

_autoResizeTextarea_mrqt8_1

B

_banner_2x3bf_17

_baseOverlay_gj1jh_20

_betaBadge_mbh48_65

_btnDanger_1fl1d_98

_btnGhost_1fl1d_59

_btnOutline_1fl1d_48

_btnPrimary_1fl1d_80

_btnSolid_1fl1d_70

_btn_1fl1d_2

C

_cancelButton_10ud6_165

_cancelScheduleButton_1s17f_1202

_cancel_16pja_84

_cancel_1pa8q_211

_cardActions_1tlzn_324

_cardDescription_1mhuy_352_cardHeader_1tlzn_315

_cardMeta_1mhuy_375

_cardTitle_1mhuy_333

_card_1mhuy_2

_card_1tlzn_308

_characterInfoMarkdownContent_123vi_223

_characterInfoMarkdownContent_1yi4w_5

_characterInfoMarkdownContent_9gldz_223

_characterInfoShinyBox_1yi4w_265

_characterInfoShinyBoxInner_1yi4w_286

_checkboxCard_exkyv_105

_checkboxCardError_exkyv_112

_content_xxqvx_12

_count_138g0_7

_createButton_1jb5k_14 pp-top-bar-create-char profile-top-bar-create-char glow-on-hover

css-197qci7

css-1d22cyw

css-1jdnh42

css-1vh5zal

css-2lj9yr

css-7kiadw

css-z5908y

_content_67d1x_11

D

_detailName_4cue2_1923

_detailPane_4cue2_1839

E

_editScheduleButton_1s17f_1180

_expanded_2x3bf_208

_expandedInner_2x3bf_220

F

_filterButtonOpen_1vsdv_27

_footerHint_exkyv_148

_footer_w3wuk_1

H

_hintBox_2ljd6_74

_historyItem_10txd_1

_historyItemFocused_10txd_34

_holidays2025Pattern1_d0q9a_115

_holidays2025Pattern2_d0q9a_124

I

_iconError_1jwi8_310

_iconGlobe_2x3bf_84

_iconInfo_1jwi8_295

_iconSuccess_1jwi8_300

_iconWarning_1jwi8_305

_iconWarning_1s17f_102

_inner_2x3bf_31

_inputContainer_d8bkw_27

_inputError_exkyv_86

_input_10ud6_126

_input_1tlzn_260

_input_exkyv_52

_input_owmrz_7

_iosAlert_1s17f_263

_iosModalWarning_1s17f_544

_iosSelect_1s17f_805

_iosSettingItem_1s17f_46

_iosSettingsSection_1s17f_35

_iosStatusSection_1s17f_208

L

_loadMoreButton_1jwi8_474

_loadMore_1nqdj_38

M

_messageNavigation_1yi4w_348

_modal_pru5r_15

_modalContent_1jhaa_166

_modalWarning_1jwi8_779

_moderationBlock_1s17f_320

_moderationHeader_1s17f_360

_moderationNotes_di476_369

_moderationNotification_di476_333

_moderationReason_1s17f_405

_moderationSubject_di476_360

_motionHeader_1s17f_1361

_motionModal_1s17f_1339

_motionWarning_1s17f_1459

N

_navButton_1yi4w_359

_notificationsButton_1jwi8_7

_notificationItem_di476_2

O

_option_pru5r_82

_otherInput_pru5r_156

P

pp-top-bar-logo profile-top-bar-logo glow-logo css-1bmggo3

_primaryButton_2ljd6_91

_priorityHigh_1jwi8_372

_priorityLow_1jwi8_380

_priorityMedium_1jwi8_376

_privacyNote_2x3bf_301

profile-badge-flex-outer Btn2-purple pp-pg-total css-72h1ey

S

_scheduleInfoNote_1s17f_1106

_scheduleTypeOption_1s17f_1231

_scheduledInput_1s17f_887

_scheduledPreview_1s17f_972

_scheduledReleaseInfo_1s17f_1136

_scheduledReleaseSection_1s17f_863

_scheduledReleaseWarning_1s17f_876

_showLess_1bk4j_26

_signupTextarea_45b6m_172

_submitBtn_1gzug_172

T

_toolbar_1oo8z_6

Быстрый совет:
Можно объединять несколько названий классов в один абзац вместо использования отдельных тегов. Так вы сможете накладывать эффекты из разных классов одновременно.

Простой пример:

div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone

<p class="div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone">ваш текст</p>

Создано Utkarsh в Discord:

<p class="div iosStatusSection1s17f_208 iosStatusLine1s17f_223">Текст <strong>Текст</strong></p>

'Текст'Текст

<p class="div _iosStatusSection_1s17f_208 _iosStatusLine_1s17f_223">'Текст' <a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="your-link-here"><strong>ссылка</strong></a></p>

'Текст' ссылка

<p class="css-1jdnh42 _iosStatusLine_1s17f_223"><strong>Текст здесь</strong>ваш текст здесь</p>

Текст здесьваш текст здесь

. <p class="_notificationItem_di476_2" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_unreadIndicator_di476_23" href="blank">.</a>ваш текст здесь</p>

Проверка! <p class="_characterInfoMarkdownContent_9gldz_223 _iosStatusLine_1s17f_223" style="text-align: center;"><a target="_blank" rel="noopener noreferrer nofollow" class="_characterAvatar_di476_67" href="blank">Проверка !</a>Ваш текст здесь</p>

<p class="_card_13n8k_2 _list_13n8k_67 _clickable_13n8k_28

_card_13n8k_2 _list_13n8k_67 _selected_13n8k_67 _clickable_13n8k_28

Просто разделяйте названия классов пробелом. Имейте в виду: чем больше вы их наложите, тем сложнее будет понять, какой из них вызывает проблему, если что-то сломается.

Как использовать:
Для более подробного визуального руководства по использованию посмотрите руководство Rocket

Откройте поле биографии персонажа и нажмите кнопку </> в правом верхнем углу редактора. Это переключит вас в режим HTML, где можно видеть и напрямую редактировать исходный код.

Чтобы применить класс, оберните свой контент в тег абзаца, например так:
<p class="YOUR_CLASS_NAME_HERE">Ваш текст здесь</p>

Например:

<p class="div _characterInfoMarkdownContent_123vi_223">Ваш текст здесь</p>

Просто замените YOUR_CLASS_NAME_HERE на нужное название.
После редактирования нажмите Apply внизу панели HTML, чтобы сохранить изменения.