WORDPRESS - Como enmarcar nuestras imágenes de un Post y alinearlas corréctamente.
(1 votes, average: 5 out of 5)
Loading ...| - Visto 21737 veces - |
| Compartelo: |                |
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..
El resultado es el siguiente:
Con este código CSS conseguiremos un “marco” alrededor de las imágenes y del pie de imagen.
Etiquetas: Enmarcar, imagenes, post, wordpress, codigo, css, 2.6
Etiquetas: 2.6, codigo, css, Enmarcar, imagenes, post, WordpressEntradas relacionadas
Si te ha parecido bien esta publicación, considera comentarla or suscríbete al Feed y recibe los futuros comentarios en tu lector de Feeds.
Comentario
te ahorras 11 líneas de código si a los atributos para el borde los borras todos y solo escribes:
border: 1px #ddd solid;
y otras 3 líneas si borras todo lo del margin y pones:
margin:10px;
Saludos =)
ok gracias.. probare la reducción de código, aunque ahora con la versión 2.7 estoy esperando a ver los cambios.
la version 2.7 con el mismo problema!
Pero es de suponer que el problema es de el template y no de la version de wordpres ya que la solucion se encuentra en el style.css que viene con el tema.
por favor corrijan si me equivoco.
gracias por la info
Sr. Director:
Somos incondicionales a su periódico y deseamos, muy sinceramente, transmitirle nuestra más cordial enhorabuena por los progresos que se están llevando a cabo.
Su nuevo formato es más atractivo, sencillo de lectura, ordenado por temas, etc.etc.le animamos a que siga en esta línea
Feliz Año
Loading ...
![[Valid RSS]](valid-rss.png "Validate my RSS feed")
tan fácil como copiar y pegar un post de otro blog
xD