Sobrepor CSS do flexmonster - resolvido

Front-end
#1

Estou usando flexmonster. Tenho este CSS

#fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon {
  right: 2px;
  pointer-events: none;
}
#fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon:before {
  content: "\e90c";
  color: #999;
}
#fm-pivot-view .fm-grid-layout.fm-flat-view .fm-filter-header i.fm-filter-icon {
  left: 0;
}

Mas preciso retirar o fm-filter-icon de algumas telas, pois isto é padrão.

Sei que tenho que contsruir outros arquivos CSS, para sobrepor o atual, mas fiz isso mas não consegui ainda.

Como faço ?

#2

Se o seu CSS esta correto, provavelmente o CSS do flexmonster esta sendo carregado depois do seu, que ocasionaria o override no seu. Para garantir que o seu CSS prevaleça, coloque !important nas suas propriedades ou ve um jeito de fazer o seu CSS vir depois do flexmonster

#3

Acho que não expliquei direito

o do flexmonte está assim:

#fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon {
  right: 2px;
  pointer-events: none;
}
#fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon:before {
  content: "\e90c";
  color: #999;
}
#fm-pivot-view .fm-grid-layout.fm-flat-view .fm-filter-header i.fm-filter-icon {
  left: 0;
}

o meu deve estar assim:

#fm-pivot-view .fm-grid-layout .fm-filter-header {
  right: 2px;
  pointer-events: none;
}
#fm-pivot-view .fm-grid-layout .fm-filter-header {
  content: "\e90c";
  color: #999;
}
#fm-pivot-view .fm-grid-layout.fm-flat-view .fm-filter-header {
  left: 0;
}

isto é, sem o i.fm-filter-icon, que é um ícone.

Entendeu ?

#4

Se por exemplo tem um css de terceiro setando a fonte tamanho 200:

i.fm-filter-icon {
  font-size: 200px;  
}

Se quer resetar no seu css:

i.fm-filter-icon {
  font-size: unset;  
}

Se quiser alterar pra 20 no seu css:

i.fm-filter-icon {
  font-size: 20px;  
}
#5

E atenção que sobrepor é uma coisa (como passei no exemplo acima), remover completamente é outra, você tem que retirar a classe do elemento no html.

#6

Como fazer então ?

#7

Já expliquei, qual seria a dúvida agora?

#8

Como retirar do elemento HTML, somente de um local e não de todos que chamam o componente do flexmonster

#9

Se voce tem no seu html o elemento div com a class abc, retira a classe abc do class.

#10

O problema que no flexmonter não existe removedclass somente inserir class

#11

Encapsula o flexmonster com uma div sua e no css coloca a sua classe antes do css do flexmonster

<div class="minha-classe">
    <div id="fm-pivot-view">
        <div clas="fm-grid-layout">
            <div class="fm-filter-header">
                <i class="fm-filter-icon"></i>
            </div>
        </div>
    </div>
</div>

Nao sei quais propriedades CSS o Flexmonster gera, mas para ocultar voce pode usar o visibility: hidden, display:none ou dar unset na propriedade que ele colocou.

.minha-classe #fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon {
  right: 2px;
  pointer-events: none;
}
.minha-classe #fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon:before {
  content: "\e90c";
  color: #999;
}
.minha-classe #fm-pivot-view .fm-grid-layout.fm-flat-view .fm-filter-header i.fm-filter-icon {
  left: 0;
}

OBS: Apenas copiei as propriedades que voce colocou aqui e inseri a classe da div que estaria encapsulando o flexmonster no inicio

1 curtida
#12

Obrigado @Mike e @javaflex

Funcionou perfeitamente.