当前位置:首页>WordPress>WordPress教程>美化网易WordPress平台下的音乐云插件

美化网易WordPress平台下的音乐云插件

Netease-music是一款我使用了很久的网易云音乐插件,它可以轻松将我在网易云上创建的歌单,直接调用到WordPress平台上进行播放。而且插件是通过网易云音乐的接口进行播放,不占用服务器空间和带宽资源。这是我喜欢它最重要的原因之一。

美化网易WordPress平台下的音乐云插件

但是Netease-music插件的默认样式和我的博客主题在风格上存在一些差异,让它不能很好的融入博客,总让人觉得它“不是亲生的”。所以决定对它进行了一些小幅度的修改,让它可以融入我的主题风格。

一、修改Netease-music的页面宽度

Netease-music插件的默认宽度是1000px,但是我主题的可视宽度是1110像素,为了视觉上保持一致,首先就要改插件宽度。

1、修改歌单封面图的宽度

找到插件netease-music\build\css目录下的page.min.css文件。文件中找到这段代码:

.nm-container{max-width:1000px;margin:0 auto}

然后将max-width的值改为1030,如下所示:

.nm-container{max-width:1130px;margin:0 auto}

为什么是1030,不是1110呢,因为我发现歌单封面图的左右两侧各有10px的边距,为了抵消这20px的边距,1110+20=1130。

2、修歌单标题的宽度

page.min.css文件中找到以下代码:

.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1000px;margin:0 auto 15px}

将max-width的值改为1110,如下所示:

.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1110px;margin:0 auto 15px}

3、修改歌单列表宽度

page.min.css文件中找到以下代码:

.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1000px;margin:0 auto}

将max-width的值改为1110,如下所示:

.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1110px;margin:0 auto}

这时候,整个插件页面的宽度就和主题的默认宽度保持一致了。其实有个快捷的修改方法,就是打开page.min.css,在代码编辑器中直接搜索【1000】,让后替换为【1110】即可。然后再单独搜索【.nm-copyright】,将max-width的值改为1030。

二、隐藏页面标题

博客主菜单中已经有歌单的选项了,所以页面上再加一个标题显得特别累赘,而且在手机上,者个页面标题占用很大的高度,整个页面看起来不协调,所以决定隐藏这个页面标题。page.min.css文件中找到下面这段代码:

.nm-page-title{font-size:24px}

然后将其替换为下面这段代码即可,即是让元素不可见:

.nm-page-title{display:none;}

三、将歌单列表的背景设为透明

这款插件只有当你点击歌单封面,才会展开歌曲列表,这个歌曲列表是带有#f0f0f0的灰色背景的。当主题的页面背景也是#f0f0f0这个颜色时,就能很好的融合在一起。否则就就一种割裂感。另外,发现当我将主题切换成深色模式的时候,这个#f0f0f0的灰色背景没有转换为深色,但是歌单列表的文字却转换为#ffffff的白色了。导致文字看不清了。思前想后,最后将它的背景透明度设为0。

在page.min.css找到这段代码:

.nm-songs{background-color:#f0f0f0;padding:20px 0}

然后将其替换为以下这段代码,即将背景设为#fff白色,而且透明度为0。

.nm-songs{background-color:rgba(255,255,255,0.0);padding:20px 0}

四、修改封面标题的字体颜色

封面的字体标题是直接调用网易云音乐的标题,所以切换深色模式时,没有跟随深色模式而进行变化。但是它的背景却跟随深色模式由白色变成了黑色。导致深色模式下字体不可见。思前想后,将字体颜色修改成了#808080灰色。

page.min.css文件找到这段代码:

.music-info{color:#333;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}

将color的值由#333改为#808080,如下所示:

.music-info{color:#808080;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}

至此,netease-music的样式就修改完毕了,虽然是很简单的修改,但是页面开始融入主题的风格了,应该没有人会怀疑它“是不是亲生”的了吧。

©版权声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA打赏
共{{data.count}}人
人已打赏
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索