Enmarcar thumbnails

Hola Antonio,

Veo la web de referencia (catálogo) y veo tu sitio web y observo que las miniaturas de productos ya salen enmarcadas con un bisel continuo gris fino.

¿Cual es la diferencia o cambio que quieres hacer con respecto a como lo tienes actualmente?.

Saludos

Lo que quiero conseguir es algo parecido a esto:

El problema de los marcos que tengo ahora es cuando quiera poner una imagen de 300 x 900 pixels, se que se puede ajustar el thumbnails de tal manera que respete las proporciones de la imagen, pero en el listado de obras no quedara homogeneo ya quela distancia en blanco entrefe filas y columnas no sera la misma.

Loque quiero conseguir es que el marco sea mas grande que las imagenes.

Gracias por la antencion.

Hola,

Tendrás que aplicar bastantes cambios en los estilos CSS para llegar a lo que estás buscando. Te doy algunas indicaciones para que te puedas ir aproximando. Tienes que editar el archivo templates/gk_blackandwhite/css/gk_stuff.css y, previa copia de seguridad, cambiar el código (línea 62):
.nsp_art div { overflow:hidden; padding:0 10px; }
por el siguiente:

.nsp_art div {
    border: 2px solid #CCCCCC;
    height: 200px;
    margin: 0 5px 0 0;
    overflow: hidden;
    padding: 0 10px;
}

Esto colocará un borde a las cajas con las imágenes y le fijará un alto de 200 píxeles (pon el alto que necesites).

Para centrar las imágenes en la caja es posible que te tengas que hacer cambios en la plantilla de listado de artículos de K2, aunque es posible que lo puedas llegar a conseguir modificando CSS.

Gracias.

He aplicado los cambios que dices y de momento se ve bastante bien. Lo voy a dejar asi de momento.

http://kjsystems.es/pintorscatalans/

Ahora me gustaria añadir margen al slider y la galeria de imagenes, estos modulos estan en la posicion top y left2. Al sliider quiero merter margen a la derecha y por arriba y la galeria por arriba para que no quede tan junta con el slider.

Supongo que tendre que editar el archivo template.css, pero he buscado estas posicione y no las he encontrado.

Muchisimas gracias por la ayuda

Hola Antonio,

Para añadir por ejemplo un margen izquierdo al slider superior debes editar el archivo:

-/templates/gk_blackandwhite/css/gk_stuff.css

Localizas el estilo:

 .gk_is_wrapper-template {
    float: left;
    overflow: hidden;
    position: relative;
    width: auto;
}

Y le añades por ejemplo un:

margin-left: 70px;

No olvides hacer un respaldo del archivo antes de realizar los cambios.

Saludos

No he encontrado exactamente el codigo que has pueto.

Lo mas cercano ha sido esto:

gk_is_wrapper-template { position:relative; width:auto; float:left; overflow:hidden; }
.gk_is_wrapper-template .gk_is_slides { position:relative; overflow:hidden; }
.gk_is_wrapper-template .gk_is_slide { position:absolute; left:0; top:0; }

Donde debo poner el margen izquier y superior?

A la posicion left2 donde tengo la galeria puedo ponerle margen superior?

Gracias.

Hola Antonio,

En la línea 125 del archivo /templates/gk_blackandwhite/css/gk_stuff.css si no has añadido o modificado este archivo, ahí debería estar.

Lo he mirado en tu propia hoja de estilos. 🙂

Busca "gk_is_wrapper-template" si trabajas con un estilo determinado, mira dentro de la carpeta del estilo por si esta ahí.

Saludos

Pues no lo encuentro Luis,

Es la primera vez que entro en ese archivo.

Te lo suboo por si quieres mirarlo.

Gracias

Hola Antonio,

Revisa a ver si estás mirando en la ruta correcta 🙂

Te adjunto una captura sacada de tu propia página:

Saludos

Ya me paso una vez que estube modificando el template de otra web en vez de la que queria 🙂

Como podras ver la ruta es la que me indicas.

Alguna sugerencia?

Hola Antonio:

Creo entender que quieres separar el slider del menú izquierdo.

Accede al archivo layout.css ubicado en la carpeta CSS del templa y busca la linea que tiene la clase .gk-mass.

Debajo agrega algo como:

.gk-mass .moduletable{margin-left:15px;}

Hola Miguel

El codigo estaba asi:

.gk-mass { clear:both; margin-bottom:12px; }
.main .inner { padding:12px; }

He añadido lo siguiente:

.gk-mass { clear:both; margin-bottom:12px; }
.gk-mass .moduletable{margin-left:15px;}
.main .inner { padding:12px; }

En la plantilla no he apreciado ningun cambio. Le he puesto un valor de 150 por si no hubiera apreciado la diferencia y tampoco he apreciado nada.

Aparte de añadir margen a la izquierda tambien estoy interesado en añadir margen superior.

Gracias por la ayuda

Hola Antonio:

Para colocar el menú hacia el lado izquierdo puedes dirigirte al fichero: templates/gk_blackandwhite/css/layout.css aproximadamente en la línea 24 colocar el estilo de la siguiente manera:

.gk-mass .moduletable {
    margin-left: 0;
    padding-right: 143px;
}

Saludos.