Wordpress页面效果CSS

Wordpress自定义页面效果

1、效果展示

我的主题使用的是Newsup

效果展示
在这里插入图片描述

2.、额外CSS

在主页面自定义额外CSS

/*日历格子*/
table, th, td {
    border: 2px solid gold;
	color: white;
}
/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 自定义文章框高度*/
.mg-posts-sec-post{ 
	padding:0;
	border: 2px solid gold;
	background-color: #eff3ff;
	height: 225px
	text-align:center;
	position:relative;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	 -moz-transform: rotate(360deg) scale(1.08);
    -webkit-transform: rotate(360deg) scale(1.08);
    -o-transform: rotate(360deg) scale(1.08);
    -ms-transform: rotate(360deg) scale(1.08);
    transform: rotate(360deg) scale(1.08);
}
/*特色图像框*/
.col-md-6{
	padding:0;
	width:50%;
	height:100%;
}
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
    height: 40px;
	background-color: black;
	width: 260px
}

#searchform{
	height: 35px
	width:50px
}
/*右侧小工具*/
/*搜索框*/
#search-4{
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-3{
	border:0;
	background-color:#eff3ff;
	color:red;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:#eff3ff;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: gold;
	color:white;
}
/*每日一句*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
 .textwidget custom-html-widget{
	background-color:black;
}

/*每日一句*/
#custom_html-3 h4{
	color:gold;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}
/*文章分页*/
.wp-pagenavi {
    margin-left:47px;
    font-size: 17px;
}
.wp-pagenavi{
     margin-left:47px;
	margin-top:100px
    line-height: 24px;
}
.wp-pagenavi{
    width: 100%;
}
.wp-pagenavi > span,
.wp-pagenavi > a{
    margin: 4px 6px 4px 0;
    padding: 2px 10px;
    text-decoration: none;
    background-color: #eee;
    color: #666;
    display: inline-block;
}
.wp-pagenavi a:hover,
.wp-pagenavi > .current{
    background-color: #cf2079;
    color: #fff !important;
}
/*页脚线*/
.divide-line{
	line-height:0;
}

3、如果不是同一个主题,上面的额外CSS也得修改

可使用开发人员工具查看每个区域对应的CSS
开发人员工具
通过开发人员工具看没块对应位置,再做修改

在这里插入图片描述

/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 文章框*/
.mg-posts-sec-post{ 
	border: 2px solid gold;
	background-color:#90d7ec;
}
/*文章点击前时间显示*/
.mg-blog-meta a{
	color:red;
}
/*文章点击后时间显示*/
.mg-blog-meta a:hover{
	color:#fcf16e;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	background-color:#fcf16e;
	color:#fcf16e;
	 -moz-transform: rotate(360deg) scale(1.06);
    -webkit-transform: rotate(360deg) scale(1.06);
    -o-transform: rotate(360deg) scale(1.06);
    -ms-transform: rotate(360deg) scale(1.06);
    transform: rotate(360deg) scale(1.06);
}
/*日历格子*/
table, th, td {
    border: 2px solid black;
	color:#90d7ec;
}
/*右侧小工具*/
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
	background-color: black;
	width: 260px
}
/*搜索框*/
#search-4{
	margin-top:20px;
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-2{
	border: 2px solid gold;
	background-color:#90d7ec;
	color:black;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:black;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: black;
	color:#90d7ec;
}
/*每日一句*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
 .textwidget custom-html-widget{
	background-color:black;
}

/*每日一句*/
#custom_html-3 h4{
	color:gold;
}
/*音乐*/
#media_audio-2{
	background-color:black;
	border:0;
}
/*图片*/
#media_image-2{
	background-color:black;
	border:0;
}

/*旋转的立方体*/
#media_image-4{
	background-color:black;
	border:0;
}
/*向日葵*/
#media_image-3{
	background-color:black;
	border:0;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}

改变文章页面的CSS(2020-11-27)

主页面展示效果以及文章页面展示效果
在这里插入图片描述
在这里插入图片描述

.d-md-flex mg-posts-sec-post{
	padding:0;
}
.mg-post-thumb back-img md{
	height:225px;
	margin-left:0;
	position:absolute;
	padding:0;
}
.col-12 col-md-6{
padding-left:0;
padding-top:0;
	width:100%;
	height:100%;
}
/* 文章内容中的表格背景设置为黑色*/
table,thead{
	background-color:black;
}

/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 文章框#90d7ec*/
.mg-posts-sec-post{ 
	padding-left:0;
	padding-top:0;
	position:relative;
	height:224px;
	border:2px red;
	background-color:#90d7ec;
}
/*文章点击前时间显示*/
.mg-blog-meta a{
	color:red;
}
/*文章点击后时间显示*/
.mg-blog-meta a:hover{
	color:#fcf16e;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	background-color:#fcf16e;
	color:#fcf16e;
	 -moz-transform: rotate(360deg) scale(1.06);
    -webkit-transform: rotate(360deg) scale(1.06);
    -o-transform: rotate(360deg) scale(1.06);
    -ms-transform: rotate(360deg) scale(1.06);
    transform: rotate(360deg) scale(1.06);
}
/*日历格子*/
table, th, td {
    border: 2px solid black;
	color:#90d7ec;
}
/*右侧小工具*/
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
	background-color: black;
	width: 260px
}
/*搜索框*/
#search-4{
	margin-top:20px;
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-2{
	border: 2px solid gold;
	background-color:#90d7ec;
	color:black;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:black;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: black;
	color:#90d7ec;
}
/*第二匹马*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
/*音乐*/
#media_audio-2{
	background-color:black;
	border:0;
}
/*第一匹马*/
#media_image-2{
	background-color:black;
	border:0;
}
/*旋转的地球*/
#media_image-4{
	background-color:black;
	border:0;
}
/*宇航员*/
#media_image-3{
	background-color:black;
	border:0;
}
/*滚动的字*/
#custom_html-4{
	background-color:black;
	border:0;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}
/*页脚部分*/
.selfDesignFooter {
	margin-top:150px;
	color: #4CAF50;
	text-align: center;
}
/*文章内容部分修改*/
/*引用字体*/
blockquote{
	font-size:20px;
	color:red;
	font-family:"SimSun";
	background-color:#CCCCCC;
	letter-spacing:0.5px;
	text-align:center;
}
h1{
	color:#FFCC99;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h2{
	color:#FFFFCC;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h3{
	color:blue;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h4{
	color:#CCFF99;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
/*无序*/
ul{
	color:#003399;
	letter-spacing:0.5px;
	font-family:"SimSun"
}

/*有序*/
ol{
	color:#003399;
	letter-spacing:0.5px;
	font-family:"SimSun";
}
/*正文*/
p{
	color:black;
	letter-spacing:0.5px;
	font-family:"KaiTi";
	font-size:20px;
}

/*文章背景颜色*/
.mg-blog-post-box{
	background-color:#C7EDCC;
}
/*顶部文章信息颜色*/
.media-body{
	background-color:#C7EDCC;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值