主机参考_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

原版的图标样式太丑了，在修改插件前端显示样式的时候将“NEW”、“置顶”的显示调整成了按角度倾斜的样式；

演示：

使用方式很简单，将以下代码复制到主题 main.css 文件中即可

/** 修正摘要列表定位方式 */
.excerpt {
    position: relative;
}
/** NEW 图标文字版样式 **/
.excerpt .new-icon{
    position: absolute;
    right: -45px;
    top: -20px;
    display: block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    background: #4caf50;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    transform: rotate(36deg);
    transform-origin: 0% 0%;
}

/** 置顶图标文字版样式 **/
.sticky-icon {
    position: absolute;
    padding: 0;
    right: -45px;
    top: -20px;
    display: block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    background: #ff5e52;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    transform: rotate(36deg);
    transform-origin: 0% 0%;
}
@media (max-width:640px){
    .excerpt-sticky header{text-indent:0px;position: unset;}
    .sticky-icon {
        position: absolute;
        padding: 0;
        right: -45px;
        left: auto;
        top: -20px;
        display: block;
        width: 120px;
        height: 24px;
        line-height: 24px;
        background: #ff5e52;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        transform: rotate(36deg);
        transform-origin: 0% 0%;
    }
}

这几篇文章你可能也喜欢：

• 将WordPress之前的文章转换成古腾堡区块
• WordPress媒体库创建分类，文件夹创建(如何修改WordPress上传媒体限制)
• 从WordPress文章中批量导入外部链接图片到本地。
• 打开SSL(https)后，WordPress站点提示“重定向你太多次”的解决方案
• 在wordpress主题中添加自定义文章类型register_post_type和分类教程(WordPress文章类型)。

本文由主机参考刊发，转载请注明：主机参考_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜 https://zhujicankao.com/725.html