How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions Cómo cambiar el estilo CSS, Font, Espaciado, alineación y color de la imagen de WordPress Leyendas
Since WordPress Desde WordPress version 2.6 Versión 2,6 , WordPress has added a built-in shortcode, “Caption”, which will be automatically rendered and translated into standard HTML CSS code to display the caption for the photo or image, which saved via media uploader, beneath it. , WordPress ha añadido una incorporado en corto, "Leyenda", que será automáticamente prestados y traducido al estándar CSS código HTML para mostrar la leyenda para la foto o imagen, que salvó a través de los medios de carga, debajo de ella.
However, when WordPress appends the DIV styles to print the caption title under the picture or image, WordPress makes use of default alignment, color, font, spacing, and other styling attributes to display the image captions. Sin embargo, cuando WordPress agrega el DIV estilos para imprimir el epígrafe bajo el título de la foto o imagen, WordPress utiliza por defecto la alineación, color, tipo de letra, espaciado, y otros atributos de estilo para mostrar la imagen de leyendas.
The default CSS styles for image with the caption may potentially breaks the blog or web page layout, does not validate against W3C xHTML standard, appears too closely with the text with no spacing in the post or page, or does not align as author’s wish. El valor por defecto para estilos CSS imagen con la leyenda podría ser rompe el blog o de diseño de páginas web, no validar contra el estándar W3C xHTML, parece demasiado estrechamente con el texto sin el espaciamiento en el correo o página, o si no se suman como del autor desear.
For blogger who wants to modify the CSS styles of the caption that shows the image captions on screen after parsing the shortcode, add the following CSS code into the active theme’s style.css file: Por blogger que quiere modificar los estilos CSS de la leyenda que muestra la imagen en la pantalla los títulos después de analizar el corto, añadir el siguiente código CSS en el tema del activo style.css disposición:
/* Captions */ / * Leyendas * /
.aligncenter, . aligncenter,
div.aligncenter { div.aligncenter (
display: block; pantalla: bloque;
margin-left: auto; margin-left: auto;
margin-right: auto; margen derecha: auto;
} )
.wp-caption { . WP-caption (
border: 1px solid #ddd; border: 1px solid # ddd;
text-align: center; - alinear texto: centro;
background-color: #f3f3f3; fondo-color: # f3f3f3;
padding-top: 4px; padding-top: 4px;
margin: 10px; margin: 10px;
-moz-border-radius: 3px; - MOZ-frontera-Radio: 3px;
-khtml-border-radius: 3px; - KHTML-frontera-Radio: 3px;
-webkit-border-radius: 3px; - webkit-frontera-Radio: 3px;
border-radius: 3px; border-Radio: 3px;
} )
.wp-caption img { . wp-caption (img
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0 none; frontera: 0 ninguno;
} )
.wp-caption p.wp-caption-text { . wp-caption p.wp-caption-texto (
font-size: 11px; font-size: 11px;
line-height: 17px; línea de altura: 17px;
padding: 0 4px 5px; padding: 0 4px 5px;
margin: 0; margin: 0;
} )
/* End captions */ / * Fin subtítulos * /
Above HTML CSS declaration is taken from WordPress 2.6 default theme. Por encima de HTML CSS declaración se ha tomado de WordPress 2,6 tema por defecto. These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog. Estos nuevos estilos CSS añadido se utilizan para controlar y asignar la aparición de la leyenda de la imagen en Nuevo blog. Modify the code above in “style.css” file according to your own preference to have your own design and look. Modificar el código anterior en "style.css" fichero de acuerdo a su propia preferencia para tener su propio diseño y ver.
IMPORTANT : This is a machine translated page which is provided "as is" without warranty. IMPORTANTE: Se trata de una máquina que traduzca la página se proporciona "tal cual" sin garantía. Machine translation may be difficult to understand. La traducción automática puede resultar difícil de entender. Please refer to Por favor, consulte original English article artículo original Inglés whenever possible. siempre que sea posible.
Share and contribute or get technical support and help at Compartir y contribuir o recibir apoyo técnico y ayudar a My Digital Life Forums Mi vida digital Foros .
Related Articles Artículos relacionados
- How to Disable Image and Video Captions Feature and Auto Adding of Shortcode in WordPress 2.6 Cómo evitar que la imagen de vídeo y Leyendas de funciones y de Auto Agregando corto en WordPress 2,6
- Switch and Change Back to Office 2003 Default Font and Style Set in Office Word 2007 Switch y el cambio Back to Office 2003 y por defecto Font Style Set en Office Word 2007
- Meaning of TVAnts Buffer Progress Bar Colors Significado de amortiguación TVAnts barra de progreso colores
- WordPress 2.6 with Change Revision Tracking Feature Available for Free Download WordPress 2,6 con el cambio de revisión de seguimiento característica disponible para su descarga gratuita
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page Cómo cambiar la frecuencia o intervalo de WordPress Auto guarda una edición posterior o la página
- Website Loading Time and Speed Checker Sitio Web el tiempo de carga y la velocidad Checker
- Remove Microsoft Word Manual Formatting or Copied Formatting from External Source Quitar Microsoft Word o de formato manual copiado de formato de fuente externa
- Permanently Disable AdSense-Deluxe WordPress Plugin Reward Plugin Author Option Desactivar permanentemente AdSense-Deluxe WordPress plugin plugin recompensa autor opción
- Search Engine Spider and Crawler Simulator Motor de búsqueda y araña rastreador simulador
- Disable and Turn Off Post Revisions Tracking in WordPress 2.6 or Above Inhabilitar y apagar Post revisiones de seguimiento en WordPress 2,6 o Superior
July 20th, 2008 10:05 20 de Julio, 2008 10:05
For the life of me, I cannot get captions to work. Por la vida de mí, no puedo obtener los títulos para trabajar. It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all. Se ve muy bien en vista previa, pero en vivo, todo el código derrames alrededor de la foto y no hay título en absoluto. I added the caption code to my theme’s style.css but there was no change. He añadido el subtítulo código a mi style.css del tema pero no hubo cambio. Seems like I’m just one minor step away from making this work. Parece que soy sólo un pequeño paso de hacer este trabajo. If anyone has any ideas, I’d love to hear them. Si alguien tiene alguna idea, me encantaría escuchar a ellos. I’ll add a caption to my first post to demonstrate. Voy a añadir un título a mi primer puesto a manifestarse.