当前位置:首页>WordPress>WordPress美化>Vieu主题模板css样式提供

Vieu主题模板css样式提供

西柚用了Vieu主题后,发觉好多都是要自己baidu,作者除了回复其他外,基本不回复,只能自己查找了。下面提供本站css样式,仅供产考哈!

/*修复文章缩略图比例变形开始*/img.thumb {
    object-fit: cover !important;
}
/*修复文章缩略图比例变形结束*/
/*导航栏横向布局开始*/.site-navbar ul.sub-menu {
width:auto;
padding:15px;
text-align:center;
background:rgba(255,255,255,.9);
-webkit-columns:2;
-webkit-column-gap:10px;
-moz-columns:2;
-moz-column-gap:10px;
-ms-columns:2;
-ms-column-gap:10px;
columns:2;
column-gap:10px;
}
.site-navbar .sub-menu li {
text-align:center;
width:100px;
}
/*导航栏横向布局结束*//*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
/*—滚动条默认显示样式–*/::-webkit-scrollbar-thumb{
background-color:#4e89ff;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*—鼠标点击滚动条显示样式–*/::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}
/*—滚动条大小–*/::-webkit-scrollbar{
width:8px;
height:18px;
}
/*—滚动框背景样式–*/::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸结束*/ 
/*WordPress宇宙超级无敌美化框 */#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
/*圆角值,在此定义*/border-radius: 8px;
}
/*迷幻紫*/#zm_mhz{
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
    background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
}
/*西瓜红*/#zm_xgh{
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);
    background-color: #ff9a8b66;
    background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);
    background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);
}
/*华为P30 天空之境*/#zm_tkzj {
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
    background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
}
/*小宇宙*/#zm_xyz {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);
    background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% );
}
/*橄榄绿*/#zm_gll {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
    background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% );
}
/*小太阳*/#zm_xty {
    color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
     /*border-radius: 10px; */    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% );
}
/*优雅紫*/#zm_yyz {
color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/    box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );
}
/*深邃黑*/#zm_szh {
color: #c7c7c7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 5px;*/    box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );
}
/*无边框*/#zm_wbk {
    color: #000000;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#zm_xyz a , #zm_gll a{
 color: #eeeeee;
}
#zm_szh a{
color: #c7c7c7;
}
#zm_xty a, #zm_yyz a{
color: #ffffff;
}

然后把下面的代码放到你主题的函数文件functions.php内

/*ciyol添加文本编辑自定义快捷标签按钮 开始*/ add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 function bolo_after_wp_tiny_mce($mce_settings) {
 ?>
 <script type="text/javascript"> 
 QTags.addButton( 'z_mhz', '迷幻紫', '<div id="zm_mhz">迷幻紫</div>\n', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">西瓜红</div>\n', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">天空之境</div>\n', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">小宇宙</div>\n', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">橄榄绿</div>\n', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">小太阳</div>\n', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">优雅紫</div>\n', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">深邃黑</div>\n', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">无边框</div>\n', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }
 /*ciyol添加文本编辑自定义快捷标签按钮 结束*/

查看效果

迷幻紫
西瓜红
天空之境
小宇宙
橄榄绿
小太阳
优雅紫
深邃黑
无边框

©版权声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA打赏
共{{data.count}}人
人已打赏
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索