CSS для увеличения высоты логотипа и заголовка в десктопном и мобильном видах

[selfaware]

С моего рабочего стола ПК через инспектор в Firefox тег CSS, изменяющий высоту логотипа, выглядит так:

.d-header .title {
  --d-logo-height: 4em;
}

Однако я заметил, что при вставке этого тега CSS в редакторе CSS стандартной темы для раздела «Десктоп» это никак не влияет на высоту логотипа, как на моём ПК, так и на мобильном телефоне.

В то же время, если я вставляю тот же код CSS в раздел «Мобильные устройства», высота логотипа меняется не только на ПК, но и на мобильном телефоне. Это ошибка в Discourse, или я что-то упускаю?

[Arkshine]

Привет,

На всякий случай, куда ты положил этот CSS?

[chapoi]

Всегда полезно попытаться сформулировать запрос о помощи чуть подробнее. Многие здесь очень хотят помочь, но способов сделать что-либо так много, что хорошее объяснение критически важно для получения помощи как можно скорее

Кроме того, если вы тестируете что-то локально, не забудьте добавить ?mobile_view=1 к URL-адресу.

[selfaware]

С моего рабочего стола ПК через инспектор в Firefox тег CSS, который управляет высотой логотипа, выглядит так:

.d-header .title {
  --d-logo-height: 4em;
}

Однако я заметил, что при вставке этого тега CSS в редакторе CSS в теме по умолчанию для «десктопа» ничего не происходит с высотой логотипа ни на моём ПК, ни на мобильном телефоне.

В то же время, если я вставляю тот же код CSS в раздел «мобильный», высота логотипа меняется как на моём ПК, так и на мобильном телефоне. Это баг в Discourse или я что-то упускаю?

[chapoi]

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

@selfaware

Однако, если вставить тот же CSS-код для мобильной версии, это меняет высоту логотипа не только на моём ПК, но и на мобильном телефоне.

У меня это корректно меняет отображение на мобильном устройстве и не влияет на десктоп.

Если я добавляю этот CSS в редактор, всё работает как ожидалось для десктопа:

А для мобильной версии нужно устанавливать высоту только для логотипа, а не для заголовка:

Надеюсь, это поможет.

[selfaware]

Спасибо! Я переключился на другой компьютер с Ubuntu 22.04 (веб-сервер), и CSS-код в блоке CSS для рабочего стола отобразился корректно. Возможно, проблема в браузере на моём другом ПК с Windows 7.

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

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

Любая попытка установить значение больше 3em не увеличивает высоту логотипа на моём мобильном телефоне (GS23), даже после очистки кэша.

Есть какие-то идеи?

[chapoi]

Да, попробуйте снять ограничение max-width для логотипа — это должно освободить его от любых ограничений.

[selfaware]

Спасибо за ваш ответ. Я не могу найти эту опцию в настройках. Это делается через CSS или через командную строку в Rails? Если да, то как это выглядит?

[Firepup650 (Firepup Sixfifty)]

Это будет CSS, вот так:

.d-header #site-logo {
  max-width: unset;
}

Если это не сработает, добавьте !important.

[selfaware]

Спасибо за вашу помощь:

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

1. Настроить → Темы → По умолчанию → Редактировать CSS/HTML

a) Вставьте в блок для десктопа:

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

b) Вставьте в блок для мобильных устройств:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}

[Firepup650 (Firepup Sixfifty)]

@selfaware

b) Опубликовать в категории «Мобильные устройства»:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}

Это можно объединить в одно правило:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

Кажется, первый набор правил тоже можно сжать, но я прямо сейчас не помню как.

[selfaware]

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

[chapoi]

.wrap {
  padding-left: 0;
}

На этом этапе, возможно, стоит пройти вводный курс по CSS, потому что:

@Discourse

Однако вопросы по основам HTML и CSS не входят в сферу поддержки.

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

[selfaware]

Спасибо, Чарли, я ценю это.
Я знаком с использованием инспектора, например в Firefox, и с тем, как находить решения.

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

[chapoi]

@selfaware

Есть ли какие-то мысли о том, почему манипуляция логотипом не входит в основную функциональность Discourse? Брендинг любого веб-сайта имеет решающее значение, и отсутствие детализации в этом плане удивительно.

Манипуляция логотипом абсолютно возможна, как и любые другие виды стилизации, в рамках тем и компонентов тем.
Вам просто нужно либо изучить основы HTML/CSS/JS и ознакомиться с обилием документации на meta, чтобы сделать всё самостоятельно, либо найти кого-то, кого можно нанять для внесения необходимых изменений.

Последнее можно сделать в категории marketplace.

Так как на ваш исходный вопрос уже дан ответ, я думаю, мы можем завершить эту тему.

Желаю вам больших успехов с вашим форумом.

[Lilly (Lillian)]

Лично я не ожидал бы, что изменение размера логотипа компании будет частью основной функциональности форумной платформы. Более того, наше программное обеспечение имеет открытый исходный код, и мы предоставляем такую поддержку, чтобы помочь вам достичь этой цели, как мы сделали выше. Мы также предоставляем множество информации о том, как научиться создавать собственные настройки.

[selfaware]

Привет, Чарли,

Под «манипуляцией логотипом» я имел в виду возможность изменения размера логотипа в интерфейсе.

Спасибо за помощь.