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

/ 9评论 / 752阅读 / 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. Draitty说道:

    cialis levitra contre viagra Special Populations Pediatric Use Tamsulosin hydrochloride capsules are not indicated for use in pediatric populations see Use in Specific Populations 8

  2. Draitty说道:

    cialis 10mg Proc Natl Acad Sci U S A 106, 9075 9080 2009

  3. Tax说道:

     Wrong Demo Since the Great Blue slot is offered by top casinos, there will undoubtedly be great promotions, too. While you play, you can enter a free spin bonus round with up to 33 free spins available. The game also allows you to pick two of five seashells to get up to 15x multipliers. The potential prizes achieved with so many free spins combined with the best online casino bonuses can make you forget that you even considered to play Great Blue free. Great Blue has an adjustable 25 paylines and a max bet of just £5. There is one bonus feature, extra spins with a multiplier, and a top jackpot of 10,000x the line bet. The Great Blue Whale wild symbol will double the payouts for any win. Get all the details in the game review. The key feature of the game is the seashells bonus. This is triggered when 3 or more scatter symbols land on the reels. You automatically get 8 free spins with a 2x multiplier. Yet, before they start, you enter the bonus game. Here, you pick 2 shells from the 5 displayed to reveal additional free spins and or win multipliers. You can win up to 33 free spins or up to a 15x multiplier. If you get another 3 scatters on the reels during the free spins, you are rewarded with an additional 15 free spins. There is no limit placed on the number of free spin re-triggers you can get.
    http://www.gateman.shop/bbs/board.php?bo_table=free&wr_id=14629
    Get the right combination for the ultimate shot! Rosenberg: Mechanical reel-spinning slots have been featured on casino floors since day one, and we don’t see them going away anytime soon. These slots will continue to have a presence on floors, particularly in smaller local casinos, for a long time to come. Many BTG slots have the Megaways feature combined with cascading reels. Bonanza is one, offering up six reels along with 117,649 ways to win, and that’s on top of getting those extra chances for winning combinations thanks to the cascading reels feature. What’s great is that you can try out the tumbling reels slots demo for free! When a tournament is active, click on the Reel Rivals button to join the tournament! Get the right combination for the ultimate shot!

  4. VORVOSESK说道:

    Estrogen stimulation of proinflammatory cytokine and matrix metalloproteinase gene expression in human corneal epithelial cells cialis professional The point that I was trying to make there by quoting further into John 8, was that a text without a context is no text

  5. Injeway说道:

    Serious Use Alternative 1 paromomycin decreases effects of typhoid vaccine live by pharmacodynamic antagonism buy cialis generic

  6. 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

  7. VORVOSESK说道:

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

  8. 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

  9. 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.

发表回复

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