美文网首页
Lingonberry 子主题 Gallery 样式 CSS

Lingonberry 子主题 Gallery 样式 CSS

作者: 不喝水de乌鸦 | 来源:发表于2016-05-06 23:08 被阅读120次

    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 修改。

    相关文章

      网友评论

          本文标题:Lingonberry 子主题 Gallery 样式 CSS

          本文链接:https://www.haomeiwen.com/subject/vebjrttx.html