Como enmarcar nuestras imágenes de un Post y alinearlas correctamente.

Si estás utilizando la versión 2.6 de WordPress, ya te habrás dado cuenta que la alineación de las imágenes en un POST es incorrecta, ya que hay que añadir un poco de código CSS en la plantilla de tu theme, tal como se indica en un articulo de Ayudawordpress.com ( Como adaptar tu plantilla a la gestión de imágenes en WordPress 2.6 | Ayuda WordPress ).

Bueno, en este articulo se dan las primeras pinceladas sobre el tema, y gracias a el, siguiendo en esa línea podría aportar varias cosas:

1º , en la alineación “Centrada” , el código para la etiqueta del “img” y “div” es ” img.aligncenter, div.aligncenter”, en el post se indica “aligncentered” , pero es incorrecto, quizás por eso no le funcionaba a algunos que lo indicaban en los comentarios.

2º Si le intentamos dar una vuelta de tuerca a la alineación y le añadimos esos marcos que aparecen en el modo edición , pero que no aparecen en el modo publicación, tendremos que realizar los siguientes pasos:

  • – Añadir mas codigo CSS en nuestra plantilla de estilos “style.css” correspondiente al THEME activo en ese momento.
  • – En cada alineación tendremos que añadir:

img.alignleft, div.alignleft
{
float:left;
border-top-width: 1px;
border-right-width-value: 1px;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-top-style: solid;
border-right-style-value: solid;
border-bottom-style: solid;
border-left-style-value: solid;
border-top-color: #dddddd;
border-right-color-value: #dddddd;
border-bottom-color: #dddddd;
border-left-color-value: #dddddd;
text-align: center;
background-color: #f2eeee;
padding-top: 4px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

– Este mismo código para las etiquetas :

img.alignright, div.alignright
{
—código—
}
img.aligncenter, div.aligncenter
{
—código—
}

3º – Por supuesto esto es un ejemplo , y es totalmente configurable para que cada uno le aplique en color, fondo, pixelado, tipo de borde, color del borde, etc..etc..

wordpress

El resultado es el siguiente: (para ver el resultado hay que seguir el link original que sí tiene añadido el codigo CSS) .Con este código CSS conseguiremos un “marco” alrededor de las imágenes y del pie de imagen

WORDPRESS – Como enmarcar nuestras imágenes de un Post y alinearlas correctamente – Zaragoceando.com

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (sin valoración aún)
Cargando…

Autor: pacog00

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest