Тема Graceful

:discourse2: Краткое описание Graceful — элегантная тема для Discourse
:eyeglasses: Предварительный просмотр Посмотреть в создателе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/graceful
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить эту тему

Возможности

Мне очень понравилась тема, опубликованная ещё в 2016 году от @jsthon :heart_eyes:. С тех пор она исчезла с сайта, поэтому я обновил её, расширил функционал и выложил на GitHub.

Настройки

Название Описание
фоновое изображение Введите URL изображения
мозаичный фон
без фонового изображения Отключить настройки фонового изображения и мозаики выше.

В этой теме есть три настройки:

  • Поле для добавления собственного фонового изображения
  • Опция для его повторения (мозаики)
  • И опция для отключения обоих параметров выше

Если вы отключите опцию мозаики, изображение будет установлено с background-size: cover, и ваш браузер пропорционально масштабирует изображение, чтобы полностью покрыть фон. Например:

Благодарности

Благодарность за включённый фоновый паттерн по умолчанию goes to Toptal Subtle Patterns.


:discourse2: Размещено у нас? Темы доступны для использования на наших тарифных планах Standard, Business и Enterprise.

76 лайков

Я один такой с этой проблемой, используя эту тему? Когда я тестирую в Google PageSpeed, он показывает 99%, но страница не загружается, поэтому результаты вводят в заблуждение.

В чём причина, что Google не может увидеть — страница не загружается?

6 лайков

Хм, да, я вижу ту же проблему… Похоже, что что-то в теме мешает версии Discourse, которую мы показываем Google. Я разберусь. Кажется, это та же проблема, что и с печатным видом, о которой сообщалось выше.

3 лайка

@awesomerobot

Очень приятная тема.

Я пытаюсь сделать Graceful значительно шире на десктопе. Пробовал следующее:

#main-outlet {
  width: auto;
  max-width: 1210px; /* Это делает контейнер таким же широким, как логотип/элементы управления заголовком */ 
}

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

Пользовался инспектором и пробовал множество элементов, но, не будучи экспертом, не смог добиться того, чтобы ширина тем/постов соответствовала ширине #main-outlet.

Не могли бы вы помочь мне?

Спасибо.

Также пробовал это:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

Но не могу добиться того, чтобы ширина постов соответствовала ширине контейнера:

1 лайк

У .topic-body есть собственное значение ширины.

По умолчанию:

.topic-body {
    width: calc(690px + (11px * 2));
}

Измените только значение 690px, остальное оставьте без изменений (оно связано с отступами сообщения темы).

6 лайков

Спасибо! Попробую позже и опубликую результаты.

Вчера я уже пробовал менять .topic-body, но попробую снова, следуя вашему совету, @Steven.

1 лайк

Привет, @Steven,

Добавил следующее в CSS для рабочего стола:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

.topic-body {
    width: calc(1020px + (11px * 2));
}

Это сработало частично, но есть проблема. Возможно, ты знаешь CSS-трюк, чтобы это исправить?

Смотри изображение:

1 лайк

Я сейчас не за компьютером, но знаю, что нужно исправить отступ слева для класса timeline-container

1 лайк

Правильно, для временной шкалы есть несколько значений margin-left, которые нужно переопределить для .timeline-container (три контрольные точки):

4 лайка

Привет @awesomerobot

Крис,

Чтобы добиться нужного нам «широкого вида», мы решили поступить менее элегантно и скрыть .timeline-container.

#main-outlet {
  width: auto;
  max-width: 70%; 
}

.topic-body {
    width: 100%;
}

.timeline-container .topic-timeline {
      display: none;
 }

Это не очень элегантно, но хотя бы работает «нормально» с большими блоками кода — на большом экране разработчика читать стало проще.

Было бы здорово показать .timeline-container, но мне не удалось заставить это работать через переопределение класса, как было предложено. Вероятно, из-за моих недостаточно развитых навыков CSS.

