Help with tumblr theme

[JackArrgon]

Hey guys! A heads up- I’ve never coded anything myself. However have watched my friend help me code a Tumblr theme I designed. I’m trying to do one from a new design by myself, but I’ve run into a bump.

Here’s the design mockup showing a “video post”: http://d.pr/ERmP

And here’s what I have right now done in html (using a photo instead of a video for the content): http://testingpagefornewtheme.tumblr.com/

My main problem is really just getting the text to show in the grey box, rather than the black. Any ideas of how to achieve this?

Sorry if my question sounds too general or something, but I’ve been looking through the site and it’s been really helpful, so I was hoping you guys in the forums would have a tip or two.

Thanks!

[TheDoc]

Which text are you having trouble with?

[JackArrgon]

The line closest to the image (in the first link): “Karl Pilkington…”

[standuncan]

That text is showing for me in your example. “It’s Dave Morton!”

[JackArrgon]

Correct, yeah that’s on the second link (the actual tumblr page).
Sorry, I just meant I’d like to style it as it is in the first link (design mockup image).

[TheDoc]

You’ll need to use text shadow:

example {

text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

}

[JackArrgon]

Sweet, I’ll keep that in mind.
Sorry, my wording was bad. I’m simply trying to achieve what I’ve mocked up in Photoshop, in html code. That is, to arrange the layers (or divs, I assume) how they appear in the first link. As in making the text show at the bottom of the light gray box, as opposed to the dark grey inner box (as shown in the second link).

Hope that makes sense.

[standuncan]

If I understand what you’re asking this time…

You currently have:

But what you need is to place the caption one level up (sibling to #innerbox) like so:

[JackArrgon]

Yep, that’s it. Thanks!

If you check the second link, it should be working, only something’s been affected to the photo.

Is there a way I could control the text position, padding, etc.?

[standuncan]

Yes you can use some top padding on that text if you want, remember padding + height = total height. So if you add padding on the top, that outer lighter grey box will grow unless you subtract the padding from the height.

Also, you do not have width or height attributes on your actual img tag in the markup, and your <div id=”picture”> is wider than the image itself.

[JackArrgon]

Nice. Would I do that by adding a new tag for say, my caption?

I didn’t put any width or heigh attributes because the images I’m going to be uploading through Tumblr could be any size. How would I tell CSS this so it applies a style (like a shadow) accordingly without me specifying the exact pixels for heigh and width?

[standuncan]

Instead of having your CSS (box-shadow or whatever) on your “#picture”, add the CSS to “#picture img”.

And I’m not familiar with tumblr, so it may add the width and height attributes to the images themselves, it may not. If not, it be done with some php programming, but that is beyond me lol. The reason why you want those there is when a page with images load, it loads quicker if the width and height are known, if not the image loads slower while the browser detecting the size.

[JackArrgon]

Thanks, adding the ‘img’ to my #picture div helped.

Gotcha, good info to keep in mind. I added class=”center” to my img tag and that seemed to do the trick in centering it without adding those strange side borders or being too wide than the image.

[Author]

Posts