看见别的站导航边上都有个角标,蛮好看的,于是捣鼓一下,自己也给网站加了一个。

效果如下:

ripro导航角标

配置自定义样式

复制以下代码至后台主题设置-顶部设置-自定义CSS样式代码处

/**一级导航角标 蓝大富博客专用 开始**/
.remen {
 padding:2px 8px;
 font-size:13px;
 line-height:14px;
 -webkit-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8);
 color:#fff;
 -webkit-border-radius:4px;
 border-radius:50px;
 background:#ff2741;
 z-index:5;
 position:absolute;
 top:15px;
 right:-1px;
 animation:fivezhe 1.8s infinite
}
.mobanweb-jiaqun h5 {
 font-size:16px;
 line-height:1.4
}
.mobanweb-jiaqun-small {
 padding:15px
}
.mobanweb-jiaqun p {
 max-width:80%
}
.mobanweb-jiaqun {
 letter-spacing:.5px
}
.mobanweb-jiaqun .btn {
 font-size:13px
}
.mobanweb-jiaqun .btn i {
 margin-right:3px
}
.mobanweb-jiaqun .helper-thumb {
 position:absolute;
 right:0;
 bottom:0
}
.mobanweb-jiaqun-btn-on {
 color:#fff;
 background:#2c63ff!important;
 box-shadow:0 3px 10px -1px #2c63ff!important;
 border:0
}
/**一级导航角标 蓝大富博客专用 结束**/

后台菜单设置

[wm_reply]在wp后台-外观-菜单

打开需要设置的菜单输入以下代码

<span><i class="fa fa-modx fa-spin"></i> 杰奇CMS</span><span class="remen">精品</span> 

注意:

1.本段代码包含了菜单图标代码,如使用主题内置的菜单图标,则删除<i class="fa fa-modx fa-spin"></i>这一句即可;

2.角标主要代码为</span><span class="remen">精品</span>,remen为颜色,可自行替换。[/wm_reply]

 

其余类型主题按照这个方法也可以使用,具体请自行摸索。

发表评论

后才能评论

评论(1)