The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> TUMBLR / How to add a Title above an Image on a Photo/Phoset post
IndianaStyle
post May 2 2012, 08:02 AM
Post #1





Group: Members
Posts: 4
Joined: 2-May 12
Member No.: 17,024



Hello,

I am literally going crazy about this matter. I am trying so hard to customize my posts on TUMBLR.
What I want to do i "simply" add an header/title text to each post on TUMBLR. I have tried to follow the suggestions I have found here: http://answers.yahoo.com/question/index?qi...02212936AAs47Yc but it's not enough for me, since I am not a HTML or web deign expert.

Could you help me? The result should be like what you see here: http://www.wetheurban.com/ or here: http://1001smiles.tumblr.com/post/13047886586

I have tried to insert this part of code somewhere:

p .photo-title {
position:absolute
top:20px;
left:35px;
}

...but it doesn't work.

Here is the code I am using:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Minimal Theme designed by Artur Kim (http://arturkim.com) for Tumblr | version 1.5 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{block:IndexPage}[snip] | beauty and lifestyle blog{/block:IndexPage}{block:SearchPage}Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}{PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<!-- DEFAULT VARIABLES -->
<meta name="color:Post Type Text" content="#555555"/>
<meta name="color:Post Type Photo" content="#555555"/>
<meta name="color:Post Type Photoset" content="#555555"/>
<meta name="color:Post Type Quote" content="#555555"/>
<meta name="color:Post Type Link" content="#555555"/>
<meta name="color:Post Type Chat" content="#555555"/>
<meta name="color:Post Type Video" content="#555555"/>
<meta name="color:Post Type Audio" content="#555555"/>
<meta name="image:Header" content=""/>
<meta name="if:Show About Widget" content="1"/>
<meta name="if:Show Stuff I Like Widget" content="0"/>
<meta name="if:Show People I Follow Widget" content="0"/>
<meta name="if:Show Social Widget" content="1"/>
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Disqus Shortname" content="[snip]" />

<style type="text/css" media="screen">
/* Minimal Theme designed by Artur Kim (http://arturkim.com) for Tumblr | version 1.5 */

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/* GLOBAL ELEMENTS */
body { background: #fff; }
body, input, textarea { color: #000; font: 14px/20px "helvetica neue",helvetica,arial,sans-serif; }
p, ul, ol, dd, pre { margin-bottom: 20px; }
pre, code { font: 12px Monaco,monospace; line-height: 20px; }
blockquote { border-left: 5px solid #ddd; color: #555; font-style: italic; margin-bottom: 20px; padding-left: 10px; }
table { border: 1px solid #ccc; border-width: 1px 1px 0 1px; font-size: 14px; line-height: 20px; margin: 0 0 22px 0; text-align: left; }
caption { text-align: left; }
tr { border-bottom: 1px solid #ccc; }
th, td { padding: .7em 1.25em; }
hr { background-color: #ccc; border: 0; color: #555; height: 1px; margin-bottom: 20px; }
a:link, a:visited { color: #555; }
a:focus, a:hover, a:active { color: #000000; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; clear:both; }
img { background: #ffffff; }
a img:focus, a img:hover, a img:active { background: #ffffff; }

<!-- p .photo-title {
position:absolute
top:20px;
left:35px;
} -->

/* DEFAULT CSS */
#header .menu {
border-bottom: 1px solid #ccc;
margin: 0 auto 3px;
overflow: hidden;
padding: 20px 0 10px;
width: 900px;
}
#header #pages {
float: left;
width: 640px;
}
#header #pages ul {
float: left;
margin-bottom: 0;
}
#header #pages li {
float: left;
margin-right: 10px;
padding: 4px 10px 3px 0;
}
#header #pages a, #header #pages a:visited {
color: #555;
font-size: 16px;
text-decoration: none;
}
#header #pages a:focus, #header #pages a:hover, #header #pages a:active {
color: #000000;
}
#header #search {
float: right;
}
#header #search input {
border: 1px solid #ccc;
line-height: 20px;
padding: 4px;
}
#header #search input.search-button {
background: #eee;
color: #555;
padding: 3px;
width: 60px;
}
#header #branding {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto 3px;
{block:IfNotHeaderImage}padding: 40px 0;{/block:IfNotHeaderImage}
width: 900px;
}
#header h1 a {
color: #111;
font: 80px Georgia,serif;
font-weight: normal;
line-height: 100px;
text-decoration: none;
}
#header h1 a:focus, #header h1 a:hover, #header h1 a:active {
color: #000000;
}
#header img {
max-width: 900px;
}
#main {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
clear: both;
margin: 0 auto 3px;
overflow: hidden;
width: 900px;
}
#container {
border-right: 1px solid #ccc;
float: left;
min-height: 400px;
width: 640px;
}
.post-meta {
border-bottom: 1px solid #ccc;
color: #555;
overflow: hidden;
padding: 9px 0;
}
.post-meta .type {
float: left;
}
.post-meta .type a {
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 0 10px 10px;
text-decoration: none;
}
.post-type-text .post-meta .type a {
border-bottom: 1px solid {color:Post Type Text};
color: {color:Post Type Text};
}
.post-type-photo .post-meta .type a {
border-bottom: 1px solid {color:Post Type Photo};
color: {color:Post Type Photo};
}
.post-type-photoset .post-meta .type a {
border-bottom: 1px solid {color:Post Type Photoset};
color: {color:Post Type Photoset};
}
.post-type-quote .post-meta .type a {
border-bottom: 1px solid {color:Post Type Quote};
color: {color:Post Type Quote};
}
.post-type-link .post-meta .type a {
border-bottom: 1px solid {color:Post Type Link};
color: {color:Post Type Link};
}
.post-type-chat .post-meta .type a {
border-bottom: 1px solid {color:Post Type Chat};
color: {color:Post Type Chat};
}
.post-type-video .post-meta .type a {
border-bottom: 1px solid {color:Post Type Video};
color: {color:Post Type Video};
}
.post-type-audio .post-meta .type a {
border-bottom: 1px solid {color:Post Type Audio};
color: {color:Post Type Audio};
}
.post-meta .type a:focus, .post-meta .type a:hover, .post-meta .type a:active {
margin-left: 5px;
}
.post-meta .date, .post-meta .comments, .post-meta .note-count {
float: left;
padding: 0 10px;
}
.post-content {
padding: 30px 30px 60px;
}
.post-content div:last-child, .post-content div:last-child p,
.post-content div:last-child ul, .post-content div:last-child ol,
.post-content div:last-child blockquote {
margin-bottom: 0;
}
.post-content h3 {
font: 20px Georgia,serif;
margin-bottom: 20px;
}
.post-content h3 a, .post-content h3 a:visited {
color: #111;
text-decoration: none;
}
.post-content h3 a:focus, .post-content h3 a:hover, .post-content h3:active {
color: #000;
}
.post-content img {
margin-bottom: 20px;
padding: 10px;
}
.post-type-text .post-content ul {
padding-left: 30px;
}
.post-type-text .post-content ul ul {
margin-bottom: 0;
}
.post-type-text .post-content ul li {
list-style-type: disc;
}
.post-type-text .post-content ul ul li {
list-style-type: circle;
}
.post-type-text .post-content ol {
padding-left: 30px;
}
.post-type-text .post-content ol ol {
margin-bottom: 0;
}
.post-type-text .post-content ol li {
list-style-type: upper-latin;
}
.post-type-text .post-content ol ol li {
list-style-type: lower-latin;
}
.post-type-photoset .post-content .html_photoset {
background: #eee;
margin-bottom: 20px;
padding: 10px;
}
.post-type-link .post-content .link-wrap {
margin-bottom: 20px;
}
.post-type-chat .post-content .label {
color: #333;
font-weight: bold;
}
.post-type-video .post-content .video-wrap {
background: #f0f0f0;
margin-bottom: 20px;
padding: 10px;
}
.post-type-audio .post-content .caption {
margin-top: 10px;
}
.tags {
font-size: 13px;
}
.tags a {
text-decoration: none;
}
.tags a:after {
content: ",";
}
.tags a:last-child:after {
content: "";
}
#disqus_thread {
border-top: 1px solid #ccc;
padding: 10px 30px 0;
}
#disqus_thread h3 {
color: #111;
font: 18px Georgia,serif;
margin: 20px 0 10px;
}
#dsq-content .dsq-subscribe-menu {
font-size: 12px;
}
#post-notes {
border-top: 1px solid #ccc;
padding: 30px;
}
#post-notes ol li {
border-bottom: 1px dotted #ccc;
padding: 10px 0;
}
#post-notes ol li img {
background: none;
padding-right: 3px;
vertical-align: middle;
}
.pagination {
border-top: 1px solid #ccc;
overflow: hidden;
padding: 20px 0;
}
.pagination .previous-page {
float: left;
}
.pagination .next-page {
float: right;
margin-right: 30px;
}
.pagination a {
font: 20px Georgia,serif;
text-decoration: none;
}
#sidebar {
float: left;
padding-bottom: 30px;
width: 259px;
}
#sidebar h3 {
border-bottom: 1px dotted #ccc;
color: #999;
font-size: 14px;
font-weight: bold;
margin: 0 0 20px;
padding: 9px 20px;
text-transform: uppercase;
}
#sidebar h3 a, #sidebar h3 a:visited {
color: #999;
text-decoration: none;
}
#sidebar h3 a:focus, #sidebar h3 a:hover, #sidebar h3 a:active {
color: #000000;
}

