The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> adding space between photo & caption on tumblr ...
ham1et
post Oct 23 2014, 06:05 AM
Post #1





Group: Members
Posts: 1
Joined: 23-October 14
Member No.: 21,710
I was hoping someone could help with the following coding. I used tumblr theme generator as I'm not competent in CSS.

I'm having problems knowing how to add a space between photos and the caption below them.

The coding is a follows. Any help would be much appreciated.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-----------------------------------------------------------------
               _____                _     _      
              |_   _|   _ _ __ ___ | |__ | |_ __
                | || | | | '_ ` _ \| '_ \| | '__|
                | || |_| | | | | | | |_) | | |  
                |_| \__,_|_| |_| |_|_.__/|_|_|  
                ____                           _            
               / ___| ___ _ __   ___ _ __ __ _| |_ ___  _ __
              | |  _ / _ \ '_ \ / _ \ '__/ _` | __/ _ \| '__|
              | |_| |  __/ | | |  __/ | | (_| | || (_) | |  
               \____|\___|_| |_|\___|_|  \__,_|\__\___/|_|
    
                 ___ ___  _ __ ___  
                / __/ _ \| '_ ` _ \
               | (_| (_) | | | | | |
              (_)___\___/|_| |_| |_|
                                              
              // Generate your own theme at
                 http://tumblrgenerator.com
                    
              // A "tit" theme project
                 http://tit.tumblr.com
                    
              // Comments & Suggestions are apprecaited

------------------------------------------------------------------>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="text:Link 1" content=""/>
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 2" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 3" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 4" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 5" content=""/>
<meta name="text:Link 5 URL" content=""/>
<meta name="text:Link 6" content=""/>
<meta name="text:Link 6 URL" content=""/>
<meta name="text:Link 7" content=""/>
<meta name="text:Link 7 URL" content=""/>
<meta name="text:Link 8" content=""/>
<meta name="text:Link 8 URL" content=""/>
<meta name="text:Home Label" content="Home"/>
<meta name="text:Ask Label" content="Ask"/>
<meta name="text:Submit Label" content="Submit"/>
<meta name="text:Archive Label" content="Archive"/>
<meta name="if:Show Archive Link" content="1"/>
<meta name="if:Show Submit Link" content="1"/>
<meta name="if:Show Title" content="1"/>
<meta name="if:Show Tags" content="1"/>
<meta name="if:Animation" content="1"/>
<meta name="if:To Top Button" content="0"/>
<meta name="if:Infinite Scroll" content="1"/>
<meta name="if:Show Captions" content="1"/>
<meta name="if:Show Tags" content="1"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/jkEm9tb4p/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpaytv3/2V1m9r58l/reset.css">
<script type="text/javascript" src="http://static.tumblr.com/tpqedpr/vnzmibpqr/minified.js"></script>
<style type="text/css">
body {
    color: #828282;background: #ffffff url({image:Background});
    font-family: Century Gothic;
    font-size: 10px;
    line-height: 1.5em;
}
p {margin:0 0 .75em 0} p:last-child {margin:0}
a {
    color: #853500;
    text-decoration:none;
{block:IfAnimation}-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease;-o-transition:all .2s ease;{/block:IfAnimation}}
a:hover {color: #515151;}
blockquote {quotes: "" "" "'" "'"; margin: 0.75em 0 .75em .75em;padding-left: 1.5em;
    line-height: 1.5em;border-left: solid 4px #EDEDED;
}
h1 {
    font-family: Century Gothic;
    font-size: 20px;
    line-height: 1.5em;font-weight: normal;
}
ul {
    margin: 0px 1.5em .75em;}
li {
    margin: .75em 0;
    list-style-type: square;
}
.box img {
    display: block;
    max-width: 100%;}.m-i {
display: block;
line-height: 1px!important;
}
    .menu-picture {
        line-height: 100%;
display: inline-block;
line-height: 0px!important;
}
.post-link{
    font-family: Century Gothic;
    font-size: 8px;
    line-height: 8px;
}p.source{text-align: center;}
.menu-picture {
    line-height: 100%;display: inline-block;
}p.source{text-align: center;}
h3 {
    font-size: 14px; font-weight: normal;
}.tagged { text-align: center; line-height: 8px;font-size: 8px;}
.text { padding: 5px;}p.question {
    margin-bottom: .375em;
}
p.words {
    padding: 6px;
    line-height: 1.5em;
    color: #515151;
    background: #f7f7f7;
}
.response {
    background: #efefef;
    padding: 5px;
    margin-bottom: .75em;
}.answer {
text-align: center;
}
.post {
    position: relative;
    {block:IndexPage}
    width:402px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:402px;
    {/block:PermalinkPage}
    float:left;
    
    background: #FFFFFF;
    line-height: 1.5em;
    padding:10px;
    margin:10px;
    border: 1px solid #e8e8e8;
    -moz-border-radius:5px;
    border-radius:5px;
}.box {position: relative;}

#side {
text-align: center;
    margin-top: 10%;
    width:290px;
    padding:0px;position: fixed;
    background: #FFFFFF;
}#side img {
    max-width: 40%;
    padding:12px;
}ul {text-transform: uppercase;
     margin-bottom: .75em;}
