formatting

the version is 2.1 Pro

Your sidebar widget is pretty small so the player is struggling to fit everything in. I’d suggest you do a bit of tweaking in the css to adjust the player styling to look really nice with your site. In your case prob remove or make the cover art smaller so it fits, and remove the drop shadow from text.

Hope this helps

is this something you change inside of html5-jquery-audio-player-pro/plugin.php ?

where do you change this?

You’ll need to have a play with the css… usually done via your theme, and you can also check the css in the plugin itself.

Hey @fgrondon this is what I’ve personally used in my css file to make it a little more responsive. Please note I changed the layout slightly to make it more flexible but generally stays the same, also I only show the title on my projects and haven’t tested it out with all the settings enabled. My slightly minified css code under “includes/css/style.css”.

.donation td,.donation th{border:none!important}
.ttw-music-player .player{width:100%}
.ttw-music-player .album-cover .img{border:0!important}
.ttw-music-player .album-cover .highlight{background:transparent url(../images/album-cover-highlight.png) no-repeat 0 0 scroll;opacity:1}
.ttw-music-player .album-cover:hover .highlight{opacity:1}
.ttw-music-player .album-cover,.ttw-music-player .album-cover .img,.ttw-music-player .album-cover .highlight{display:block}
.ttw-music-player .track-info{width:100%;margin:10px 0}
.ttw-music-player .track-info p{padding:0!important}
.ttw-music-player .player .title{font-weight:bold;font-size:14px}
.ttw-music-player .artist-outer{font-style:italic}
.ttw-music-player .track-info .rating{width:75px;height:16px}
.ttw-music-player .rating-star{width:15px;height:16px;display:block;float:left;background:transparent url(../images/rating-off.png) no-repeat center center scroll;cursor:pointer}
.ttw-music-player .rating-star:hover,.ttw-music-player .rating-star.on,.ttw-music-player .rating-star.hover{background:transparent url(../images/rating-on.png) no-repeat center center scroll}
.ttw-music-player .player-controls{width:100%;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background:transparent url(../images/player-bg.png) repeat 0 0 scroll;overflow:hidden;padding:0 0 7px}
.ttw-music-player .player-controls .main{width:100%;text-align:center;height:12px;margin-top:8px}
.ttw-music-player .player-controls div.main div{display:inline-block;cursor:pointer}
.ttw-music-player .previous,.ttw-music-player .next{height:10px;width:15px;margin:1px 0}
.ttw-music-player .play,.ttw-music-player .pause{width:8px;height:12px;margin:0 7px}
.ttw-music-player .previous{background:transparent url(../images/player-previous.png) no-repeat center center scroll}
.ttw-music-player .next{background:transparent url(../images/player-next.png) no-repeat center center scroll}
.ttw-music-player .play{background:transparent url(../images/player-play.png) no-repeat center center scroll}
.ttw-music-player .pause{background:transparent url(../images/player-pause.png) no-repeat center center scroll}
.ttw-music-player .player-controls div.progress.jp-seek-bar{position:relative}
.ttw-music-player .player-controls div.progress-wrapper{height:9px;width:90%;margin:2px 0 0 9px;background:transparent url(../images/player-progress.png) repeat-x 0 0 scroll;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:10px auto 0;display:block}
.ttw-music-player .progress{height:9px;width:135px;cursor:pointer}
.ttw-music-player .elapsed{height:6px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:1px;width:60%;background:transparent url(../images/player-elapsed.png) repeat-x 0 0 scroll;position:absolute;top:0;left:0}
.ttw-music-player .unused-controls{display:none!important}
.ttw-music-player .description{clear:both;margin:30px 0 0 0;font-size:12px}
.ttw-music-player .description.showing{margin:15px 0}
.ttw-music-player .tracklist{box-shadow:inset 0 1px 1px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.04);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.04);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.04);border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background:transparent url(../images/tracklist-bg.png) repeat 0 0 scroll;font-size:12px}
.ttw-music-player .tracklist ol{margin:0;padding:0;overflow:hidden;padding:5px}
.ttw-music-player .tracklist li{background:transparent url(../images/tracklist-item-bg.png) repeat-x bottom left scroll;padding:6px 0;list-style-position:inside;position:relative}
.ttw-music-player .tracklist li:hover{font-weight:bold}
.ttw-music-player li:last-child{background:0}
.ttw-music-player .show-more-button li:last-child{background:transparent url(../images/tracklist-item-bg.png) repeat-x bottom left scroll}
.ttw-music-player .tracklist .title{display:inline-block;cursor:pointer;margin-left:1%}
.ttw-music-player .tracklist .duration{display:inline-block;padding:0 3px;margin-right:20px}
.ttw-music-player li:nth-child(1n+10) .title{padding-left:7px}
.ttw-music-player .tracklist .rating{display:inline-block;padding:2px 3px}
.ttw-music-player .rating-bar{height:10px;width:3px;display:inline-block;cursor:pointer;background:transparent url(../images/rating-bar.png) no-repeat 0 0 scroll}
.ttw-music-player .rating-bar.on,.ttw-music-player .rating-bar:hover,.ttw-music-player .rating-bar.hover{background:transparent url(../images/rating-bar-on.png) no-repeat 0 0 scroll}
.ttw-music-player .buy,.ttw-music-player .buyy,.ttw-music-player .buyyy{height:16px;display:inline-block;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;font-size:10px;text-align:center;line-height:16px;text-shadow:none;text-decoration:none;padding:0 8px;margin-left:5px}
.isactive{background:transparent url(../images/buy-bg.png) repeat 0 0 scroll}
.ttw-music-player .buy:hover,.ttw-music-player .buyy:hover,.ttw-music-player .buyyy:hover{color:#eee}
.not-active,.nott-active,.nottt-active{cursor:default}
.not-active{width:18px}
.nott-active{width:32px}
.nottt-active{width:47px}
.ttw-music-player .more{display:none;font-style:italic;font-size:11px;text-shadow:0 1px 1px rgba(0,0,0,.6);padding:10px 0;margin:10px 0;cursor:pointer;text-align:center;background:transparent url(../images/tracklist-more.png) repeat 0 0 scroll}
.ttw-music-player .more:hover{color:#eee;box-shadow:inset 0 0 20px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 20px rgba(0,0,0,.2);-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,.2)}
.ttw-music-player .show-more-button .more{display:block}
.ttw-music-player .more,.ttw-music-player .album-cover .highlight,.ttw-music-player .tracklist li,.ttw-music-player .buy,.ttw-music-player .buyy,.ttw-music-player .buyyy{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.ttw-music-player .player:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.classtohide{display:none!important}
.ttw-music-player .tracklist li.track{width:100%;margin:0}
.button-float{display:inline-block}
.button-float a{float:left}
.button-float table{border:0;margin:0}
.button-float table td{border:0;padding:0}
.btn1{min-width:42px}
.btn2{min-width:53px}
.rightdiv{display:none;width:283px}
.rightdiv span{float:left}
.btn1-span{width:38px}
@media screen and (max-width:800px){.ttw-music-player .player-controls div.main div{height:25px;width:25px}
.ttw-music-player .player-controls .main{height:auto}
}
@media screen and (max-width:600px){.ttw-music-player .album-cover .img img{width:60%;margin:0 auto;display:block}
}

thank you for sharing! do you have a website where I can see it in action?

It’s on WordOnRoad but I also customized it some more from there with eliminating some images and cleaning the code up a bit

it looks awesome! thanks for sharing!

this is some real help. Thanks!

Not a problem!

Awesome! Thanks for posting KelvinAlf – nice site.

Hope it’s ok if I mark this thread resolved now.