How To Add An Image Around My Tumblr Audio Posts?
Asked by
anon30 (
334
)
December 12th, 2009
Observing members:
0
Composing members:
0
22 Answers
You’d have to use custom HTML, and then look for look for the specific part of code in their theme (both the image section near the beginning), and also HOW to place it in the second part of the code (near the end), but you should definitely credit the original user that created the code for the radio.
I’m not quite sure which image you want to use in your tumblr, so not sure how to help you out with specifics.
i want to design my own, and just use the code how to place it.
Ok, so the first link uses
.post .audiobox {
background: #000;
padding: 5px;
}
and the second link uses
#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}
and at the bottom, where it uses {AudioPlayerGrey}, they used <div class=“audiobox”>
and <div id=“radio”> respectively.
I don’t know if this makes any actual sense to you. I’m not great at explaining this stuff :/
Alright, i been working on this.
http://smokingunalbumcase.tumblr.com/
and the code doesn’t seem to have .audio post or anything like that, just .chat . etc
how can i convert that for the 2nd code u gave me.
You can actually just add your own ”.audio” near the beginning with all the other CSS stuff.
And then near the bottom, after the <body> tag, if you don’t see {block:Audio}, then add this
{block:Audio}
<div class=“audio”>
<div class=”YOURCSSSTYLEHERE”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}
what do i add in the beginning? what would the css look like
Well, that would really depend on what your image looks like – if it needs to be centered, moved to the left, to the right, up, down, etc.
See the part of the second code that used “padding”? That would change the position of your image.
so how would i do this?
#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}
and at the bottom, where it uses {AudioPlayerGrey}, they used <div class=“audiobox”>
and <div id=“radio”> respectively.
then on the bottem i add on the bottem
{block:Audio}
<div class=“audio”>
<div class=”YOURCSSSTYLEHERE”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}
and it will work?
change the bottom to that, and it should work, provided your image has the exact same dimensions as the image they used, etc.
{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}
———
but there’s still no guarantee. Every layout is different, and I’m not really a professional coder. I just guess and check and make my way around it, changing little bits at a time until I get it right (but that’s most of the fun!)
i’m just wondering, because the top part has that #radio when the bottem doesn’t even have that
That’s something you have to manually add in, because it’s not in Tumblr’s default code.
Hope all this helped!
my code has this part.
{block:Audio}
<p class=“post-metadata”>
<span class=“post-type”>Audio</span>
<a href=”{Permalink}” class=“permalink-audio”><span>Permalink to this post</span></a>
</p>
</div> <!—end post-header—>
<div class=“audio”>
{AudioPlayerBlack}
{block:Caption}<div class=“caption”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
how would i add that code and this code together?
If you created the #radio part of the code (at the beginning), then you would add
<div id=“radio”> right BEFORE {AudioPlayerBlack} and then </div> right after it.
so <div class=“radio”>
{AudioPlayerBlack}
{block:Caption}<div class=“caption”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio} ?
<div class=“radio”>
{AudioPlayerBlack}
</div>
[the rest of the code]
So replace that &
<div class=“radio”>
{AudioPlayerBlack}
</div>
{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}
oh no, the whole thing should look like this
{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}
Well, it didn’t put a image on it. but it came out into something i like.
i want to put a dashed boarder on each post to separate them, how can i do that
Eeek – that’s not something I’m really good enough to tell you how to do :/
There’d be a lot of fixing and checking I’d do myself. Just a lot of guesswork, sorry!
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
