The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Tumblr HTML, Need assistance with the HTML
simple-kid
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
simple-kid   Tumblr HTML   Jul 12 2014, 05:15 AM
Frederiek   There are only images on that page and they are al...   Jul 12 2014, 09:48 AM
simple-kid   So I could change the margins but it'd just be...   Jul 12 2014, 03:22 PM
Frederiek   In fact, the spacing between all elements is only ...   Jul 14 2014, 04:09 AM

« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 04:15 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC