Como desativar o .abas-custom

Galera, como vai tudo bem?

Será que vcs podem me ajudar com uma duvida?
Estou incluindo o nav nav-tabs do BOOTSTRAP em minha loja para criar uma area de descrição separada por abas. A idéia é ter uma descrição, uma ficha técnica e um pequeno tutorial separados por abas.

Porém quando eu incluo ele na area de descrição na página de edição do produto, ele inclui dentro de uma class .abas-custom o que aplica efeitos dentro do meu tab-content.

Eu não estou bem habituado com essas edições então gostaria de entender como posso remover/eliminar/ignorar esse estilo do abas-custo

@eliteacessorio veja se funciona… coloca na ultima linha do seu CSS porque se não vai mexer na layout toda

/* Removendo Abas Custom */
.abas-custom .tab-content { box-shadow: 0 0 3px transparent;}

Cara quando eu fa;o isso ele remove inclusive os estilos do tab-content

Eu estou colocando inclusive toda a chamada na loja, chamando o CSS e o JS do bootstrap que baixei:
Porém quando eu removo esse estilo do .abas-custom . tab-content ele remove tudo.

Sem falar que eu fazendo a chamda dessa forma ele esta me dando outra dor de cabeça, gera conflito com os menus das modalidades de pagamento que ficam a direita.

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="https://cdn.awsli.com.br/375/375703/arquivos/bootstrap.min.css" rel="stylesheet" /><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<ul class="nav nav-tabs">
	<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#descricao" role="tab">Descrição</a></li>
	<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#caracteristicas" role="tab">Características</a></li>
	<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#medir" role="tab">Como medir seu Pulso</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="descricao" role="tabpanel">Descrição</div>

<div class="tab-pane fade" id="caracteristicas" role="tabpanel">Características</div>

<div class="tab-pane fade" id="medir" role="tabpanel">
<p>Utilize um Barbante e Régua Enrole para medir seu pulso</p>

<p>Combarbante envolta do seu pulso marque o final dele então agora estique o barbante ao lado de uma régua para saber a medida de seu pulso em centimentros.</p>

<p>Exemplo:</p>

<p><img alt="Como medir seu pulso." height="248" src="https://cdn.awsli.com.br/375/375703/arquivos/como_medir_seu_pulso.jpg" width="600" /></p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.awsli.com.br/375/375703/arquivos/bootstrap.min.js"></script>
<script src="https://cdn.awsli.com.br/375/375703/arquivos/bootstrap.js"></script>

Cara olha que loko:

Se eu chamo o código abaixo:

<ul class="nav nav-tabs">
	<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#descricao" role="tab">Descrição</a></li>
	<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#caracteristicas" role="tab">Características</a></li>
	<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#medir" role="tab">Como medir seu Pulso</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="descricao" role="tabpanel">Descrição</div>

<div class="tab-pane fade" id="caracteristicas" role="tabpanel">Características</div>

<div class="tab-pane fade" id="medir" role="tabpanel">Medir</div>
</div>

Ele retorna dessa maneira:

Se eu coloco o código todo, chamando o JS e o CSS do bootstrap que eu enviei:




<div class="tab-content">
<div class="tab-pane fade in active" id="descricao" role="tabpanel">Descrição</div>

<div class="tab-pane fade" id="caracteristicas" role="tabpanel">Características</div>

<div class="tab-pane fade" id="medir" role="tabpanel">Medir</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.awsli.com.br/375/375703/arquivos/bootstrap.min.js"></script>
<script src="https://cdn.awsli.com.br/375/375703/arquivos/bootstrap.js"></script>

Ele da um conflito muito louco aqui:

me manda o link da sua loja pra mim olha aqui se tem algum outro jeito

http://eliteacessorio.lojaintegrada.com.br/relogio-elite-acessorio-cod-199200258

Da uma olhada man muito loko isso… eles dizem usar o bootstrap, mas quando vc chama as classes do bootstrap esta dando varios erros.

Se eu não chamo o CSS original do BOOTSTRAP não cria os estilos.
Se eu chamo o CSS do BS ele aplica o estilo, mas da conflito no menu de formas de pagamento.

Alguem pode dar uma luz ???

Abs

@eliteacessorio estava olhando aqui… mas suas abas custom estao ocultas ja Raphael… :sweat_smile:

