WordPress美化

2021年4月23日14:50:18 发表评论
摘要

【微语】幻想一步成功者突遭失败,会觉得浪费了时间,付出了精力,却认为没有任何收获;在失败面前,懦弱者痛苦迷茫,彷徨畏缩;而强者却坚持不懈,紧追不舍。但有一点我始终坚信,那就是,当你能把自己感动得哭了的时候,你就成功了!

一、美化代码配置介绍

简介:本文美化配置全部集合在自定义样式中,只需要将代码复制进去即可预览效果
1、外观——主题选项——定制风格——自定义样式
2、如图

WordPress美化

二、鼠标指针美化

备注:本人采用的树叶指针,不喜欢可以选择其它

指针下载地址:https://www.ls102.com/51.html
效果:请查看本站指针效果

配置路径:外观——主题选项——定制风格——自定义样式,添加如下代码

重点:url连接http://www.rootpei.com/zz/zhizheng/cs019_01.cur 是需要改为自己的,请需要的自行在Nginx上配置即可,链接可以访问到即可!

/** 普通指针样式**/
body {
cursor: url(http://www.rootpei.com/zz/zhizheng/cs019_04.cur), default;
}

/** 链接指针样式**/
a:hover{
cursor:url(http://www.rootpei.com/zz/zhizheng/cs019_01.cur), pointer;
}
三、文章标题美化

1、文章标题修改为居中加底色

/* 文章标题修改为居中 */
.entry-header h1 {
text-align: center;
background-color: #4cb6cb;
}
2、文章信息栏修改为居中

/* 文章信息栏修改为居中 */
.begin-single-meta {
text-align: center;
}
3、效果图

WordPress美化4、正文段首空格美化
\\代码
/**去掉正文段首空格**/
.single-content p {
text-indent: 0;
}
5、效果

\\去掉之前
WordPress美化

\\去掉之后效果

WordPress美化
四、隐藏缩略图的分类名称
1、代码

.thumbnail .cat{display: none;}
2、效果

1、隐藏前

WordPress美化

2、隐藏后
WordPress美化

五、顶部导航

1、顶部导航栏渐变色代码

/*顶部颜色*/

#top-header {
background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
border-bottom: 1px solid #dedede;
}
2、效果

1、美化前
WordPress美化

2、美化后

WordPress美化
3、调整导航栏间距

\\代码

#site-nav .down-menu a {

padding: 0 8px;

}
六、缩略图圆角边框美化
1、缩略图和幻灯片添加圆角边框

\\代码
/* 主题缩略图和幻灯片添加圆角边框 */
.thumbnail {
border-radius: 6px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
}
2、网站圆角样式集合

\\代码

/** 网站圆角样式集合 **/

#slider img,.single-tag li a,#slider img,.cat-box, .cat-title,.fadeInUp,#sidebar h3,.cat-grid-title, .cat-square-title,.nbs-flexisel-container,img,h1, h2, h3, h4, h5, h6,a,.nav-menu, .nav-menu *,.type-cat a, .child-cat a,.link-all a
{
border-radius: 8px
}
3、效果

1、美化前

WordPress美化

2、美化后

WordPress美化
七、导航菜单
1、导航菜单划过两种颜色变幻

/* 导航菜单鼠标划过两种颜色变幻效果 */

#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #b485e2}#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #b485e2;transition-duration:.6s}

2、效果

1、请查阅本站导航即可!
WordPress美化八、右侧小工具美化
1、美化“关于本站”小工具

\\代码
/** 修改关于本站css美化关于本站**/
.about-img {
text-align: center;
background: url(https://wx2.sinaimg.cn/large/0066LGKLly1fjvq3dc19uj309q02sa9y.jpg) center center no-repeat;
background-size: cover;
height: 120px;
border-radius:8px;
margin: -10px -15px 30px;
}
.about-img img {
float: none;
border: 1px solid #ddd;
border-radius: 50%;
padding: 0px;
height: auto;
text-align: center;
width: 120px;
margin: 30px 0 0 0;
}
.about-name {
text-align: center;
font-size: 16px;
position: relative;
display: block;
}
.about-name {
font-size: 16px;
font-weight: 700;
}
2、效果

1、美化前

WordPress美化

2、美化后

WordPress美化

  • 微信公众号
  • 这是我的微信公众号扫一扫
  • weinxin
  • 我的QQ技术群
  • 我的QQ技术群扫一扫
  • weinxin
admin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: