qual a melhor forma de corrigir um conflito de estilo do gantry framework e chronoforms?
<p>estou usando os modelos chronoforms e rockettheme na maioria dos sites que eu construo.</p><p>o gantry framework inclui algum estilo bootstrap que substitui o estilo chronoforms, de modo que (por exemplo) uma caixa de entrada de texto tenha um tamanho fixo de 206 pixels:</p><pre><code>input, textarea, .uneditable-input {width: 206px;} </code></pre><p>parece que isso está acontecendo devido à ordem de carregamento da folha de estilo:</p><pre><code>&lt;link rel="stylesheet" href="/components/com\_chronoforms/css/frontforms\_tight.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="/components/com\_chronoforms/css/formcheck/theme/classic/formcheck.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="/components/com\_chronoforms/css/formcheck\_fix.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="/templates/gantry/css-compiled/bootstrap.css" type="text/css" /&gt; </code></pre><p>existe uma maneira fácil de ativar o estilo chronoforms, de preferência ao estilo gantry bootstrap, sem editar arquivos principais?</p>
<p>no chronoforms, você pode carregar o cssc em seus eventos de formulário. você deve ser capaz de substituir o gantry lá.</p>
<p>fala ai anderson, tudo bem? o bootstrap por padrão já vem com algumas configurações de <em>reset</em>, mas, eu particularmente prefiro adicionar o <code>normalize.css</code> em todos meus projetos front-end.</p>
<p>espero ter ajudado.</p> olá, tudo bem com você?

adiciona esse código na sua folha de estilo e veja se dessa forma lhe agrada:

#rodape .institucional > .conteiner > .row-fluid > .span9 {

width: 100%}

qualquer coisa, pode entrar em contato comigo pelo whatsapp da agência: 85991256674

