The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Frederiek
post Jul 12 2014, 09:48 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
simple-kid
post Jul 12 2014, 03:22 PM
Post #3





Group: Members
Posts: 2
Joined: 12-July 14
Member No.: 21,243



So I could change the margins but it'd just be more difficult?

I don't mind a challenge.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 14 2014, 04:09 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:26 PM