Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make Tumblr Photos smaller?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #39351

    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?

    #107822
    TheDoc
    Member

    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.

    #107874

    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?

    #107875

    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

    #107895
    TheDoc
    Member

    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

    #107943

    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?

    #107945
    TheDoc
    Member

    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/

    #107987

    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?

    #108049

    ?

    #108053
    TheDoc
    Member

    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.

    #108055

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

    #108039

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

    #108040
    TheDoc
    Member

    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”.

    #108118

    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/

    #108146
    TheDoc
    Member

    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.

Viewing 15 posts - 1 through 15 (of 26 total)
  • The forum ‘CSS’ is closed to new topics and replies.