Hola
Me gustaria copiar el diseño de una web, concretamente el enmarcado de los thumbnails.
web de referencia: http://www.todocuadros.com/tienda/pinturas-abstractas/
Tengo que disseñar una web de obras de arte y sera imposible mostrar todas con el mismo tamaño, por eso esta solucion de reservar un marco y encuadrar la miniatura dentro me ha parecido una buena opcion y ademas me gusta mucho como queda.
Este es el estado actua de mi web: http://kjsystems.es/pintorscatalans/
El listado de imagenes lo estoy realizando con la extension K2.
Puedo realizar este disseño con esta aplicacion o me recomendais otra?
Gracias.
URL del sitio: http://kjsystems.es/pintorscatalans/
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:
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.