#contain {
    width:1198px;
    margin: 10px auto 0;
}
#content {
    width:888px;
    float: right;
}
#infscr-loading{position:absolute!important;width:16px!important;height:11px!important;margin-bottom:-16px!important;top:auto!important;bottom:0;left:50%!important}p.menu-m {margin: .375em;} .menu-link {margin: 0 3px;}.shadow-wrap { width: 100%; margin-left: -10px; position: absolute; bottom: -11px; height: 11px;}iframe#tumblr_controls,.btn.icon.theme{filter:invert(100%);-webkit-filter:invert(100%);-moz-filter:invert(100%);-o-filter:invert(100%);-ms-filter:invert(100%); opacity:.4;position:fixed!important}.box iframe {
    max-width: 100%;
}.text img {max-width: 100%;}img {display: block;}.box img {display: block;}
.post-info-data{text-align:center}.notes img{display:block;float:left;margin-right:.75em}ol.notes li{margin:.375em 0;list-style-type:none;line-height:16px}

#toTop{display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:21px;height:21px;border:0;text-indent:100%;background:url(http://static.tumblr.com/uiqhh9x/372m6hyqw/up.png) no-repeat left top;opacity:.5;filter:alpha(opacity = 50);{block:IfAnimation}-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease;-o-transition:all .2s ease;{/block:IfAnimation}}#toTopHover{width:21px;height:21px;display:block;overflow:hidden;float:left;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);{block:IfAnimation}-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease;-o-transition:all .2s ease;{/block:IfAnimation}}#toTop:hover{opacity:1;filter:alpha(opacity = 100)}#toTop:active,#toTop:focus{outline:0}

