Jump to content

Como cambiar medidas Homeslider de la plantilla defautl

juandelarce

By juandelarce
in Discusión general

 Share

Recommended Posts

juandelarce Newbie

juandelarce

Posted
Posted

Hola a todos, estoy intentando cambiar el alto (height) del Slider del tema default -plantilla por defecto de prestashop- y no encuentro el archivo donde cambiarlo.

 

Con firebug lo veo y puedo cambiarlo, pero no sé donde está quiero cambiar es lo siguiente:

 

<div id="homepage-slider" class="col-xs-12">
<div class="bx-wrapper" style="max-width: 1100px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
 

Lo que quiero cambiar esa cifra en rojo, y voy al TPL y CSS del módulo "homeslider" y no encuentro esa fracción de código.

 

Alguien puede echarme una mano?

 

Gracias de antemano

 

 

Link to comment
Share on other sites
juandelarce Newbie

juandelarce

Posted
  • Author
Posted

Gracias shacker por tu ayuda, pero es que no lo encuentro.

 

Pego el CSS completo del módulo, y vuelvo a indicarte que este código: <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;"> yo lo veo con firebug, pero no en el módulo.

 

Si puedes dime donde insertar ese alto del slider.

 

Gracias de nuevo

 

/******************************************************************************
                        Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; }
  @media (max-width: 767px) {
    #homepage-slider {
      width: 100%;
      max-width: 100%;
      padding-top: 20px; } }
  #homepage-slider #homeslider {
    margin: 0 auto;
    padding: 0; }
  #homepage-slider .homeslider-description {
    padding: 50px 50px;
    cursor: pointer; }
    #homepage-slider .homeslider-description h2 {
      font-size: 2.7em;
      color: white;
      margin: 0;
      padding: 0; }
    #homepage-slider .homeslider-description p {
      width: 50%;
      font-size: 1.15em;
      line-height: 1.3em;
      padding: 0.5em 0;
      color: white; }
    #homepage-slider .homeslider-description button {
      font-size: 1.2em;
      text-transform: uppercase; }
    @media (max-width: 1200px) {
      #homepage-slider .homeslider-description {
        padding: 20px;
        font-size: 0.8em; } }
    @media (max-width: 768px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.7em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.5em; } }
    @media (max-width: 480px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.5em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.7em; } }

/*****************************************************************************
                        BXSlider Styles
********************************************************************************/
#homepage-slider .homeslider-container {
  position: relative; }
#homepage-slider .homeslider-image {
  position: absolute;
  left: 0;
  top: 0; }
#homepage-slider .homeslider-description {
  position: absolute;
  left: 0;
  top: 0; }
#homepage-slider .bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1; }
  #homepage-slider .bx-wrapper a {
    display: block; }
  #homepage-slider .bx-wrapper img {
    display: block;
    max-width: 100%;
    height: auto; }
#homepage-slider .bx-wrapper .bx-viewport {
  width: 100%; }
#homepage-slider .bx-wrapper .bx-pager,
#homepage-slider .bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%; }
#homepage-slider .bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(images/bx_loader.gif) center center no-repeat white;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000; }
#homepage-slider .bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #666;
  padding-top: 20px; }
#homepage-slider .bx-wrapper .bx-pager .bx-pager-item,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline; }
#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #000; }
#homepage-slider .bx-wrapper .bx-prev {
  right: 60px; }
  #homepage-slider .bx-wrapper .bx-prev:after {
    content: "\f053"; }
#homepage-slider .bx-wrapper .bx-next {
  right: 10px; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }
#homepage-slider .bx-wrapper .bx-controls-direction a {
  position: absolute;
  bottom: 10px;
  outline: 0;
  width: 52px;
  height: 52px;
  text-indent: -9999px;
  z-index: 9999;
  border: 2px solid white; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:before {
    height: 48px;
    width: 48px;
    display: block;
    background: white;
    content: ".";
    opacity: 0.14;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:after {
    display: block;
    width: 48px;
    height: 48px;
    color: white;
    text-indent: 0;
    text-align: center;
    font-size: 21px;
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 16px 0 0 0; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
    background: #333333;
    opacity: 0.83; }
#homepage-slider .bx-wrapper .bx-controls-direction a.disabled {
  display: none; }
