Muito novo em CSS e afins, então peço desculpas se o que segue for incrivelmente básico e/ou prolixo.
Minha pergunta é: como identificar e remover elementos “ember” via CSS? Suponho que isso seja feito através do sufixo “display:none”.
Só como um exemplo aleatório, digamos que eu queira me livrar do botão de marcador na parte inferior dos tópicos. Ao procurar o elemento no console do Chrome, consigo ver apenas o CSS para todos os botões do rodapé do tópico em geral, mas não aquele especificamente. Então, se eu aplicasse “display:none”, isso afetaria todos os botões em vez de apenas um.
Resultado de aplicar “display:none” na tag CSS do botão.
Tenho quase certeza de que é possível remover apenas um e que isso se estenderia a outros elementos ember, a maioria dos quais está agrupada de forma semelhante. Antes, consegui excluir outros elementos ember (especificamente o botão de justificar na barra de tarefas do compositor), embora apenas com ajuda de outros usuários neste fórum.
No entanto, como identificar a tag CSS específica à qual você pode aplicar “display:none”?
Mais uma vez, peço desculpas se isso for excessivamente básico ou prolixo.
Peço desculpas se dei um exemplo ruim, pois eu não sabia que havia uma opção fora do CSS. Apenas escolhi um elemento Ember aleatório.
Suponho que um exemplo melhor estaria na página do usuário. O fato é que estou procurando saber como identificar o que se pode colocar no CSS (semelhante ao post citado a partir do tópico “MD Composer Extras” que referenciei acima), para que você pudesse, hipoteticamente, impedir que um elemento Ember fosse exibido.
Um exemplo melhor seria a barra lateral na seção de Atividade de um Perfil. Até onde sei, não há uma opção específica para isso nas Configurações, mas seria necessário usar CSS.
O que você está procurando é chamado de “seletor CSS” (ou apenas “seletor”, para abreviar). Seletores CSS são usados para “encontrar” (ou selecionar, obviamente) o elemento do DOM que você deseja estilizar.
Por exemplo, de onde estou digitando agora, vou procurar o seletor do seu nome de usuário no compositor (apenas um exemplo).
O que fazemos é passar o mouse sobre o elemento (seu nome de usuário b481 no compositor), clicar com o botão direito e um menu aparecerá com o item “Inspecionar”.
Clique em “Inspecionar” e o console de desenvolvedor (agora estou no Chrome, no macOS); e com um pouco de sorte, o elemento que queremos estará destacado.
Se você fizer isso e copiar o seletor, neste exemplo, obterá:
#ember433 > span > a
Isso não é realmente um seletor muito bom porque o #ember433 é atribuído pelo Ember, mas você pode passar o mouse sobre os elementos no console e eles serão destacados tanto na página de interesse quanto no console. A boa notícia é que estamos no caminho certo, de forma rápida e fácil.
Você pode então encontrar o elemento que deseja ocultar e, neste exemplo, pode clicar com o botão direito novamente no elemento (neste exemplo) e testar escolhendo “adicionar atributo” no menu sob o mouse para testar nosso seletor.
Podemos adicioná-lo ao nosso tema e teremos ocultado esse elemento.
Neste caso, você deve verificar se há mais de um elemento na página com o mesmo seletor e também deve verificar para garantir que o seletor escolhido não será excessivo e selecionará elementos em outras páginas que você não deseja ocultar.
Quanto mais específico for o seletor, melhor.
Por exemplo, neste caso, podemos torná-lo mais específico, indicando que nosso seletor é um filho de um elemento pai, neste caso (não testado):
Você pode ver que estamos ficando mais específicos; e neste ponto, você deve ter uma boa ideia de como procurar os elementos que deseja modificar.
Boa caçada!
Uma observação final:
Você pode usar JavaScript e jQuery para selecionar elementos, mas descobri que em aplicativos SPA como Discourse/Ember, seletores CSS funcionam bem, pelo menos para mim. Eu costumo usar seletores JavaScript apenas quando preciso percorrer o DOM de alguma forma “complexa” (o que também pode ser muito divertido).
Encontrei um pequeno problema. Ao tentar excluir o exemplo “bookmarks” que postei acima, não consigo fazê-lo porque o número do Ember anexado continua mudando.
Aqui está o código que usei quando era 52. Também tentei sem o !important.
Sim, já mencionei isso antes @b481: você não deve escolher um seletor com base nas classes e IDs atribuídos pelo Ember.
Você deve usar um seletor que não seja uma classe atribuída pelo Ember. Descrevi como fazer isso na minha resposta anterior.
SIDEBAR: Só para informar, você não está “excluindo” esses itens do DOM dessa maneira (como você mencionou acima), está apenas “escondendo”-os, mas esse é um assunto para outro dia
Por favor, use um seletor que não seja atribuído automaticamente pelo Ember.
Espero que isso ajude.
Nota:
Se você está tentando esconder (no seu exemplo) o botão de marcador na parte inferior de um tópico, já tentou:
#topic-footer-button-bookmark
{
display:none;
}
Desculpe, mas pelas suas mensagens, realmente não sei exatamente qual elemento no DOM (exemplo ou real) você deseja esconder.
Alguém sabe como remover apenas a opção “citação de toda a postagem” sem também remover a que está à esquerda? Ambas compartilham o mesmo CSS e o mesmo div pai, então não encontrei uma maneira de eliminar uma sem afetar a outra.