a.btn{position:absolute;z-index:999999;top:26px;right:3px;white-space:nowrap;outline:0;text-decoration:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;font:600 12px/18px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;height:20px;padding:0 5px;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:padding;-moz-transition-property:padding;-ms-transition-property:padding;-o-transition-property:padding;transition-property:padding;-webkit-transition-duration:.1s;-moz-transition-duration:.1s;-ms-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-ms-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.btn{color:#fff;border:1px solid rgba(0,0,0,0.18);background:rgba(0,0,0,0.38);text-shadow:1px 1px 0 rgba(0,0,0,0.08)}a.btn,a.btn:hover{color:white!important}.btn{margin-bottom:5px;color:#fff;border:1px solid rgba(0,0,0,0.18);background:rgba(0,0,0,0.38);text-shadow:1px 1px 0 rgba(0,0,0,0.08);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.btn:hover::after,.btn:focus::after{background:rgba(255,255,255,0.09);color:white}.btn:active::after{background:rgba(255,255,255,0.18) color:white}.btn_label.show{display:block}.btn::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';-webkit-border-radius:inherit;-moz-border-radius:inherit;border-radius:inherit}.btn.icon::before{display:block;content:'';position:absolute;top:0;left:0;bottom:0;width:20px;border-radius:inherit;background:url('http://static.tumblr.com/tpqedpr/cQ1mbwb60/de.png') 0 0 no-repeat}.btn.theme::before{background-position:0 -0px}.btn img{width:15px}.btn.icon{padding-left:20px}.btn:active::after {background:rgba(255,255,255,0.18)}.clear {clear: both;} #pagination {display: none;}    .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}
</style></head>
<body>

<div id="contain" class="clearfix">
<div id="side">
<div class="text">
{block:IfShowTitle}<h1><a href="/">{Title}</a></h1>{/block:IfShowTitle}<a href="/" class="m-i"><img class="menu-picture" src="{image:sidebar}"/></a><div id="description">{Description}</div>
<div><a class="menu-link" href="/">{text:Home Label}</a> /<a class="menu-link" href="/ask">{text:Ask label}</a>{block:SubmissionsEnabled}{block:IfShowSubmitLink}/ <a class="menu-link" href="/submit">{text:Submit label}</a>{/block:IfShowSubmitLink}{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}/ <a class="menu-link" href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}{block:iflink1}/<a class="menu-link" href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}{block:iflink2}/<a class="menu-link" href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}{block:iflink3}/<a class="menu-link" href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}{block:iflink4}/<a class="menu-link" href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}{block:iflink5}/<a class="menu-link" href="{text:link 5 url}">{text:link 5}</a>{/block:iflink5}{block:iflink6}/<a class="menu-link" href="{text:link 6 url}">{text:link 6}</a>{/block:iflink6}{block:iflink7}/<a class="menu-link" href="{text:link 7 url}">{text:link 7}</a>{/block:iflink7}{block:iflink8}/<a class="menu-link" href="{text:link 8 url}">{text:link 8}</a>{/block:iflink8}{Block:IfShowArchiveLink}/ <a class="menu-link" href="/archive">{text:Archive Label}</a>{/Block:IfShowArchiveLink}</div>
{block:IfNotInfiniteScroll}{block:Pagination}<p class="previous-next text">{block:PreviousPage}<a href="{PreviousPage}" class="next"><</a>{/block:PreviousPage}<span id="pages"> {CurrentPage} of {TotalPages} </span>{block:NextPage}<a href="{NextPage}" class="previous">></a>{/block:NextPage}</p>{/block:Pagination}{/block:IfNotInfiniteScroll}
</div>
</div>
<div id="content">
{block:Posts}
<div class="post">

{block:Text}
<div class="text">
{block:Title}<h3>{Title}</h3>{/block:Title}
{Body}
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Text}
    
{block:Quote}
<div class="text quote">
<p class="words">“{Quote}”</p>
{block:Source}<p class="source">{Source}</p>{/block:Source}
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Quote}
  
{block:Link}
<div class="text link">        
<h3><a href="{URL}" {Target}>{Name}</a></h3>
{block:Description}{Description}{/block:Description}
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Link}
  
{block:Chat}
<div class="text chat">
<ul class="conversation">
{block:Lines}
<li class="line {Alt}">
{block:Label}<span class="person">{Label}</span>{/block:Label}
<span class="person-said">{Line}</span>
</li>
{/block:Lines}
</ul>
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Chat}

{block:Audio}
<div class="text audio">
<p>{AudioPlayerBlack}</p>
{block:IndexPage}{block:IfShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:IfShowCaptions}{/block:IndexPage}
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Audio}

{block:Answer}
<div class="text answer">
<div class="response">
<p class="question">{Question}</p>
<p>@{Asker}</p></div>
{Answer}
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
</div>
{/block:Answer}