#homepage-slider .bx-wrapper .bx-controls-auto {
  text-align: center; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -11px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: -86px 0; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -44px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: -86px -33px; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px; }
#homepage-slider .bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666666 \9;
  background: rgba(80, 80, 80, 0.75);
  width: 100%; }
#homepage-slider .bx-wrapper .bx-caption span {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  font-size: .85em;
  padding: 10px; }

.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before {
  background: #333333; }
 

Link to comment
Share on other sites
  • 1 year later...
jache83 Newbie

jache83

Posted
Posted

Gracias shacker por tu ayuda, pero es que no lo encuentro.

 

Pego el CSS completo del módulo, y vuelvo a indicarte que este código: <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;"> yo lo veo con firebug, pero no en el módulo.

 

Si puedes dime donde insertar ese alto del slider.

 

Gracias de nuevo

 

/******************************************************************************

                        Home Page Slider

*******************************************************************************/

#homepage-slider {

  padding-left: 0;

  padding-right: 0;

  margin-bottom: 14px;

  max-width: 100%;

  max-height: 100%;

  overflow: hidden;

  position: relative;

  z-index: 1;

  float: left; }

  @media (max-width: 767px) {

    #homepage-slider {

      width: 100%;

      max-width: 100%;

      padding-top: 20px; } }

  #homepage-slider #homeslider {

    margin: 0 auto;

    padding: 0; }

  #homepage-slider .homeslider-description {

    padding: 50px 50px;

    cursor: pointer; }

    #homepage-slider .homeslider-description h2 {

      font-size: 2.7em;

      color: white;

      margin: 0;

      padding: 0; }

    #homepage-slider .homeslider-description p {

      width: 50%;

      font-size: 1.15em;

      line-height: 1.3em;

      padding: 0.5em 0;

      color: white; }

    #homepage-slider .homeslider-description button {

      font-size: 1.2em;

      text-transform: uppercase; }

    @media (max-width: 1200px) {

      #homepage-slider .homeslider-description {

        padding: 20px;

        font-size: 0.8em; } }

    @media (max-width: 768px) {

      #homepage-slider .homeslider-description {

        padding: 30px;

        font-size: 0.7em; }

        #homepage-slider .homeslider-description p {

          font-size: 1.5em; } }

    @media (max-width: 480px) {

      #homepage-slider .homeslider-description {

        padding: 30px;

        font-size: 0.5em; }

        #homepage-slider .homeslider-description p {

          font-size: 1.7em; } }

 

/*****************************************************************************

                        BXSlider Styles

********************************************************************************/

#homepage-slider .homeslider-container {

  position: relative; }

#homepage-slider .homeslider-image {

  position: absolute;

  left: 0;

  top: 0; }

#homepage-slider .homeslider-description {

  position: absolute;

  left: 0;

  top: 0; }

#homepage-slider .bx-wrapper {

  position: relative;

  padding: 0;

  *zoom: 1; }

  #homepage-slider .bx-wrapper a {

    display: block; }

  #homepage-slider .bx-wrapper img {

    display: block;

    max-width: 100%;

    height: auto; }

#homepage-slider .bx-wrapper .bx-viewport {

  width: 100%; }

#homepage-slider .bx-wrapper .bx-pager,

#homepage-slider .bx-wrapper .bx-controls-auto {

  position: absolute;

  bottom: -30px;

  width: 100%; }

#homepage-slider .bx-wrapper .bx-loading {

  min-height: 50px;

  background: url(images/bx_loader.gif) center center no-repeat white;

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2000; }

#homepage-slider .bx-wrapper .bx-pager {

  text-align: center;

  font-size: .85em;

  font-family: Arial, Helvetica, sans-serif;

  font-weight: bold;

  color: #666;

  padding-top: 20px; }

#homepage-slider .bx-wrapper .bx-pager .bx-pager-item,

