Typecho网页美化

image
image

  • 相信大家在购买喜欢的主题后,不满足于当前的设计,于是纷纷发挥自己的脑洞&动手能力,对主题进行'整容'满足心里需求,毕竟用的人多了难免出现千篇一律,慢慢成了大众模板的既视感。

准备

  • 改代码前一定要备份文件备份很重要
  • 将如下css修改(请根据实际修改选择器),粘贴到主题css文件里,有cdn的请刷新,浏览器清理请缓存。
  • 对于 typecho 用户,推荐使用CustomCssAndJs插件自定义css里。
  • 开源地址:https://github.com/HeyChioy/typecho-plugin-custom-css-js

代码
其中 body#body 请根据你的css改写,否则设置无效。

    body#body {
    background-image: url(左边图片链接),url(右边图片链接);
    background-repeat: no-repeat,no-repeat;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed,fixed;
    background-position: top left,top right;
    background-position-x: left, right;
    background-position-y: top, top;
    height: auto;}

注意

  • 本教程只针对pc端,mobile端效果拥挤(不佳),主题两侧必须有空余的位置,另外就是无遮挡的元素[图片的画布为透明]存在。
  • 图片最好是元素,下载元素推荐到千图网:http://588ku.com/
  • 图片大小可用美图秀秀修改(建议Photoshop)

**首页文章版式圆角化**
    /*首页文章版式圆角化*/
    .panel{
        border: none;
        border-radius: 30px;
    }
    
    .panel-small{
        border: none;
        border-radius: 30px;
    }
    
    .item-thumb{
        border-radius: 30px;  
    }

**阴影外发光**

    /*panel阴影*/
    .panel{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    #如果也想使盒子四周也有阴影,加上以下代码
    .app.container {
        box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
    }
Last modification:August 30th, 2018 at 09:38 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

4 comments

  1. 飞飞

    大佬用的啥主题

    1. 猫腻
      @飞飞

      handsome

  2. 没钱,都用免费的

    1. 猫腻
      @思

      某度上有开源版本2.x版本