#sidebar ul {
margin-bottom: 0;
}
.widget {
border-bottom: 1px solid #ccc;
color: #333;
font-size: 13px;
padding: 0 20px 20px 20px;
}
.widget h3 {
font: 20px Georgia,serif;
margin-bottom: 20px;
}
.widget h3 a, .widget h3 a:visited {
color: #000;
text-decoration: none;
}
.widget h3 a:focus, .widget h3 a:hover, .widget h3 a:active {
color: #000;
}
.widget img {
padding: 5px;
max-width: 250px;
}

.widget p:last-child, .widget ul:last-child, .widget ol:last-child, .widget blockquote:last-child {
margin-bottom: 0;
}

#about {
overflow: hidden;
}
#about img {
background: #fff;
border: 1px solid #ccc;
float: left;
margin: 0 10px 0 0;
padding: 3px;
}

#social {
overflow: hidden;
}
#social img {
background: #fff;
border: 0px solid #ccc;
float: left;

margin-left: 60px;

padding-bottom: 20px;
}

.like_post {
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
padding-bottom: 20px;
}
.like_post:last-child {
border: none;
margin: 0;
padding: 0;
}
.like_post ul {
padding-left: 20px;
}
.like_post ul ul {
margin-bottom: 0;
}
.like_post ul li {
list-style-type: disc;
}
.like_post ul ul li {
list-style-type: circle;
}
.like_post ol {
padding-left: 20px;
}
.like_post ol ol {
margin-bottom: 0;
}
.like_post ol li {
list-style-type: upper-latin;
}
.like_post ol ol li {
list-style-type: lower-latin;
}
.like_post p:last-child, .like_post ul:last-child, .like_post ol:last-child, .like_post blockquote:last-child {
margin-bottom: 0;
}

