How to make Tumblr Photos smaller?

[powellcustomdrums]

Ok so i was wondering if someone knows if there is a way to change Tumblr html code so that every photo i post on there can be smaller and all the same size or at least smaller?

[TheDoc]

Depends on what you’re going for. Do you have a link to the website?

Tumblr allows you to choose from a wide range of pre-defined image widths.

[powellcustomdrums]

heres the link – http://powellcustomdrums.tumblr.com/ can you view the code and tell me how to change all the image sizes so when i post something it gets smaller?

[powellcustomdrums]

also any idea how to make my text content on the right hand side of each photo? almost like this forum section or like how sjc has it – http://www.sjcdrums.com

[TheDoc]

How small would you like them? Right now you are using {PhotoURL-500}, you can change that number to any of the following:

• {PhotoURL-400}
• {PhotoURL-250}
• {PhotoURL-100}
• {PhotoURL-75sq}

All of that info can be found here: http://www.tumblr.com/docs/en/custom_themes#photo-posts

[powellcustomdrums]

ok AWESOME it works!!!! Thanks a LOT! now what about making the photo go to the far left and having my posts text to the right of each photo instead of under it?

[TheDoc]

Find this in your CSS: .post-photo img

Remove the margin, add ‘float: left’, add ‘margin-right: 10px;’

On the post-photo divs you’ll need to add a class of ‘clearfix’ and put the following in your CSS file: https://css-tricks.com/snippets/css/clear-fix/

[powellcustomdrums]

i did the float photo left part easy but the link you gave me which code do i copy and where exactly do i paste that code in my tumblr to make it work? and do i change or add anything to that?

[powellcustomdrums]

?

[TheDoc]

You’ll need to put the CSS from the link into your “Custom CSS” box in the customization screen. Then you’ll need to edit your template by clicking ‘Edit HTML’ and adding that class to your post-photo divs.

[powellcustomdrums]

but when i click the link there are several codes which one do i use?

[powellcustomdrums]

im almost gonna give up on it :( i dont know where to post the code ive tried everything not sure what code to post in my ADD CSS box and then post what?? after that in my edit html and on what :line: in my tumblr to put that code?

sorry for the questions and confusion and i may be able to figure this out if you can guide me one last time?
Thanks
:)

[TheDoc]

Put this in your custom CSS box:

.group:after {

content: "";

display: table;

clear: both;

}

Then click ‘Edit HTML’ and look for class=”post-photo” and change it to class=”post-photo group”.

[powellcustomdrums]

its not working when i do the html part with putting in the – “post-photo group”

because mine has – class-“post-content post-photo”

go here – http://powellcustomdrums.tumblr.com/

[TheDoc]

1) You aren’t floating the images properly. Your code looks like this:

/*  POST - PHOTO/VIDEO  */

.post-photo img {

display: block;

margin: 'float: left' auto;

padding: 20px 0 0;

}

It should be like this:

/*  POST - PHOTO/VIDEO  */

.post-photo img {

display: block;

float: left;

margin-right: 10px;

padding: 20px 0 0;

}

2) It doesn’t look like you’ve added the CSS code I posted above to your website.

3) Just add another class to it. So it’d be “post-content post-photo group”. You can have as many classes as you want on any element.

[Author]

Posts