Enmarcar thumbnails  

Página 1 / 2
 
Antonio
 Antonio
Usuario eminente

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/

Citar
Respondido : 27/04/2012 12:42 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 2:06 am

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

Antonio
 Antonio
Usuario eminente

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.

ResponderCitar
Respondido : 27/04/2012 10:17 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 4:34 pm

Cursos Gratuitos WordPress

Antonio
 Antonio
Usuario eminente

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

ResponderCitar
Respondido : 27/04/2012 5:52 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 6:21 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Antonio
 Antonio
Usuario eminente

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.

ResponderCitar
Respondido : 27/04/2012 6:57 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 7:06 pm

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

Antonio
 Antonio
Usuario eminente

Pues no lo encuentro Luis,

Es la primera vez que entro en ese archivo.

Te lo suboo por si quieres mirarlo.

Gracias

ResponderCitar
Respondido : 27/04/2012 7:11 pm
Antonio
 Antonio
Usuario eminente
ResponderCitar
Respondido : 27/04/2012 7:15 pm

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

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Antonio,

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

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

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 7:16 pm
Antonio
 Antonio
Usuario eminente

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?

ResponderCitar
Respondido : 27/04/2012 8:54 pm

Cursos Gratuitos WordPress

Miguel Tuyaré
 Miguel Tuyaré
Honorable Member

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;}

Orientar personas, despertar vida.

ResponderCitar
Respondido : 27/04/2012 9:18 pm
Antonio
 Antonio
Usuario eminente

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

ResponderCitar
Respondido : 27/04/2012 11:24 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

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.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2012 11:36 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro