WordPress给小工具栏加个样式吧

8,621次阅读

2条评论

效果对比

修改前：

修改后：

方法

1、通过页面审查，原h3标签为：

WordPress给小工具栏加个样式吧

修改为：

WordPress给小工具栏加个样式吧

即修改functions-theme.php

        foreach ($sidebars as $key => $value) {
                register_sidebar(array(
                        'name'          => $value,
                        'id'            => $key,
                        'before_widget' => '<div class="widget %2$s wow fadeInRight">',
                        'after_widget'  => '</div>',
                        'before_title'  => '<h3><i class="fa fa-bars"></i>',   //注意这里！！
                        'after_title'   => '</h3>'
                ));
        };
}

2、添加css样式

编辑main.css

找到 .weiget h3 块，修改为:

.widget h3 {
        font-size: 18px;
        color: #666;
        border-bottom: 1px solid #eaeaea;
        background-color: #fbfbfb;
        margin: 0;
        height: 40px;    //注意这里！！
        line-height: 40px;  //注意这里！！
        /*background: url(../img/bg.png) 0 bottom repeat-x;*/
}

再在 .weiget h3 模块下，添加下面代码：

.widget h3 i {
        float: left;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        margin: 0 10px 0 0;
        padding: 1px 0;
        border-right: 1px solid #ddd;
        border-radius: 2px 0 0 0;
}

保存后刷新看看吧

发表于：网站教程

2017-08-25

# wordpress