主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
原版的图标样式太丑了,在修改插件前端显示样式的时候将“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%; } }
这几篇文章你可能也喜欢:
- Typescript 如何处理元素(Typescript 元组)
- 可以用WVS扫描的网站(可以扫描的网页)
- 什么是骨架屏?
- 如何使用帝国cms模板(帝国cms7.5手机模板)
- 小程序开发流程_创建属于自己的小程序基础教程(小程序开发入门教程)
本文由主机参考刊发,转载请注明:主机参考_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜 https://zhujicankao.com/725.html
主机参考_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