Molto nuovo a CSS e affini, quindi scusate se quanto segue è incredibilmente basilare e/o prolisso.
La mia domanda è: come si identificano e rimuovono gli elementi “ember” tramite CSS? Immagino si possa fare tramite il suffisso “display:none”.
Solo come esempio casuale, supponiamo di voler eliminare il pulsante dei segnalibri in fondo ai topic. Quando cerco l’elemento nella console di Chrome, vedo solo il CSS per tutti i pulsanti del piè di pagina dei topic in generale, ma non quello specifico; quindi, se applicassi “display:none”, si applicherebbe a tutti i pulsanti invece che solo a quello.
risultato dell’applicazione di display:none al tag CSS del pulsante.
Sono abbastanza sicuro che sia possibile rimuovere solo uno di essi e che questo si estenda ad altri elementi ember, la maggior parte dei quali è raggruppata in modo simile; prima sono riuscito a eliminare altri elementi ember (nello specifico il pulsante di giustificazione nella barra degli strumenti del compositore), sebbene solo con l’aiuto di altri utenti di questo forum.
Tuttavia, come si fa a identificare il tag CSS specifico a cui applicare “display:none”?
Ancora una volta, scusate se è troppo basilare o prolisso.
Scusa se ho fatto un esempio poco chiaro, poiché non sapevo che esistesse un’opzione al di fuori del CSS. Ho semplicemente scelto un elemento Ember a caso.
Forse un esempio migliore si trova nella pagina utente. Il punto è che sto cercando di capire come identificare cosa si può inserire nel CSS (simile al post citato in poi, tratto dal thread “MD Composer Extras” a cui ho fatto riferimento sopra), in modo da poter teoricamente impedire la visualizzazione di un elemento Ember.
Un esempio migliore sarebbe la barra laterale nella sezione Attività di un Profilo. Per quanto ne so, non esiste un’opzione specifica per questo nelle Impostazioni, ma sarebbe necessario utilizzare il CSS.
Quello che stai cercando si chiama “selettore CSS” (o semplicemente “selettore” per brevità). I selettori CSS vengono utilizzati per “trovare” (o selezionare, ovviamente) l’elemento DOM che desideri stilizzare.
Ad esempio, da dove sto scrivendo ora, cercherò il selettore per il tuo nome utente nel compositore (solo un esempio).
Cosa facciamo: passiamo il mouse sopra l’elemento (il tuo nome utente b481 nel compositore), facciamo clic con il tasto destro e apparirà un menu con la voce “Ispeziona”.
Clicca su “Ispeziona” e si aprirà la console per sviluppatori (ora sto usando Chrome su macOS); con un po’ di fortuna, l’elemento che ci interessa verrà evidenziato.
Se scegli questa opzione e copi il selettore, in questo esempio otterrai:
#ember433 > span > a
Questo non è un selettore molto buono perché #ember433 è assegnato da Ember, ma puoi spostare il mouse sopra gli elementi nella console e vedrai che verranno evidenziati sia nella pagina di interesse che nella console. La buona notizia è che siamo già vicini, velocemente e facilmente.
Puoi quindi trovare l’elemento che desideri nascondere e, in questo esempio, puoi fare di nuovo clic con il tasto destro sull’elemento (questo esempio) e testarlo scegliendo “aggiungi attributo” dal menu sotto il mouse per verificare il nostro selettore.
Ho appena fatto questo come esempio in questa cattura:
Quindi, sappiamo che in questo caso, se usiamo il CSS:
span.action-title{
display:none;
}
possiamo aggiungerlo al nostro tema e avremo nascosto quell’elemento.
In questo caso, dovresti verificare se ci sono più elementi nella pagina con lo stesso selettore e dovresti anche assicurarti che il selettore scelto non sia troppo “grezzo” e non selezioni elementi su altre pagine che non desideri nascondere.
Più specifico è il selettore, meglio è.
Ad esempio, in questo caso, possiamo renderlo più specifico specificando che il nostro selettore è un figlio di un elemento genitore, in questo caso (non testato):
Puoi vedere che stiamo diventando più specifici; e a questo punto dovresti avere un’idea abbastanza chiara di come cercare gli elementi che desideri modificare.
Buona caccia!
Un’ultima nota:
Puoi usare JavaScript e jQuery per selezionare elementi, ma ho scoperto che nelle app SPA come Discourse/Ember, i selettori CSS funzionano bene, almeno per me. Tendo a usare i selettori JavaScript solo quando devo attraversare il DOM in modo “complicato” (il che può anche essere molto divertente).
Ho riscontrato un piccolo problema. Nel tentativo di eliminare l’esempio “segnalibri” che ho postato sopra, non riesco a farlo perché il numero Ember associato continua a cambiare.
Ecco il codice che ho usato quando era 52. Ho anche provato senza !important.
Sì, te l’ho già detto @b481: non dovresti scegliere un selettore basato sulle classi e sugli ID assegnati da Ember.
Dovresti usare un selettore che non sia una classe assegnata da Ember. Ti ho già descritto come farlo nella mia risposta precedente.
NOTA LATERALE: Per tua informazione, in questo modo non stai “eliminando” questi elementi dal DOM (come hai menzionato sopra), ma solo “nascondendoli”, ma questo è un argomento per un’altra occasione
Per favore, usa un selettore che non viene assegnato automaticamente da Ember.
Spero che questo ti aiuti.
Nota:
Se stai cercando di nascondere (nel tuo esempio) il pulsante dei segnalibri in fondo a un argomento, hai provato:
#topic-footer-button-bookmark
{
display:none;
}
Mi dispiace, ma dai tuoi messaggi non riesco a capire esattamente quale elemento nel DOM (nell’esempio o reale) desideri nascondere.
Qualcuno sa come eliminare solo l’opzione “cita l’intero post” senza cancellare anche quella sulla sinistra? Entrambe condividono lo stesso CSS e lo stesso div genitore, quindi non ho trovato un modo per eliminarne una senza l’altra.
