文章
文章知否快报杂货铺星球帮助用户导航
!
也想出现在这里？ 联系我们吧
广告区块 - 腾讯云广告
!
也想出现在这里？ 联系我们吧
广告区块 - NewBing广告
Bcloud 必云工具箱 Google 谷歌学术搜索 ChatGPT国内镜像 ChatGPT 学术 BcloudStore New域名捡漏 Kodo 免费云存储 CDN 免费CDN ESC 2H2G月9.33元 QINIU4H4G Free UPai 云联盟 ESC2H2G年108元 New 加入广告 New 加入广告 New 加入广告

WordPress 7B2主题 文章提示框美化

WordPress 7B2主题 文章提示框美化

 

文本提示框很多网站都有，不管程序是博客或是其他程序都有不同的风格提示框，提示框能更好的展现需让网友重点观看的内容，比较醒目，今天分享的提示框颜色搭配比较不错，

效果图：

WordPress 7B2主题 文章提示框美化

教程如下：

1、下载文件中的js文件替换B2主题中的文件：b2/Assets/admin/gd_block.js；

2、下面的函数放入主题的 functions.php 中，或新建一个文件，require_once() 方式引入：

function toz($atts, $content=null){
 
    return '<div id="sc_notice">'.$content.'</div>';
 
}
 
add_shortcode('v_notice','toz');
 
function toa($atts, $content=null){
 
    return '<div id="sc_error">'.$content.'</div>';
 
}
 
add_shortcode('v_error','toa');
 
function toc($atts, $content=null){
 
    return '<div id="sc_warn">'.$content.'</div>';
 
}
 
add_shortcode('v_warn','toc');
 
function tob($atts, $content=null){
 
    return '<div id="sc_tips">'.$content.'</div>';
 
}
 
add_shortcode('v_tips','tob');
 
function tod($atts, $content=null){
 
    return '<div id="sc_blue">'.$content.'</div>';
 
}
 
add_shortcode('v_blue','tod');
 
function toe($atts, $content=null){
 
    return '<div id="sc_black">'.$content.'</div>';
 
}
 
add_shortcode('v_black','toe');
 
function tof($atts, $content=null){
 
    return '<div id="sc_xuk">'.$content.'</div>';
 
}
 
add_shortcode('v_xuk','tof');
 
function tog($atts, $content=null){
 
    return '<div id="sc_lvb">'.$content.'</div>';
 
}
 
add_shortcode('v_lvb','tog');
 
function toh($atts, $content=null){
 
    return '<div id="sc_redb">'.$content.'</div>';
 
}
 
add_shortcode('v_redb','toh');
 
function toi($atts, $content=null){
 
    return '<div id="sc_orange">'.$content.'</div>';
 
}
 
add_shortcode('v_orange','toi');
 
///////////////////////////////////////////////////////
 
function one($atts, $content=null){
 
    return '<div id="zm_mhz">'.$content.'</div>';
 
}
 
add_shortcode('zm_mhz','one');
 
function one2($atts, $content=null){
 
    return '<div id="zm_xgh">'.$content.'</div>';
 
}
 
add_shortcode('z_xgh','one2');
 
function one3($atts, $content=null){
 
    return '<div id="zm_tkzj">'.$content.'</div>';
 
}
 
add_shortcode('z_tkzj','one3');
 
function one4($atts, $content=null){
 
    return '<div id="zm_xyz">'.$content.'</div>';
 
}
 
add_shortcode('z_xyz','one4');
 
function one5($atts, $content=null){
 
    return '<div id="zm_gll">'.$content.'</div>';
 
}
 
add_shortcode('z_gll','one5');
 
function one6($atts, $content=null){
 
    return '<div id="zm_xty">'.$content.'</div>';
 
}
 
add_shortcode('z_xty','one6');
 
function one7($atts, $content=null){
 
    return '<div id="zm_yyz">'.$content.'</div>';
 
}
 
add_shortcode('z_yyz','one7');
 
function one8($atts, $content=null){
 
    return '<div id="zm_szh">'.$content.'</div>';
 
}
 
