Вы создали новый компонент темы и добавили его в данном случае в тему Air?
Вы видели мои моды выше. Вы пытаетесь переопределить часть настроек темы или, как в моём посте выше, добавить модификации/исправления?
Спасибо, Дэн! Я смог разобраться с добавлением нового компонента и затем добавить туда свой CSS.
1 лайк
Если вы хотите переопределить настройку, используйте «!important».
Например:
.some-selector {
padding-top: 2.5em !important;
}
Я тоже ещё учусь. Discourse — довольно разнообразная система.
2 лайка
Спасибо за отличную тему. Всё работает. Но у меня возник вопрос: как можно изменить фоновое изображение? Спасибо за помощь.
2 лайка
Создайте компонент темы и добавьте его с вашим фоновым изображением
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
3 лайка
Привет, ребята,
Есть ли способ добавить внешние ссылки в шапку рядом с логотипом?
Спасибо!
Вот один из них
И
Также есть решение, добавляющее панель с выпадающими меню под заголовком сайта:
2 лайка
Привет,
Огромное спасибо за то, что нашли время ответить.
Я использовал этот вариант, но остался не полностью удовлетворён: Custom Top Navigation Links
Ваша вторая рекомендация — это именно то, что мне нужно, я очень доволен результатом.
Ещё раз большое спасибо за вашу помощь!
1 лайк
Всем привет,
Извините за повторное сообщение, но есть ли способ отображать подкатегории как на рабочем столе, так и на мобильных устройствах, и при этом показывать полные названия категорий на мобильных устройствах, если они немного длинные?
Моя конфигурация — «ЯЧЕЙКИ КАТЕГОРИЙ С ПОДКАТЕГОРИЯМИ», но без использования «Современных ячеек категорий + групп».
Результат отличный на рабочем столе и на мобильных устройствах при использовании версии для рабочего стола. Однако в мобильной версии нельзя прочитать конец некоторых названий категорий.
Большое спасибо за помощь!
Можешь выложить скриншот?
Конечно, пожалуйста, во вложении два скриншота с моего iPhone: одна версия для мобильного устройства и одна для настольного компьютера.
1 лайк
Я вижу, что подкатегории отображаются на обоих скриншотах. Вы хотите, чтобы описание категории было на обоих? Или зеркально отразить десктопную версию без описания?
Извините, если я был неясен.
Я хотел бы видеть полные названия категорий.
Например, в десктопной версии у вас «Discussions Générales sur la mode», а в мобильной версии — только «Discussions Générales».
1 лайк
Я не помню точный CSS-код, но вы должны иметь возможность переносить заголовок категории, как на первом изображении, которое вы отправили.
Попробуйте использовать «Исследовать элемент» на компьютере, чтобы определить CSS-стили, используемые для переноса названия категории на две строки.
Я попробовал использовать CSS с ChatGPT и Claude, например:
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* Измените это значение в зависимости от ваших потребностей */
}
}
Но это не работает.
Есть ли способ принудительно включить десктопный вид на мобильных устройствах? Было бы отлично иметь описание и подкатегории.
Спасибо!
Вы пробовали, как выглядит десктопная версия на мобильных устройствах? На некоторых телефонах она выглядит не очень хорошо.
Спасибо за ваш ответ.
Я только что попробовал на двух iPhone, и всё было именно так.
Это именно то, что я ищу.
В идеале я бы хотел, чтобы мои пользователи видели этот вид сразу, без необходимости настраивать параметры.
Отключите свой пользовательский компонент. Создайте новый тестовый компонент в мобильном CSS и попробуйте следующее:
.category-box-heading h3 {
//* Возможно, вам потребуется раскомментировать две строки ниже.
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
Я почти уверен, что вам не потребуются никакие другие изменения в CSS.
Только что проверил. Мой фрагмент тоже не работает.
Последняя версия эффективного кода:
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
2 лайка