até mais! :wink: <h1>suporte para navegadores mais antigos</h1><p>se o suporte a navegadores mais antigos é uma obrigação, então você não pode ir com vários planos de fundo ou gradientes, você provavelmente vai querer fazer algo assim em um elemento sobressalente <code>div</code>:</p><pre class="lang-css prettyprint-override"><code>#background { position: fixed; top: 0; left: 0; width: 50%; height: 100%; background-color: pink; } </code></pre><p>exemplo: <a href="http://jsfiddle.net/plflw/1704/">http://jsfiddle.net/plflw/1704/</a> </p><p>a solução usa um div fixo extra que preenche metade da tela. como está consertado, ele permanecerá em posição mesmo quando os usuários rolarem. você pode ter que mexer com alguns z-indexes mais tarde, para ter certeza de que seus outros elementos estão acima do div do background, mas não deve ser muito complexo.</p><p>se você tiver problemas, apenas certifique-se de que o resto do seu conteúdo tenha um z-index maior que o elemento de segundo plano e você deve estar pronto.</p><hr><h1>navegadores modernos</h1><p>se os navegadores mais recentes forem sua única preocupação, existem alguns outros métodos que você pode usar:</p><p><strong>gradiente linear:</strong></p><p>esta é definitivamente a solução mais fácil. você pode usar um gradiente linear na propriedade background do corpo para uma variedade de efeitos.</p><pre class="lang-css prettyprint-override"><code>body { height: 100%; background: linear-gradient(90deg, #ffc0cb 50%, #00ffff 50%); } </code></pre><p>isso causa um corte de 50% para cada cor, então não há um &quot;gradiente&quot; como o nome indica. tente experimentar a parte &quot;50%&quot; do estilo para ver os diferentes efeitos que você pode alcançar.</p><p>exemplo: <a href="http://jsfiddle.net/v14m59pq/2/">http://jsfiddle.net/v14m59pq/2/</a> </p><p><strong>vários planos de fundo com tamanho de plano de fundo:</strong></p><p>você pode aplicar uma cor de plano de fundo ao elemento <code>html</code> e, em seguida, aplicar uma imagem de plano de fundo ao elemento <code>body</code> e usar a propriedade <code>background-size</code> para defini-la como 50% da largura da página. isso resulta em um efeito similar, embora seja realmente usado apenas em gradientes se você estiver usando uma imagem ou duas.</p><pre class="lang-css prettyprint-override"><code>html { height: 100%; background-color: cyan; } body { height: 100%; background-image: url('http://i.imgur.com/9hmnxks.png'); background-repeat: repeat-y; background-size: 50% auto; } </code></pre><p>exemplo: <a href="http://jsfiddle.net/6vhshyxg/2/">http://jsfiddle.net/6vhshyxg/2/</a> </p><hr><p><strong>extra nota:</strong> observe que os elementos <code>html</code> e <code>body</code> estão definidos como <code>height: 100%</code> nos últimos exemplos. isso é para garantir que, mesmo que seu conteúdo seja menor que a página, o plano de fundo terá pelo menos a altura da viewport do usuário. sem a altura explícita, o efeito de plano de fundo será reduzido até o conteúdo da sua página. também é apenas uma boa prática em geral.</p> <h2>se você não precisa dar suporte ao ie9 ou inferior, pode usar o flexbox livremente e não precisa usar layouts flutuantes.</h2><p>vale a pena notar que hoje, o uso de elementos flutuantes para o layout está ficando cada vez mais desencorajado com o uso de alternativas melhores.</p><ul> <li><code>display: inline-block</code> - melhor</li> <li><strong> <a href="https://developer.mozilla.org/en-us/docs/css/using\_css\_flexible\_boxes">flexbox</a> </strong>- melhor (mas suporte limitado ao navegador)</li> </ul><p>o flexbox é suportado pelo firefox 18, chrome 21, opera 12.10 e internet explorer 10, safari 6.1 (incluindo o mobile safari) e pelo navegador padrão do android 4.4.</p><p>para uma lista detalhada de navegadores, consulte: <a href="http://caniuse.com/flexbox">http://caniuse.com/flexbox</a> .</p><p>(talvez uma vez que a sua posição seja estabelecida completamente, pode ser a maneira absolutamente recomendada de expor os elementos.)</p><hr><p> <a href="https://i.stack.imgur.com/gyrqs.jpg"><img src="https://i.stack.imgur.com/gyrqs.jpg" alt="clearfix image"> </a> </p><p>um clearfix é uma forma de um elemento para<strong> limpar automaticamente seus elementos filho </strong>, para que você não precise adicionar marcações adicionais. é geralmente usado em <em>layouts de float</em> onde os elementos são flutuados para serem empilhados horizontalmente.</p><p>o clearfix é uma forma de combater o problema do contêiner<strong> <a href="http://complexspiral.com/publications/containing-floats/">zero-height</a> </strong>para elementos flutuantes</p><p>um clearfix é executado da seguinte forma:</p><pre class="lang-css prettyprint-override"><code>.clearfix:after { content: " "; /* older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } </code></pre><p>ou, se você não requer o suporte do ie &lt;8, o seguinte também é bom:</p><pre class="lang-css prettyprint-override"><code>.clearfix:after { content: ""; display: table; clear: both; } </code></pre><p>normalmente você precisaria fazer algo da seguinte maneira:</p><pre class="lang-html prettyprint-override"><code>&lt;div&gt; &lt;div style="float: left;"&gt;sidebar&lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;!-- clear the float --&gt; &lt;/div&gt; </code></pre><p>com clearfix, você só precisa do seguinte:</p><pre class="lang-html prettyprint-override"><code>&lt;div class="clearfix"&gt; &lt;div style="float: left;" class="clearfix"&gt;sidebar&lt;/div&gt; &lt;!-- no clearing div! --&gt; &lt;/div&gt; </code></pre><p>leia sobre isso em<strong> <a href="http://css-tricks.com/all-about-floats/">este artigo - por chris coyer @ css-tricks</a> </strong></p> <p>correção, seu tema ainda estava em conformidade com o xhtml 1.1 e o css 2.1, mas os plug-ins que você adicionou injetaram código adicional que<em>não era</em>compatível.</p><p>infelizmente, não há maneira fácil de manter a conformidade se você estiver usando plug-ins. o melhor que você pode fazer é validar seu tema e todas as marcações pelas quais é pessoalmente responsável, depois esperar que outros desenvolvedores tenham dedicado tempo para validar seu próprio trabalho.</p><p>a alternativa é muito mais trabalho de sua parte - você ainda pode usar a funcionalidade principal dos plug-ins, mas não permitir que eles imprimam<strong> any </strong>markup no navegador. adicione sua própria camada personalizada que solta tudo o que o plug-in toca e construa seu próprio buffer de saída. esta é a forma<em>only</em>você terá controle sobre o estilo de marcação sendo enviado para o navegador.</p><p>vários plug-ins estão começando a usar o html 5 ... outros estão tentando usar o css3. se você instalar esses plug-ins e não tomar medidas para higienizar e validar sua saída, seu site deixará de validar corretamente.</p> <p>olha,</p>
<p>utilizei o mesmo código e funcionou aqui, não precisei alterar nada.</p>
<p>verifique se os dois arquivos (index.html e style.css) estão devidamente salvos.</p>
<p>coloque um <code>;</code> no final da expressão <code>background: #cecece</code>.</p>
<p>caso não funcionar, me avisa aqui.</p> resolvido. inclui um css que resolveu meu problema. vou deixar aqui para quem se interessar:

.gateways-rodape { display: none; !important; }

ul.bandeiras-pagamento {display: block; content: url(“<https://cdn.awsli.com.br/248/248120/arquivos/mercado_pago.png>”); height: 100%; width: 100%;}

[image]

… olá [@liderico\_meira\_neto](/u/liderico_meira_neto), para corrigir isso é fácil.

basta colocar esse código css em sua loja:

@media only screen and (max-width: 750px){

#cabecalho .conteudo-topo .inferior .span8 {

width: 100% !important;

}

} fala rogerio, beleza?nesse caso, você teria que usar as classes de grid do bootstrap.você pode dar uma olhada em como funciona aqui: https://getbootstrap.com/docs/3.3/examples/grid/e tem um curs... oi, vane, como você está?? :hearts: 
sobre esse textinho, eu acho que ele foi colocado mais para tomar tempo e confundir do que ajudar, porque a informação mais importante fica no finalzinho: 
“as diferenças no padrão das manchas são causadas devido à herança quantitativa” 
a herança quantidade é um…