Lingonberry 子主題 Gallery 樣式 CSS

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

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

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

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


關閉默認的 Gallery CSS

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

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

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

/*相冊樣式開始*/
.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; /*這里是圖片邊框大小,可根據風格調整參數或者刪除。*/
background: #f2f2f2; /*這里是鼠標未經過時圖片時邊框顏色,可根據風格調整參數或者刪除。*/
border-radius: 6px; /*這里是圓角設置,可根據風格調整參數或者刪除。*/
}
.gallery img:hover {
background: #555; /*這里是鼠標經過圖片時邊框顏色,可根據風格調整參數或者刪除。*/
}
.gallery .gallery-caption {
color: #888; /*這里是圖片標題文字顏色*/
margin: 0 0 12px; /*這里是圖片標題文字位置*/
}
/*相冊樣式結束*/

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

以上,便是 Gallery CSS 修改。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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