Hola @b481
Lo que buscas se llama “selector CSS” (o simplemente “selector” para abreviar). Los selectores CSS se utilizan para “encontrar” (o seleccionar, obvio) el elemento del DOM que deseas estilizar.
Por ejemplo, desde donde estoy escribiendo ahora, voy a buscar el selector de tu nombre de usuario en el editor (solo como ejemplo).
Lo que hacemos es pasar el mouse sobre el elemento (tu nombre de usuario b481 en el editor), hacer clic derecho y aparecerá un menú con la opción “Inspeccionar”.
Haz clic en “Inspeccionar” y se abrirá la consola de desarrollador (ahora estoy en Chrome, en macOS); y con un poco de suerte, el elemento que buscamos quedará resaltado.
Si haces clic derecho sobre el elemento resaltado en la consola, verás una opción del menú Copiar → Copiar selector.
Si lo haces y copias el selector, en este ejemplo obtendrás:
#ember433 > span > a
Este no es realmente un selector muy bueno porque #ember433 es asignado por Ember, pero puedes mover el mouse sobre los elementos en la consola y se resaltarán tanto en la página de interés como en la consola. La buena noticia es que estamos en el buen camino, de manera rápida y sencilla.
Luego puedes encontrar el elemento que deseas ocultar y, en este ejemplo, puedes hacer clic derecho nuevamente sobre el elemento (en este caso) y probar seleccionando “agregar atributo” desde el menú bajo el mouse para verificar nuestro selector.
Acabo de hacer esto como ejemplo en esta captura:
Y ahora ese elemento con tu id ‘b481’ está oculto en esa parte del DOM…
Así que, en este caso, sabemos que si usamos el CSS:
span.action-title{
display:none;
}
Podemos agregarlo a nuestro tema y habremos ocultado ese elemento.
En este caso, deberías verificar si hay más de un elemento en la página con el mismo selector y también asegurarte de que el selector elegido no sea demasiado amplio y seleccione elementos en otras páginas que no quieras ocultar.
Cuanto más específico sea el selector, mejor.
Por ejemplo, en este caso, podemos hacerlo más específico indicando que nuestro selector es un hijo de un elemento padre, en este caso (no probado):
div.compose-action-title > span.action-title{
display:none;
}
Puedes ver que nos estamos volviendo más específicos; y en este punto, deberías tener una idea bastante clara de cómo buscar los elementos que deseas modificar.
¡Buena caza!
Una nota final:
Puedes usar JavaScript y jQuery para seleccionar elementos, pero he encontrado que en aplicaciones SPA como Discourse/Ember, los selectores CSS funcionan bien, al menos para mí. Suelo usar selectores de JavaScript solo cuando necesito recorrer el DOM de alguna manera “compleja” (lo cual también puede ser muy divertido).
Espero que esto ayude.
Ver también: