子比主题美化 – 卡片列表角标

介绍

根据以前某位不知名用户写的最新发布角标修改而来,无需修改子比主题文件即可实现,非图片角标,手搓的css背景

图片[1] - 子比主题美化 – 卡片列表角标 - 筱信日记

教程

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;
}
温馨提示:本文最后更新于2024-06-14 10:19:15,某些文章具有时效性,若有错误或失效,请在下方留言或联系筱信
仅供学习和研究使用,请在下载后24小时内删除
子比主题美化 – 卡片列表角标 - 筱信日记
子比主题美化 – 卡片列表角标
此内容为免费阅读,请登录后查看
  0
技术支持
自动发货
售后服务
网络收集
免费阅读
© 版权声明
THE END
点赞5赞赏 分享
评论 共30条

请登录后发表评论