Lingonberry 子主題 Gallery 樣式 CSS

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

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

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

對縮略圖的尺寸進行調整,我這邊的縮略圖大小為 284×178 。因為中等大小大尺寸的圖像我都不需要,所以參數(shù)全部是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; /*這里是圖片邊框大小,可根據(jù)風格調整參數(shù)或者刪除。*/
background: #f2f2f2; /*這里是鼠標未經(jīng)過時圖片時邊框顏色,可根據(jù)風格調整參數(shù)或者刪除。*/
border-radius: 6px; /*這里是圓角設置,可根據(jù)風格調整參數(shù)或者刪除。*/
}
.gallery img:hover {
background: #555; /*這里是鼠標經(jīng)過圖片時邊框顏色,可根據(jù)風格調整參數(shù)或者刪除。*/
}
.gallery .gallery-caption {
color: #888; /*這里是圖片標題文字顏色*/
margin: 0 0 12px; /*這里是圖片標題文字位置*/
}
/*相冊樣式結束*/

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

以上,便是 Gallery CSS 修改。

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

相關閱讀更多精彩內容

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

友情鏈接更多精彩內容