知更鸟Begin主题美化记录

2021年3月9日16:09:16 发表评论
广告也精彩

美化后效果可查看本网站

评论获取QQ昵称失败修复

发现不能自动获取QQ的昵称,排查发现是因为获取昵称的接口挂了。

接口放入主题/js/qq-info.php这个页面里的,原来的接口 http://r.pengyou.com/fcg-bin/cgi_get_portrait.fcg?uins= 已挂,替换获取昵称接口地址。

新地址:http://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=

大概在第28行

  1. $nameurl = "https://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=".$qq;

知更鸟Begin主题美化记录

加粗导航菜单字体

将下面样式加到主题选项→定制风格→自定义样式中

  1. #site-nav .down-menu li {
  2. font-weightbold;
  3. }

 

添加评论框默认文字,提高访客舒适度

实现方法

首先我们打开主题根目录的comments.php文件,注意是在主题根目录,而不是WordPress根目录,然后复制下面这行代码添加到textarea标签里。

  1. placeholder="有任何疑问请在此评论,小任会尽力为您解答!"

主题文章内分享按钮

替换原有样式

  1. /** 分享 **/
  2. #share {
  3.     positionabsolute;
  4.     top: -60px;
  5.     rightright: -29px;
  6.     width302px;
  7.     height68px;
  8.     displaynone;
  9.     z-index: 999;
  10. }
  11. #share a {
  12.     floatleft;
  13.     background#999;
  14.     font-size20px !important;
  15.     color#fff;
  16.     width40px;
  17.     height40px;
  18.     line-height40px;
  19.     margin-left4px;
  20.     padding-left: 0;
  21.     text-aligncenter;
  22.     border-radius: 20px;
  23.     background: rgba(128, 128, 128, 0.9);
  24. }
  25. #share .be-addbox {
  26.     color#7ab951;
  27.     border1px solid #7ab951;
  28.     background#fff;
  29. }
  30. #share .be-addbox:hover {
  31.     background#7ab951 !important;
  32.     color#fff !important;
  33. }
  34. #share .be-qzone {
  35.     color#ff7400;
  36.     border1px solid #ff7400;
  37.     background#fff;
  38. }
  39. #share .be-qzone:hover {
  40.     background#ff7400 !important;
  41.     color#fff !important;
  42. }
  43. #share .be-stsina {
  44.     colorred;
  45.     border1px solid red;
  46.     background#fff;
  47. }
  48. #share .be-stsina:hover {
  49.     background#ff0000 !important;
  50.     color#fff !important;
  51. }
  52. #share .be-tqq {
  53.     color#46c0e6;
  54.     border1px solid #46c0e6;
  55.     background#fff;
  56. }
  57. #share .be-tqq:hover {
  58.     background#46c0e6 !important;
  59.     color#fff !important;
  60. }
  61. #share .be-renren {
  62.     color#3b68ac;
  63.     border1px solid #3b68ac;
  64.     background#fff;
  65. }
  66. #share .be-renren:hover {
  67.     background#3b68ac !important;
  68.     color#fff !important;
  69. }
  70. #share .be-weixin {
  71.     color#006f1d;
  72.     border1px solid #006f1d;
  73.     background#fff;
  74. }
  75. #share .be-weixin:hover {
  76.     background#006f1d !important;
  77.     color#fff !important;
  78. }
  79. .bd_weixin_popup {
  80.     height250px !important;
  81. }
  82. .bd_weixin_popup_foot {
  83.     displaynone;
  84. }

“提交评论”按钮美化

覆盖原有样式:

  1. #respon#submit {
  2.     background#38a3fd;
  3.     width: 15%;
  4.     margin5px 0 15px 0;
  5.     padding8px;
  6.     cursorpointer;
  7.     border1px solid #ddd;
  8.     border-radius: 19px;
  9.     -webkit-appearance: none;
  10.     color#fff;
  11.     box-shadow: 0 6px 10px #38a3fd50;
  12. }

主题文件下载信息框展示效果美化

在文章中启用下载模块时,如果只填写文件的信息时,在文章文件下载框中只会显示你所填写文件资料,并不会在显示每栏对应的是什么信息。

如果我们要让每栏信息都对应的话,我们在后台编辑下载信息时要手动添加非常麻烦,默认添加名称。

修改方法:首先打开根目录中down.php、download.php将下面代码复制替换掉

然后再打开目录/inc/down.php、download.php将下面代码替换掉

替换前:

  1. <div class="desc">
  2. <h3>文件信息</h3>
  3. <?php if($down_name){ ?><p><?php echo $down_name;?></p><?php } ?>
  4. <?php if($file_os){ ?><p><?php echo $file_os;?></p><?php } ?>
  5. <?php if($file_inf){ ?><p><?php echo $file_inf;?></p><?php } ?>
  6. <?php if($down_size){ ?><p><?php echo $down_size;?></p><?php } ?>
  7. <?php if($links_id){ ?><p><strong>下载次数:</strong><?php echo $click_count;?></p><?php } ?>
  8. </div>
  9. <div class="clear"></div>

