Help - Search - Members - Calendar
Full Version: Tumblr HTML
HTMLHelp Forums > Web Authoring > Web Site Functionality
simple-kid
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>
Frederiek
There are only images on that page and they are all contained in DIVs that have position: absolute; assigned to it. So, there is no margin to reduce. You'd have to reposition all those DIVs by a few pixels, which seems rather overkill.

Besides, I only see already rather small spacings between them.
simple-kid
So I could change the margins but it'd just be more difficult?

I don't mind a challenge.
Frederiek
In fact, the spacing between all elements is only 4px, set by margin and padding of 2px to each container DIV (.entry).

I suppose the positioning is produced by some javascript. Without the margin and padding, the spacing is about 10px, horizontally and vertically.

If you want lesser spacing, you could eliminate the margin and padding on .entry and search how the javascript implements the positioning of each of these DIV containers for the images and change that slightly.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.