Активация пользовательского CSS/HTML

Я добавил несколько пользовательских CSS и HTML. Проверил предпросмотр, и всё выглядит отлично.

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

Мои поиски ничего не дали. Наверное, это настолько просто, что никто никогда не спрашивал, как это сделать, но мне, новичку, нужен намёк…

Кажется, это не имеет отношения к делу, но я на самом деле не понимаю.

Где именно? В пользовательской теме или в теме по умолчанию?
Общий CSS, CSS для настольных версий или CSS для мобильных устройств?
Более подробная информация о том, что вы сделали, будет полезна.

Обычно вы просто выбираете тему в разделе /admin/customize/themes и делаете следующее:

После нажатия кнопки «Сохранить» изменения отображаются практически мгновенно, если отредактированная вами тема активна.

То, что вы сделали. В видео. Только я вижу изменения, только когда нажимаю кнопку Предпросмотр.

Вы выбрали тему в качестве активной темы по умолчанию? Видите зелёную галочку?

Да. Я отредактировал стандартную светлую тему, и она теперь активна и установлена по умолчанию.

Хорошо, не могли бы вы перечислить внесённые изменения?

Будет также полезно предоставить ссылку на сайт.

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

Я опубликую содержимое заголовка через минуту. Форум постоянно рендерит HTML, когда я его вставляю…

Это неверно, должно быть

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
}

Вот и всё! Отлично подмечено, у вас зоркий глаз!

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

Рад, что у вас получилось :smile:

  • Любые ошибки в вашем CSS приведут к тому, что этот CSS будет проигнорирован.
  • Я никогда раньше не использовал предпросмотр, поэтому не могу ничего сказать об этом.
  • Уверен, что раньше на странице было уведомление об ошибке :thinking:

О, и с днём рождения @tshenry :tada! Хорошего праздника!