Спасибо за вашу помощь и за эту замечательную тему.

1 лайк

Мне очень нравится эта тема! Большое спасибо, что поделились ею с нами!

Я заметил, что на мобильной версии исчезают цветные полосы категорий. Это сделано намеренно, и есть ли способ их вернуть?

Также можно ли отключить фон, если для категории установлен свой фон? Всё работает нормально, но при прокрутке длинных постов экран начинает дергаться, и временами просвечивает фон темы.

Спасибо!
Рэй

1 лайк

Я изучил мобильные CSS-стили и обнаружил, что они исключены; закомментирование части «left-border» вернуло цветные границы:

.category-list-item {
//  border-left: none;
  border-top: 2px solid;
  .category-name {
    font-weight: normal;
  }
}

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

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

.category-list-item {
  border-left: 4px !important; 
}

…но это отображает только белую полосу, а не конкретный цвет категории. Как сделать так, чтобы отображался правильный цвет категории? Я знаю, что это связано с переменными цветов категорий, но не могу найти соответствующие ссылки.

Я новичок в CSS и подобных вещах, так что, возможно, делаю что-то не так.

Спасибо,
Рэй

2 лайка

Проблема с цветами заголовка.

Изменил цвет фона заголовка и цвет текста заголовка, но настройки не применяются.

Иконки остаются серыми.

Это поведение по умолчанию, так как цвет является переменной «низко-среднего» уровня для #ffffff, а не чистым цветом.

Чтобы переопределить этот цвет, см. здесь: How to Change Header Icon Color? - #2 by awesomerobot

3 лайка

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

2 лайка

Согласен! Один из самых красивых тем для Discourse.

Рэй

1 лайк

Должно быть, я туплю, но не могу заставить логотип менять размер с помощью компонента темы, созданного для настройки CSS. Я могу изменить общую высоту заголовка, но логотип упрямо остаётся прежним. Этот CSS, похоже, отменяет любые мои попытки изменить его:

.d-header #site-logo {
max-height: 35px !important;
}

Согласно инспектору Chrome, это значение берётся из файла: desktop-scss-graceful.scss

Изменение размера логотипа работает отлично в теме по умолчанию, и, как я уже сказал, изменение высоты заголовка работает в Graceful, но только не с логотипом…

2 лайка

Да, !important переопределяет любой другой CSS без !important… Я не помню, зачем он там, но стоит проверить, можно ли его удалить. Работает ли это, если вы добавите !important в свой собственный CSS?

.d-header #site-logo {
max-height: 50px !important; // <-- ваша собственная высота здесь
}
3 лайка

Спасибо за быстрый ответ! Я действительно заметил !important и пытался добавить его к своему стилю, но безрезультатно. Странно то, что сейчас, когда я сохраняю это изменение и страница обновляется, на миг логотип появляется правильного размера, а затем снова уменьшается. И в инспекторе он выглядит так, будто всё в порядке:

По крайней мере, в том смысле, что 35px отключён. Но порядок, по меньшей мере, кажется странным. В любом случае, это всё ещё не работает. Как-то странно.

Кстати, я добавил это в Common CSS…

Обновление: нашёл! Это:

.d-header #site-logo {
     height: 2.667em;
 }

в файле header.scss!

И если я добавлю свой height: с !important, всё работает!

Хорошо, следующий вопрос, который, как я думаю, специфичен для этой темы. Я использую её как основу для создания своего рода личного «блога» (на самом деле это цифровой сад, но это довольно obscure термин). Поскольку практически каждый пост будет написан мной, я хочу убрать или уменьшить заметность некоторых визуальных элементов, связанных с авторством, в первую очередь аватаров, особенно в списках тем на главной странице и в категориях. Обведено красным то, что я хотел бы скрыть, если это возможно:

Вы, наверное, понимаете, почему. :grinning_face_with_smiling_eyes:

Что я уже пробовал:

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

Заранее спасибо!