子比主题功能增强-文章列表最新发布角标美化

以前有某位不知名用户写过一个差不多的,但是我不记得是谁写过了,要修改文件,十分的不方便,刚好今天写了过滤器过滤文章标题的代码,顺手就把这个也写了,无需修改文件也可以实现显示最新发布角标,纯手搓角标样式,小白也能自定义文字

该代码来自初一小盏。

截图

d2b5ca33bd20240619144408

代码

PHP代码放置于funtions.phpfunc.php

css代码放后台自定义代码

/*新文章发布图标样式*/
.posts-item{
    position: relative;
    overflow: visible; 
}

.tianyishangke-new-icon{
    position: absolute;
    top: 15px;
    right: 0; 
    padding: 5px 10px;
    background: #ff2626;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    border-radius: 5px 0 0 5px;
}

.tianyishangke-new-icon:before {
    position: absolute;
    content: " ";
    display: block;
    width: 7px;
    height: 110%;
    padding: 0 0 7px;
    top: 0;
    right: -7px; 
    background: inherit;
    border-radius: 0 5px 5px 0;
}

.tianyishangke-new-icon:after {
    position: absolute;
    content: " ";
    display: block;
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0.35);
    bottom: -3px; 
    right: -5px; 
    border-radius: 0 5px 5px 0;
}

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共26条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复
    • 的头像-知新网zxcczf20
    • 的头像-知新网方天科技0
    • 的头像-知新网Tge.0
    • 的头像-知新网q15832073080
    • 的头像-知新网qsf1900
    • 的头像-知新网hljwiner990
    • 的头像-知新网梦楠分享0
    • 的头像-知新网xiaowe0
    • 的头像-知新网a23624001960
    • 的头像-知新网zyh24760775440
    • 的头像-知新网zhaokezx0
    • 的头像-知新网xnwc0
    • 的头像-知新网秋雨0
    • 的头像-知新网xnwc0
    • 的头像-知新网psqq20080
    • 的头像-知新网Denver0
    • 的头像-知新网qianhuipin0
    • 的头像-知新网YangXiaoMian0
    • 的头像-知新网qq999990
    • 的头像-知新网youlao730
社区求救信号帮助是一种美德