Jump to content

Problem with CSS in CMS

ThomasMery

By ThomasMery
in General topics

 Share

Recommended Posts

ThomasMery Newbie

ThomasMery

Posted
Posted
Hello Community,
 
I need your help.
 
Make a CSS for FAQ (CMS page) but put it in the "BackOffice" throws me an error The content field is not valid.
 
I put it where it says Tools -> Source code
 
 
What should I do? (I am new to prestashop, so if you could explain the step by step I agredesco too.
 
Attached CSS code.
 
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Preguntas frecuentes</h2>
<p>Debe hacer click en la pregunta para ver la respuesta de cada pregunta.</p>
<button class="accordion">Como hago para comprar en www.soccercastle.com?</button>
<div class="panel">
  <p>Tenemos un video subido en nuestra fan page haciendo el paso a paso para comprar un producto en www.soccercastle.com lo puede ver en el   <p><b><a href="http://bit.ly/2qvbKM1" target="_blank">Siguiente link</a></b></p>

  </p>
</div>

<button class="accordion">Cuales son las formas de pago?</button>
<div class="panel">
  <p>En soccer castle aceptamos muchas formas de pago que son las siguientes :  
  <li>-Transferencia electronica (Manejada por khipu)</a></li>
<li>  -Pago con Tarjeta de Credito Visa,MasterCard y entre otras (Manejada por WebPay)
</a></li>
<li>  -Pago con Tarjeta de Debito en gran mayoria todos los bancos chilenos. 
</li>
<li>  -Pago a través de Servipag
</li>
<li>  -RedCompra
</li>
<li> Pago a través de Multicaja
</li> 
<li>   -Pago en efectivo en Caja Vecina (Deposito Bancario)
</li>


  

</p>
</div>


<button class="accordion">Cuál es el mínimo de artículos que se pueden comprar?</button>
<div class="panel">
  <p>En Soccer Castle se puede comprar por unidad.
</p>
</div>

<button class="accordion">Cuánto tarda en llegar mi pedido?</button>
<div class="panel">
  <p>Los tiempos de envío comienzan a correr a partir de la confirmación del pago. 

Los tiempos de demora en los envíos dependen de muchos factores que pueden ser ajenos a Soccer Castle. 

Por tal motivo, le recordamos que los envíos pueden demorar entre 48hs y 7 días hábiles y que, en caso de requerir productos fuere de stock o requerimientos especiales la demora puede ser de hasta 30 días hábiles.</p>
</div>



<button class="accordion">Puede otra persona recibir mi pedido?</button>
<div class="panel">
  <p>Puede recibirlo cualquier persona que se encuentre en el domicilio acordado.
</p>
</div>

<button class="accordion">Qué pasa si no hay nadie para recibir mi pedido? </button>
<div class="panel">
  <p>De no encontrarse persona alguna en el domicilio indicado por el usuario, la empresa de courier volverá al día siguiente, de no encontrarse nadie nuevamente, el pedido volverá a la empresa de courier, debiendo comunicarse con atención al cliente de Correos Chile para coordinar una nueva entrega.
</p>
</div>

<button class="accordion">Cómo hago para seguir mi pedido?</button>
<div class="panel">
  <p>Una vez que el pedido fue despachado, recibirás un correo electrónico informando el número de tracking, que te permitirá seguir el pedido a través del portal del courier correspondiente.
  

</p>
</div>

<button class="accordion">¿Son las camisetas originales?</button>
<div class="panel">
  <p>Los productos son réplicas idénticas de los originales. Se fabrican con los mismos materiales, seriegrafía, etiquetas, etc.
Vienen en bolsas de la marca, perfectamente empaquetadas.

  

</p>
</div>

<button class="accordion"> Mi pedido no llega, ¿qué hago?</button>
<div class="panel">
  <p>Si han pasado más de 14 días HABILES desde que realizó el pago contacte con [email protected] ya que es posible que su pedido haya quedado retenido en aduanas o haya problemas de stock. Tendrá una respuesta en menos de 24h.

  

</p>
</div>
<button class="accordion"> ¿Puedo pagar a contra reembolso? </button>
<div class="panel">
  <p>No.
  

</p>
</div>

<button class="accordion"> ¿El envio es gratis? </button>
<div class="panel">
  <p>Si es gratis, tambien hacemos envios internacionales y GRATIS.
  

</p>
</div>




<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>

</body>
</html>

 

Link to comment
Share on other sites
shokinro Newbie

shokinro

Posted
Posted

You should not include Javascript and CSS in your CMS page contents, since it will be portion of the page when it is rendered.

Put in another words, PrestaShop will add header and other contents to the page.

 

If you really want to use javascript and CSS, you need to modify your theme to add theme in a proper file.

Link to comment
Share on other sites
ThomasMery Newbie

ThomasMery

Posted
  • Author
Posted

So how I do that? 

 

You should not include Javascript and CSS in your CMS page contents, since it will be portion of the page when it is rendered.

Put in another words, PrestaShop will add header and other contents to the page.

 

If you really want to use javascript and CSS, you need to modify your theme to add theme in a proper file.

Link to comment
Share on other sites
ThomasMery Newbie

ThomasMery

Posted
  • Author
Posted

Do I add it in any place of the file? or an especific line or something like that?

You can try to add your Javascript to following file

 

/themes/YourTheme/js/cms.js


And the same you can add your css in following file

/themes/YourTheme/css/cms.css

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...