Tumblr needs tweaking |
Tumblr needs tweaking |
skjonn |
Apr 14 2011, 12:05 AM
Post
#1
|
Group: Members Posts: 1 Joined: 13-April 11 Member No.: 14,328 |
Hi there, I have a tumblr theme that doesn't allow for permalinks for video entries. I really want to add a small link for the permalink page underneath each post, maybe have it fade in whenever you hover over the post.
My tumblr page is blackmilklove.tumblr.com and this is the html: <html> <head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script> <!-- DEFAULT COLORS --> <meta name="color:Header Background" content="#1B1B1B"/> <meta name="color:Text" content="#1B1B1B"/> <meta name="color:Links" content="#1B1B1B"/> <meta name="color:Accent" content="#ABADB3"/> <meta name="font:Body" content="Helvetica"/> <meta name="if:Endless Scroll" content="0"/> <meta name="if:Show Icon" content="0"/> <meta name="if:Grid Layout" content="0"/> <link rel="shortcut icon" href="{Favicon}"> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <style type="text/css"> body{ text-align:justify; font-family:{font:Body}; font-size: 11px; color:{color:text}; background-color:#fff; } ::-webkit-scrollbar-thumb:vertical { background-color:#1B1B1B; height:100px; } ::-webkit-scrollbar-thumb:horizontal { background-color:#1B1B1B; height:10px !important; } ::-webkit-scrollbar { height:10px; width:10px; background-color:#fff; } .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;} a{ text-decoration:none; -moz-transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 0.5s ease-in; color:{color:links}; } {block:PermalinkPage} a:hover{ color:#c8c8c8; -moz-transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 0.5s ease-in; } {/block:PermalinkPage} div.post img.permalink { border-width: 0px; width: 23px; height: 9px; position: absolute; top: 5px; right: 5px; display: none; } div.post:hover img.permalink { display: block; } img { border:none; margin:0px; padding:0px; } a img { -webkit-transition: opacity 0.3s linear; border-width:0; outline: none !important; } {block:IndexPage} a img:hover{ opacity:0.6; -webkit-transition: opacity 0.3s linear; } {/block:IndexPage} {block:IfGridLayout} #entry{ -webkit-transition: opacity 0.3s linear; display: inline-block; overflow:hidden; float:left; {block:IndexPage} width:180px; height:180px; {/block:IndexPage} {block:PermalinkPage} width:500px; {/block:PermalinkPage} margin:0px 25px 15px 0px; {/block:IndexPage} } {block:IndexPage} #entry:hover{ -webkit-transition: opacity 0.3s linear; opacity:0.6; } {/block:IndexPage} #entry img{ {block:IndexPage} text-align:center; display: block; margin:auto; max-width:180px; max-height:170px; {/block:IndexPage} {block:PermalinkPage} width:500px; {/block:PermalinkPage} } {/block:IfGridLayout} {block:IfNotGridLayout} #entry{ -webkit-transition: opacity 0.3s linear; margin-bottom:30px; width:500px; } #entry img{ width:500px; } {block:IndexPage} #entry:hover{ -webkit-transition: opacity 0.3s linear; opacity:0.6; } {/block:IndexPage} {/block:IfNotGridLayout} .blogtitle{ {block:IfShowIcon}padding:50px 30px 50px 30px;{/block:IfShowIcon} {block:IfNotShowIcon}padding:75px 30px 75px 30px;{/block:IfNotShowIcon} background:{color:Header Background}; -webkit-text-stroke: 1px transparent; text-align:center; font-size:17px; font-weight:bold; } .blogtitle a{ color:#fff !important; } #portrait { margin:auto; width: 128px; height: 128px; background-image:url({PortraitURL-128}); -moz-border-radius: 64px; -webkit-border-radius: 64px; } .title, .h2{ font-weight:bold; font-size:16px; line-height:20px; text-align:left; } .buttons{ float:left; margin-right:10px; width:40px; font-size: 11px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f5f5f5; text-align: center; padding: 4px 10px 3px 10px; border: 0px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-style: solid; border-color: #e4e4e4; border-width: thin; } .buttons:hover{ background:#ddd; } .pagination { height:20px; border-top:0px !important; border-bottom:1px solid {color:Accent}; } .description{ text-align:left; font-size:11px; line-height:14px; border-bottom:1px solid {color:Accent}; padding:20px 40px 20px 20px; background:#fff; } .description a{ text-decoration:underline; } .description ul{ border-left: 1px solid #dadada; list-style: none; margin: 0; padding: 0 0 0 11px; } .links{ font-weight:bold; text-align:left; font-size:12px; border-top:1px solid {color:Accent}; padding:15px 0px 15px 20px; } .quote{ margin-bottom:5px; font-size:11px; font-weight:bold; } .search{ border-style: solid; border-color: #e4e4e4; border-width: thin; width:120px; padding: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px; height: 22px; background-color: #f5f5f5; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .searchbutton{ font-size: 11px; color:#1B1B1B; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f5f5f5; text-align: center; padding: 4px 10px 3px 10px; border: 0px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0 0 0 3px; cursor: pointer; border-style: solid; border-color: #e4e4e4; border-width: thin; } .searchbutton:hover{ background:#ddd; } .searchbox{ padding-bottom:10px; border-bottom:1px solid {color:Accent}; } textarea, input{ outline:none;} .footer{ bottom:0px; position:fixed; left:20px; padding:20px; font-size:11px; color:#888; } .footer a{ color:#888; } .captions{ margin-top:10px; padding:2px; background:#1B1B1B; color:#fff;} .captions a{color:#fff; } {block:IfGridLayout} {block:IndexPage} .audio { width:180px; height:180px; } .player { width:180px; height:180px; position:relative; } .player img { width:180px; height:180px; } .audioplayercircle { -moz-border-radius: 50px; -webkit-border-radius: 50px; position: absolute; z-index: 3; background: white; top: 60px; left: 60px; } .audioplayer { width: 28px; height: 30px; overflow: hidden; margin: 15px 15px 13px 15px; } {/block:IndexPage} {block:PermalinkPage} .audio{ position:relative; overflow:hidden; } .audio img{ float:left; width:100px !important; height:100px !important; margin-right:20px; } .audioplayer{ width: 28px; height: 30px; overflow: hidden; margin: 15px; } .audioplayercircle { -moz-border-radius: 50px; -webkit-border-radius: 50px; position: absolute; left:22px; top:22px; z-index: 3; background: white; } {/block:PermalinkPage} {/block:IfGridLayout} {block:IfNotGridLayout} .audio{ position:relative; overflow:hidden; } .audio img{ float:left; width:100px !important; height:100px !important; margin-right:20px; } .audioplayer{ width: 28px; height: 30px; overflow: hidden; margin: 15px; } .audioplayercircle { -moz-border-radius: 50px; -webkit-border-radius: 50px; position: absolute; left:22px; top:22px; z-index: 3; background: white; } {/block:IfNotGridLayout} div.video embed, div.post div.video object { {block:IfNotGridLayout} width:500px !important; height:300px !important; {/block:IfNotGridLayout} {block:IfGridLayout}{block:IndexPage} width:180px; height:168px;{/block:IndexPage} {block:PermalinkPage} width:500px; height:300px;{/block:PermalinkPage} {/block:IfGridLayout} } #sidebar{ -moz-box-shadow: rgba(0,0,0,0.2) 0px 0px 10px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 0px 10px; -khtml-box-shadow: rgba(0,0,0,0.2) 0px 0px 10px; box-shadow: rgba(0,0,0,0.2) 0px 0px 10px; color:#333; background:#fff; position:fixed; left:0px; top:0; height:100%; width:250px; } #sidebar a{ color:#333; } #content{ position:absolute; left:280px; top:20px; {block:ifGridLayout} {block:IndexPage} margin-top:-5px; width:840px; {/block:IndexPage} {block:PermalinkPage} margin-top:5px; width:500px; {/block:PermalinkPage} {/block:IfGridLayout} {block:IfNotGridLayout} width:500px; {/block:IfNotGridLayout} } ol.notes { border-bottom: solid 1px #eee; padding: 0px; opacity:0.7; font-size:11px; margin: 15px 0px 0px 0px; list-style-type: none; } ol.notes li.note { border-top: solid 1px #eee; padding: 7px 0px 7px 0px; } ol.notes li.note img.avatar { display:none; height:0px; width:0px; } ol.notes li.note span.action { font-weight: normal; } 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; } {CustomCSS} </style> <script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script> <script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script> <script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script> {block:IfEndlessScroll} <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script> {/block:IfEndlessScroll} </head> <body> <div id="sidebar"> <div class="blogtitle">{block:IfShowIcon}<a href="/"><div id="portrait"></div></a>{/block:IfShowIcon}{block:IfNotShowIcon}<a href="/">{Title}</a>{/block:IfNotShowIcon}</div> <div class="links"><a href="/random">shuffle</a></div> <div class="links"><a href="/archive">archive</a></div> <div class="links"><a href="{RSS}">feed</a></div> {block:AskEnabled}<div class="links"><a href="/ask">message</a></div>{/block:AskEnabled} <div class="links"><a href="http://webservd.tumblr.com"><i>webservd</i></a></div> {block:HasPages}{block:Pages}<div class="links"><a href="{URL}">{Label}</a></div>{/block:Pages} {/block:HasPages} <div class="links searchbox"><form action="/search" method="get"> <input type="text" name="q" class="search" value="{SearchQuery}"/> <input type="submit" class="searchbutton" value="Search"/> </form></div> {block:IfNotEndlessScroll} {block:Pagination}<div class="links pagination"> {block:PreviousPage}<div class="buttons"><a href="{PreviousPage}" title="previous page">Newer</a></div>{/block:PreviousPage} {block:NextPage}<div class="buttons"><a href="{NextPage}" title="next page">Older</a></div> {/block:NextPage}</div> {/block:Pagination} {/block:IfNotEndlessScroll} {block:PermalinkPagination} <div class="links pagination"> {block:PreviousPost}<div class="buttons"><a href="{PreviousPost}" title="previous post">Newer</a></div>{/block:PreviousPost} {block:NextPost}<div class="buttons"><a href="{NextPost}" title="next post">Older</a></div> {/block:NextPost}</div> {/block:PermalinkPagination} <div class="footer">Theme created by <a href="http://themesbyrawmoans.tumblr.com"><u>Aiurare</a></u></div> </div> <div id="content"> {block:IfEndlessScroll} <div class="autopagerize_page_element"> {/block:IfEndlessScroll} {block:Posts} <div id="entry"> {block:IfGridLayout}{block:IndexPage} <div style="display: table; height: 180px; width: 180px; _position: relative; overflow: hidden;"> <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> <p style=" _position: relative; _top: -50%">{/block:IndexPage}{/block:IfGridLayout} {block:Text} {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title} {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{Body}{block:IndexPage}</a>{/block:IndexPage} {/block:Text} {block:Photo} <a href="{Permalink}"> {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage} <img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"/> {block:IndexPage}</a>{/block:IndexPage} {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage} {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage} {/block:Photo} {block:Photoset} {Photoset-500} {/block:Photoset} {block:Quote} {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<div class="quote">"{Quote}"</div> {block:Source}— {Source}{/block:Source}{block:IndexPage}</a>{/block:IndexPage} {/block:Quote} {block:Link} <div class="h2"><a href="{URL}">→ {Name}</a></div>{block:Description}{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{Description}{block:IndexPage}</a>{/block:IndexPage} {/block:Description} {/block:Link} {block:Chat} {block:Title}<b><a href="{Permalink}">{Title}</a></b>{/block:Title} {block:Lines}{block:Label}<b><i>{Label}</i></b> {Line}<br>{/block:Label}{/block:Lines} {/block:Chat} {block:IfGridLayout} {block:IndexPage}{block:Audio} <div class="audio"> <div class="player"> <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div> <div class="overlay"></div> <a href="{Permalink}">{block:AlbumArt}<img src="{AlbumArtURL}" />{/block:AlbumArt}</a> </div> </div> {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage} {/block:Audio}{/block:IndexPage} {block:PermalinkPage}{block:Audio} <div class="audio"> {block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50" height="50"></a> {/block:AlbumArt} <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div> <div style="display: table; height: 100px; width: 380px; _position: relative; overflow: hidden;"> <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> <p style=" _position: relative; _top: -50%">{/block:IndexPage}{block:Caption}{Caption}</p></div></div>{/block:Caption} </div> {/block:Audio}{/block:PermalinkPage} {/block:IfGridLayout} {block:IfNotGridLayout} {block:Audio} <div class="audio"> {block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50" height="50"></a> {/block:AlbumArt} <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div> <div style="display: table; height: 100px; width: 380px; _position: relative; overflow: hidden;"> <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> <p style=" _position: relative; _top: -50%">{/block:IndexPage}{block:Caption}{Caption}</p></div></div>{/block:Caption} </div> {/block:Audio} {/block:IfNotGridLayout} {block:Answer}{block:IndexPage}<a href="{Permalink}">{/block:IndexPage} <b>{Asker}: {Question}</b> {Answer}{block:IndexPage}</a>{/block:IndexPage} {/block:answer} {block:Video} <div class="video"> {Video-500} </div> {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage} {/block:Video} {block:PermalinkPage} <div class="captions">{block:Date}{NoteCountWithLabel}{/block:Date}{block:HasTags} | Tags: {block:Tags}<a href="{TagURL}"><u>{Tag}</u></a> {/block:Tags} {/block:HasTags}</div>{/block:PermalinkPage} {block:PostNotes} {PostNotes} {/block:PostNotes} {block:IfGridLayout}{block:IndexPage}</p></div></div>{/block:IndexPage}{/block:IfGridLayout} </div> {/block:Posts} {block:IfEndlessScroll}</div>{/block:IfEndlessScroll} </div> </body> </html> |
Christian J |
Aug 29 2011, 08:02 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Thread moved to General Webdesign.
Off-topic posts moved to their own thread: http://forums.htmlhelp.com/index.php?showtopic=14719 |
Lo-Fi Version | Time is now: 27th April 2024 - 09:41 PM |