Centrar Thumnails en la plantilla Encelado  

 
Micky
 Micky
Estimable Member

Hola,
Estoy intentando centrar un grupo de thumbnails en un artículo, en la plantilla Encelado, pero no lo consigo.

He estado probando modificando el estilo css (tengo creada la hoja de estilo "miplantilla-custom.css", donde ya he modificado otros elementos sin problema). He localizado la clase que le afecta (.thumbnails) con el Firebug, pero lo más cercano que consigo hacer es centrarlas, cuando la plantilla se está mostrando a 1200px , pero se vuelven a alinear a la izquierda en cuanto voy reduciendo la ventana del navegador y la vista se adapta a 960px.

También he probado guiándome con este artículo: http://designshack.net/articles/css/how-to-center-anything-with-css/, pero también sin éxito.

Supongo que habrá que modificar algo más para que al adaptarse a resoluciones más pequeñas, las thumbnails sigan centradas .

Os agradecería mucho alguna orientación. Incluso, si es más fácil para vosotros, que me remitiérais a algún tutorial externo.

Os dejo aquí el código css que tengo localizado y el enlace del directorio dónde tengo colgado el articulo con las tumbnails:

¡Gracias!

.thumbnails > li {
    float: left;
    margin-bottom: 20px;
    margin-left: 20px;
}
.thumbnail {
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    display: block;
    line-height: 20px;
    padding: 4px;
    transition: all 0.2s ease-in-out 0s;
}
a.thumbnail:hover {
    border-color: #0088CC;
    box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.thumbnail .caption {
    color: #555555;
    padding: 9px;
}

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 02/04/2014 3:20 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Micky,

Si son miniaturas o imágenes insertadas dentro de un artículo, no entendí el uso de CSS para centrar estos elementos.

¿Puedes facilitar una captura del código del artículo sin el editor habilitado? [toogle editor] o [hide/show] donde podamos ver como se insertan esas miniaturas y ver si un simple serviría.

- Los formatos de capturas admitidos son .jpg y .png
- No la incrustes en archivos .doc de Word o similares, ni en PDFs.

Saludos

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

ResponderCitar
Respondido : 02/04/2014 3:25 am

Cursos Gratuitos WordPress

Micky
 Micky
Estimable Member

Hola, Luis. Gracias por contestar tán rápido.

La cuestión es que estoy utilizando las clases del Boostrapt que trae la plantilla Encelado. ( http://www.anidocs.es/bootstrap/docs/components.php#thumbnails)

He intentado mil y una cosas, pero no soy capaz.

Si se te ocurre alguna otra forma más sencilla, estoy abierto a sugerencias.

¡Gracias!

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

This post was modified hace 1 mes por antonio
ResponderCitar
Respondido : 02/04/2014 3:48 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Prueba insertando un al principio y final de la lista en el código.

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 : 02/04/2014 5:43 am

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

Micky
 Micky
Estimable Member

Hola, Johnny,

He probado añadiendo el código de la lista entre las etiquetas y no hace ningún efecto.

Creo que lo que está mandando aquí es el estilo css, ya que desde el Firebug consigo mover los thumbnails modificando parámetros del estilo, pero como mi plantilla es responsive no consigo nada que pueda sevir definitivamente para que funcione bien en todas las resoluciones.

Supongo que la solución rondará por cambiar o añadir alguna línea de estilo css... lo que no sé ni cuál ni dónde 🙁

En cualquier caso, si se te ocurre alguna otra forma correcta, y que pueda ser responsive, de presentar varios catálogos con miniaturas de imagen, que puedan quedar centrados.

¡Muchas gracias!

ResponderCitar
Respondido : 03/04/2014 12:51 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Se podría llegar a centrar sin necesidad de aplicar cambios en los CSS utilizando un pequeño truco. Si te fijas, a algunas etiquetas html se le aplica una clase de tipo spanX en donde X es un número del 1 al 12. Una valor de span12 hace que ocupe todo el ancho.

Se puede decir que el ancho se divide en 12 unidades, de forma que si pones a una etiqueta div una clase span3 ocupara 3 unidades de esas 12, es decir, una cuarta parte. Si quieres que algunos thumbnails se muestren centrados puede probar a agregar elementos li de lista vacios a la derecha de ese elemento o elementos.

Por ejemplo, si tienes solo uno pondrías poner algo así:

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  • Le he añadido un
  • antes del elemento de lista que contiene tu thumbnail y otros despues para centrarlo, ya que tu thumbnail tiene un ancho de 2 (span2).

Si tienes 2 elementos podrías poner algo así:

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  • Dossier Corporativo

    Haga clic en la imagen para ver el documento en pantalla

  •  
 

Esto debería de funcionar, pero tendrás que hacer pruebas para ver qué tal va.

This post was modified hace 1 mes por antonio

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

ResponderCitar
Respondido : 03/04/2014 3:39 pm

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

Micky
 Micky
Estimable Member

¡¡Funcionaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!!

A veces la solución es mucho más sencilla de lo que pensamos... pero para encontrar soluciones sencillas, antes debes haber solucionado muchos problemas complejos.

Tema solucionado 😉

Un verdadero placer contar con la ayuda de profesionales como vosotros.

¡Muchísimas Gracias, Pablo!

ResponderCitar
Respondido : 03/04/2014 4:10 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Nos alegra que te guste nuestro servicio. 🙂

Nos sería de mucha utilidad que nos dejases tu testimonio, solicitamos testimonios para colocar en nuestra página y ayudar a otros posibles clientes a decidirse por nuestros servicios:

Puedes crearlo aquí: https://www.webempresa.com/testimonios.html?view=form&layout=edit

Si nos quieres enviar tu testimonio podemos colgarlo en nuestra página con un link hacia la tuya que siempre te ayudará a posicionarte, nuestra página tiene un Page Rank de Google alto.

Si ya te lo solicitamos anteriormente y nos lo facilitaste, puedes dejar otro testimonio si tienes otra página que quieras posicionar mejor al tener un link en la nuestra con tu testimonio.

Gracias por publicar tu testimonio y por tus palabras de agradecimiento.

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

ResponderCitar
Respondido : 03/04/2014 6:15 pm

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

Por favor Iniciar Sesión o Registro