modificar Photoslide GK3  

 
Antonio Ortiz
 Antonio Ortiz
Usuario experto

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

Citar
Respondido : 13/04/2012 12:31 pm
Miguel Tuyaré
 Miguel Tuyaré
Honorable Member

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.

Orientar personas, despertar vida.

ResponderCitar
Respondido : 13/04/2012 2:12 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Antonio Ortiz
 Antonio Ortiz
Usuario experto

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

ResponderCitar
Respondido : 13/04/2012 4:38 pm
Miguel Tuyaré
 Miguel Tuyaré
Honorable Member

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!

Orientar personas, despertar vida.

ResponderCitar
Respondido : 13/04/2012 9:45 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Por favor Iniciar Sesión o Registro