替换后:

  1. <div class="desc">
  2. <h3>文件信息</h3>
  3. <p><?php if($down_name){ ?>资源名称:<?php echo $down_name;?><?php } ?></p>
  4. <p><?php if($file_os){ ?>应用平台:<?php echo $file_os;?><?php } ?></p>
  5. <p><?php if($file_inf){ ?>资源版本:<?php echo $file_inf;?><?php } ?></p>
  6. <p><?php if($down_size){ ?>资源大小:<?php echo $down_size;?><?php } ?><p>
  7. <?php if($links_id){ ?><p><strong>下载次数:</strong><?php echo $click_count;?></p><?php } ?>
  8. </div>
  9. <div class="clear"></div>

然后再打开目录/inc/down.php、download.php将下面代码替换掉

替换前:

  1. if($down_start) {
  2.         $content .= '
  3.         <div class="down-form">
  4.             <fieldset>
  5.                 <legend>文件信息</legend>
  6.                 <span class="down-form-inf">
  7.                     <span>'.$down_name.'</span>
  8.                     <span>'.$file_os.'</span>
  9.                     <span>'.$file_inf.'</span>
  10.                     <span>'.$down_size.'</span>
  11.                     <span class="pass"> '.$rr_password.'</span>
  12.                     <div class="clear"></div>
  13.                 </span>

替换后:

  1. if($down_name) {
  2.             $down_name_on .= '<span><strong>资源名称:</strong>'.$down_name.'</span>';
  3.         }
  4. if($file_os) {
  5.             $file_os_on .= '<span><strong>应用平台:</strong>'.$file_os.'</span>';
  6.         }
  7. if($file_inf) {
  8.             $file_inf_on .= '<span><strong>资源版本:</strong>'.$file_inf.'</span>';
  9.         }
  10. if($down_size) {
  11.             $down_size_on .= '<span><strong>资源大小:</strong>'.$down_size.'</span>';
  12.         }
  13.     if($down_start) {
  14.       $content .= '
  15.       <div class="down-form">
  16.         <fieldset>
  17.           <legend>文件信息</legend>
  18.           <span class="down-form-inf">
  19.             <span>'.$down_name_on.'</span>
  20.             <span>'.$file_os_on.'</span>
  21.             <span>'.$file_inf_on.'</span>
  22.             <span>'.$down_size_on.'</span>
  23.             <span class="pass"> '.$rr_password.'</span>
  24.             <div class="clear"></div>
  25.           </span>
  26. 最终效果是:有内容的才

最终效果是:有内容的才会显示标题,没有内容的标题不会显示出来,具体效果请看本站。

修改完成后到你的博客主页CTRL+F5清除缓存刷新后就可以了,我们在发布有下载信息的文章时就可以只输入文件信息就好了。

 

 

 

热门标签美化

主题自带的标签太普通,换成彩色的,使用下边的代码即可美化你的热门标签。

1、代码部署

风格一、凌乱派

代码如下:

  1. <script type="text/javascript">box_width=$("#cx_tag_cloud-4").width();len=$(".tagcloud a").length-1;$(".tagcloud a").each(function(i){var let=new Array('c3010a','31ac76','ea4563','31a6a0','8e7daa','4fad7b','f99f13','f85200','666666');var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr('style','background:#'+let[random1]+'');if($(this).next().length>0){last=$(this).next().position().left}});</script>
  2. <style type="text/css">.tagcloud a{color:#fff;}#php_text-24{display:none;}</style>

风格二、正经派

代码如下:

  1. <script type="text/javascript">box_width=$("#cx_tag_cloud-4").width();len=$(".tagcloud a").length-1;$(".tagcloud a").each(function(i){var let=new Array('c3010a','31ac76','ea4563','31a6a0','8e7daa','4fad7b','f99f13','f85200','666666');var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr('style','background:#'+let[random1]+'');if($(this).next().length>0){last=$(this).next().position().left}});</script>
  2. <style type="text/css">
  3. .tagcloud a{color:#fff;}
  4. #php_text-24{display:none;}
  5. .tagcloud {padding10px 0 10px 10px;}.tagcloud a {padding-right:5px;
  6. padding-left:5px;
  7. overflow:hidden;
  8. display:block;
  9. width:92px;
  10. height:28px;}
  11. </style>

2、使用方法:

1、关闭标签3D展示功能。(未开请忽略)小工具-热门标签-取消显示3D

2、设置热门标签展示数量。(凌乱派风格随便填,正经派建议是3的倍数,多少自己看着舒服就OK)

3、在热门标签小工具下方添加增强文本(小工具),然后将上述任一风格代码复制到文本里边。

4、注意事项:使用后在热门标签下方会有个细长的白色框框,怎么隐藏呢?

接着看图:

如图所示,右键"审查元素",查找个横条的ID,将这里的ID替换到上述代码中。如我的是php-text-11

美化评论“沙发 板凳 地板”添加背景色

找到主题目录 inc/comment-template.php文件,搜索“沙发”。

找到如下代码

  1. case 0 :echo "&nbsp;" . sprintf(__( '沙发', 'begin' )) . "";++$commentcount;break;
  2. case 1 :echo "&nbsp;" . sprintf(__( '板凳', 'begin' )) . "";++$commentcount;break;
  3. case 2 :echo "&nbsp;" . sprintf(__( '地板', 'begin' )) . "";++$commentcount;break;

修改成

  1. case 0 :echo '&nbsp;<span class="pinglunqs plshafa">沙发</span>';++$commentcount;break;
  2. case 1 :echo '&nbsp;<span class="pinglunqs plbandeng">板凳</span>';++$commentcount;break;
  3. case 2 :echo '&nbsp;<span class="pinglunqs pldiban">地板</span>';++$commentcount;break;

然后在Style.css文件里添加如下代码

  1. .pinglunqs{
  2. color:#fff;
  3. padding:0px 8px;
  4. border-radius:8px
  5. }
  6. .plshafa{
  7. background:#fd5d3c
  8. }
  9. .plbandeng{
  10. background:#d270fb
  11. }
  12. .pldiban{
  13. background:#9cf
  14. }

右侧滚动条按钮美化

把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式

  1. #scroll {
  2.     width32px;
  3.     float: rightright;
  4.     positionfixed;
  5.     rightright: 10px;
  6.     bottombottom: 50px;
  7.     z-index: 9999;
  8. }
  9. #scroll li a {
  10.     font-size16px;
  11.     color#fff;
  12.     width32px;
  13.     height32px;
  14.     line-height28px;
  15.     text-aligncenter;
  16.     vertical-alignmiddle;
  17.     margin-top4px;
  18.     displayblock;
  19.     cursorpointer;
  20.     border1px solid #ddd;
  21.     border-radius: 15px;
  22.     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  23. }
  24. #scroll li a:hover {
  25.     background#2f889a;
  26.     color#fff;
  27.     border1px solid #2f889a;
  28.     transition: all .2s ease-in 0s;
  29. }
  30. .scroll-h {
  31.     background-color#ff5e5c !important;
  32. }
  33. .scroll-c {
  34.     background-color#24a5db !important;
  35. }
  36. .scroll-b {
  37.     background-color#ff9531 !important;
  38. }
  39. #gb2big5 {
  40.     background-color#aec534 !important;
  41. }
  42. .qr {
  43.     background-color#4a4a4a !important;
  44. }
  45. .qqonline a {
  46.     background#e6af1345!important;
  47. }
  48. @media screen and (min-width:900px) {
  49.     #scroll li a:hover {
  50.         background#2f889a;
  51.         color#fff;
  52.         border1px solid #2f889a;
  53.         transition: all 0.2s ease-in 0s;
  54.     }
  55. }
  56. .qr-img {
  57.     positionfixed;
  58.     background#fff;
  59.     bottombottom: 50px;
  60.     rightright: 50px;
  61.     max-width300px;
  62.     z-index: 9999;
  63.     displaynone;
  64.     border-radius: 4px;
  65.     padding10px 10px 2px 10px;
  66.     animation: fade-in;
  67.     animation-duration: 0.5s;
  68.     -webkit-animation: fade-in 0.5s;
  69.     border1px solid #ddd;
  70.     box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  71. }
  72. #output img {
  73.     positionabsolute;
  74.     top72px;
  75.     rightright: 72px;
  76.     width25px;
  77.     height25px;
  78. }
  79. .qr .fa-qrcode {
  80.     font-size20px !important;
  81.     line-height32px !important;
  82. }
  83. .qr-img .arrow {
  84.     positionabsolute;
  85.     font-size26px;
  86.     bottombottom: 2px;
  87. }
  88. .arrow-y {
  89.     color#fff;
  90.     rightright: -8px;
  91. }
  92. .arrow-z {
  93.     color#c6c6c6;
  94.     rightright: -9px;
  95. }
  96. #output td {
  97.     bordernone;
  98. }
  99. #output td {
  100.     padding: 0;
  101. }
  102. .page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c {
  103.     displaynone;
  104. }
  105. #scroll li a {
  106.     background#2f9a3c;
  107. }

 

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

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

已登录用户不需要填写以下内容