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“NEW”、“置顶”图标样式调整为按指定角度倾斜的方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：雅绿» /dmh/4513.html

很赞哦！ ()