While you cannot change the appearance of the audio player on the Tumblr dashboard, you can change how the audio player looks on your own blog using Tumblr's theme and customization options. You will need to have some experience with HTML and CSS, as you must modify your Tumblr theme to change the size of the audio player. Exactly how the audio player is modified will vary somewhat between themes, as every developer writes Tumblr themes differently. However, the Tumblr variables for audio posts are always the same, which simplifies the process of finding the CSS that must be modified.

Step 1

Open the customization page for your Tumblr theme. Click the "Edit HTML" link; this is located to the right of your Tumblr theme thumbnail, directly beneath the name of the theme.

Step 2

Press "Ctrl-F" to initiate a search, and enter "{block:audio}". This takes you to the part of the theme where the creator entered the settings for audio posts. Determine what CSS class the developer used to size the audio player. For instance, if the post is within a div element, you will see the attribute 'class="audio-player",' where "audio-player" is the name of the class.

Step 3

Search for the class name with a period in front of it, e.g. ".audio-player". The period before the name is how a CSS stylesheet identifies a class. This search will take you to the right portion of the stylesheet to edit. It will look something like this, with the brackets filled in with CSS:

.audio-player {}

Some themes use externally linked stylesheets that you cannot edit. These look like:

If this is the case for your theme, add the attribute "style" to the tag that modifies the audio player. This allows you to add your own CSS without modifying the existing stylesheet. A tag can have both a "class" attribute and a "style" attribute. This would look something like:

Step 4

Enter the property "width:" to either the class within the stylesheet, or to the style attribute for the containing tag. If the stylesheet already has a "width" property, modify that; do not add a second one. You can also determine height with the "height" property. If you are modifying the stylesheet, your CSS would look something like:

.audio-player { width:100px; height:25px; }

If you added the changes to the "style" attribute to the tag, the syntax is:

Step 5

Click "Update Preview" to see how those changes affect your theme. Themes can be complex, and changes may not appear the way you expect. It may take several tries to get the audio player exactly how you want.

Step 6

Click "Save" when you are ready to commit the theme changes to your blog.

bibliography-icon icon for annotation tool Cite this Article