Buenas a todos/as
El tema es que quisiera saber si puedo modificar un slider hecho con Photoslide GK3.
Concretamente si puedo eliminar las bandas de color que están a los lados y dejar las flechas que mueven las imágenes e incluso si puedo modificar esas mismas flechas.
Gracias
URL del sitio: htt://www.potshop.es/index.php
Hola Toni:
Los estilos de ese módulo están integrados en la plantilla.
Para quitar lo que quieres hay que modificar algunas imágenes y/o borrar un bloque CSS ya que las flechas de atrás y adelante constituyen un sprite (una imagen que se usa por posiciones CSS).
Vale además otra aclaración...
El módulo presenta tres estilos: style1, style2 y style3, lo que sigue a continuación vale para el style1 ya que es el que tú estas utilizando. Para los demás varían un poco la ubicación de los códigos.
Tienes dos opciones:
1- Quitar todo para que no se vea ni la franja ni las flechas
2- Quitar solo la franja verde modificando la imagen sprite de las flechas.
Te explico el 1:
Debes acceder por FTP o por el Administrador de archivos de Cpanel, buscar y abrir el siguiente archivo:
"/public_html/yourshop/templates/gk_yourshop/css/style1.css"
Allí, elimina desde la línea 92 a la 98, es decir quita esto:
.gk_is_prev, .gk_is_next { border:1px solid #577b15; background:#7eb619 url('../images/style1/is_bg.png') repeat-x 0 center; } .gk_is_prev_btn, .gk_is_next_btn { background:transparent url('../images/style1/is_arrows.png') no-repeat 0 0; } .gk_is_next_btn { background:transparent url('../images/style1/is_arrows.png') no-repeat -48px 0; } .gk_is_prev_btn:hover { background-position:-96px 0; } .gk_is_next_btn:hover { background-position:-144px 0; }
Luego abre el archivo:
"/public_html/yourshop/templates/gk_yourshop/css/gk_stuff.css" y quita el código desde la línea 123 a la 132, es decir, todo esto:
.gk_is_prev, .gk_is_next { width:20px; border:1px solid #577b15; height:100%; position:absolute; z-index:126; background:#7eb619 url('../images/style1/is_bg.png') repeat-x 0 center; text-indent:-999em; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing: border-box; } .gk_is_prev { left:0; } .gk_is_next { right:0; } .gk_is_prev_btn, .gk_is_next_btn { display:block; position:absolute; z-index:127; top:50%; margin-top:-36px; height:72px; width: 48px; background:transparent url('../images/style1/is_arrows.png') no-repeat 0 0; cursor:pointer; } .gk_is_prev_btn { left:0; } .gk_is_next_btn { right:0; background:transparent url('../images/style1/is_arrows.png') no-repeat -48px 0; } .gk_is_prev_btn:hover { background-position:-96px 0; } .gk_is_next_btn:hover { background-position:-144px 0; }
Con esto no veras ni las bandas verdes ni las flechas.
Si te interesa mostrar las flechas, hay que modificar la imagen:
Que es el sprite y cambiar algunos códigos CSS quitando los fondos.
Muchas gracias Miguel.
Me ha servido y lo he aplicado como podrás ver.
La siguiente pregunta es si podrías decirme qué tengo que modificar y en qué .css para poder poner unas flechas que ya tengo diseñadas mucho más discretas que las que vienen con la aplicación.
Gracias de nuevo
Bueno Toni...
En ese caso la historia es diferente aunque parecida 🙂
En ves de borrar todo, las mismas secciones deberían quedar así:
- En el archivo "style1.css":
.gk_is_prev, .gk_is_next { } .gk_is_prev_btn, .gk_is_next_btn { background:transparent url('../images/style1/is_arrows.png') no-repeat 0 0; } .gk_is_next_btn { background:transparent url('../images/style1/is_arrows.png') no-repeat -48px 0; } .gk_is_prev_btn:hover { background-position:-96px 0; } .gk_is_next_btn:hover { background-position:-144px 0; }
Cambia la imagen "is_arrows.png" por el sprite que hayas hecho.
En "gk_stuff.css" quedaría:
.gk_is_prev, .gk_is_next { } .gk_is_prev { left:0; } .gk_is_next { right:0; } .gk_is_prev_btn, .gk_is_next_btn { display:block; position:absolute; z-index:127; top:50%; margin-top:-36px; height:72px; width: 48px; background:transparent url('../images/style1/is_arrows.png') no-repeat 0 0; cursor:pointer; } .gk_is_prev_btn { left:0; } .gk_is_next_btn { right:0; background:transparent url('../images/style1/is_arrows.png') no-repeat -48px 0; } .gk_is_prev_btn:hover { background-position:-96px 0; } .gk_is_next_btn:hover { background-position:-144px 0; }
Suerte!