Muy nuevo en CSS y cosas por el estilo, así que disculpad si lo que sigue es increíblemente básico y/o demasiado extenso.
Mi pregunta es: ¿cómo se identificarían y eliminarían los elementos de “ember” mediante CSS? Supongo que se haría mediante el sufijo “display:none”.
Solo como un ejemplo aleatorio, digamos que quisiera eliminar el botón de marcador al final de los temas. Al buscar el elemento en la consola de Chrome, solo puedo ver el CSS para todos los botones del pie de página de los temas en general, pero no para ese en particular, por lo que si aplicara “display:none”, se aplicaría a todos los botones en lugar de solo a uno.
resultado de aplicar display:none a la etiqueta CSS del botón.
Estoy bastante seguro de que sería posible eliminar solo uno y que esto se extendería a otros elementos de ember, la mayoría de los cuales están agrupados de manera similar, ya que antes he logrado eliminar otros elementos de ember (específicamente el botón de justificación en la barra de tareas del compositor), aunque solo con la ayuda de otros usuarios en este foro.
Sin embargo, ¿cómo se podría identificar la etiqueta CSS específica a la que se le podría aplicar “display:none”?
Una vez más, disculpad si esto es demasiado básico o demasiado extenso.
Disculpas si di un mal ejemplo, ya que no sabía que uno tenía una opción fuera de CSS. Solo elegí un elemento de Ember al azar.
Supongo que un mejor ejemplo estaría en la página de usuario. La cuestión es que estoy buscando cómo identificar qué se podría poner en CSS (similar al post citado a partir del hilo “MD Composer Extras” que mencioné anteriormente), para que hipotéticamente se pueda evitar que un elemento de Ember se muestre.
Un mejor ejemplo sería la barra lateral en la sección de Actividad de un Perfil. Por lo que sé, no hay una opción específica para esto en Configuración, pero requeriría usar CSS.
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 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.
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):
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).
He encontrado un pequeño problema. Al intentar eliminar el ejemplo de “marcadores” que publiqué arriba, no puedo hacerlo porque el número de Ember adjunto sigue cambiando.
Aquí está el código que usé cuando era 52. También lo he probado sin !important.
Sí, ya te mencioné eso, @b481: no debes elegir un selector basado en las clases e IDs asignados por Ember.
Debes usar un selector que no sea una clase asignada por Ember. Ya te expliqué cómo hacerlo en mi respuesta anterior.
SIDEBAR: Por si acaso, ten en cuenta que de esta manera no estás “eliminando” estos elementos del DOM (como mencionaste arriba), sino que solo los estás “ocultando”, pero ese es un tema para otro día
Por favor, usa un selector que no sea asignado automáticamente por Ember.
Espero que esto te ayude.
Nota:
Si estás intentando ocultar (en tu ejemplo) el botón de marcadores en la parte inferior de un tema, ¿has probado lo siguiente?
#topic-footer-button-bookmark
{
display:none;
}
Lo siento, pero por tus publicaciones, realmente no sé exactamente qué elemento del DOM (del ejemplo o real) deseas ocultar.
¿Alguien sabe cómo eliminar solo la opción de “citar toda la publicación” sin eliminar también la que está a la izquierda? Ambas comparten el mismo CSS y el mismo div padre, por lo que no he encontrado una manera de eliminar una sin la otra.
