WordPress给小工具栏加个样式吧

783次阅读

共计 736 个字符,预计需要花费 2 分钟才能阅读完成。

效果对比

修改前:

WordPress给小工具栏加个样式吧

修改后:

WordPress给小工具栏加个样式吧

 

方法

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;
}

保存后刷新看看吧

正文完
 
mervinwang
版权声明:本站原创文章,由 mervinwang 2017-08-25发表,共计736字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
文章搜索