How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions Como modificar o estilo CSS, Font, espaçamento, alinhamento e cores das legendas WordPress Imagem
Since WordPress Desde WordPress version 2.6 Versão 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, acrescentou em sua construção em um shortcode, "Legenda", que será automaticamente prestados e traduzidos em código HTML padrão CSS para exibir a legenda para a foto ou imagem, o que salvou via media uploader, sob ele.
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. No entanto, quando WordPress adiciona o DIV estilos para imprimir o título legenda sob a foto ou imagem, WordPress faz uso de padrão alinhamento, cor, fonte, espaçamento, e outros atributos estilo para exibir a imagem legendas.
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. O padrão de estilos CSS imagem com a legenda maio potencialmente quebra o layout blog ou página da Web, não validar W3C xHTML contra a norma, parece demasiado estreita com o texto, sem espaçamento no posto ou página, ou não alinhar as do autor desejo.
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: Para blogueiro que pretende modificar os estilos CSS da legenda legendas que mostra a imagem na tela após analisar o shortcode, adicione o seguinte código em CSS o tema da ativa style.css arquivo:
/* Captions */ / * As legendas * /
.aligncenter, . aligncenter,
div.aligncenter { div.aligncenter (
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; - margem direita: auto;
} )
.wp-caption { . WP-caption (
border: 1px solid #ddd; border: 1px solid # DDD;
text-align: center; text-align: center;
background-color: #f3f3f3; background-color: # f3f3f3;
padding-top: 4px; padding-top: 4px;
margin: 10px; margin: 10px;
-moz-border-radius: 3px; - moz-border-radius: 3px;
-khtml-border-radius: 3px; - KHTML-border-radius: 3px;
-webkit-border-radius: 3px; - webkit-border-radius: 3px;
border-radius: 3px; border-raio: 3px;
} )
.wp-caption img { . wp-caption (img
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0 none; fronteiriço: 0 nenhum;
} )
.wp-caption p.wp-caption-text { . wp-legenda p.wp-legenda-texto (
font-size: 11px; font-size: 11px;
line-height: 17px; line-height: 17px;
padding: 0 4px 5px; padding: 0 4px 5px;
margin: 0; margin: 0;
} )
/* End captions */ / * Fim legendas * /
Above HTML CSS declaration is taken from WordPress 2.6 default theme. Acima HTML CSS declaração é retirado WordPress 2,6 tema default. These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog. Estes recém-adicionados estilos CSS são usados para controlar e atribuir a aparência da legenda para a imagem destacados no blog. Modify the code above in “style.css” file according to your own preference to have your own design and look. Modifique o código acima em "style.css" arquivo de acordo com as suas próprias preferências de ter a sua própria concepção e de olhar.
IMPORTANT : This is a machine translated page which is provided "as is" without warranty. IMPORTANTE: Esta é uma página traduzida máquina que é fornecida "como está" sem garantia. Machine translation may be difficult to understand. A tradução automática pode ser difícil de compreender. Please refer to Por favor, consulte a original English article Inglês original article whenever possible. sempre que possível.
Share and contribute or get technical support and help at Compartilhe e contribuir ou obter suporte técnico e ajudar a My Digital Life Forums Minha vida digital Fóruns .
Related Articles Artigos relacionados
- How to Disable Image and Video Captions Feature and Auto Adding of Shortcode in WordPress 2.6 Desativar o modo de imagem e vídeo e legendas Feature Auto Adição de Shortcode em 2,6 WordPress
- Switch and Change Back to Office 2003 Default Font and Style Set in Office Word 2007 Mudar e mudar de volta para o Office 2003 Default Font e Estilo Set no Office Word 2007
- Meaning of TVAnts Buffer Progress Bar Colors Significado das cores barra de progresso TVAnts tampão
- WordPress 2.6 with Change Revision Tracking Feature Available for Free Download WordPress 2,6 mudar a revisão de monitoramento recurso disponível para download gratuito
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page Como mudar a freqüência ou intervalo WordPress Auto poupa um posto ou editando página
- Website Loading Time and Speed Checker Website carregando o tempo ea velocidade Checker
- Remove Microsoft Word Manual Formatting or Copied Formatting from External Source Remover formatação manual Microsoft Word ou copiados formatação de fonte externa
- Permanently Disable AdSense-Deluxe WordPress Plugin Reward Plugin Author Option Desativar permanentemente AdSense-Deluxe wordpress plugin recompensa plugin Autor opção
- Search Engine Spider and Crawler Simulator Search Engine Spider e indexador Simulador
- Disable and Turn Off Post Revisions Tracking in WordPress 2.6 or Above Desativar e desligar Post revisões de monitoramento em WordPress 2,6 ou acima
July 20th, 2008 10:05 20 de julho de 2008 10:05
For the life of me, I cannot get captions to work. Para a vida de mim, eu não posso obter legendas para o trabalho. It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all. Parece-se grande na visualização, mas vivo, todos os derrames com o código em torno da fotografia e não há qualquer legenda em tudo. I added the caption code to my theme’s style.css but there was no change. Eu adicionei o código legenda para o meu tema da style.css, mas não houve mudança. Seems like I’m just one minor step away from making this work. Parece que eu sou apenas um pequeno passo de fazer este trabalho. If anyone has any ideas, I’d love to hear them. Se alguém tiver alguma idéia, eu adorar ouvi-los. I’ll add a caption to my first post to demonstrate. Eu vou adicionar uma legenda a minha primeira postagem de demonstrar.