请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:tmy123.com   加入本站QQ群,大家一起HIGH:点击加入QQ群

多说CSS本地化:完全自定义多说评论框CSS样式教程

WP教程 Jophen 俞 5058℃ 已收录 12评论

上次本站的文章:多说评论框核心脚本embed.js本地化+回复后显示浏览器信息,也是介绍多说文件本地化的,今天来介绍本地化多说的css,多说的虽然有自定义CSS的功能,但有些核心的样式不能改,再加上使用多说的站点多,从多说服务器加载CSS文件会导致拖慢网站加载速度,所以建议大家本地化多说,将css和js本化后,就不需要在多说服务器上加载任何文件了,对于使用多说的站点,速度会得到一定提升。下面开始教程

一、多说评论框css样式本地化

多说官方提供的有主题开发指南,在博客管理后台的多说评论设置里,也可以自己填写自定义的css样式,但是这样并不是很方便,所以最好的办法就是想办法把所说评论框的css文件本地化,这样会方便我们的自定义修改。

我们使用谷歌浏览器,采用“查看元素”的方法,很容易就看出多说评论框利用js调用的评论样式文件,如下图(点击放大查看):

duoshuo

 


坑爹的服务器文章里写代码就给屏蔽,所以代码全部放到文件里,望大家见谅,本文需要的代码均会在文章结尾给出下载链接,以下代码图片代替了….


 

二、多说自带css样式文件代码

刚才我们通过浏览器的查看元素功能,很容易就找到了多说加载的css样式文件,可以直接将其保存在本地,就可以开始修改了。这里站长直接提供下代码吧,可以直接复制到主题的style.css文件中,要方便些。(加css没有位置要求,代码放到主题样式表最前面或者最后面都行)

代码量很大,真的很大,是本站主题文件的一般啊。接下来,大家就可以配合浏览器的查看元素功能找到自己想要修改的地方,然后修改了。

本教程所需的文件下载:

拒绝多说加载CSS代码 多说默认CSS样式下载

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://tmy123.com/8904.html
喜欢 (9)
发表我的评论
取消评论
表情 代码 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)条精彩评论。
  1. 签到成功!签到时间:2019-03-03 00:46:19,每日打卡,生活更精彩哦~
    1112019年-03月-03日发表回复| Google Chrome 63.0.3239.132| Windows 7 x64
  2. 啊啊啊
    1112019年-03月-03日发表回复| Google Chrome 63.0.3239.132| Windows 7 x64
  3. 非常不错!!!!
    跨境电商平台2016年-07月-06日发表回复| Google Chrome 51.0.2704.103| Windows 10
  4. 如果要写代码,或许你可以试一下 pre 标签
    期待已退化成等待2015年-04月-07日发表回复| Firefox 36.0| Ubuntu Linux
  5. 需要扁平单排样式。。。谁整个
    笑笑笑2015年-03月-18日发表回复| Firefox 36.0| Windows 7
    • 可以QQ联系我,我帮你弄
      Jophen 俞2015年-03月-18日发表回复| Google Chrome 39.0.2171.99| Windows 7 x64
  6. 弱弱问一句,站在SEO方面来说,多说评论不是用JS的吗?其实在留言本或者其他地方留言,也是有很多东西也会得到引擎的喜爱进而收录,但如果是用多说的话,是不是就不存在这样的情况了。都说SEO不识别JS调用的内容。。。
    GoodLuck2015年-03月-03日发表回复| Google Chrome 39.0.2171.95| Windows 7
  7. 那么,不就可以完全自定义了?
    幻杀博客2015年-02月-28日发表回复| Firefox 35.0| Windows 10
    • 是啊,样式随便改啊 😳
      Jophen 俞2015年-02月-28日发表回复| Google Chrome 39.0.2171.99| Windows 7 x64
  8. 其实缓存七牛的还好些啊。。。
    星梦客栈2014年-12月-29日发表回复| unknow| unknow
    • 样式表丢进七牛 不就行了
      同盟源 http://tmy123.com/2014年-12月-29日发表回复| unknow| unknow
      • 测试样式
        test2015年-08月-03日发表| Google Chrome 43.0.2357.134| Windows 7 x64