#following_container {
overflow: hidden;
padding-bottom: 20px;
}
#following_container li {
display: inline;
padding: 0;
margin: 0;
}
#footer {
border-top: 1px solid #ccc;
clear: both;
margin: 0 auto;
overflow: hidden;
width: 900px;
}
#colophon {
color: #555;
float: right;
font-size: 12px;
padding: 10px 0 20px;
}
#footer a {
border-bottom: 1px dotted #555;
text-decoration: none;
}
{CustomCSS}
</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=271140516272162";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</head>

<body>
<div id="wrapper">
<div id="header">
<div id="access">
<div class="menu">
<div id="pages">
<ul>
<li><a href="/">Home</a></li>
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
{block:AskEnabled}<li class="ask"><a href="/ask" class="page">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li class="submit"><a href="/submit" class="page">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
<li class="archive"><a href="/archive">Archive</a></li>
<li class="mobile"><a href="/mobile">Mobile</a></li>
<li class="rss"><a href="{RSS}">RSS</a></li>
</ul>
</div><!-- #pages -->
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search" class="search-button"/>
</form>
</div><!-- #search -->
</div><!-- .menu -->
</div><!-- #access -->
<!-- <div id="branding">
<h1>
{block:IfHeaderImage}<a href="[snip]">
<img src="http://img29.imageshack.us/img29/2680/tumblrheader900x220v4.jpg" alt="[snip] blog - Click on this header if you wish to come back to the home page and see my most recent posts" /></a>{/block:IfHeaderImage}

{block:IfHeaderImage}<a href="[snip]">
<img src="http://static.tumblr.com/ptjtjkn/lukm3bbxf/tumblr_header_900x220_v4.jpg" alt="[snip] blog - Click on this header if you wish to come back to the home page and see my most recent posts" /></a>{/block:IfHeaderImage}

{block:IfNotHeaderImage}<a href="[snip]">[snip] blog</a>{/block:IfNotHeaderImage}
</h1>
</div><!-- #branding -->

<div id="branding">
<h1>
{block:IfHeaderImage}<a href=""><img src="{image:Header}" alt="[snip] blog" /></a>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<a href="">[snip] blog</a>{/block:IfNotHeaderImage}
</h1>
</div><!-- #branding -->

</div><!-- #header -->

<div id="main">
<div id="container">
<div id="content">
{block:Posts}
<div id="post-{PostID}" class="post {block:Text}post-type-text{/block:Text}{block:Photo}post-type-photo{/block:Photo}{block:Photoset}post-type-photoset{/block:Photoset}{block:Quote}post-type-quote{/block:Quote}{block:Link}post-type-link{/block:Link}{block:Chat}post-type-chat{/block:Chat}{block:Video}post-type-video{/block:Video}{block:Audio}post-type-audio{/block:Audio}">

<div class="post-meta">
<div class="type">
<a href="{Permalink}">{block:Text}Text{/block:Text}{block:Photo}Photo{/block:Photo}{block:Photoset}Photoset{/block:Photoset}{block:Quote}Quote{/block:Quote}{block:Link}Link{/block:Link}{block:Chat}Chat{/block:Chat}{block:Video}Video{/block:Video}{block:Audio}Audio{/block:Audio}</a>
</div><!-- .type -->

{block:Date}
<div class="date">
{Month} {DayOfMonthWithZero}, {Year}
</div><!-- .date -->
{/block:Date}

{block:NoteCount}
<div class="note-count">
<a href="{Permalink}#notes">{NoteCountWithLabel}</a>
</div><!-- .note-count -->
{/block:NoteCount}
</div><!-- .post-meta -->

<div class="post-content">
{block:Text}
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{Body}

<div class="facebook-button">
<div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>

<!-- <a href="http://twitter.com/share" data-count="vertical" data-url="{permalink}" data-text="{Title}">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->

