Fluther: How To Add An Image Around My Tumblr Audio Posts?

How To Add An Image Around My Tumblr Audio Posts?

Asked by anon30 (334

) December 12th, 2009
22 responses
“Great Question” (0

)

Recently, I saw a theme, that has a image around each audio post the user post’s.

Like this one.
http://safe.tumblr.com/theme/preview/154

But this is the one i saw.

http://safe.tumblr.com/theme/preview/155

What’s the code & where do i install it at in my code.

Follow this question

Send to a friend!

Topics: CSS, Tumblr

Observing members: 0

Composing members: 0

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.

eeveegurl (1356

)“Great Answer” (0

)

i want to design my own, and just use the code how to place it.

anon30 (334

)“Great Answer” (0

)

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 :/

eeveegurl (1356

)“Great Answer” (0

)

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.

anon30 (334

)“Great Answer” (0

)

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}

eeveegurl (1356

)“Great Answer” (0

)

what do i add in the beginning? what would the css look like

anon30 (334

)“Great Answer” (0

)

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.

eeveegurl (1356

)“Great Answer” (0

)

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?

anon30 (334

)“Great Answer” (0

)

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!)

eeveegurl (1356

)“Great Answer” (1

)

i’m just wondering, because the top part has that #radio when the bottem doesn’t even have that

anon30 (334

)“Great Answer” (0

)

That’s something you have to manually add in, because it’s not in Tumblr’s default code.

Hope all this helped!

eeveegurl (1356

)“Great Answer” (0

)

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?

anon30 (334

)“Great Answer” (0

)

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.

eeveegurl (1356

)“Great Answer” (0

)

so <div class=“radio”>
{AudioPlayerBlack}
{block:Caption}<div class=“caption”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio} ?

anon30 (334

)“Great Answer” (0

)

<div class=“radio”>
{AudioPlayerBlack}
</div>

[the rest of the code]

eeveegurl (1356

)“Great Answer” (0

)

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}

anon30 (334

)“Great Answer” (0

)

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}

eeveegurl (1356

)“Great Answer” (0

)

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

anon30 (334

)“Great Answer” (0

)

well…...

anon30 (334

)“Great Answer” (0

)

http://smokingun.tumblr.com/

im done but all i need is to find out how to separeted my posts with blogs

anon30 (334

)“Great Answer” (0

)

BOARDERS i mean.

anon30 (334

)“Great Answer” (0

)

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!

eeveegurl (1356

)“Great Answer” (0

)

Answer this question

Login

or

Join

to answer.

Older »

Do you think that in today's society, it's considered ...

« Newer

What's the name of this song?

Mobile | Desktop

Send Feedback

`