• Help me with my tumblr layout
    4 replies, posted
Here's the template I'm using: [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!--Version 2.5.0 --> <title>{Title}{block:PostTitle} &mdash; {PostTitle}{/block:PostTitle}</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="color:Background" content="#AF9970"/> <meta name="color:Text" content="#fff" /> <meta name="color:Links" content="#000"/> <meta name="color:Date" content="#000"/> <meta name="color:Tags" content="#fff"/> <meta name="color:Search Text" content="#000"/> <meta name="color:Search Background" content="#fff"/> <meta name="font:Body" content="'Courier New',Courier,monospace"> <meta name="text:Permalink" content="Permalink"> <meta name="if:Show Search" content="1"> <meta name="if:Show Tags" content="1"> <meta name="if:Show Album Art" content="1"> <meta name="if:Show Tumblr Controls" content="1"> <meta name="if:Push Date" content="1" /> <meta name="if:Light Audio Player" content="1"> <meta name="image:Logo" content=""> <meta name="description" content="{MetaDescription}" /> <link rel="shortcut icon" href="{Favicon}"/> <link rel="alternate" type="application/rss+xml" href="{RSS}"/> <link rel="stylesheet" href="http://static.tumblr.com/9swviqd/jixktfmeu/all.css" media="all" type="text/css" /> <style type="text/css"> <!-- body {background:{color:Background};color:{color:Text};} body, form#search input {font-family:{font:Body};} a {color:{color:Links};} textarea,input {background:{color:Search Background};} .metadata p > a {color:{color:Date};} .post ul.tags li, .post ul.tags li a {color:{color:Tags};} .post .text blockquote {border-left:1px dotted {color:Links};} .post .link h2 > a {border-bottom:3px solid {color:Links};} form#search input {color:{color:Links};background:{color:Background};} form#search input.focus {color:{color:Search Text};background:{color:Search Background};} {block:IfNotShowTumblrControls} iframe#tumblr_controls{display:none;} {/block:IfNotShowTumblrControls} {block:IfPushDate} .metadata {left:-270px;position:absolute;width:250px;} {/block:IfPushDate} {CustomCSS} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/9swviqd/YP7ktfmea/all.js"></script> <script type="text/javascript" src="http://static.tumblr.com/n2yg7bp/cTLkkjmp5/cufon-yui.js"></script> <script type="text/javascript" src="http://static.tumblr.com/n2yg7bp/ilVklwyvz/futura.js"></script> <script type="text/javascript">Cufon.replace('h1, h2, h3, .quote blockquote');</script> </head> <body> <div id="wrapper"> <div id="header"> {block:IfLogoImage}<h1 id="logo"><a href="/"><img src="{image:Logo}" alt="{Title}"/></a></h1>{/block:IfLogoImage} {block:IfNotLogoImage}<h1 id="logo"><a href="/">{Title}</a></h1>{/block:IfNotLogoImage} <ul id="nav"> {block:Description}<li><a href="#" id="about">About</a></li>{/block:Description} <li><a href="/archive">Archives</a></li> <li><a href="{RSS}">Subscribe</a></li> {block:IfShowSearch} <form id="search" action="/search" method="get"> <input type="text" name="q" value="{SearchQuery}" /> <input type="hidden" value="Search" /> </form> {/block:IfShowSearch} </ul> </div> {block:Description} <div id="description"> <a href="#" class="closeinfo"><img src="{PortraitURL-128}" alt="" /></a> <div>{Description}</div> </div> {/block:Description} <div id="content"> {block:SearchPage} <p class="result">{block:NoSearchResults}Sorry! {/block:NoSearchResults}<strong>{SearchResultCount}</strong> result(s) for <strong>{SearchQuery}</strong></p> {/block:SearchPage} {block:TagPage} <p class="result">Posts tagged with <strong>{Tag}</strong></p> {/block:TagPage} {block:Posts} <div class="post {TagsAsClasses}"> <div class="metadata"> {block:NewDayDate} <p class="date">{block:IndexPage}<a href="{Permalink}" class="permalink">{/block:IndexPage}{block:PermalinkPage}<a href="javascript:window.history.go(-1)">{/block:PermalinkPage}{Month} {DayOfMonth}, {Year}</a></p> {block:PermalinkPage}{block:IfShowTags}{block:HasTags} <ul class="tags"> {block:Tags} <li> &mdash; <a href="{TagURL}">{Tag}</a> </li> {/block:Tags} </ul> {/block:HasTags}{/block:IfShowTags}{/block:PermalinkPage} {/block:NewDayDate} {block:SameDayDate} <p>{block:IndexPage}<a href="{Permalink}" class="permalink">{text:Permalink}</a>{/block:IndexPage}</p> {/block:SameDayDate} </div> {block:Text} <div class="text"> {block:Title}<h2>{Title}</h2>{/block:Title} {Body} </div> {/block:Text} {block:Quote} <div class="quote"> <blockquote class="words {Length}">{Quote}</blockquote> {block:Source}<p class="source">&mdash; {Source}</p>{/block:Source} </div> {/block:Quote} {block:Link} <div class="link"> <h2><a href="{URL}">{Name}</a></h2> {block:Description}{Description}{/block:Description} </div> {/block:Link} {block:Video} <div class="video"> {Video-500} {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Video} {block:Audio} <div class="audio"> {block:IfShowAlbumArt}{block:AlbumArt}<p class="albumart"><img src="{AlbumArtURL}" alt="" /></p>{/block:AlbumArt}{/block:IfShowAlbumArt} {block:IfLightAudioPlayer}{AudioPlayerWhite}{/block:IfLightAudioPlayer} {block:IfNotLightAudioPlayer}{AudioPlayerBlack}{/block:IfNotLightAudioPlayer} {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Audio} {block:Photo} <div class="photo"> {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag} {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Photo} {block:Chat} <div class="chat"> {block:Title}<h2>{Title}</h2>{/block:Title} <ul class="conversation"> {block:Lines} <li class="line {Alt}"> {block:Label}<span class="person">{Label}</span>{/block:Label}<span class="person-said">{Line}</span> </li> {/block:Lines} </ul> </div> {/block:Chat} </div> {/block:Posts} {block:Pagination} <div id="pagination"> <p class="previous-next"> {block:PreviousPage}<a href="{PreviousPage}" class="prev">Prev </a>{/block:PreviousPage} <span class="pages">{CurrentPage} / {TotalPages}</span> {block:NextPage}<a href="{NextPage}" class="next">Next</a>{/block:NextPage} </p> </div> {/block:Pagination} </div><!--End Content--> <div class="clear push"></div> </div><!--End Wrapper--> <div id="footer"> {block:IndexPage}<p id="attribution"><a href="http://davesantos.com/futurismo">Futurismo</a> by <a href="http://davesantos.com">Dave Santos</a></p>{/block:IndexPage} </div> <script type="text/javascript">Cufon.now();</script> </body> </html> [/code]And I need to add a fixed watermark aligned to the left side. If someone could just hold my hand a little here...
you might be looking for this forum: [url]http://www.facepunch.com/forumdisplay.php?f=353[/url] add this to header: [code] <style type="text/css"> div#leftpicture { position:absolute; top:0; left:0; width:<length>; height:100%; background-image: url(URL TO IMAGE); background-repeat: no-repeat; } </style> [/code] then just add <div id="leftpicture></div> somewhere other than in the <HEAD> area
Thanks. Wrong forum suurrrrry. I'm running on empty... midterms.
the code i gave you doesn't seem to work i just tried it. ill try to write something new [editline]12:22AM[/editline] the problem is with tumblr. i dont think i can fix it sorry :(
Hmm I've been fiddling and get the same. Thanks for the persistence. [editline]04:23PM[/editline] Let me try a simpler template. [editline]04:23PM[/editline] [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>{Title}</title> <link rel="icon" href="{Favicon}"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> <meta name="viewport" content="width=600"/> <!-- iPhone --> <meta name="description" content="{Description}"/> <!-- DEFAULT COLORS --> <meta name="color:Background" content="#fff"/> <meta name="color:Title Color" content="#333"/> <meta name="color:Link Color" content="#333"/> <meta name="color:Quote Color" content="#666"/> <meta name="color:Link Hover Color" content="#666"/> <meta name="color:Post TItle" content="#666"/> <style type="text/css"> * { margin: 0; padding: 0; } body { color: {color:Text}; font: normal 16px/22px "Helvetica Neue", Helvetica, Arial, sans-serif; background: {color:Background}; text-shadow:0 0 0 #FFFFFF;} pre { font-size: 10px; } a { color:{color:Link Color}; text-decoration: none; padding: 1px 2px; font-weight:bold; } a:hover { color: {color:Link Hover Color}; background: none; } h1 { color:{color:Post Title}; font-weight: normal; margin-bottom:0px; } h2 { color:{color:Post Title}; font-weight: normal; margin-bottom:2px; font-size:30px; line-height:32px; } h3 { color:{color:Post Title}; font-weight: normal !important; margin-bottom:0px; } h4 { color:{color:Post Title}; font-weight: normal; margin-bottom:0px; } img { background: {color:Background} !important; border: 1px solid #999; padding: 9px; margin: 0px; max-width: 500px; } img a { text-decoration: none !important; background: {color:Background} !important; margin: 0px; } .photo a, .disqus a { text-decoration: none !important; background: {color:Background} !important; } .header { margin: 10px 0 0 0; } .header h1 {line-height:56px; font-size:56px; font-weight:500; letter-spacing:-2px; text-transform:uppercase; text-align:center;} .header h1 a { font-weight:normal; } .header h2 {font-size:18px; font-weight:200; letter-spacing:-1px; line-height:22px; text-align:center; } input { border: 1px solid #999; width: 80px; } .wrapper { width: 540px; margin: auto; } .main { margin: 50px 0px; } .datetime { font-size: 12px; line-height: 150%; color: #555; padding: 0 25px 45px 0; text-align: right; } .datetime a { color: #555; font-weight:bold; } .navleft { font-size: 12px; position: relative; float: left; } .navright { font-size: 12px; position: relative; float: right; } .navcenter { font-size: 12px; text-align:center;} .footer { margin-bottom:10px; font-size: 12px; line-height: 14px; text-align:center; color: #333; } .post { padding-bottom: 10px; } .post p { margin:14px 0 14px 0; } .post ul{ list-style:circle; margin:10px 10px 10px 35px; } .post ol{ list-style:decimal; margin:10px 10px 10px 35px; } .post blockquote {color:#444; border-left:5px solid #ccc; margin:25px 30px 15px 10px; padding-left:20px;} .short_quote { margin: 0px; padding: 0px; font-size:48px; line-height: 110%; color: {color:Quote Color}; } .medium_quote { margin: 0px; padding: 0px; font-size:36px; line-height: 115%; color: {color:Quote Color}; } .long_quote { margin: 0px; padding: 0px; font-size:24px; line-height: 130%; color: {color:Quote Color}; } .caption { margin-bottom:10px; font-size:22px; line-height:26px; } a .notes { text-decoration: none !important; background: none; } .notes a { text-decoration: none !important; background: none; } img .notes { margin: 0px; padding: 3px 3px 0px 3px; border: 1px solid #999; } .notes img { margin: 0px; padding: 3px 3px 0px 3px; border: none } ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none; border-bottom: solid 1px #ccc; } ol.notes li.note { border-top: solid 1px #ccc; padding: 10px; } ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; } ol.notes li.note span.action { font-weight: bold; } ol.notes li.note .answer_content { font-weight: normal; } ol.notes li.note blockquote { border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; } ol.notes li.note blockquote a { text-decoration: none; } .disqus { font-family: Georgia, 'Times New Roman', Times !important; size: 16px; line-height:150% !important; color:#333 !important; } form#search { border:0 margin: 0 0 8px 0; } form#search input.button { display: none; } form#search input.text { width: 160px; background: url(http://static.tumblr.com/thpaaos/3JQklzbvh/search.png) no-repeat; border:1px solid #dddddd; margin: 0 0 12px 0; padding: 0 0 0 16px; } .regular_post_body img { max-width: 100%; } {CustomCSS} </style> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} </head> <body> <div class="wrapper"> <div class="header"> <h1><a href="/">{Title}</a></h1> <h2>{Description}</h2> </div> <div class="post"> <div class="navcenter"> <form action="/search" method="get"> <a href="/">home</a>&nbsp;&nbsp;<a href="/archive/">archive</a>&nbsp;&nbsp;<a href="/mobile">mobile</a>&nbsp;&nbsp;<a href="{RSS}">rss</a> </form> </div> </div> <div class="main"> {block:SearchPage} <div class="post"> <div class="datetime"> {SearchResultCount} result(s) </div> searched for <em>{SearchQuery}</em> </div> {/block:SearchPage} {block:Posts} <div class="post"> {block:Regular} {block:Title}<h2><a href="{Permalink}" class="permalink">{Title}</a></h2>{/block:Title} <p style="regular_post_body">{Body}</p> {/block:Regular} {block:Photo} <span class="photo">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}">{LinkCloseTag}</span> <p class="caption">{Caption}</p> {/block:Photo} {block:Quote} <p><span class="{Length}_quote">{Quote}</span></p> {block:Source}<p>&mdash;&nbsp;{Source}</p>{/block:Source} {/block:Quote} {block:Video} {Video-500} <p>{Caption}</p> {/block:Video} {block:Audio} {AudioPlayerGrey} <p>{Caption}</p> {/block:Audio} {block:Link} <h2><a href="{URL}" {Target}>{Name}</a>&nbsp;&rarr;</h2> {block:Description}<p>{Description}</p>{/block:Description} {/block:Link} {block:Conversation} {block:Title}<h2>{Title}</h2>{/block:Title} <p> {block:Lines} {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br /> {/block:Lines} </p> {/block:Conversation} <div class="datetime"> Posted <a href="{Permalink}" class="permalink">{Month} {DayOfMonth}, {Year} at {12Hour}:{Minutes}{AmPm}</a> {block:HasTags}in {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} {block:Pagination} {block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} <br /> {/block:Pagination} {block:SearchPage} | {block:NoteCount}& <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} <br /> {/block:SearchPage} {block:PermalinkPage} || <a href="/">home</a><br /> {/block:PermalinkPage} </div> </div> {/block:Posts} {block:PermalinkPage} {block:PostNotes} <div class="post"> <h3>Notes: </h3> <p>{PostNotes}</p> </div> {/block:PostNotes} <!-- PUT DISQUS COMMENT CODE HERE --> <div class="post disqus"> </div> <!-- END COMMENT CODE --> {/block:PermalinkPage} {block:Pagination} {block:NextPage} <div class="navleft"> &larr;&nbsp;<a href="{NextPage}">Previous</a> </div> {/block:NextPage} {block:PreviousPage} <div class="navright"> <a href="{PreviousPage}">Next</a>&nbsp;&rarr; </div> {/block:PreviousPage} <div class="navcenter"> <span class="long_quote">Page {CurrentPage} of {TotalPages}</span> </div> {/block:Pagination} {block:PermalinkPagination} {block:PreviousPost} <div class="navleft"> &larr;&nbsp;<a href="{PreviousPost}">previous post</a> </div> {/block:PreviousPost} {block:NextPost} <div class="navright"> <a href="{NextPost}">next post</a>&nbsp;&rarr; </div> {/block:NextPost} {/block:PermalinkPagination} </div> <div class="post"> <div class="footer"> <form id="search" action="/search" method="get"> <input class="text" type="text" name="q" value="Search '{Title}'" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/> <input class="button" type="submit" value="Search"/> </form> <P>{Title} using <a href="http://www.tumblr.com/theme/561">If This, Then Theme</a>.</p> </div> </div> </div> </body> </html> [/code] [editline]04:26PM[/editline] hey thanks anyway
Sorry, you need to Log In to post a reply to this thread.