{/block:Text}
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

<div class="facebook-button">
<div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>

<!-- <a href="http://twitter.com/share" data-count="vertical" data-url="{permalink}" data-text="{Title}">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->

{/block:Photo}
{block:Photoset}
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

<div class="facebook-button">
<div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>

<!-- <a href="http://twitter.com/share" data-count="vertical" data-url="{permalink}" data-text="{Title}">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->

{/block:Photoset}
{block:Quote}
<div class="quote-content">"{Quote}"</div>
{block:Source}<p class="quote-source">— {Source}</p>{/block:Source}
{/block:Quote}
{block:Link}
<div class="link-wrap"><a href="{URL}" {Target}>{Name}</a></div>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
<ul class="chat-wrap">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Video}
<div class="video-wrap">{Video-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}
{block:Audio}
<div class="audio-wrap">{AudioPlayerGrey}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:HasTags}
<div class="tags">
<p>Tags: {block:Tags}<a href="{TagURL}" class="single-tag">{Tag}</a> {/block:Tags}</p>
</div>
{/block:HasTags}

{block:IfDisqusShortname}
<div class="comments">
<a href="{Permalink}#disqus_thread">0 comments</a>
</div>
{/block:IfDisqusShortname}



</div><!-- post-content -->
</div><!-- .post -->

{block:IfDisqusShortname}{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
{/block:Permalink}{/block:IfDisqusShortname}
{block:PostNotes}<div id="post-notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}

{block:Pagination}
<div class="pagination">
{block:PreviousPage}<span class="previous-page"><a href="{PreviousPage}">« Previous</a></span>{/block:PreviousPage}
{block:NextPage}<span class="next-page"><a href="{NextPage}">Next »</a></span>{/block:NextPage}
</div><!-- .pagination -->
{/block:Pagination}
</div><!-- #content -->
</div><!-- #container -->

<div id="sidebar">

{block:IfShowAboutWidget}
<h3>Welcome</h3>
<div id="about" class="widget">
<img src="{PortraitURL-64}" alt="portrait" />
{block:Description}<div class="description"><p>{Description}</p></div>{/block:Description}
</div>
{/block:IfShowAboutWidget}

{block:IndexPage}{block:IfShowStuffILikeWidget}{block:Likes}
<h3><a href="http://www.tumblr.com/liked/by/{Name}">J'adore...</a></h3>
<div id="likes_container" class="widget">
{Likes limit="5" summarize="100" width="259"}
</div>
{/block:Likes}{/block:IfShowStuffILikeWidget}{/block:IndexPage}

{block:IfShowPeopleIFollowWidget}{block:Following}
<h3>People I follow</h3>
<div id="following_container" class="widget">
<ul>
{block:Followed}
<li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" alt="{FollowedName}"/></a></li>
{/block:Followed}
</ul>
</div>
{/block:Following}{/block:IfShowPeopleIFollowWidget}

{block:IfShowSocialWidget}
<h3>Love me on...</h3>

<div id="social" class="img">
<a title="[snip] on facebook" href="http://www.facebook.com/[snip]" target="_blank"><img src="http://desmond.imageshack.us/Himg204/scaled.php?server=204&filename=facebooklogo125x44v1.png&res=medium" border="0"/></a>
</div>

<div id="social" class="img">
<a title="[snip] on twitter" href="https://twitter.com/[snip]" target="_blank"><img src="http://desmond.imageshack.us/Himg341/scaled.php?server=341&filename=twitterlogo125x44v1.png&res=medium" border="0"/></a>
</div>

<div id="social" class="img">
<a title="[snip] on bloglovin'" href="http://www.bloglovin.com/en/blog/3688971/[snip]/follow" target="_blank"><img src="http://desmond.imageshack.us/Himg39/scaled.php?server=39&filename=logo125x44v2.png&res=medium" border="0"/></a>
</div>
{/block:IfShowSocialWidget}

</div><!-- #sidebar -->
</div><!-- #main -->

<div id="footer">
<div id="colophon"><p>Powered by <a href="http://tumblr.com">Tumblr</a>. <a href="http://www.tumblr.com/theme/10375">Minimal Theme</a> designed by <a href="http://arturkim.com">Artur Kim</a>.</p></div>
</div><!-- #footer -->

</div><!-- #wrapper -->

{block:IfGoogleAnalyticsID}<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>{block:IfGoogleAnalyticsID}

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}

<!-- Start of StatCounter Code for Tumblr -->
<script type="text/javascript">
var sc_project=7897739;
var sc_invisible=1;
var sc_security="1200f7f6";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="tumblr tracker"
href="http://statcounter.com/tumblr/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/7897739/0/1200f7f6/1/"
alt="tumblr tracker"></a></div></noscript>
<!-- End of StatCounter Code for Tumblr -->

</body>
</html>

---

Thanks a lot for your help.

Best regards,
IndianaStyle

[edited per request]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 2 2012, 08:12 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



The code you're trying to add doesn't create a header/title. All it does is position an element that's already on the page. If you haven't added that element to the page, then positioning it does nothing.