#homepage-slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item {

  display: inline-block;

  *zoom: 1;

  *display: inline; }

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {

  background: #666;

  text-indent: -9999px;

  display: block;

  width: 10px;

  height: 10px;

  margin: 0 5px;

  outline: 0;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px; }

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a:hover,

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a.active {

  background: #000; }

#homepage-slider .bx-wrapper .bx-prev {

  right: 60px; }

  #homepage-slider .bx-wrapper .bx-prev:after {

    content: "\f053"; }

#homepage-slider .bx-wrapper .bx-next {

  right: 10px; }

  #homepage-slider .bx-wrapper .bx-next:after {

    content: "\f054"; }

#homepage-slider .bx-wrapper .bx-controls-direction a {

  position: absolute;

  bottom: 10px;

  outline: 0;

  width: 52px;

  height: 52px;

  text-indent: -9999px;

  z-index: 9999;

  border: 2px solid white; }

  #homepage-slider .bx-wrapper .bx-controls-direction a:before {

    height: 48px;

    width: 48px;

    display: block;

    background: white;

    content: ".";

    opacity: 0.14;

    text-indent: -9999px;

    position: absolute;

    left: 0;

    top: 0;

    z-index: 1; }

  #homepage-slider .bx-wrapper .bx-controls-direction a:after {

    display: block;

    width: 48px;

    height: 48px;

    color: white;

    text-indent: 0;

    text-align: center;

    font-size: 21px;

    font-family: "FontAwesome";

    position: absolute;

    top: 0;

    left: 0;

    z-index: 2;

    padding: 16px 0 0 0; }

  #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {

    background: #333333;

    opacity: 0.83; }

#homepage-slider .bx-wrapper .bx-controls-direction a.disabled {

  display: none; }

#homepage-slider .bx-wrapper .bx-controls-auto {

  text-align: center; }

#homepage-slider .bx-wrapper .bx-controls-auto .bx-start {

  display: block;

  text-indent: -9999px;

  width: 10px;

  height: 11px;

  outline: 0;

  background: url(images/controls.png) -86px -11px no-repeat;

  margin: 0 3px; }

#homepage-slider .bx-wrapper .bx-controls-auto .bx-start:hover,

#homepage-slider .bx-wrapper .bx-controls-auto .bx-start.active {

  background-position: -86px 0; }

#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop {

  display: block;

  text-indent: -9999px;

  width: 9px;

  height: 11px;

  outline: 0;

  background: url(images/controls.png) -86px -44px no-repeat;

  margin: 0 3px; }

#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop:hover,

#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop.active {

  background-position: -86px -33px; }

#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {

  text-align: left;

  width: 80%; }

#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {

  right: 0;

  width: 35px; }

#homepage-slider .bx-wrapper .bx-caption {

  position: absolute;

  bottom: 0;

  left: 0;

  background: #666666 \9;

  background: rgba(80, 80, 80, 0.75);

  width: 100%; }

#homepage-slider .bx-wrapper .bx-caption span {

  color: white;

  font-family: Arial, Helvetica, sans-serif;

  display: block;

  font-size: .85em;

  padding: 10px; }

 

.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before {

  background: #333333; }

 

 

Hola veo que el tema está cerrado.

 

Yo tengo el mismo problema pero la solución aportada no me es válida.

 

El alto que se desea modificar se calcula dinámicamente a traves de una función dentro de /js/jquery/plugins/bxslider/jquery.bxslider.js (es por ello que no la encuenras en ninguno de los css)

 

Este alto se calcula dependiendo del ancho. Si nos fijamos a medida que que voy achicando el ancho de la ventana del navegado el alto va cambiando tambien. (las cosas de las plantillas responsive)

 

En mi caso si pongo la página como si se fuera a ver en un smartphone dicho js genera el siguiente DOM

 

<div class="bx-viewport" style="width: 100%; overflow: hiden; position: relative; height:119px;"></div>

 

El campo en rojo es el que yo querría o bien cambiar o bien poner un alto mínimo para cuando se vaya estrechando la pagina para mosrarse en un smartphone.

 

He probado lo que se ha comentado en este post pero no me vale. ¿A alguien se le ocurre alguna solución?

 

Gracias de antemano.

 

Un saludo.

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...