wordpress知更鸟主题首页阅读全文按钮美化

2019-06-1720:32:29 11 156

今天折腾了一下知更鸟主题首页的阅读全文按钮,其实也就是改了一下按钮CSS样式,本站首页的“阅读全文”按钮就是美化后的效果,再放一张图片给你们看看吧:

wordpress知更鸟主题首页阅读全文按钮美化

效果图

当鼠标滑到文章区块时,按钮高光就像拉帘一样拉开。代码需要修改原主题内的按钮属性和值,所以你们在修改的时候切记要备份!备份!备份!(重要的事情说三遍)

1.打开主题中的style.css文件后搜索.entry-more a 将下面的代码进行替换:

  1. .entry-more a {
  2.     positionabsolute;
  3.     right: -1px;
  4.     bottom18px;
  5.     z-index: 1;
  6.     floatleft;
  7.     overflowhidden;
  8.     margin-right: 2.5em;
  9.     padding: 0 9pt;
  10.     widthauto;
  11.     background#56c5ff;
  12.     color#fff!important;
  13.     text-aligncenter;
  14.     font-weight: 400;
  15.     line-height30px;
  16.     cursorpointer
  17. }
  18. .entry-more a:after {
  19.     positionabsolute;
  20.     top: 0;
  21.     left: 0;
  22.     z-index: -1;
  23.     width: 500%;
  24.     height: 1000%;
  25.     background#3690cf;
  26.     content"";
  27.     transition: transform .3s;
  28.     transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
  29.     transform-origin: 0 0
  30. }

2.注意原主题中.entry-more a:hover需要全部删除。

3.最后将下面代码加在样式表内:

此处为隐藏的内容!
发表评论并刷新,才能查看

最后刷新下缓存就能看到效果了 :razz:

更多关于WordPress知更鸟主题美化文章可以看看下面的文章:

发表评论

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

目前评论:11   其中:访客  8   博主  3

    • avatar 猫叔 谷歌浏览器 Windows 7 3

      你这是跟主题刚上了啊,哪都要改一下。

        • avatar vijay 博主 QQ浏览器 iPhone iPhone OS 12_2 like Mac OS X) AppleWebKit

          @猫叔 哈哈,我也想自己写款自己喜欢的主题啊,可是能力有限啊,只能改改别人的主题过过日子了。

        • avatar 玩软件 谷歌浏览器 Windows 10 0

          效果,还真不错啊!

          • avatar 四大名著 谷歌浏览器 Windows 10 2

            鸟哥主题还是那么的优秀 哈哈

            • avatar boke112导航 谷歌浏览器 Windows 7 4

              自己喜欢就好,折腾多了也就熟悉了

              • avatar 心灵博客 谷歌浏览器 Mac OS X 10_14_5 1

                改得挺有新意的,细节好看。

                • avatar 更省商学院 谷歌浏览器 Windows 7 0

                  博主主题好看呀!我也挺喜欢知更鸟主题的,感觉设置有点复杂,所以最后选择了DUX

                    • avatar vijay 博主 QQ浏览器 Windows 10

                      @更省商学院 我觉得DUX的后台设置比知更鸟更复杂一点。

                    • avatar 红嘴鸭 谷歌浏览器 Windows 10 4

                      感谢博主的分享,非常有用的哦

                      • avatar 弥雅 谷歌浏览器 Windows 10 2

                        我用的是知更鸟的,表示大赞知更鸟!

                          • avatar vijay 博主 QQ浏览器 Windows 10

                            @弥雅 确实,鸟叔的主题很赞。