Habitualmente encontramos que al insertar una imagen en un artículo en Joomla! esta por defecto queda literalmente pegada al texto que la circunscribe lo cual resulta poco estético. Podemos modificar este comportamiento, dependiendo del editor WYSIWYG que tengamos instalado, con la herramienta de editar/insertar imagen que incorporan la mayoría de ellos y establecer manualmente un margen para estas imágenes, aunque el proceso es manual y si son muchos los artículos que publicamos y de manera muy constante, termina siendo una tarea tediosa.
Una forma más practica de hacer que Joomla!, a través de la correspondiente hoja de estilos en cascada (CSS) de nuestra plantilla se encargue de insertar los margenes correspondientes a las imágenes de manera automática, lo que seguramente nos ahorrara tiempo posteriormente a la hora de publicar artículos.
Las propiedades afectadas son borde y margen (border, margin) y las localizamos habitualmente en la hoja principal de estilos de nuestra plantilla template.css, o template_css.css (esto dependerá bastante del desarrollador de cada plantilla).
Por defecto la clase img suele venir de la siguiente forma:
a img {
border: none;
}
Implementamos las propiedades margin y border de la forma siguiente:
a img{
margin: 3px 3px 3px 3px;
border: 1px solid #000000;
padding: 2px;
}
Establecemos con la propiedad padding un espacio de 2 pixel de separación entre la imagen y el borde de color negro que hemos dibujado alrededor de la misma.
Naturalmente que esta forma de realizar la separación de las imágenes y el texto que las rodea es aplicable de forma general y no siempre tiene porque ajustarse a las necesidades globales de la web, incluso puede afectar negativamente a otras imágenes que se valgan de la clase img para establecer los valores que la posicionen, pero es obvio que existen tantas soluciones como problemas nos plantee el código.
¿Cual sería tu solución?.
0 comentarios