CSS para aumentar a altura do logo e header do desktop para mobile

Do desktop do meu PC, através do inspetor no Firefox, a tag CSS que manipula a altura do logo é:

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

No entanto, noto que quando insiro esta tag CSS no tema padrão no editor CSS em desktop, ela não afeta a altura do logo vista no meu PC nem no celular.
Porém, se insiro o mesmo código CSS em mobile, ele altera a altura do logo não apenas no meu PC, mas também no celular. Isso é um bug no Discourse ou estou
perdendo algo?

1 curtida

Oi,

Só por garantia, onde você colocou este CSS?

2 curtidas

É sempre uma boa prática tentar formular um pedido de ajuda um pouco melhor. Muitas pessoas aqui estão super ansiosas para ajudar, mas há tantas maneiras de fazer as coisas que uma boa explicação é crucial para obter ajuda o mais rápido possível :slight_smile:

Além disso, se você estiver testando coisas localmente, não se esqueça de anexar ?mobile_view=1 ao URL.

3 curtidas

Do meu PC desktop, através do inspetor no Firefox, a tag CSS que manipula a altura do logo é:

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

No entanto, noto que quando insiro esta tag CSS no tema padrão no editor CSS em desktop, ela não afeta a altura do logo como visto no meu PC desktop nem no celular.
No entanto, se eu insiro o mesmo código CSS em mobile, ele muda a altura do logo não apenas no meu PC desktop, mas também no celular. Isso é um bug no Discourse ou estou
perdendo algo.

Tentei recriar o que acho que você está fazendo, mas não consigo reproduzir isso:

Ele muda corretamente no mobile e não impacta o desktop.

Se eu adicionar este CSS no editor, ele funciona como esperado para desktop:

E para mobile, você só precisa definir a altura para o logo, não para o cabeçalho:

Espero que ajude.

1 curtida

Obrigado, eu acessei uma máquina diferente, uma rodando ubuntu 22.04 (servidor web) o código CSS no bucket CSS do desktop foi renderizado corretamente, então talvez seja um problema de navegador no meu outro PC desktop rodando Windows 7.
Notei que pareço estar limitado no bucket CSS Mobile a:

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

Qualquer tentativa de ir além de 3em não aumenta a altura do logo no meu celular, GS23 - mesmo depois de limpar o cache.

Pensamentos?

Sim, tente remover o max-width do logo, isso deve liberá-lo de quaisquer restrições.

1 curtida

Obrigado pela informação. Não consegui encontrar essa opção nas configurações. Isso é feito através de CSS ou de uma entrada de linha de comando no Rails e, em caso afirmativo, como seria?

Isso seria CSS, assim:

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

Se isso falhar, adicione !important.

3 curtidas

Obrigado pela sua ajuda:

Para aqueles que vierem depois de mim e quiserem aumentar o tamanho do seu logotipo tanto na visualização desktop quanto na mobile.

  1. Personalizar → Temas → Padrão → Editar CSS/HTML

a) Coloque no bloco Desktop:

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

b) Coloque no bloco Mobile:

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

Essas poderiam ser uma regra:

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

Acho que você também poderia compactar o primeiro conjunto de regras, mas não me lembro como de imediato.

2 curtidas

Mais uma coisa que seria útil adicionar é como reduzir o preenchimento, para mover o logotipo para a esquerda na visualização móvel - o que você acha?

.wrap {
  padding-left: 0;
}

Neste ponto, pode ser uma boa ideia fazer um curso introdutório de CSS porque:

Mais sobre como desenvolver seus próprios temas pode ser lido na categoria dev.

2 curtidas

Obrigado Charlie, eu agradeço.
Estou familiarizado com o uso do inspetor, por exemplo, no Firefox, e derivando algumas soluções.

Alguma ideia do porquê o redimensionamento do logotipo não faz parte da funcionalidade principal do Discourse? A marca de qualquer site é crítica e a falta de granularidade a esse respeito é surpreendente.

1 curtida

“Manipulação de logo” é perfeitamente possível, assim como todos os outros tipos de estilização, dentro de temas e componentes de tema.
Você precisará aprender o básico de html/css/js e passar pela abundância de documentação no meta para fazer as coisas sozinho, ou precisará procurar alguém que possa contratar para fazer as alterações desejadas.
O último pode ser feito na categoria marketplace.

Como sua pergunta original foi respondida, acho que podemos encerrar este tópico agora.

Desejo-lhe o maior sucesso com o seu fórum.

3 curtidas

Pessoalmente, não esperaria que o dimensionamento do logotipo de uma empresa fizesse parte da funcionalidade principal de uma plataforma de fórum. Além disso, nosso software é de código aberto e fornecemos esse suporte para ajudá-lo a realizar isso, como fizemos acima. Também oferecemos muitas informações sobre como aprender a desenvolver suas próprias personalizações.

3 curtidas

Olá Charlie,

Por "Manipulação de Logo" eu estava me referindo à capacidade de alterar o tamanho do logo dentro da interface do usuário.

Obrigado pela sua ajuda.

Este tópico foi automaticamente fechado 30 dias após a última resposta. Novas respostas não são mais permitidas.