28
2021
09

详解WFilter NGF的logo修改器插件

WFilter NGF上网行为管理系统支持“Logo修改器”扩展插件,可以实现如下功能:

  1. 自定义IM电竞平台名

  2. 自定义IM电竞平台Logo图标

  3. 自定义网站链接

  4. 自定义界面皮肤

该“Logo修改器”扩展插件的使用界面如下图:

202109281632815922878315.png

202109281632815939796312.png

1. 利用该插件,可以自定义以下内容:

相关截图如下:

202109281632815976105454.png

202109281632815993729343.png

202109281632816095950347.png

2. 自定义WFilter的界面皮肤

“Logo修改器”扩展插件允许用户自定义上传两个css文件,分别是菜单css(定义登录页面,登录后的框架,菜单样式),内容css(定义右侧的页面内容样式)。css的自定义涉及比较多的html+css开发技术,下面我用一个简单的示例来演示如果实现WFilter界面的自定义修改。本例中,我会用自定义css来替代页面上部的背景图片。

打开界面后浏览器按F12,查看目标页面元素?梢钥吹揭趁嫱凡康腸ss中定义了一个pagetop的div,并且通过对pagetop设置css来定义了背景图片background-image。

202109281632816064164867.png

为了修改这个背景图标,我们在本地电脑上面编辑一个css文件,里面大概是这样的内容:

#pagetop {
    background-image: url(/blog/post/"data:image/png;base64,......");  /*用datauri的表示方式直接在css文件中引用图片*./
}

如下图:

202109281632816506962279.png

利用“Logo修改器”上传这个自定义css文件,由于我们修改的是页面框架,需要上传到“菜单CSS“项目中。上传后,重新登录系统,就可以看到最新的样式修改了:

202109281632816647902162.png

通过修改菜单和内容的css,还可以实现更多的皮肤效果,如下图:

202109301632970647149255.png

202109301632970590624453.png

利用上述方法,你就可以实现自定义WFilter的界面皮肤了,而且自定义的配置信息在系统升级后仍然可以保留,不会因为升级而丢失掉。



? 上一篇 下一篇 ?