Audio Player CSS Customization

• 

  vlogazul · Member · Mar 23, 2015 at 4:40 pm

  • Copy link
  • Add topic to favorites

  Hello, I am currently using the forever theme and I would like to know if there’s a snippet for the following.

  In the bottom of the widget sidebar there’s an audio player, I would like for that audio player to have the same width and align with the other widgets that are on top. If you see, the audio player is a little bit wider than the other widgets. Also is there a snippet to add a caption or text to the bottom of that audio player? Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Mar 23, 2015 at 9:52 pm

  • Copy link

  The audio player width is same as that of the other widgets at the top although it looks like it is not because the image above the player has 4px of whitespace around it.

  It is not possible to reduce the width of the audio player without pushing the volume bar to the next line making it ugly overall. So I suggest you get the image in the widget above to the 264px instead of current 260px and see how it looks.

  is there a snippet to add a caption or text to the bottom of that audio player

  Here it is:

  aside#text-26:after {
      display: block;
      font-weight: bold;
      text-align: center;
      background:#0A3143;
      color: white;
      content: "This is my caption"
  }

  Change the caption to whatever you wish.
  In the first line change after to before and see if you like the result. :-)