The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
 Reply to this topicStart new topic
Replies
IndianaStyle
post May 2 2012, 08:39 AM
Post #2





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

Posts in this topic
IndianaStyle   TUMBLR / How to add a Title above an Image on a Photo/Phoset post   May 2 2012, 08:02 AM
Darin McGrew   The code you're trying to add doesn't crea...   May 2 2012, 08:12 AM
IndianaStyle   Hello, Here: http://answers.yahoo.com/question/in...   May 2 2012, 08:39 AM
JCDU   Hey IndianaStyle, I'm the one who answered th...   May 13 2012, 10:11 PM
IndianaStyle   Hey IndianaStyle, I'm the one who answered t...   Jun 4 2012, 10:18 AM
IndianaStyle   [quote name='JCDU' post='67784' date='May 14 2012...   Jun 5 2012, 12:33 PM
JCDU   [quote name='IndianaStyle' post='68219' date='Jun...   Jun 22 2012, 01:05 AM
jules18   Hi JCDU, thanks for sharing your HTML code and C...   Sep 23 2012, 08:01 AM
JCDU   Oh yeah, I just figured out how to turn on email n...   Jun 23 2012, 05:05 PM
JCDU   Sorry, I don't check this often. Private Messa...   Oct 30 2012, 05:39 PM
pphoka   Hello, I am trying to customise the Cargo theme ...   Jan 19 2014, 03:06 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: 25th April 2024 - 08:43 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC