[WP]修改WP插件样式(简码插入)思路之一(修改AudioIgniter插件样式)

/ 4评论 / 537阅读 / 0点赞

简介

修改插件样式的方式有多种,可以直接通过wordpress自带的插件文件编辑器修改插件文件,但显然插件更新时需要重新修改。本文将介绍通过”自定义HTML“模块来修改通过简码插入的插件样式。


前言/起因

起初是想建一个在线播放音乐的网站,需要一个音乐播放器插件,且需要带有播放列表,循环播放等功能。但一直找不到好用的,最后找到了一个功能上满足我的基本需求的插件:AudioIgniter。但它的外观没有长在我的审美上,于是用上刚学俩星期的前端三件套,走上了自己动手,丰衣足食的道路。


AudioIgniter样式对比


AudioIgniter插件样式源码/使用方法

样式源码

<style>
/*取消原来的部分设置*/
.ai-wrap .ai-track.ai-track-active, .ai-wrap .ai-track:hover {
    background-color: transparent;  
    background: rgba( 255, 255, 255, 0.25);
}
.ai-wrap .ai-track {
    background-color: transparent;
}
.ai-wrap .ai-track-control{
    border-left: transparent;
}

/*播放器背景div*/
.ai-wrap{
    background: linear-gradient(200deg,#8eeac7,#b5e6fe);
    /* 溢出隐藏 */
    overflow: hidden;
    /*圆角*/
    border-radius: 30px;
    /* 阴影 */
    box-shadow: 0 5px 20px rgba(102,204,255,2);
}

/*播放列表*/
.ai-track{}
.ai-track:hover, .ai-track-active{
    background: rgba( 255, 255, 255, 0.5 );
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 6px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.3);
    /* 阴影 */
    box-shadow: 0 2px 20px rgba(208, 216, 222, 1);
}
.ai-track-name{
    font-weight: 900;
    color:#535273;
}

/*专辑图*/
.ai-wrap .ai-track-no-thumb, .ai-wrap .ai-control-wrap-thumb{
    background-color: transparent;
}
.ai-track-no-thumb, .ai-track-thumb, .ai-wrap .ai-control-wrap-thumb{
    background: rgba( 255, 255, 255, 0.2);
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 10px;
    /* 阴影 */
    box-shadow: 0 2px 20px rgba(208, 216, 222, 1);
}


/*正在播放歌曲的标题*/
.ai-track-title span{
    font-weight: 900;
    color: #535273;
}
.ai-track-subtitle span{
    color:#b187a2;
}

/*播放/暂停按钮*/
.ai-wrap .ai-audio-control, .ai-wrap .ai-audio-control:focus{
    background-color: transparent;
    background: rgba( 255, 255, 255, 0.1);
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 50px;
    border: 1px solid rgba( 255, 255, 255, 0.3);
    /* 阴影 */
    box-shadow: 0 2px 20px rgba(208, 216, 222, 1);
}
.ai-wrap .ai-audio-control:hover, .ai-wrap .ai-btn:hover, .ai-wrap .ai-btn.ai-btn-active:hover{
    background: rgba( 255, 255, 255, 0.35);
}

/*控制按钮*/
.ai-wrap .ai-btn{
    background-color: transparent;
    background: transparent;
    border-radius: 10px;
    border: transparent;
}

/*循环播放按钮,选中状态*/
.ai-wrap .ai-btn.ai-btn-active{
    background-color:transparent;
}
.ai-wrap .ai-btn.ai-btn-active svg{
    fill: #66ccff;
}

/*音量条*/
.ai-wrap .ai-volume-bar {
    background-color: transparent;
    border-right: transparent;
}
.ai-wrap .ai-volume-bar:before {
    background-color: #b7eee7;
}
.ai-wrap .ai-volume-bar.ai-volume-bar-active:before{
    background-color: #d9f6f3;
}

/*进度条*/
.ai-wrap .ai-track-progress-bar{
    border-radius: 50px;
    background-color: #b8eee7;
}
.ai-wrap .ai-track-progress{
    border-radius: 50px;
    background-color: #66ccff;
}

/*滚动条*/
.ai-wrap .ai-scroll-wrap>div:last-child{
    background-color: #b5eee4;
}
.ai-wrap .ai-scroll-wrap>div:last-child div{
    background-color: #d9f6f3!important;
}
</style>

使用方法:


思路

<style>
.ai-wrap {
    background-color: #66ccff;
}
</style>

疑难杂症

如果想改的元素没有类名也没有id怎么办?

.ai-wrap .ai-scroll-wrap>div:last-child div {
    background-color: #f70f5d!important;
}
.ai-wrap .ai-scroll-wrap>div:last-child div {
    background-color: #66ccff!important;
}

  1. VORVOSESK说道:

    In some embodiments, R 3 is hydrogen, halo, cyano, alkyl, alkenyl, heteroalkyl or acyl; or R 2 and R 3 taken together form a cyclic moiety azithromycin z pack

  2. VORVOSESK说道:

    007; 1, 451 7, 761 vs 8, 027 5, 254 mL, p p 0 how much does accutane cost

  3. Injeway说道:

    Randomized prospective trials and the best retrospective data will be presented instructions for clomid 16 The availability of ultrasound and the increased costs of MRI have led to ultrasound becoming the preferred modality for the initial evaluation, reserving MRI for equivocal cases

  4. Great online game https://starburst-slotgame.com/ where you can get money, buy a loved one a new phone or car, close the mortgage on your apartment and just two months, hurry up register and win.

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注