How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions Comment changer le style CSS, de polices, l'espacement, l'alignement et la couleur de WordPress Image légendes
Since WordPress Depuis WordPress version 2.6 version 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 a ajouté un court-en, "Légende", qui seront automatiquement rendus et traduit en HTML standard code CSS pour afficher la légende de la photo ou l'image, qui a permis d'économiser par le biais des médias d'envoi, sous celui-ci.
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. Toutefois, lorsque WordPress ajoute la DIV styles d'imprimer la légende titre sous la photo ou l'image, WordPress utilise par défaut l'alignement, la couleur, police, espaces, et d'autres attributs de style pour afficher l'image sous-titres.
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. Les styles CSS par défaut pour l'image avec la légende mai potentiellement rompt le blog ou la mise en page Web, ne valide pas contre la norme XHTML du W3C, semble de trop près avec le texte sans espacement dans le poste ou une page, ou ne pas aligner comme auteur souhait.
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: Pour blogueur qui veut modifier les styles CSS de la légende que l'image montre des légendes à l'écran après l'analyse du court, ajouter le code CSS suivantes dans le thème actif du fichier style.css:
/* Captions */ / * * Légendes /
.aligncenter, . alignCenter,
div.aligncenter { div.aligncenter (
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: 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-radius: 3px;
} )
.wp-caption img { . wp-légende img (
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0 none; border: 0 none;
} )
.wp-caption p.wp-caption-text { . wp-p.wp légende de sous-titrage-texte (
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 */ / * * Fin légendes /
Above HTML CSS declaration is taken from WordPress 2.6 default theme. Au-delà de HTML CSS déclaration est tirée de 2,6 WordPress thème par défaut. These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog. Ces nouvellement ajouté styles CSS sont utilisés pour contrôler et d'affecter l'aspect de la légende de l'image affichée sur blog. Modify the code above in “style.css” file according to your own preference to have your own design and look. Modifier le code ci-dessus dans "style.css" fichier en fonction de vos préférences d'avoir votre propre design et regarder.
IMPORTANT : This is a machine translated page which is provided "as is" without warranty. IMPORTANT: Il s'agit d'une machine qui traduit la page est fourni «tel quel», sans garantie. Machine translation may be difficult to understand. La traduction automatique mai être difficile à comprendre. Please refer to S’il vous plaît se référer à original English article l'article original en anglais whenever possible. chaque fois que possible.
Share and contribute or get technical support and help at Partagez et contribuer ou obtenir de l'aide technique et l'aide à My Digital Life Forums Ma vie numérique forums .
Related Articles Articles connexes
- How to Disable Image and Video Captions Feature and Auto Adding of Shortcode in WordPress 2.6 Comment désactiver l'image et la vidéo et les légendes Dossier Ajout automatique de court dans WordPress 2,6
- Switch and Change Back to Office 2003 Default Font and Style Set in Office Word 2007 Switch et revenir à Office 2003 par défaut des polices et le style Situé dans Office Word 2007
- Meaning of TVAnts Buffer Progress Bar Colors Notion de tampon TVAnts barre de progression couleurs
- WordPress 2.6 with Change Revision Tracking Feature Available for Free Download WordPress 2,6 au changement fonction de suivi de révision disponibles en téléchargement gratuit
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page Comment changer la fréquence ou l'intervalle de WordPress Auto permet d'enregistrer un poste d'édition ou de la page
- Website Loading Time and Speed Checker Site temps de chargement et de la vitesse Checker
- Remove Microsoft Word Manual Formatting or Copied Formatting from External Source Supprimer Microsoft Word manuel de mise en forme ou copié la mise en forme de source externe
- Permanently Disable AdSense-Deluxe WordPress Plugin Reward Plugin Author Option Désactiver en permanence adsense-Deluxe wordpress plugin récompense plugin auteur option
- Search Engine Spider and Crawler Simulator Moteur de recherche et sur chenilles Spider Simulator
- Disable and Turn Off Post Revisions Tracking in WordPress 2.6 or Above Désactiver et Désactiver la Poste de suivi des révisions dans WordPress 2,6 ou au-dessus
July 20th, 2008 10:05 Juillet 20e, 2008 10:05
For the life of me, I cannot get captions to work. Pour la vie de moi, je ne peux pas obtenir les sous-titres au travail. It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all. Elles semblent très en avant-première, mais vivre, tout le code déversements autour de la photo et il n'ya pas de légende à tous. I added the caption code to my theme’s style.css but there was no change. J'ai ajouté la légende de mon code du thème style.css, mais il n'y avait pas de changement. Seems like I’m just one minor step away from making this work. On dirait que je suis un mineur à deux pas de faire ce travail. If anyone has any ideas, I’d love to hear them. Si quelqu'un a des idées, j'aimerais les entendre. I’ll add a caption to my first post to demonstrate. Je vais ajouter une légende à mon premier poste à démontrer.