新版Begin主題側邊欄和兩欄標題美化

將側邊欄標題 sidebar h3 ?位置css修改成如下所示:

  1. #sidebar h3, #sidebar-l h3 {
  2. background: #fff;
  3. height: 37.5px;
  4. line-height: 37.5px;
  5. border-bottom: 1px solid #e2e1e1;
  6. margin: 0 20px 0 20px;
  7. text-align: center;
  8. font-size: 1.8rem;
  9. letter-spacing: 4px;
  10. color: #606777;
  11. }

按照以上css修改后,標題欄位置還多了一個 .title-i ?,后臺找到 .title-i ?將其隱藏:

  1. .title-i?{
  2. ????float:?left;
  3. ????width:?16px;
  4. ????display:?none;
  5. }

將 .title-i 隱藏后,如下效果圖:

然后,如果使用雜志布局的會發現兩欄位置前面的標題ICO也會不見了。

接著,將 .cat-box .cat-title a ?位置css修改成以下即可。

  1. .cat-box .cat-title a {
  2. float: left;
  3. width: 98%;
  4. margin-left: 20px;
  5. color: #606777;
  6. font-size: 1.8rem;
  7. }

要注意font-size: 1.8rem;是原先的教程中沒有的,新版本的Begin主題需要再加入這條代碼,不然標題很小。

以上就是美化側邊欄和兩欄標題的教程,具體效果請移步至本博客首頁查看。

知更鳥主題右側滾動條按鈕美化

代碼部署

把下面的代碼復制,粘貼到:后臺→外觀→主題選項→定制風格→自定義樣式

  1. /*右側滾動條美化*/
  2. #scroll{width:32px;float:rightright;position:fixed;rightright:10px;bottombottom:50px;z-index:9999;}#scroll?li?a{font-size:16px;color:#fff;width:32px;height:32px;line-height:28px;text-align:center;vertical-align:middle;margin-top:4px;display:block;cursor:pointer;border:1px?solid?#ddd;border-radius:15px;box-shadow:0?1px?1px?rgba(0,0,0,0.04);}#scroll?li?a:hover{background:#2f889a;color:#fff;border:1px?solid?#2f889a;transition:all?.2s?ease-in?0s;}.scroll-h{background-color:#ff5e5c?!important;}.scroll-c{background-color:#24a5db?!important;}.scroll-b{background-color:#ff9531?!important;}#gb2big5{background-color:#aec534?!important;}.qr{background-color:#4a4a4a?!important;}.qqonline?a{background:#39c!important;}@media?screen?and?(min-width:900px){#scroll?li?a:hover{background:#2f889a;color:#fff;border:1px?solid?#2f889a;transition:all?0.2s?ease-in?0s;}}.qr-img{position:fixed;background:#fff;bottombottom:50px;rightright:50px;max-width:300px;z-index:9999;display:none;border-radius:4px;padding:10px?10px?2px?10px;animation:fade-in;animation-duration:0.5s;-webkit-animation:fade-in?0.5s;border:1px?solid?#ddd;box-shadow:0?1px?1px?rgba(0,0,0,0.05);}#output?img{position:absolute;top:72px;rightright:72px;width:25px;height:25px;}.qr?.fa-qrcode{font-size:20px?!important;line-height:32px?!important;}.qr-img?.arrow{position:absolute;font-size:26px;bottombottom:2px;}.arrow-y{color:#fff;rightright:-8px;}.arrow-z{color:#c6c6c6;rightright:-9px;}#output?td{border:none;}#output?td{padding:0;}.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{display:none;}

注意:

主題更新后添加了搜索欄目圖標,需添加一下css,搜索圖標才能上色。

  1. #scroll?li?a?{
  2. ????background:?#2f9a3c;
  3. }

效果圖: