WordPress.org

Ready to get started?Download WordPress

Forums

HTML5 jQuery Audio Player
[resolved] formatting (13 posts)

  1. fgrondon
    Member
    Posted 1 year ago #

    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/

  2. fgrondon
    Member
    Posted 1 year ago #

    the version is 2.1 Pro

  3. Maeve Lander
    Member
    Plugin Author

    Posted 1 year ago #

    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

  4. fgrondon
    Member
    Posted 1 year ago #

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

  5. fgrondon
    Member
    Posted 1 year ago #

    where do you change this?

  6. Maeve Lander
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. KelvinAlf
    Member
    Posted 1 year ago #

    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}
    }
  8. fgrondon
    Member
    Posted 1 year ago #

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

  9. KelvinAlf
    Member
    Posted 1 year ago #

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

  10. fgrondon
    Member
    Posted 1 year ago #

    it looks awesome! thanks for sharing!

  11. fgrondon
    Member
    Posted 1 year ago #

    this is some real help. Thanks!

  12. KelvinAlf
    Member
    Posted 1 year ago #

    Not a problem!

  13. Maeve Lander
    Member
    Plugin Author

    Posted 1 year ago #

    Awesome! Thanks for posting KelvinAlf - nice site.

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic