Пользовательский CSS/HTML в нестандартной теме (без компонента)

Внести вклад UX
1

Тема по умолчанию позволяет добавлять пользовательские CSS/HTML в своих настройках.

В качестве эксперимента я хотел скрыть временную шкалу. Было предложено отличное решение для этого с помощью CSS (отдельная тема). Предложение заключалось в том, чтобы реализовать эти 4 строки как компонент темы. Это несложно, но я подумал, что опция пользовательского CSS в теме по умолчанию может быть проще.

Я переключил тему и вставил эти 4 строки как пользовательский CSS. Действительно, это сработало идеально.

Это заставляет меня задуматься, почему пользовательский CSS/HTML доступен (только) здесь. Не было бы логичнее сделать это общей настройкой?

Возможно, пользовательский CSS нужен только в рамках темы, но общая настройка тоже была бы полезна, верно?

РЕДАКТИРОВАНИЕ: Просто добавляю здесь ссылку на основную тему, обсуждающую пользовательский CSS, где описан вышеупомянутый подход с темой «По умолчанию»: Making custom CSS changes on your site

Hide topic timeline
2

Компонент, подключенный ко всем темам, — это как раз такие общие настройки. Чем бы это отличалось, если бы у вас была другая вкладка, раздел или «официальный» компонент для этого?

1 лайк
3

Что ж, компонент означает, что вам нужно отредактировать его, а затем обновить компонент в вашем экземпляре Discourse.

Чтобы прояснить: рабочий процесс тем и компонентов абсолютно превосходен. Я просто думаю, что может быть полезно редактировать небольшие элементы CSS более напрямую / по мере необходимости.

1 лайк
4

Эм… нет, не нужно. Изменения вступают в силу сразу после сохранения.

Сначала вы говорили об общем случае, а теперь редактируете напрямую только одну тему. Что ж, если вы вносите изменения только для одной темы, было бы неплохо, если бы для каждой темы была отдельная опция. Но когда изменения CSS находятся в одном компоненте, вы можете легко и быстро отключить его, когда (не если, а когда…) что-то пойдет не так из-за ошибок, конфликтов, обновлений…

5

Для пробных запусков, возможно, и так сойдёт, особенно если не важно, что ваши пользователи тоже увидят эти тесты. Но что, если вы захотите оставить это изменение, а у вас есть выбор темы, отличной от темы по умолчанию? Тогда придётся проделать ещё один круг :wink:

1 лайк
Hide topic timeline
6

Действительно, именно поэтому я интересовался общей опцией пользовательского CSS, которая работала бы во всех темах.

7

И у вас есть: компонент, который содержит изменения CSS.

8

Я новичок, поэтому, наверняка, что-то упускаю.

Если я пишу свой собственный компонент, я размещаю его на GitHub. Затем, если нужно внести изменения, я делаю их на GitHub, а потом обновляю компонент в Discourse.

Разве это не правильный (или самый простой) способ?

2 лайка
9

Зачем вам это делать? Разве что вы планируете им поделиться. Но это не проблема — просто нажмите кнопку обновления вашего компонента.

Я немного запутался. Как вы собираетесь проще вносить изменения в CSS в какой-то глобальный CSS-файл (который тоже будет компонентом)? Что, если вы захотите изменить тему Air — как вы думаете, как вы предоставите эти изменения?

1 лайк
10

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

2 лайка
11

Возможно, будет проще, если я приведу конкретный пример.

Я хочу скрыть навигацию по темам (просто в качестве эксперимента), и @merefield любезно помог мне сделать это с помощью CSS:

.topic-navigation {
  display: none
}

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

Создание компонента — это не так уж и сложно. Но ещё проще использовать настройку «Редактировать CSS» в теме по умолчанию. Я попробовал, и это работает идеально.

Однако я хочу узнать мнение участников моего сообщества, а я использую тему zeronoise, в которой нет настройки «Редактировать CSS».

Мой вопрос сейчас: не было бы полезно, если бы в Discourse появилась возможность немного поиграть с CSS, как это возможно при использовании темы Default?

Чтобы было ясно, я понимаю, что у «Редактировать CSS» есть сценарий использования, специфичный для темы, поэтому это должно быть в дополнение к «Редактировать CSS» в Default, а не вместо него.

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

И спасибо всем за то, что поделились своими мыслями. :pray:

12

В духе «почини то, что чешется», я думаю о том, чтобы взять код Edit CSS/HTML из темы по умолчанию и упаковать его в отдельный компонент темы или плагин (конечно, с сохранением лицензии GPL-2).

Думаю, компонент будет самым простым решением.

13

Теперь я совсем запутался.

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

14

С помощью базовых изменений CSS? Неужели это не слишком избыточно?

15

Это именно та причина, по которой я начал эту тему.

Как бы вы предложили вносить изменения CSS базового уровня?

16

Личное предпочтение.

В меню администратора нет контроля версий.

Это также способ улучшить свои знания.

2 лайка
17

Привет, Бастиян :slight_smile:

Вы не можете напрямую редактировать HTML и CSS «внешней» темы или компонента, поскольку изменения будут перезаписаны при обновлении темы или компонента. Это ещё было возможно два или три года назад, но эта функция была удалена.

Вы можете создать новый локальный компонент прямо в интерфейсе Discourse, чтобы переопределить CSS вашей текущей темы (через вкладку CSS компонента), или создать новый компонент как проект на GitHub, который вы будете обновлять через страницу компонента (кнопка «update» каждый раз при изменении репозитория).

Правильно ли я понял, что вы хотите сделать, и отвечает ли это на ваши вопросы?

2 лайка
18

Привет @Canapin, отлично! Спасибо:pray:. Это именно то, что я искал.

Это, вероятно, также объясняет недопонимание с @Jagster: существует прямой способ сделать то, что я пытался сделать, но я не знал, что можно создать новый компонент напрямую через интерфейс (что позволяет использовать пользовательский CSS).

Возможно, было бы полезно добавить это в отличные руководства по темам и/или CSS от @Johani.

3 лайка