I really liked the theme shared way back in 2016 by @jsthon. They haven’t been around since it was initially posted, so I’ve updated it, expanded it, and added it to github.
Disable the background image and tiling settings above.
This theme has three settings:
A field to add your own background image
An option to tile it
And an option to remove both of the above options
If you disable the tile option, the image will be set to background-size: cover, and your browser will scale your image to proportionately cover the full background. For example:
Я один такой с этой проблемой, используя эту тему? Когда я тестирую в Google PageSpeed, он показывает 99%, но страница не загружается, поэтому результаты вводят в заблуждение.
В чём причина, что Google не может увидеть — страница не загружается?
Хм, да, я вижу ту же проблему… Похоже, что что-то в теме мешает версии Discourse, которую мы показываем Google. Я разберусь. Кажется, это та же проблема, что и с печатным видом, о которой сообщалось выше.
Я пытаюсь сделать Graceful значительно шире на десктопе. Пробовал следующее:
#main-outlet {
width: auto;
max-width: 1210px; /* Это делает контейнер таким же широким, как логотип/элементы управления заголовком */
}
Этот CSS сделал общий контейнер шире, и рекомендуемые темы внизу красиво растягиваются по странице, но общая ширина постов в темах слишком узкая (для моей широкой версии).
Пользовался инспектором и пробовал множество элементов, но, не будучи экспертом, не смог добиться того, чтобы ширина тем/постов соответствовала ширине #main-outlet.
Не могли бы вы помочь мне?
Спасибо.
Также пробовал это:
#main-outlet {
width: auto;
max-width: 80%;
}
Но не могу добиться того, чтобы ширина постов соответствовала ширине контейнера:
Это не очень элегантно, но хотя бы работает «нормально» с большими блоками кода — на большом экране разработчика читать стало проще.
Было бы здорово показать .timeline-container, но мне не удалось заставить это работать через переопределение класса, как было предложено. Вероятно, из-за моих недостаточно развитых навыков CSS.
Спасибо за вашу помощь и за эту замечательную тему.
Мне очень нравится эта тема! Большое спасибо, что поделились ею с нами!
Я заметил, что на мобильной версии исчезают цветные полосы категорий. Это сделано намеренно, и есть ли способ их вернуть?
Также можно ли отключить фон, если для категории установлен свой фон? Всё работает нормально, но при прокрутке длинных постов экран начинает дергаться, и временами просвечивает фон темы.
…но это отображает только белую полосу, а не конкретный цвет категории. Как сделать так, чтобы отображался правильный цвет категории? Я знаю, что это связано с переменными цветов категорий, но не могу найти соответствующие ссылки.
Я новичок в CSS и подобных вещах, так что, возможно, делаю что-то не так.
Должно быть, я туплю, но не могу заставить логотип менять размер с помощью компонента темы, созданного для настройки CSS. Я могу изменить общую высоту заголовка, но логотип упрямо остаётся прежним. Этот CSS, похоже, отменяет любые мои попытки изменить его:
.d-header #site-logo {
max-height: 35px !important;
}
Согласно инспектору Chrome, это значение берётся из файла: desktop-scss-graceful.scss
Изменение размера логотипа работает отлично в теме по умолчанию, и, как я уже сказал, изменение высоты заголовка работает в Graceful, но только не с логотипом…
Да, !important переопределяет любой другой CSS без !important… Я не помню, зачем он там, но стоит проверить, можно ли его удалить. Работает ли это, если вы добавите !important в свой собственный CSS?
.d-header #site-logo {
max-height: 50px !important; // <-- ваша собственная высота здесь
}
Спасибо за быстрый ответ! Я действительно заметил !important и пытался добавить его к своему стилю, но безрезультатно. Странно то, что сейчас, когда я сохраняю это изменение и страница обновляется, на миг логотип появляется правильного размера, а затем снова уменьшается. И в инспекторе он выглядит так, будто всё в порядке:
По крайней мере, в том смысле, что 35px отключён. Но порядок, по меньшей мере, кажется странным. В любом случае, это всё ещё не работает. Как-то странно.
Кстати, я добавил это в Common CSS…
Обновление: нашёл! Это:
.d-header #site-logo {
height: 2.667em;
}
в файле header.scss!
И если я добавлю свой height: с !important, всё работает!
Хорошо, следующий вопрос, который, как я думаю, специфичен для этой темы. Я использую её как основу для создания своего рода личного «блога» (на самом деле это цифровой сад, но это довольно obscure термин). Поскольку практически каждый пост будет написан мной, я хочу убрать или уменьшить заметность некоторых визуальных элементов, связанных с авторством, в первую очередь аватаров, особенно в списках тем на главной странице и в категориях. Обведено красным то, что я хотел бы скрыть, если это возможно:
Использование инструментов разработчика Chrome для поиска классов/ID и попытки их скрыть (примечание для себя: не скрывать ember-view )
Также я изучаю и экспериментирую с различными компонентами, чтобы отображать первое изображение в теме в виде миниатюры. Если бы я мог заменить эти аватары на маленькие миниатюры первого изображения в теме, это было бы отлично. Но их скрытие — уже хороший шаг.
. They haven’t been around since it was initially posted, so I’ve updated it, expanded it, and added it to github.
)