Melhores práticas para criar estilos CSS personalizados para seções de posts?

Dev
1

Preâmbulo

Ao configurar e personalizar a instância do Discourse da minha comunidade, tenho procurado maneiras de aproveitar o incrível poder da plataforma para aumentar minha própria felicidade, bem como a de meus usuários.

Uma das coisas que gostaria de fazer seria adicionar uma assinatura personalizada às mensagens privadas que envio e “assiná-las”. Não quero usar uma imagem, mas sim meu nome em uma fonte do Google.

Fazer isso funcionar me ajudará a entender como oferecer trechos e outras coisas para minha comunidade usar ao compor postagens, então o conhecimento é geral, mesmo que a pergunta seja específica.

Minha razão para fazer a pergunta é que, antes de gastar tempo criando esses blocos para uso, gostaria de ter certeza de que é a melhor maneira de seguir. Porque se eu tiver algumas ideias inteligentes, estou pensando em compartilhar alguns exemplos para iniciar uma discussão, para que eu possa obter ainda mais ideias inteligentes de outras pessoas mais inteligentes do que eu. :slight_smile:

A Pergunta: Como colocar texto em uma postagem em um bloco que pode ser direcionado via CSS?

O que encontrei até agora

Deparei-me com o seguinte tópico:

[ CSS personalizado dentro de uma postagem / adicionando classes personalizadas](Custom css inside a post / adding custom classes)

A partir desse tópico, extraí esta resposta:

Isso parece funcionar, mas estou curioso para saber se é atualmente considerado a melhor prática/método para isso.

Enquanto estou aqui, uma pergunta específica um pouco fora do tópico, mas ainda no tópico:

Estou “abusando” de uma personalização para fazer minha ideia de assinatura funcionar, só que não está funcionando, e estou curioso se alguém tem alguma ideia de imediato.

Estou carregando fontes personalizadas do Google usando um plugin que sei que funciona porque todo o meu fórum está usando essas fontes com sucesso. Usei isso para forçar o carregamento de “Playwrite USA Traditional”.

Tenho o seguinte CSS em meu tema:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

Minha div em minha postagem de exemplo está realmente alinhada à direita, mas está usando Arial ou similar, não a fonte do meu tema, nem Playwrite.

Estou perdendo algo estúpido na minha configuração, ou há algo mais que você possa pensar que estou perdendo? Esta não é uma pergunta do Discourse.

Além disso, existe uma maneira melhor de carregar uma fonte do Google para uso em meu site?

2

Eu recomendo dar uma olhada em Generic bbcode wrapper for theme components

Não consigo pensar em nada com base no que você compartilhou aqui. Se você puder compartilhar um link para o fórum ativo, isso facilitará para que possamos ajudá-lo a encontrar o problema.

1 curtida
3

Verificando o código de incorporação de https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400, parece que deveria ser \"Playwrite US Trad\"

// <uniquifier>: Use um nome de classe exclusivo e descritivo
// <weight>: Use um valor de 100 a 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
1 curtida
4

Ooh, isso parece bem legal. Obrigado pela dica!

Realmente, era tudo o que eu esperava. Eu não queria perder tempo, mas caso houvesse algo muito óbvio. lol.

Eu… Google bobo… ugh. Fiquei preso na instrução do componente para garantir que eu pegasse o nome correto, incluindo maiúsculas, que eu nem pensei em verificar o nome REAL que o Google poderia estar usando. d’oh.

Para constar, carregar o nome da fonte correto e referenciar o nome da fonte correto produz os resultados esperados originalmente.

E agora eu posso “assinar” minhas postagens:

712×532 40 KB

Obrigado :slight_smile:

1 curtida
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.