Tumblr HTML, Need assistance with the HTML |
Tumblr HTML, Need assistance with the HTML |
simple-kid |
Jul 12 2014, 05:15 AM
Post
#1
|
Group: Members Posts: 2 Joined: 12-July 14 Member No.: 21,243 |
So I got a new Tumblr theme a few days ago and ever since I've been tweaking small things to perfect it.
The last thing I really want is to reduce the spacing between my posts. I came across many guides on how to do so, but none of them worked; or maybe I'm just not doing it right. Most of these guides said to change the margin px under things like #post or .post in the HTML, and some of the guides told me to add a simple code to my CSS but nothing worked. Here's my blog: http://simple-kid.tumblr.com/ Here's my HTML: <html> <head> <!-- COLORS --> <meta name="font:body" content="Times"/> <meta name="text:font size" content="11"/> <meta name="text:grayscale posts" content="50%"/> <meta name="color:text" content="#696969"/> <meta name="color:links" content="#9c9c9c"/> <meta name="color:hover link" content="#fff"/> <meta name="color:background" content="#fff"/> <meta name="color:header bg" content="#fff"/> <meta name="color:ask bubble bg" content="#e8e8e8"/> <meta name="color:chat bg 1" content="#c1c1c1"/> <meta name="color:chat bg 2" content="#e8e8e8"/> <meta name="color:blockquote" content="#9c9c9c"/> <meta name="color:scrollbar" content="#b5b5b5"/> <meta name="color:post titles" content="#9c9c9c"/> <meta name="color:blogtitle" content="#b5b5b5"/> <meta name="color:sidebar line" content="#000"/> <meta name="color:navigation text" content="#fff"/> <meta name="color:navigation text hover" content="#696969"/> <meta name="color:navigation bg" content="#696969"/> <meta name="color:permalink text" content="#fff"/> <meta name="color:permalink bg" content="#828282"/> <meta name="color:permalink shadow" content="#282828"/> <!-- TEXT / TITLES --> <meta name="text:link 1" content="http://"/> <meta name="text:link 1 title" content="link 1"/> <meta name="text:link 2" content="http://"/> <meta name="text:link 2 title" content="link 2"/> <meta name="text:link 3" content="http://"/> <meta name="text:link 3 title" content="link 3"/> <meta name="text:link 4" content="http://"/> <meta name="text:link 4 title" content="link 4"/> <meta name="text:link 5" content="http://"/> <meta name="text:link 5 title" content="link 5"/> <meta name="text:link 6" content="http://"/> <meta name="text:link 6 title" content="link 6"/> <meta name="text:blogtitle" content="Welcome to my blog"/> <!-- VARIABLES --> <meta name="if:2 columns" content="0"/> <meta name="if:3 columns" content="0"/> <meta name="if:4 columns" content="1"/> <meta name="if:faded posts" content="0"/> <meta name="if:rounded edges" content="0"/> <meta name="if:show caption" content="0"/> <meta name="if:slider blogtitle" content="1"/> <meta name="if:dark tumblr controls" content="0"/> <meta name="if:rainbow links" content="0"/> <meta name="if:tiny cursor" content="1"/> <meta name="if:custom scrollbar" content="1"/> <meta name="if:disable right click" content="0"/> <meta name="if:disable selecting text" content="0"/> <meta name="if:show link 1" content="1"/> <meta name="if:show link 2" content="1"/> <meta name="if:show link 3" content="1"/> <meta name="if:show link 4" content="1"/> <meta name="if:show link 5" content="1"/> <meta name="if:text font delius" content="1"/> <meta name="if:text font tinytots" content="0"/> <!-- IMAGES --> <meta name="image:background" content=""/> <meta name="image:banner" content=""/> <meta name="image:tiny cursor" content="http://static.tumblr.com/nlodh6u/rOqm5o3h1/2qlex.jpg"/> <meta name="image:back to top button" content="http://static.tumblr.com/zwguidv/sS3mi83ro/bttb.png"/> <title>{Title}</title> {block:ifdisablerightclick} <script language=JavaScript> <!-- //Disable right click script III- By Renigade (renigade@mediaone.net) //For full source code, visit http://www.dynamicdrive.com var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") // --> </script>{block:ifdisablerightclick} {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <link rel="shortcut icon" href="{Favicon}" /> <link rel="alternate" type="application/rss+xml" href="{RSS}" /> <!-- BACK TO TOP BUTTON --> <script src="http://static.tumblr.com/zdiw7dd/2qHn8cuqk/jquery.min.js"></script> <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="java script:;" id="scrollToTop"> <img src="{image:back to top button}" border="0" style="z-index:99999;"></a> <style type="text/css"> /* ------------ CUSTOM FONTS ------------ */ @font-face { font-family: "delius"; src: url('http://static.tumblr.com/bepad33/6M6m295eu/delius-regular.ttf'); } @font-face { font-family: "tinytots"; src: url('http://static.tumblr.com/jdjsstr/8ovm78cbb/pf_arma_five_1_.ttf'); } @font-face { font-family: "origin"; src: url('http://static.tumblr.com/ipqfuw9/iOUmks826/origin-light.ttf'); } /* ------------ POST TITLES ------------ */ h1 { font-family:origin; font-size:15px; {color:post titles}; text-align:left; line-height:25px;} h2 { font-family:origin; font-size:25px; line-height:34px; text-align:center; color:{color:post titles};} strong {font-style:bold;color:{color:text};} /* ------------ STANDARD HTML ------------ */ body { margin: 0px; background-color:{color:background}; background-image:url({image:background}); background-attachment: fixed; background-repeat: repeat; background-position: center; color: {color:text};} body, div, p, textarea, submit, input { {block:ifnottextfontdelius} font-family: {font:body}; {/block:ifnottextfontdelius} {block:ifnottextfonttinytots} font-family: {font:body}; {/block:ifnottextfonttinytots} {block:iftextfontdelius} font-family:delius; {/block:iftextfontdelius} {block:iftextfonttinytots} font-family:tinytots; {/block:iftextfonttinytots} font-size: {text:font size}px; color:{color:text}; {block:iftinycursor}cursor:url({image:tiny cursor}), auto;{/block:iftinycursor}} a:link, a:active, a:visited{ color: {color:links}; text-decoration: none; -webkit-transition: color 0.7s ease-out; -moz-transition: color 0.7s ease-out;{block:iftinycursor} cursor:url({image:tiny cursor});{/block:iftinycursor}} a:hover{ color:{color:hover link}; -webkit-text-stroke: 1px transparant; -webkit-transition: color 0.7s ease-out; -moz-transition: color 0.7s ease-out;{block:iftinycursor} cursor:url({image:tiny cursor});{/block:iftinycursor}} #tumblr_controls{ {block:ifdarktumblrcontrols} -webkit-filter: invert(100%) ; {/block:ifdarktumblrcontrols} position:fixed !important;} #infscr-loading{ z-index:999999999999999999; bottom: 3px; position: absolute; left: 50%; margin-left:-16px; overflow:hidden; margin-bottom: 25px;} /* ------------ BUBBLE ASK BORDER ------------ */ .bubble { position: relative; text-align:left; padding: 5px 10px; background-color: {color:ask bubble bg}; margin-bottom: 10px; border-radius:5px;} .bubble::after { position: absolute; border-radius:5px; top: 100%; left: 15px; content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 5px solid {color:ask bubble bg};} .portrait img { margin-left: 10px; padding-right:5px;} #line { marign-top:2px; width:95%; height:1px; background: {color:ask bubble bg};} /* ------------ CHAT POSTS ------------ */ .chatbg{width:auto;} .chatbg .line{ padding:2px 5px 2px 5px; margin-bottom:2px;margin-left:-30px; background-color:{color:chat bg 1};} .chatbg .line.odd{ background-color:{color:chat bg 2}; padding:2px 5px 2px 5px; margin-bottom:2px;} /* ------------ BLOCKQUOTE ------------ */ blockquote { text-align:left; width:90%; margin-left:20px;padding-left: 5px; overflow: hidden; margin-top:3px;margin-bottom:3px; border-left: 2px solid {color:blockquote};} blockquote img {max-width:auto;} .ol, ul { margin-left: 30px; padding: 2px; list-style-type: circle;text-align:left; } .ul, ol { margin-left: 30px; padding: 2px; list-style-type: decimal;text-align:left; } .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, .user_7 .label, .user_8 .label, .user_9 .label {color:#555555;} /* ------------ SCROLLBAR ------------ */ {block:ifcustomscrollbar} ::-webkit-scrollbar-thumb{ background-color: {color:scrollbar}; border: 2px solid {color:background}; height:auto;border-radius: 10px;} ::-webkit-scrollbar { height:auto;width:10px; background-color: {color:scrollbar}; border: 4px solid {color:background};} {/block:ifcustomscrollbar} /* ------------ SLIDER ------------ */ #slider { background:{color:background}; width:100%; height:170px; -webkit-transition: 0.5s ease-in; position:absolute; } #header:hover #slider { margin-top:-172px; -webkit-transition: 0.7s ease-in; } /* ------------ HEADER ------------ */ #header { position:relative; width:100%; height:175px; border-bottom:2px solid {color:sidebar line}; } /* ------------ BLOGTITLE ------------ */ #blogtitle { font-family:origin; font-size:50px; {block:ifnotsliderblogtitle} line-height:90px; {/block:ifnotsliderblogtitle} {block:ifsliderblogtitle} line-height:130px; {/block:ifsliderblogtitle} color: {color:header title}; } /* ------------ NAVIGATION ------------ */ #navi{ width:100%; text-align:center; font-size:13px; font-size:10px; padding-bottom:10px; margin-bottom:5px; margin-left:auto; margin-right:auto; } #navi a { color:{color:navigation text}; margin-right:3px; margin-left:3px; background:{color:navigation bg}; padding-top:4px; padding-bottom:5px; padding-left:9px; padding-right:9px; border-radius:5px; text-decoration:none; -webkit-transition: 0.3s ease-in; font-family: geneva, helvetica, arial; text-transform:uppercase; letter-spacing:1px; font-size:8px } #navi a:hover{ color:{color:navigation text hover}; background:{color:header bg}; border-radius:2px; -webkit-transition: 0.3s ease-in;} /* ------------ BACK TO TOP BUTTON ------------ */ #scrollToTop:link, #scrollToTop:visited { background-color: transparent; display: none; opacity:.8; position: fixed; bottom: 10px; right: 10px;} /* ------------ PERMALINK ------------ */ #block {width:70%;} #content {width:100%;margin-top:7px;} .entry { float:left; diplay:block; margin:2px; padding:2px; background:{color:background}; {block:indexpage} overflow:hidden; {block:if2columns} width:49%; {/block:if2columns} {block:if3columns} width:32.4%; {/block:if3columns} {block:if4columns} width:24.1%; {/block:if4columns} {block:ifroundededges} border-radius:8px; {/block:ifroundededges} {/block:indexpage} {block:permalinkpage} width:450px; {/block:permalinkpage}} .entry img { display: block; max-width: 100%; -webkit-transition-duration: 0.5s; {block:indexpage} {block:ifroundededges} border-radius:5px; {/block:ifroundededges} {block:iffadedposts} opacity:0.75; -webkit-transition-duration: 0.5s; {/block:iffadedposts} -webkit-transition: 0.3s ease-in; -webkit-filter: grayscale({text:grayscale posts}); {/block:indexpage}} .entry:hover img { {block:indexpage} {block:iffadedposts} opacity:1.0; -webkit-transition-duration: 0.5s; {/block:iffadedposts} -webkit-transition: 0.3s ease-in; -webkit-filter: grayscale(0%); {block:indexpage} max-width: 100%;} .photoset, .photoset img{ {block:ifroundededges} border-radius:2px; {/block:ifroundededges} {block:indexpage} -webkit-transition: 0.3s ease-in; -webkit-filter: grayscale({text:grayscale posts}); {block:iffadedposts} opacity:0.75; -webkit-transition-duration: 0.5s; {/block:iffadedposts} {/block:indexpage}} .photoset:hover, .photoset img:hover { {block:indexpage} -webkit-transition: 0.3s ease-in; -webkit-filter: grayscale(0%); {block:iffadedposts} opacity:1; -webkit-transition-duration: 0.5s; {/block:iffadedposts} {block:indexpage}} #excel {position: fixed;right: 3px;top: 26px;} #pagination{display:none;} ol.notes img {width: 16px;display: inline;position: relative;top: 3px;} .entry .perma { z-index:99999; opacity:.0; position:absolute; width:auto; height:auto; top:-2px; left:15px; -webkit-transition-duration: 0.6s} .entry:hover .perma {opacity:1; -webkit-transition-duration: 0.6s;top:15px;} #liking, #reblogging, #notings { float:left; height:14px!important; background:#666666; padding:4px; opacity:.9; border-radius:4px; border:1px solid #555555; margin-right:3px;} #notings, #notings a { color:#fff; font-family:origin; line-height:20px; text-transform:none; letter-spacing:1px; font-size:12px;} </style> </head> <body> {block:ifdisableselectingtext} <BODY onselectstart="return false;" ondragstart="return false;"> {/block:ifdisableselectingtext} {block:ifrainbowlinks} <script src="http://static.tumblr.com/uiqhh9x/6SMm4pws7/rainbow.js" type="text/javascript"></script> {/block:ifrainbowlinks} <center> <div id="block"> <div id="header"> {block:ifsliderblogtitle} <div id="slider"> {block:IfBannerImage} <img border="0" style="max-height:100%; float:center; margin:10px 0px 0px 20px;" src="{image:banner}"/>{/block:IfBannerImage} {block:IfNotBannerImage}<br> <div id="blogtitle"><a href="/">{text:blogtitle}</a></div> {/block:IfNotBannerImage} </div> {/block:ifsliderblogtitle} {block:ifnotsliderblogtitle} {block:IfBannerImage} <img border="0" style="max-height:100%; float:center; margin:10px 0px 0px 20px;" src="{image:banner}"/>{/block:IfBannerImage} {block:IfNotBannerImage}<br> <div id="blogtitle"><a href="/">{text:blogtitle}</a></div> {/block:IfNotBannerImage} {/block:ifnotsliderblogtitle} {block:ifsliderblogtitle} <br><br> {/block:ifsliderblogtitle} {Description}<br><br> <div id="navi"> <a href="/ask">ask me anything!</a> {block:ifshowlink1}<a href="{text:link 1}">{text:link 1 title}</a>{/block:ifshowlink1} {block:ifshowlink2}<a href="{text:link 2}">{text:link 2 title}</a>{/block:ifshowlink2} {block:ifshowlink3}<a href="{text:link 3}">{text:link 3 title}</a>{/block:ifshowlink3} {block:ifshowlink4}<a href="{text:link 4}">{text:link 4 title}</a>{/block:ifshowlink4} {block:ifshowlink5}<a href="{text:link 5}">{text:link 5 title}</a>{/block:ifshowlink5} </div></div> <div id="content"> {block:posts} <div class="entry"> {block:IndexPage} <div class="perma"> <div id="liking">{LikeButton size="15" color="white"}</div> <div id="reblogging">{ReblogButton size="15" color="white"}</div> <div id="notings"><a href="{Permalink}">{NoteCount}</a></div> </div> {/block:IndexPage} {block:Text} {block:Title} <a href="{Permalink}"><h2>{Title}</h2></a> {/block:Title} {body} {/block:Text} {block:Photo} <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:ifshowcaption} {block:caption}{caption}{/block:caption} {/block:ifshowcaption} {/block:Photo} {block:Photoset} {block:IndexPage} {block:if2columns}{Photoset-400}{/block:if2columns} {block:if3columns}{Photoset-250}{/block:if3columns} {block:if4columns}{Photoset-250}{/block:if4columns} {/block:IndexPage} {block:permalinkpage} {Photoset-400} {/block:permalinkpage} {/block:Photoset} {block:Quote} <h2>"{Quote}"</h2><br> {block:Source} <div class="source"><div style="text-align:right;">- {Source}</div></div> {/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}><h2>{Name}</h2></a> {block:Description} <div class="description">{Description}</div> {/block:Description} {/block:Link} {block:Chat} {block:Title} <a href="{Permalink}"><h2>{Title}</h2></a> {/block:Title} <ul class="chat">{block:Lines} <div class="chatbg"> <div class="line {Alt}"> {block:Label}<span class="label"> <b>{Label}</b> </span>{/block:Label} {Line}</div></div> {/block:Lines}{/block:Chat} {block:Answer} <div class="bubble">{Question}</div><p class="portrait"><img src="{AskerPortraitURL-24}" align="left"> <h1>{Asker}</h1> <center><div id="line"></div></center>{Answer} {/block:Answer} {block:Video} {Video-250} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:Video} {block:Audio} {AudioPlayerBlack} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:Audio} {block:PermalinkPage} <br> {block:notecount}This post has {notecountwithlabel} {/block:notecount}<br>{block:Date}Posted on {ShortMonth} {DayofMonth}{DayofMonthSuffix}, {Year}{/block:Date} {block:RebloggedFrom} <br> Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></a><br>Posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}<br>{block:HasTags}Tagged with {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}{/block:HasTags} {/block:PermalinkPage}{block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:Posts} </div><div class="clear"></div> <!-- DON'T DELETE ANY OF THE CODES BELOW --> <script type="text/javascript" src="http://static.tumblr.com/ipqfuw9/9Ovn8cl0z/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/ipqfuw9/gJtn8ckh6/infinitescrollings.js"></script> <script type="text/javascript" src="http://static.tumblr.com/ipqfuw9/8fLn8ck3j/like_script.js"></script> <script type="text/javascript"> $(window).load(function () { var $content = $('#content'); $content.masonry({itemSelector: '.entry', }); $content.infinitescroll({ navSelector : 'div#pagination', nextSelector : 'div#pagination a#nextPage', itemSelector : '.entry', loading: {/*Loading...*/ finishedMsg: '', img: 'http://static.tumblr.com/twte3d7/hIvm5pnpg/ajax-loader.gif' }, bufferPx :200, extraScrollPx: 550, debug :false, }, // call masonry as a callback. function( newElements ) { window.n = window.n || 0; Tumblr.LikeButton.get_status_by_page(++window.n); var $newElems = $( newElements ); $newElems.hide(); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ $content.masonry( 'appended', $newElems, false, function(){$newElems.fadeIn(1500);} ); }); }); }); </script> {block:Pagination} <div id="pagination"> {block:NextPage} <a id="nextPage" href="{NextPage}"> →</a> {/block:NextPage} {block:PreviousPage} <a href="{PreviousPage}">← </a> {/block:PreviousPage}</div> {/block:Pagination} </div> </center> </body> </html> |
Lo-Fi Version | Time is now: 18th April 2024 - 04:15 AM |