Support » Plugin: HTML5 jQuery Audio Player » formatting

  • Resolved fgrondon

    (@fgrondon)


    WordPress version:3.5.1
    Plugin version:1.2
    Link to my site: http://iglesiasion.com

    the left widget area in the middle of the home page is where the players is.

    I expected the plugin to do this: look much better

    Instead it did this:
    it shows a line through the player and it shows a drop shadow effect on the font.

    Here’s what I’ve tried so far:
    I changed the display settings but there is not much that can be changed here.

    how do I remove the line and the drop shadow effect? also there is a big gap between the artist name and the playlist. how can this be modified?

    Thanks.

    http://wordpress.org/extend/plugins/html5-jquery-audio-player/

Viewing 12 replies - 1 through 12 (of 12 total)
  • the version is 2.1 Pro

    Plugin Author Maeve Lander

    (@enigmaweb)

    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?

    Plugin Author Maeve Lander

    (@enigmaweb)

    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!

    Plugin Author Maeve Lander

    (@enigmaweb)

    Awesome! Thanks for posting KelvinAlf – nice site.

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘formatting’ is closed to new replies.