{block:Photoset}
<div class="photoset">
<div class="box">
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
{block:IndexPage}<center>{Photoset-400}</center>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
</div>
{block:IndexPage}{block:IfShowCaptions}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:IfShowCaptions}{/block:IndexPage}
</div>
{/block:Photoset}

{block:Video}
<div class="video">
<div class="box">
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
{block:IndexPage}<center>{Video-400}</center>{/block:IndexPage}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
</div>
{block:IndexPage}{block:IfShowCaptions}
{block:Caption}<div class="caption text">{Caption}</div>{/block:Caption}
{/block:IfShowCaptions}{/block:IndexPage}
</div>
{/block:Video}
    
{block:Photo}
<div class="photo">
<div class="box">
<!-- permalink --> {block:IndexPage}

<!-- /permalink --> {/block:IndexPage}
{block:IndexPage}
<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%"/></a>
{block:Caption}{Caption}{/block:Caption}

{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/>{LinkCloseTag}
{/block:PermalinkPage}
</div>
{block:IndexPage}{block:IfShowCaptions}
{block:Caption}<div class="caption text">{Caption}</div>{/block:Caption}
{/block:IfShowCaptions}{/block:IndexPage}
</div>
{/block:Photo}

{block:IfShowTags}{block:IndexPage}{block:HasTags}
<div class="tagged"><p>{lang:Tagged}: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p></div>
{/block:HasTags}{/block:IndexPage}{/block:IfShowTags}

{block:PermalinkPage}
<div id="post-info" class="text">
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:HasTags}
<p class="tagged">{lang:Tagged}: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p>
{/block:HasTags}
<p class="post-info-data">
{block:Date}{12Hour}:{Minutes}:{Seconds} @ {MonthNumber}/{DayOfMonth}/{Year}<br/>{/block:Date}
{block:NoteCount}{NoteCountWithLabel}<br />{/block:NoteCount}{block:RebloggedFrom}
Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br/>Posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{block:RebloggedFrom}</p>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>
{/block:PermalinkPage}
<div class="shadow-wrap"><img style="width:100%;" src="http://static.tumblr.com/tpqedpr/qoYmd7gyc/1.png"></div>
</div> <!-- end single post -->
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
{/block:Posts}    
</div> <!-- end content -->
<div class="loading"></div>
</div> <!-- end containing div -->
{block:IfInfiniteScroll}
{block:Pagination}<ul id="pagination">
{block:PreviousPage}
<li><a href="{PreviousPage}"></a></li>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<li><span class="current_page numbersNav"><strong>{PageNumber}</strong></span></li>
{/block:CurrentPage}
{block:JumpPage}
<li><a class="jump_page numbersNav" href="{URL}">{PageNumber}</a></li>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<li><a id="nextPage" href="{NextPage}"></a></li>
{/block:NextPage}
</ul>{/block:Pagination}
{/block:IfInfiniteScroll}
{block:IndexPage}
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".post, .loading",
bufferPx : 40,
loadingImg : "http://static.tumblr.com/uiqhh9x/38Em68qk4/loading.gif",
loadingText : "<em></em>",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>
{/block:IndexPage}
{block:IfToTopButton}
<script type="text/javascript">
        $(document).ready(function() {
                /*
                        var defaults = {
                                containerID: 'toTop', // fading element id
                                containerHoverID: 'toTopHover', // fading element hover id
                                scrollSpeed: 1200,
                                easingType: 'linear'
                        };
                        */
                      
                        $().UItoTop({ easingType: 'easeOutQuart' });
                      
                });
</script>
<a href="#" id="toTop" style="display: none; "><span id="toTopHover"></span>To Top</a>
{/block:IfToTopButton}
</body></html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 23 2014, 03:50 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
That's Tumblr coding, with which nothing can be done without a Tumblr account, which most of us here don't have.

We can only help with the rendered page, so for help post the url to your page.

That goes for anyone with questions about coding in Tumblr or similar services. (See also the pinned posts at the top of the Web Site Functionality category.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

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

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

- Lo-Fi Version Time is now: 19th April 2024 - 09:13 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC