Estou fazendo edições muito pequenas e usuais em vários estilos de um único componente de tema principal para nosso site. Isso significa que não precisamos fazer um fork ou editar os estilos remotos sem nos preocuparmos com que nossas alterações sejam perdidas na próxima atualização. Até agora, minhas edições foram universais, como alterar o botão de curtir, etc.
Gostaria de saber se é possível mirar um estilo exato do componente de tema sem afetar os outros? Possivelmente por meio de algumas variáveis de dados?
Não quero ter que criar um componente de tema separado para algo tão pequeno. Gosto da ideia de ter um único componente de tema para minhas edições universais.
Sim, geralmente você pode contar com a especificidade dentro do CSS. Se você não estiver familiarizado com CSS, a ideia básica é: se houver vários estilos direcionados ao mesmo elemento, o estilo mais específico prevalecerá.
Portanto, o que você deve procurar é saber se o elemento (ou um elemento pai) no componente que você está tentando modificar possui uma classe exclusiva em algum lugar… algo como:
No exemplo acima, seja .custom-link ou, se não houver uma classe direta no elemento, utilizando o pai como .custom-container a. Se o componente tiver o estilo originalmente definido como .custom-link, você pode garantir que ele seja substituído ao direcionar de forma mais específica a.custom-link.
Se não houver uma classe exclusiva em algum lugar do componente, você também deve poder usar o contêiner de plugin outlet. Quando um plugin outlet é usado em uma personalização, uma classe personalizada é adicionada ao contêiner. Usando novamente o exemplo de estilizar um link, isso pode parecer algo como .above-site-header-outlet.brand-header a, onde “brand-header” é o nome do modelo adicionado pelo componente.
No pior caso, você também pode pedir à pessoa que criou o componente para adicionar uma classe se não conseguir encontrar uma maneira fácil de estilizar o que você precisa.
Se isso for difícil de seguir, fornecer um exemplo específico do componente que você está tentando estilizar ajudaria.
Como exemplo, tenho instâncias do Graceful instaladas. Graceful Theme, e agora percebi que você publicou isso como uma continuação de um estilo anterior.
No meu componente de tema universal, fiz coisas como fazer upload de ativos de fundo, alterar o botão de curtir e algumas outras coisas, mas percebi que quero mudar a cor de fundo na versão que usa a paleta escura para o que eu quiser, sem afetar a versão que usa a paleta clara.
Para ser exato, isso:
background-color: $primary-very-low;
Agora, quero fazer o máximo possível em um único componente de tema, já que tecnicamente é o mesmo estilo, até que pequenas coisas como essa começassem a surgir, que não eram alterações universais. Não quero ter que criar um componente “Escuro” e um componente “Claro” se for possível evitar.
O objetivo aqui é deixar o Graceful intacto, exceto pelas alterações de paleta, e fazer tudo a partir do nosso próprio componente, para que, quando você ou outra pessoa publicar uma atualização, não precisemos reaplicar nossas edições constantemente.
Notei que o Discourse é muito focado em variáveis, o que adoro, e ler os guias de temas tem sido um prazer. Percebi que coisas como [data-topic-id="117"] existem, então talvez algo como [data-theme-id] possa ser proposto?
@awesomerobot Apenas para remover qualquer confusão, ainda costumo chamar temas completos de estilos, pois ainda estamos no processo de importar nosso grande fórum de outro, mas em referência a estilo, quis dizer tema, desculpe!