add_shortcode('z_szh','one8');
 
function one9($atts, $content=null){
 
    return '<div id="zm_wbk">'.$content.'</div>';
 
}
add_shortcode('z_wbk','one9');

 

3、CSS文件：

#sc_notice {
color: #7da33c;
background: #ecf2d6 url('/wp-content/themes/b2child/xutian/Tips/tu/sc_notice.png') -1px -1px no-repeat;
border: 1px solid #aac66d;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_warn {
color: #ad9948;
background: #fff4b9 url('/wp-content/themes/b2child/xutian/Tips/tu/sc_warn.png') -1px -1px no-repeat;
border: 1px solid #eac946;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_error {
color: #c66;
background: #ffecea url('/wp-content/themes/b2child/xutian/Tips/tu/sc_error.png') -1px -1px no-repeat;
border: 1px solid #ebb1b1;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_tips {
color: #777;
background: #eaeaea url('/wp-content/themes/b2child/xutian/Tips/tu/sc_tips.png') -1px -1px no-repeat;
border: 1px solid #ccc;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_blue {
color: #1ba1e2;
background: rgba(27, 161, 226, 0.26) url('/wp-content/themes/b2child/xutian/Tips/tu/sc_blue.png') -1px -1px no-repeat;
border: 1px solid #1ba1e2;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_black {
border-width: 1px 4px 4px 1px;
border-style: solid;
border-color: #3e3e3e;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_xuk {
border: 2px dashed rgb(41, 170, 227);
background-color: rgb(248, 247, 245);
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#sc_lvb {
margin: 10px 0;
padding: 10px 15px;
border: 1px solid #e3e3e3;
border-left: 2px solid #05B536;
background: #FFF;
}
#sc_redb {
margin: 10px 0;
padding: 10px 15px;
border: 1px solid #e3e3e3;
border-left: 2px solid #ED0505;
background: #FFF;
}
#sc_orange {
margin: 10px 0;
padding: 10px 15px;
border: 1px solid #e3e3e3;
border-left: 2px solid #EC8006;
background: #FFF;
}
#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;
box-shadow: 6px 0 12px -5px #a5a5a5, -6px 0 12px -5px rgb(177 161 207 / 0%);
}
#zm_xyz a , #zm_gll a{
color: #eeeeee;
}
#zm_szh a{
color: #c7c7c7;
}
#zm_xty a, #zm_yyz a{
color: #ffffff;
}

CSS中图片文件在下载的图片文件夹中。

 

下载权限

查看
  • ￥
    免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}：
您当前的等级为
登录后免费下载登录 小黑屋反思中，不准下载！ 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数（次）用完了，请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次，今日剩余次

你可能也喜欢:

  1. WordPress 7B2 Pro主题美化：文章底部添加所属专题
  2. WordPress 7B2 主题首页文章模块样式美化调整
  3. WordPress 7B2主题美化更改用户等级图标教程
  4. WordPress 7B2主题教程：页眉下方添加顶部通栏广告
  5. WordPress添加每日自动发布60s读懂世界新闻
  6. WordPress 7B2 Pro主题美化-文章列表动态效果
免责说明

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

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

温馨提示：本站部分付费下载资源收取的费用为资源收集整理费用，并非资源费用，不对下载的资源提供任何技术支持及售后服务。

给TA打赏
共{{data.count}}人
人已打赏
7B27B2 ProWordPress教程WorldPress
WordPress教程

如何修改WordPress网站后台登录地址

2023-5-15 12:03:47

WordPress教程

WordPress 7B2主题 文章H标签美化

2023-5-15 12:16:50

猜你喜欢
Bcloud 必云工具箱 Google 谷歌学术搜索 ChatGPT国内镜像 ChatGPT 学术 BcloudStore New域名捡漏 Kodo 免费云存储 CDN 免费CDN ESC 2H2G月9.33元 QINIU4H4G Free UPai 云联盟 ESC2H2G年108元 New 加入广告 New 加入广告 New 加入广告
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 唯一QQ客服

  • 一只不能红得发紫的小红薯

返回顶部