TUMBLR / How to add a Title above an Image on a Photo/Phoset post |
TUMBLR / How to add a Title above an Image on a Photo/Phoset post |
IndianaStyle |
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] |
IndianaStyle |
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. |
Lo-Fi Version | Time is now: 25th April 2024 - 12:37 PM |