The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr needs tweaking
skjonn
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 29 2011, 08:02 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,206
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th August 2019 - 01:42 AM