Grazie Don, desideravo farlo da anni! Ho portato la tua idea un passo avanti per le mie esigenze. Poiché il mio sito è un po’ diverso e ogni categoria è diversa e non si tratta solo di discussioni dirette, ho scelto di cambiare completamente il testo del pulsante di risposta. Quindi, per la mia categoria di critica delle immagini, l’ho cambiata in “Dai una critica o rispondi”, aggiungendo “o rispondi” credo che aggiri la preoccupazione di Jakke. Grazie per averlo sollevato Jakke, inizialmente l’avevo impostato solo su “Dai una critica”, ma hai ragione, non funziona in tutte le situazioni.
Non mi piace il trucco font-size: 0;, ma per qualche motivo non sono riuscito a far funzionare il trucco visibility:hidden con questo. Inoltre, ho provato a impostare font-size su 1em invece che su px, ma anche questo non sembrava funzionare. Alla fine ho optato per un font leggermente più grande per far risaltare quel pulsante, ma preferirei usare em in modo che il font si adatti.
// Critica Immagine
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label {
// nasconde testo risposta
font-size: 0;
}
}
}
}
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label:after {
// Nuovo testo
font-size: 18px;
content: "Critica Immagine o Rispondi";
}
}
}
}
}
Questo è particolarmente utile per la mia categoria AMA in cui ho cambiato il pulsante di risposta in “Fai una domanda”, perfetto! Aiuta anche la persona che fa l’AMA a capire che deve usare il piccolo pulsante di risposta.
// AMA
body.category-learning-ama {
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label {
// nasconde testo risposta
font-size: 0;
}
}
}
}
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label:after {
// Nuovo testo
font-size: 18px;
content: "Fai una domanda";
}
}
}
}
}
Ho anche impostato un colore di sfondo per il pulsante di risposta in modo che risalti un po’ di più. Non ho ancora capito come farlo passare correttamente per l’hover, qualche idea a riguardo sarebbe utile…
.discourse-no-touch .topic-body .actions .fade-out {
background: var(--primary-low);
}
Comunque, spero che le mie divagazioni aiuteranno gli altri!