Lingonberry 子主題 Gallery 樣式 CSS

WordPress 默認的 Gallery 樣式不理想,所以萌生了想要修改一下默認 Gallery CSS 的想法,所以就動手了。

下圖就是修改后的 Gallery CSS 樣式(你也可以點擊 這里 體驗效果)

在修改默認 Gallery 樣式之前,先對 WordPress 的多媒體進行一下設(shè)置:后臺 > 設(shè)置 > 多媒體

對縮略圖的尺寸進行調(diào)整,我這邊的縮略圖大小為 284×178 。因為中等大小大尺寸的圖像我都不需要,所以參數(shù)全部是0。


關(guān)閉默認的 Gallery CSS

將代碼加入到 Lingonberry 父主題的 functions.php 中,即可關(guān)閉:

// 關(guān)閉 wordpress 默認 Gallery 樣式
add_filter( 'use_default_gallery_style', '__return_false' );

然后就是修改 Gallery 的 CSS 了,在 Lingonberry 子主題的 style.css 文件內(nèi)添加如下代碼:

/*相冊樣式開始*/
.gallery { margin: auto;}
.gallery .gallery-item {
float: left;
margin-top: 0;
text-align: center;
width: 100%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery img {
padding: 6px; /*這里是圖片邊框大小,可根據(jù)風格調(diào)整參數(shù)或者刪除。*/
background: #f2f2f2; /*這里是鼠標未經(jīng)過時圖片時邊框顏色,可根據(jù)風格調(diào)整參數(shù)或者刪除。*/
border-radius: 6px; /*這里是圓角設(shè)置,可根據(jù)風格調(diào)整參數(shù)或者刪除。*/
}
.gallery img:hover {
background: #555; /*這里是鼠標經(jīng)過圖片時邊框顏色,可根據(jù)風格調(diào)整參數(shù)或者刪除。*/
}
.gallery .gallery-caption {
color: #888; /*這里是圖片標題文字顏色*/
margin: 0 0 12px; /*這里是圖片標題文字位置*/
}
/*相冊樣式結(jié)束*/

在發(fā)文時,如果你要添加相冊,請在 相冊設(shè)置 > 欄目 那里選擇2。

以上,便是 Gallery CSS 修改。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,207評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,838評論 4 61
  • 1 我是第0201號人類復(fù)制品,每個人類都有屬于自己的復(fù)制品,我們復(fù)制了人類的一切,相貌,血液,性格,情緒,當然我...
    歪豬閱讀 326評論 5 12

友情鏈接更多精彩內(nèi)容