I don't know Tumblr code, so I don't know how to add the header/title that you want though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
IndianaStyle
post May 2 2012, 08:39 AM
Post #3





Group: Members
Posts: 4
Joined: 2-May 12
Member No.: 17,024



Hello,

Here: http://answers.yahoo.com/question/index?qi...02212936AAs47Yc the guy wrote:

---

You can specify a custom class in the "edit HTML source" portion of your photo caption
eg.

<p>hello world, this is a title</p>
<p class="photo-title">hello world, this is a title</p>

Then, you'll have to tweak your HTML to include some CSS which positions that specific class to somewhere above your photos.

Something like

p.photo-title {
position:absolute
top:20px;
left:35px;
}

---

I have tried to add that code, then I have tried to create a text post by using the html source and have added within the caption section a code like this: <p class="photo-title">hello world, this is a title</p>.

It didn't position this part as header.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JCDU
post May 13 2012, 10:11 PM
Post #4





Group: Members
Posts: 4
Joined: 13-May 12
Member No.: 17,105



Hey IndianaStyle,

I'm the one who answered that question, and I run the blog in the example you gave. By chance I stumbled upon your post through my website traffic reports. It'd be a lot of help if you presented the URL of your blog, but I'll try to solve your problem anyway. tongue.gif

There are a couple of ways you can accomplish this.
For my blog, I use the original method which I described in my answer, along with a Google Chrome browser extension called "TumblrHelper", and although it's a deprecated extension (last updated March 2011), it's still handy if you know how to use it right. What it does is keep a template of any post type, so that you start with the same template for the same type of posts you are trying to make. Anyway, it's not important, but I highly recommend this extension if you are going with my own method because you won't have to edit the source of each post every single time you want a header (that is, if you're planning to always have headers/titles above your posts).

So the first method I described in the Y!A answer was just a simple repositioning, like someone stated earlier. Why it may have not worked for you could be because the exact measurements (top: 20px/ left: 35px) probably doesn't work with your theme. You'll need to change those to fit your theme. And since tumblr is a blogging platform that's sort of like a CMS (content management system), but it restricts what you can or can't post, and it doesn't yet let you have titles for your posts, you'll have to use CSS to position it. I found it easier to do this for my blog, but if you don't want to use a web extension or edit the source every time you post something, you can use WeTheUrban's method.

I poked around at their code and this is what I think they do:
They write the title in the first line of every photo post's caption, and this is the title which they want above the photo post. Then, they write the actual caption itself on the second line. The lines are separated by a space, and through tumblr's "create a post" system, it basically treats both lines as separate paragraph elements ("<p> & </p>"). This is probably an easier way to integrate the title because that's all you have to do on the post-creation side of things. Next, for the actual HTML in their tumblr theme, they add not 1, but 2 {block:Caption} {/block:Caption} variables so that the "title" and "caption" show up twice, but then through CSS they hide the "caption" for the instance above the photo, and they hide the "title" for the instance below the photo. This basically creates the illusion that there is a separate title, but in reality both the title and caption are inside the photo's caption (when creating the post).

So here is your css code which you should put in the Custom CSS box:

CODE
.post-type-photo .post-title * {
    display: none;
    }

.post-type-photo .post-title p:first-child {
    display: block !important;
    font-size: 20px;
    }

.post-type-photo .caption {
    display: block;
    }

.post-type-photo .caption p:first-child {
    display: none !important;
    }


You can change the font-size or add colours or do whatever you want with it. Make sure the title class in your HTML is the same one referred to in the CSS. (eg. class="post-title").
You'll need to use the :first-child CSS psuedo selector, which is not compatible with some old browsers. But you should be okay. If you want to see the list of browsers that do support :first-child, click here.

And then the HTML part of the photo-posts should look something like:

CODE
{block:Photo}

{block:Caption}
<div class="post-title">{Caption}</div>
{/block:Caption}

{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

{/block:Photo}


Notice how there are 2 "{block:Caption}{/block:Caption}'s"? The first one includes your "post-title", and is situated above the <img>.
The second is the "caption", which is situated below the <img>. CSS does the rest.

I hope I've made it easy to understand, lol.
Cheers. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
IndianaStyle
post Jun 4 2012, 10:18 AM
Post #5





Group: Members
Posts: 4
Joined: 2-May 12
Member No.: 17,024



QUOTE(JCDU @ May 14 2012, 05:11 AM) *

Hey IndianaStyle,

I'm the one who answered that question, and I run the blog in the example you gave. By chance I stumbled upon your post through my website traffic reports. It'd be a lot of help if you presented the URL of your blog, but I'll try to solve your problem anyway. tongue.gif

There are a couple of ways you can accomplish this.
For my blog, I use the original method which I described in my answer, along with a Google Chrome browser extension called "TumblrHelper", and although it's a deprecated extension (last updated March 2011), it's still handy if you know how to use it right. What it does is keep a template of any post type, so that you start with the same template for the same type of posts you are trying to make. Anyway, it's not important, but I highly recommend this extension if you are going with my own method because you won't have to edit the source of each post every single time you want a header (that is, if you're planning to always have headers/titles above your posts).

So the first method I described in the Y!A answer was just a simple repositioning, like someone stated earlier. Why it may have not worked for you could be because the exact measurements (top: 20px/ left: 35px) probably doesn't work with your theme. You'll need to change those to fit your theme. And since tumblr is a blogging platform that's sort of like a CMS (content management system), but it restricts what you can or can't post, and it doesn't yet let you have titles for your posts, you'll have to use CSS to position it. I found it easier to do this for my blog, but if you don't want to use a web extension or edit the source every time you post something, you can use WeTheUrban's method.

I poked around at their code and this is what I think they do:
They write the title in the first line of every photo post's caption, and this is the title which they want above the photo post. Then, they write the actual caption itself on the second line. The lines are separated by a space, and through tumblr's "create a post" system, it basically treats both lines as separate paragraph elements ("<p> & </p>"). This is probably an easier way to integrate the title because that's all you have to do on the post-creation side of things. Next, for the actual HTML in their tumblr theme, they add not 1, but 2 {block:Caption} {/block:Caption} variables so that the "title" and "caption" show up twice, but then through CSS they hide the "caption" for the instance above the photo, and they hide the "title" for the instance below the photo. This basically creates the illusion that there is a separate title, but in reality both the title and caption are inside the photo's caption (when creating the post).

So here is your css code which you should put in the Custom CSS box:

CODE
.post-type-photo .post-title * {
    display: none;
    }

.post-type-photo .post-title p:first-child {
    display: block !important;
    font-size: 20px;
    }

.post-type-photo .caption {
    display: block;
    }

.post-type-photo .caption p:first-child {
    display: none !important;
    }


You can change the font-size or add colours or do whatever you want with it. Make sure the title class in your HTML is the same one referred to in the CSS. (eg. class="post-title").
You'll need to use the :first-child CSS psuedo selector, which is not compatible with some old browsers. But you should be okay. If you want to see the list of browsers that do support :first-child, click here.

And then the HTML part of the photo-posts should look something like:

CODE
{block:Photo}

{block:Caption}
<div class="post-title">{Caption}</div>
{/block:Caption}

{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

{/block:Photo}


Notice how there are 2 "{block:Caption}{/block:Caption}'s"? The first one includes your "post-title", and is situated above the <img>.
The second is the "caption", which is situated below the <img>. CSS does the rest.

I hope I've made it easy to understand, lol.
Cheers. smile.gif


Hello,

Thank you so much for your help!
I will try to follow your suggestions and let you know.

Many many thanks for your kindness.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
IndianaStyle
post Jun 5 2012, 12:33 PM
Post #6





Group: Members
Posts: 4
Joined: 2-May 12
Member No.: 17,024



QUOTE(IndianaStyle @ Jun 4 2012, 05:18 PM) *

QUOTE(JCDU @ May 14 2012, 05:11 AM) *

Hey IndianaStyle,

I'm the one who answered that question, and I run the blog in the example you gave. By chance I stumbled upon your post through my website traffic reports. It'd be a lot of help if you presented the URL of your blog, but I'll try to solve your problem anyway. tongue.gif

There are a couple of ways you can accomplish this.
For my blog, I use the original method which I described in my answer, along with a Google Chrome browser extension called "TumblrHelper", and although it's a deprecated extension (last updated March 2011), it's still handy if you know how to use it right. What it does is keep a template of any post type, so that you start with the same template for the same type of posts you are trying to make. Anyway, it's not important, but I highly recommend this extension if you are going with my own method because you won't have to edit the source of each post every single time you want a header (that is, if you're planning to always have headers/titles above your posts).

So the first method I described in the Y!A answer was just a simple repositioning, like someone stated earlier. Why it may have not worked for you could be because the exact measurements (top: 20px/ left: 35px) probably doesn't work with your theme. You'll need to change those to fit your theme. And since tumblr is a blogging platform that's sort of like a CMS (content management system), but it restricts what you can or can't post, and it doesn't yet let you have titles for your posts, you'll have to use CSS to position it. I found it easier to do this for my blog, but if you don't want to use a web extension or edit the source every time you post something, you can use WeTheUrban's method.

I poked around at their code and this is what I think they do:
They write the title in the first line of every photo post's caption, and this is the title which they want above the photo post. Then, they write the actual caption itself on the second line. The lines are separated by a space, and through tumblr's "create a post" system, it basically treats both lines as separate paragraph elements ("<p> & </p>"). This is probably an easier way to integrate the title because that's all you have to do on the post-creation side of things. Next, for the actual HTML in their tumblr theme, they add not 1, but 2 {block:Caption} {/block:Caption} variables so that the "title" and "caption" show up twice, but then through CSS they hide the "caption" for the instance above the photo, and they hide the "title" for the instance below the photo. This basically creates the illusion that there is a separate title, but in reality both the title and caption are inside the photo's caption (when creating the post).

So here is your css code which you should put in the Custom CSS box:

CODE
.post-type-photo .post-title * {
    display: none;
    }

.post-type-photo .post-title p:first-child {
    display: block !important;
    font-size: 20px;
    }

.post-type-photo .caption {
    display: block;
    }

.post-type-photo .caption p:first-child {
    display: none !important;
    }


You can change the font-size or add colours or do whatever you want with it. Make sure the title class in your HTML is the same one referred to in the CSS. (eg. class="post-title").
You'll need to use the :first-child CSS psuedo selector, which is not compatible with some old browsers. But you should be okay. If you want to see the list of browsers that do support :first-child, click here.

And then the HTML part of the photo-posts should look something like:

CODE
{block:Photo}

{block:Caption}
<div class="post-title">{Caption}</div>
{/block:Caption}

{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

{/block:Photo}


Notice how there are 2 "{block:Caption}{/block:Caption}'s"? The first one includes your "post-title", and is situated above the <img>.
The second is the "caption", which is situated below the <img>. CSS does the rest.

I hope I've made it easy to understand, lol.
Cheers. smile.gif


Hello,

Thank you so much for your help!
I will try to follow your suggestions and let you know.

Many many thanks for your kindness.


Hello,
I was able to use the Urban method but there is a complication. My blog is linked to bloglovin, twitter and facebook. What happens is that each time I post i can see on these social networks the text repeated twice, even if the post is displayed correctly on my blog. Do you have any suggestion on how to solve this_
I would try to use your first solution, but I don't what CSS I should use.

Can you help me?

Another question: do you have any idea on how to create pages linked to the tags I use? Let me be more clear. I normally use these tags: Life / Travel.
I would like to create two pages above the header which contain all the post tagged as Life and another with Travel.
Do you know how to do this?

Do you also know how to align the social buttons that appear at the end of each post?

Do you also know how to show a "You might also like" link selection below each post (they should be related to the tag I use within each post)?

Thank you so much for everything.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JCDU
post Jun 22 2012, 01:05 AM
Post #7





Group: Members
Posts: 4
Joined: 13-May 12
Member No.: 17,105



QUOTE(IndianaStyle @ Jun 5 2012, 10:33 AM) *

QUOTE(IndianaStyle @ Jun 4 2012, 05:18 PM) *

QUOTE(JCDU @ May 14 2012, 05:11 AM) *

Hey IndianaStyle,

I'm the one who answered that question, and I run the blog in the example you gave. By chance I stumbled upon your post through my website traffic reports. It'd be a lot of help if you presented the URL of your blog, but I'll try to solve your problem anyway. tongue.gif

There are a couple of ways you can accomplish this.
For my blog, I use the original method which I described in my answer, along with a Google Chrome browser extension called "TumblrHelper", and although it's a deprecated extension (last updated March 2011), it's still handy if you know how to use it right. What it does is keep a template of any post type, so that you start with the same template for the same type of posts you are trying to make. Anyway, it's not important, but I highly recommend this extension if you are going with my own method because you won't have to edit the source of each post every single time you want a header (that is, if you're planning to always have headers/titles above your posts).

So the first method I described in the Y!A answer was just a simple repositioning, like someone stated earlier. Why it may have not worked for you could be because the exact measurements (top: 20px/ left: 35px) probably doesn't work with your theme. You'll need to change those to fit your theme. And since tumblr is a blogging platform that's sort of like a CMS (content management system), but it restricts what you can or can't post, and it doesn't yet let you have titles for your posts, you'll have to use CSS to position it. I found it easier to do this for my blog, but if you don't want to use a web extension or edit the source every time you post something, you can use WeTheUrban's method.

I poked around at their code and this is what I think they do:
They write the title in the first line of every photo post's caption, and this is the title which they want above the photo post. Then, they write the actual caption itself on the second line. The lines are separated by a space, and through tumblr's "create a post" system, it basically treats both lines as separate paragraph elements ("<p> & </p>"). This is probably an easier way to integrate the title because that's all you have to do on the post-creation side of things. Next, for the actual HTML in their tumblr theme, they add not 1, but 2 {block:Caption} {/block:Caption} variables so that the "title" and "caption" show up twice, but then through CSS they hide the "caption" for the instance above the photo, and they hide the "title" for the instance below the photo. This basically creates the illusion that there is a separate title, but in reality both the title and caption are inside the photo's caption (when creating the post).

So here is your css code which you should put in the Custom CSS box:

CODE
.post-type-photo .post-title * {
    display: none;
    }

.post-type-photo .post-title p:first-child {
    display: block !important;
    font-size: 20px;
    }

.post-type-photo .caption {
    display: block;
    }

.post-type-photo .caption p:first-child {
    display: none !important;
    }


You can change the font-size or add colours or do whatever you want with it. Make sure the title class in your HTML is the same one referred to in the CSS. (eg. class="post-title").
You'll need to use the :first-child CSS psuedo selector, which is not compatible with some old browsers. But you should be okay. If you want to see the list of browsers that do support :first-child, click here.

And then the HTML part of the photo-posts should look something like:

CODE
{block:Photo}

{block:Caption}
<div class="post-title">{Caption}</div>
{/block:Caption}

{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

{/block:Photo}


Notice how there are 2 "{block:Caption}{/block:Caption}'s"? The first one includes your "post-title", and is situated above the <img>.
The second is the "caption", which is situated below the <img>. CSS does the rest.

I hope I've made it easy to understand, lol.
Cheers. smile.gif


Hello,

Thank you so much for your help!
I will try to follow your suggestions and let you know.

Many many thanks for your kindness.


Hello,
I was able to use the Urban method but there is a complication. My blog is linked to bloglovin, twitter and facebook. What happens is that each time I post i can see on these social networks the text repeated twice, even if the post is displayed correctly on my blog. Do you have any suggestion on how to solve this_
I would try to use your first solution, but I don't what CSS I should use.

Can you help me?

Another question: do you have any idea on how to create pages linked to the tags I use? Let me be more clear. I normally use these tags: Life / Travel.
I would like to create two pages above the header which contain all the post tagged as Life and another with Travel.
Do you know how to do this?

Do you also know how to align the social buttons that appear at the end of each post?

Do you also know how to show a "You might also like" link selection below each post (they should be related to the tag I use within each post)?

Thank you so much for everything.


Sorry for the long wait for a response... I don't browse these forums often.

Well it's kind of hard to give advice on the theme if I don't know what it looks like or how it behaves.
If you don't mind, can you PM me the link to your blog? Or at least to the theme that you're using?

EDIT: woops, I forgot all about your first post. I see the theme now. Seeing the actual site live would still be helpful though, especially if you've made changes to the code. Sorry, it's been too long since I've been here haha.

Also, to create pages, if you're using a default tumblr theme, whoever made it probably already added in support for custom pages. All you need to do is go to Customize Theme > Pages > Add a page > Select the dropdown menu and choose "Redirect". Enter the url for your tag page (http://yourblog.tumblr.com/tagged/life) and check the "show a link for this page" box.

If custom pages aren't implemented yet, it's a little trickier to get it in. Otherwise, you can just make a link in the HTML above the header that goes to the tag page. eg. <a href="http://yourblog.tumblr.com/tagged/life">My posts tagged life</a>

Align social buttons? Again, hard to say without seeing it.

The "You might also like" thing is much more complicated and I have no idea how to accomplish that. It requires either some sort of powerful javascript to detect the tag you use in each post and then generate a response dynamically, or some sort of thing that determines the suitable related links with information from the API. I'm not really an expert at either of those, so.. sorry I don't think I can accomplish that haha. I think wordpress has widgets that do that automatically, but not on tumblr as far as I know. You can manually write related links, though, but you'll just have to do it every single time you post. Sorry!

This post has been edited by JCDU: Jun 22 2012, 01:12 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JCDU
post Jun 23 2012, 05:05 PM
Post #8





Group: Members
Posts: 4
Joined: 13-May 12
Member No.: 17,105



Oh yeah, I just figured out how to turn on email notifications for this thread.. the 'track topic' button
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jules18
post Sep 23 2012, 08:01 AM
Post #9





Group: Members
Posts: 1
Joined: 23-September 12
Member No.: 17,831



Hi JCDU,

thanks for sharing your HTML code and CSS.

I'm using Tumblr and have been studying the HTML code but i'm not good at changing things in it at all. I am trying to add a title in bold above the image in a entry. It would be nice to have a description below each picture too.

Do you have a HTML code to recommend to include or replace?

I look forward to your reply. Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JCDU
post Oct 30 2012, 05:39 PM
Post #10





Group: Members
Posts: 4
Joined: 13-May 12
Member No.: 17,105



Sorry, I don't check this often. Private Message me if you want to contact me.

Updated the CSS. (I can't edit month old posts for some reason >.>)

So if you have this as the HTML:

CODE
{block:Photo}

<div class="photo">

{block:Caption}
<div class="post-title">{Caption}</div>
{/block:Caption}

{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

</div>

{/block:Photo}


CODE
.photo .post-title * {
    display: none;
    }

.photo .post-title :first-child {
    display: block !important;
    }

.photo .caption {
    display: block;
    }

.photo .caption > :first-child {
    display: none !important;
    }


I'll think about writing a guide on this since a lot of people are asking about this and I think it turns up a fair amount of traffic from google searches.
I'll link to it when I get the chance to finish it. tongue.gif

This post has been edited by JCDU: Oct 30 2012, 05:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pphoka
post Jan 19 2014, 03:06 AM
Post #11





Group: Members
Posts: 1
Joined: 17-January 14
Member No.: 20,245



Hello,

I am trying to customise the Cargo theme in tumblr.
and i would like to put a title in photos/photosets/videos that would appear in home page (grid) under the thumb.

although i understood what you proposed doing by turning caption's first line into a title,
but i am having difficulties in orienting my self through the CSS and HTML to add the appropriate code.

If you can help me with this i would appreciate it a lot.

tell me if you need more info on what i am trying to do.
best

Petros
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: 28th March 2024 - 11:51 PM