1 Curtida

Minha agencia começou a trabalhar em cima agora …

obrigado mestre!

Oi, eu utilizo somente esse…
Ainda vai uma tabela de brinde.

Obs: Sem javascript, os que você utiliza, são nativos da loja integrada (Bootstrap)

<ul class="nav nav-tabs">
	<li class="active"><a data-toggle="tab" href="#produto">Detalhe do produto</a></li>
	<li><a data-toggle="tab" href="#especicacoes">Especicações</a></li>
	<li><a data-toggle="tab" href="#obs">Observaçoes</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="produto" style="text-align: center;"><span style="font-size:14px;">Baton mineral natural, feito artesanalmente com manteigas orgânicas e óleos vegetais,ceras vegetais, pigmentos naturais e óleos essenciais.</span></div>

<div class="tab-pane fade in active"> </div>

<div class="tab-pane fade in active" style="text-align: center;"><span style="font-size:14px;"><strong>Produto vegano</strong></span></div>

<div class="tab-pane fade in active"> </div>

<div class="tab-pane fade" id="especicacoes">
<table class="shop_attributes" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: transparent; width: 100%; max-width: 100%; margin-bottom: 40px; border-top: 1px solid rgb(238, 238, 238); border-bottom: 1px solid rgb(238, 238, 238); color: rgb(51, 62, 72); font-family: &quot;Open Sans&quot;, HelveticaNeue-Light, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif; font-size: 14px; letter-spacing: -0.14px;">
	<tbody style="box-sizing: border-box;">
		<tr style="box-sizing: border-box; background-color: rgb(245, 245, 245);">
			<th style="box-sizing: border-box; padding: 15px 10px 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: none; width: 292px;">Peso</th>
			<td class="product_weight" style="box-sizing: border-box; padding: 15px 10px 10px; line-height: 1.5; vertical-align: top; border-top: none;">0.10 kg</td>
		</tr>
		<tr style="box-sizing: border-box;">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Dimensões</th>
			<td class="product_dimensions" style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">10 x 34 x 5 mm</td>
		</tr>
		<tr style="box-sizing: border-box; background-color: rgb(245, 245, 245);">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Cores</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;"><span style="font-size: 14px;">Jacarandá (marrom escuro) e  Vermelho Terra e Natural (boca ferrugem)</span></p>
			</td>
		</tr>
		<tr style="box-sizing: border-box;">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Fabricação</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">Artesanal</td>
		</tr>
		<tr style="box-sizing: border-box; background-color: rgb(245, 245, 245);">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Largura</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;">10 mm</p>
			</td>
		</tr>
		<tr style="box-sizing: border-box;">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Comprimento</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;">34 mm</p>
			</td>
		</tr>
		<tr style="box-sizing: border-box; background-color: rgb(245, 245, 245);">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Composicão</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;"><span style="font-size: 14px;">Manteigas orgânicas e óleos vegetais, ceras vegetais, pigmentos naturais e óleos essenciais.</span></p>
			</td>
		</tr>
		<tr style="box-sizing: border-box;">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Marca</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;">Origen</p>
			</td>
		</tr>
		<tr style="box-sizing: border-box; background-color: rgb(245, 245, 245);">
			<th style="box-sizing: border-box; padding: 10px; text-align: left; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239); width: 292px;">Formato</th>
			<td style="box-sizing: border-box; padding: 10px; line-height: 1.5; vertical-align: top; border-top: 1px solid rgb(236, 238, 239);">
			<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;">Refil</p>
			</td>
		</tr>
	</tbody>
</table>
</div>

<div class="tab-pane fade" id="obs">
<p style="text-align: center;"><span style="font-size:16px;"><strong>Fato importante</strong></span></p>

<p style="text-align: center;"><span style="font-size:14px;">Livre de metais pesados,petrolatos,essências sintéticas ou produtos de origem animal.Altamente hidratante, cuida dos lábios além de pintar.</span></p>
</div>
</div>

Loja que estou utlizando (montando)
https://origen-biocosmeticos.lojaintegrada.com.br/baton-natural

Para retirar aqueles pontinho, você deve utilizar:

#descricao li, #descricao ul {
list-style-type: none;
}

1 Curtida