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?qid=20111202212936AAs47Yc 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]
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.
Hello,
Here: http://answers.yahoo.com/question/index?qid=20111202212936AAs47Yc 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.
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.
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 https://chrome.google.com/webstore/detail/okedoojhfbgmhdkfgojckbbhbffcoihm, 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:
Oh yeah, I just figured out how to turn on email notifications for this thread.. the 'track topic' button
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!
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:
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
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)