Migliori pratiche per creare stili CSS personalizzati per sezioni dei post

Preambolo

Mentre configuravo e personalizzavo l’istanza Discourse della mia community, ho cercato modi per sfruttare l’incredibile potenza della piattaforma per aumentare la mia felicità e quella dei miei utenti.

Una delle cose che vorrei fare sarebbe aggiungere una firma personalizzata ai messaggi privati che invio e “firmarli”. Non voglio usare un’immagine; ma piuttosto, il mio nome in un font Google.

Far funzionare questo mi aiuterà a capire come offrire snippet e simili alla mia community per il loro utilizzo durante la composizione dei post, quindi la conoscenza è generale, anche se la domanda è specifica.

Il motivo per cui pongo la domanda è che prima di dedicare tempo alla creazione di questi blocchi per l’uso, vorrei assicurarmi che sia il modo migliore per procedere. Perché se mi vengono in mente delle idee intelligenti, sto pensando di condividere alcuni esempi per iniziare una discussione in modo da poter raccogliere ancora più idee intelligenti da altri più intelligenti di me. :slight_smile:

La Domanda: Come inserire del testo in un post in un blocco che può essere selezionato tramite CSS?

Quello che ho trovato finora

Mi sono imbattuto nell’argomento seguente:

[ CSS personalizzato all’interno di un post / aggiunta di classi personalizzate](Custom css inside a post / adding custom classes)

Da quell’argomento, ho ricavato questa risposta:

Questo sembra funzionare, ma sono curioso di sapere se è attualmente considerata la migliore pratica/metodo per questo.

Mentre ci sono, una domanda specifica leggermente fuori tema pur rimanendo pertinente:

Sto “abusando” di una personalizzazione per far funzionare la mia idea di firma, solo che non funziona, e sono curioso se qualcuno ha qualche intuizione al volo.

Sto caricando font Google personalizzati usando un plugin che so funziona perché tutto il mio forum sta utilizzando con successo quei font. Ho usato quello per forzare il caricamento di “Playwrite USA Traditional”.

Ho il seguente CSS nel mio tema:

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

Il mio div nel mio post di esempio è effettivamente allineato a destra, ma sta usando Arial o simile, non il font del mio tema, né Playwrite.

Mi manca qualcosa di stupido nella mia configurazione, o c’è qualcos’altro che ti viene in mente che mi manca? Questa non è una domanda di Discourse.

Inoltre, c’è un modo migliore per caricare un font Google per l’uso sul mio sito?

Ti consiglio di dare un’occhiata a Generic bbcode wrapper for theme components

Non riesco a pensare a nulla basandomi su ciò che hai condiviso qui. Se riesci a condividere un link al forum live, sarà più facile per noi aiutarti a trovare il problema.

1 Mi Piace

Controllando il codice di incorporamento da https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400, sembra che dovrebbe essere \"Playwrite US Trad\"

// <uniquifier>: Usa un nome di classe univoco e descrittivo
// <weight>: Usa un valore da 100 a 400

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

Ooh, sembra piuttosto bello. Grazie per il suggerimento!

Davvero tutto quello che speravo. Non volevo perdere tempo, ma nel caso ci fosse qualcosa di veramente ovvio. lol.

Io… stupido Google… ugh. Mi sono concentrato sulla direzione del componente per assicurarmi di aver digitato correttamente il nome, comprese le maiuscole, che non ho nemmeno pensato di controllare il nome EFFETTIVO che Google potrebbe usare. d’oh.

Per la cronaca, caricare il nome del font corretto e fare riferimento al nome del font corretto produce i risultati originariamente attesi.

E ora posso “firmare” i miei post:


Grazie :slight_smile:

1 Mi Piace

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