您现在的位置是:首页 > 教程 > WordPress教程WordPress教程
WordPress“NEW”、“置顶”图标样式调整为按指定角度倾斜的方法
雅绿2023-06-16 22:57:13WordPress教程已有人查阅
导读原版的图标样式太丑了,在修改插件前端显示样式的时候将“NEW”、“置顶”的显示调整成了按角度倾斜的样式;
原版的图标样式太丑了,在修改插件前端显示样式的时候将“NEW”、“置顶”的显示调整成了按角度倾斜的样式;
使用方式很简单,将以下代码复制到主题 main.css 文件中即可
使用方式很简单,将以下代码复制到主题 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实现一个页面多屏的方法
1、复制一个page.php文件改为page-abc.php,并在WordPress后台新建一个页面,固定链接地址改为abc(这个abc可随意,但必须跟page-abc相对应)。 -
wordpress安装插件的几种方法
WordPress插件,是为开源博客程序WordPress添加各种功能的扩展组件。WordPress之所以成为目前使用最广泛的博客程序之一,正因为它拥有非常多的插件。 -
wordpress网站为图片添加水印的方法
wordpress网站如何为图片添加水印:1、打开你的wordpress网站后台,并登陆。点击插件-安装插件,进入安装搜索界面
留言与评论 (共有 条评论) |