How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions如何改變CSS樣式,字體,間距,對齊和顏色WordPress的圖像字幕

Since WordPress由於在WordPress version 2.6 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增添了一個內置在短, “說明” ,系統會自動提供並翻譯成標準的HTML的CSS代碼以顯示標題的照片或圖片,節省經媒體上載器,它的下方。

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.然而,當在WordPress附加學作風,打印字幕的標題下,圖片或影像, WordPress所使用的預設路線,顏色,字體,間距,和其他的風格屬性,以顯示圖像字幕。

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.默認的CSS樣式的形象與說明可能爆發的博客或網頁的佈局,不驗證的XHTML對W3C的標準,似乎太密切與文本沒有間隔,在後或網頁,或不作為,使作者的願望。

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:對Blogger誰要修改的CSS風格的字幕顯示的圖像字幕在屏幕上後,解析短,添加以下的CSS代碼並將積極為主題的style.css檔案:

/* Captions */ / *標題* /
.aligncenter, 。 aligncenter ,
div.aligncenter { div.aligncenter (
display: block; 顯示:座;
margin-left: auto; 保證金左:自動;
margin-right: auto; 保證金-右:自動;
}

.wp-caption { 。可濕性粉劑字幕(
border: 1px solid #ddd; 邊界: 1px固體#國內長途;
text-align: center; 文本對齊:中心;
background-color: #f3f3f3; 背景顏色: # f3f3f3 ;
padding-top: 4px; 填充頂: 4px ;
margin: 10px; 保證金: 10px ;
-moz-border-radius: 3px; -萬盎司邊界半徑: 3px ;
-khtml-border-radius: 3px; - khtml邊界半徑: 3px ;
-webkit-border-radius: 3px; - webkit邊界半徑: 3px ;
border-radius: 3px; 邊界半徑: 3px ;
}

.wp-caption img { 。可濕性粉劑字幕國際管理集團(
margin: 0; 保證金: 0 ;
padding: 0; 填充: 0 ;
border: 0 none; 邊界: 0無;
}

.wp-caption p.wp-caption-text { 。可濕性粉劑字幕p.wp字幕文本(
font-size: 11px; 字體大小: 11px ;
line-height: 17px; 線高度: 17px ;
padding: 0 4px 5px; 填充: 0 4px 5px ;
margin: 0; 保證金: 0 ;
}
/* End captions */ / *結束字幕* /

Above HTML CSS declaration is taken from WordPress 2.6 default theme.上述的HTML的CSS聲明是採取從在WordPress 2.6默認的主題。 These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog.這些新增的CSS樣式是用來控制和分配的外觀標題的形象,張貼於博客。 Modify the code above in “style.css” file according to your own preference to have your own design and look.修改上面的代碼在“ style.css ”文件根據自己的喜好有自己的設計和研究。

IMPORTANT : This is a machine translated page which is provided "as is" without warranty. 重要說明 :這是一個機器翻譯網頁是“按原樣”提供的擔保。 Machine translation may be difficult to understand.機器翻譯可能很難理解。 Please refer to請參閱 original English article英文原版的文章 whenever possible.只要有可能。

Share and contribute or get technical support and help at分享和貢獻,或取得技術的支持和幫助,在 My Digital Life Forums 我的數字生活論壇 .



One Response to “How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions” 1回應“如何改變CSS樣式,字體,間距,對齊和顏色WordPress的圖像字幕”

  1. Mark LaFlamme馬克laflamme
    July 20th, 2008 10:05 2008年7月20日10時05分
    1

    For the life of me, I cannot get captions to work.為生活,我不能字幕工作。 It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all.看來,偉大的預覽,但生活,所有代碼洩漏圍繞照片,並沒有說明在所有。 I added the caption code to my theme’s style.css but there was no change.我已將標題代碼我主題的style.css ,但並沒有改變。 Seems like I’m just one minor step away from making this work.好像我只是一個小步驟,遠離決策這方面的工作。 If anyone has any ideas, I’d love to hear them.如果任何人有任何想法,我喜歡聽到他們。 I’ll add a caption to my first post to demonstrate.我將添加標題我的第一篇文章顯示。

Leave a Reply離開的答复

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 您可以使用這些標籤:的<a href="" title=""> <abbr title=""> <acronym title="">的<b> <blockquote cite=""> <cite>的<code> <刪除日期時間= “ ” >的<em>的<i> <q cite=""> <strike>的<strong>

Subscribe without commenting訂閱無評論


Custom Search

New Articles新的條款,

Incoming Search Terms for the Article傳入的搜索條件文章

css font-spacing CSS的字體間距 - - font-spacing css 字體間距的CSS - - font-spacing 字體間距 - - css font spacing CSS的字體間距 - - change font code 更改字體代碼 - - wp-caption 可濕性粉劑字幕 - - wp-caption css 可濕性粉劑字幕的CSS - - font spacing in css 字體間距在CSS - - Change Text Style 改變文字樣式 - - css spacing CSS的間距 - - font spacing css 字體間距的CSS - - change font codes 變更字號守則 - - wp-caption style 可濕性粉劑字幕風格 - - css font align CSS的字體對齊 - - how to change font spacing 如何改變字體間距 - - change css 改變的CSS - - wp-caption-text 可濕性粉劑字幕文本 - - wordpress 2.6 caption css 在WordPress 2.6標題的CSS - - wordpress fonts 在WordPress字體 - - font alignment 字體對齊 - - css style font CSS樣式的字體 - - WP caption CSS 可濕性粉劑標題的CSS - - wordpress image caption css 在WordPress圖片說明文字的CSS - - change font spacing 改變字體間距 - - photo gallery image change css 照片畫廊的形象,改變的CSS - - css alignment CSS的路線 - - css font color code CSS的字體顏色代碼 - - font align codes 字體對齊守則 - - css change font color CSS的改變字體顏色 - - changing font color css 改變字體顏色的CSS - - change font CSS 更改字體的CSS - - wordpress 图片样式 在WordPress圖片樣式 - - html codes alignment spacing and font HTML代碼路線間距和字體 - - how to change image border colours in css 如何改變形象邊界的顏色在CSS - - css aligntment CSS的aligntment - - how to change text style in css 如何改變文本樣式在CSS - - wordpress style caption 在WordPress作風標題 - - wordpress caption CSS 在WordPress標題的CSS - - css styling wordpress captions 的CSS風格的WordPress字幕 - - wordpress font color 在WordPress字體顏色 - - how to chang font styles in vista 如何常字型樣式在Vista - - wordpress change css WordPress所改變的CSS - - css change font CSS的變更字號 - - image spacing css 形象間距的CSS - - m6 的M6 - - css style changer CSS樣式換 - - how to change font and colour in photo comment titles 如何改變字體和顏色在照片評論的標題 - - change left aligned wordpress 改變左不結盟的WordPress - - change wordpress title font 改變的WordPress標題字體 - - how to change font css of div 如何改變字體的CSS的學 - -