扩展PIX主题评论表情

PIX主题是个好主题,就是感觉它的评论表情实在是少。花1个小时把它的评论表情扩展一下。

扩展PIX主题评论表情-似水流年

刚开始我以为它的表情调用的图片,找了几分钟没有找到。后来分析代码,全部藏在了pix/inc/pix-comment.php里的第6行,直接调用的十进制。

扩展PIX主题评论表情-似水流年

参考网络上的十进制代码,修改第6行如下:

温馨提示: 此处为隐藏内容,需要评论本文后才能查看.
评论后请刷新一次页面,但注意不要清除缓存,否则还需要再次评论!

刷新缓存后显示如下:

扩展PIX主题评论表情-似水流年

太不好看了,看来需要改CSS。浏览器进入开发者模式,在pix/inc/assets/css/main.css里大概1716行找到了样式代码如下:

.com_smile_show {
    width: 200px;
    margin-top: 10px;
}

替换成一下代码,实现电脑、平板、手机自适应。里面的40vw/60vw/80vw可以根据自己网站框架是单栏、两栏还是三栏的实际情况进行调整。

.com_smile_show {
    width: 40vw;
    margin-top: 10px;
}

/* 针对平板(可以根据实际情况调整宽度范围) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
   .com_smile_show {
        width: 60vw;
    }
}

/* 针对手机(可以根据实际情况调整宽度范围) */
@media screen and (max-width: 767px) {
   .com_smile_show {
        width: 80vw;
    }
}

刷新缓存,显示正常,搞定!

扩展PIX主题评论表情-似水流年
Comments | 7 条评论
  • SenLinM

    Microsoft Edge 130 Microsoft Edge 130 Windows 10 Windows 10 1中国 中国联通 ip address 2408:8210:3c5d:7220:*:*

    我也来尝试一下🤩

  • 网友小宋

    Microsoft Edge 129 Microsoft Edge 129 Windows 10 Windows 10 1中国 中国联通 ip address 2408:8221:6013:c891:*:*

    为啥这个吊样https://bu.dusays.com/2024/10/24/671a6b3d37954.png

    • 似水流年

      Google Chrome 114 Google Chrome 114 Windows 10 Windows 10 1中国 中国联通 ip address 2408:8220:5f13:efe0:*:*

      清空下浏览器缓存试试。

  • obaby

    Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 1中国–山东–青岛 联通 ip address 112.224.*.*

    😂页面有点问题,chrome 滚动掉底部,来回底部滚动可能会导致页面重影。
    想截图来着,结果截图发现重影没了,应该是页面抖动导致的。

    • 似水流年

      Google Chrome 124 Google Chrome 124 GNU/Linux GNU/Linux 1中国 中国联通 ip address 2408:8220:5f15:22c0:*:*

      这个暂时我这里还没有看到,回头我注意一下。☕

  • 沉沦

    Safari 18 Safari 18 iPad iOS 18.0.1 iPad iOS 18.0.1 1中国 中国联通 ip address 2408:821a:5270:fbd1:*:*

    这么多 emoji 图标,选择困难症犯了。我恰恰相反,删除了些图标。

    • 似水流年

      Microsoft Edge 129 Microsoft Edge 129 Windows 10 Windows 10 1中国 中国联通 ip address 2408:8220:5f15:22c0:*:*

      你是以简洁为主啊,看主题就能看得出来。😸

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息