Help - Search - Members - Calendar
Full Version: Tumblr HELP / Simple code fix
HTMLHelp Forums > Web Authoring > Web Site Functionality
adammusic
Im having a problem with my tumblr. My picture posts are cut off & not centered in the block. I cant figure out what to change in the code. I want to see the full picture in the blocks. The bottom and right sides are cut off. Please help !! Thanks !!

nothingandfornoreason.tumblr.com

Code :

<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}

<!--
A Fine Line (Grid)
Created by Aiurare
-->

<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>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".postnotes").hide();
//toggle the componenet with class msg_body
jQuery(".viewnotes").click(function()
{
jQuery(this).next(".postnotes").slideToggle(700);
});});
</script>

<!-- DEFAULT COLORS -->
<meta name="color:Text" content="#000000"/>
<meta name="color:Links" content="#8D8D8D"/>
<meta name="color:Accent" content="#000000"/>

<meta name="font:Body" content="Helvetica"/>

<meta name="if:Show Icon" content="0"/>
<meta name="if:Endless Scroll" content="0"/>
<meta name="if:Show Icon" content="0"/>

<style type="text/css">
body{
text-align:center;
font-family:{font:Body};
font-size: 11px;
color:{color:text};
background-color:#000;
}
::-webkit-scrollbar-thumb:vertical {
background-color:{color:Links};
height:100px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:{color:Links};
height:10px !important;
}
::-webkit-scrollbar {
height:10px;
width:5px;
background-color:#000;
}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}

a{
text-decoration:none;
color:{color:Text};
}
{block:PermalinkPage}
a:hover{
color:{color:Text};
}
{/block:PermalinkPage}

img {
border:none;
margin:0px;
padding:0px;
}
a img {
-webkit-transition: opacity 0.3s linear;
border-width:0;
outline: none !important;
}
#entry{
-webkit-transition: opacity 0.1s linear;
display: inline-block;
overflow:hidden;
float:left;
{block:IndexPage}
width:180px;
height:180px;
{/block:IndexPage}
{block:PermalinkPage}
width:560px;
{/block:PermalinkPage}
margin:0px 10px 10px 0px;
{/block:IndexPage}
}
#entry img{
{block:IndexPage}
text-align:center;
display: block;
margin:auto;
min-width:180px;
max-width:250px;
max-height:250px;
min-height:180px;
{/block:IndexPage}
{block:PermalinkPage}
width:560px;
{/block:PermalinkPage}
}

.blogtitle{
width:560px;
font-size:13px;
margin-bottom:15px;
border-bottom:4px solid {color:Accent};
padding-bottom:10px;
text-align:left;
font-weight:bold;
}
.title, h2{
font-weight:bold;
font-size:14px;
line-height:17px;
text-transform:uppercase;
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};
}
.quote{
margin-bottom:5px;
font-size:11px;
font-weight:bold;
}
.search{
border-style: solid;
border-color: #e4e4e4;
border-width: thin;
width:90px;
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;
}
{block:IndexPage}
.audio {
width:180px; height:180px;
}
.art{
width:180px !important;
height:180px !important;
background:#000;
}
.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;
color:#222!important;
margin-bottom:10px;
}

.art{
float:left;
width:100px !important;
height:100px !important;
margin-right:20px;
background:#000;
}
.audio img{ width:100px!important; height:100px!important;}

.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}
div.video embed,
div.post div.video object {
{block:IndexPage}
width:180px; height:168px;{/block:IndexPage}
{block:PermalinkPage} width:570px; height:300px;{/block:PermalinkPage}
}
#footer {margin:20px 0px 0px 0px; text-align:center; }
#pagination { float:left; width:500px; margin:20px 0px 20px 0px; padding:0px 0px 0px 0px; text-align:left; letter-spacing:1px;}
#pagination a {padding:3px;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */}
#pagination a:hover { background:#E3E3E3;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ }
.current_page { padding:3px; background:{color:Links};}
ul{
margin:0 0 5px 0;
padding:0 0 10px 0;
}
ul h1{
text-align:left;
margin:0px 0 10px 0;
padding:0 0 10px 0;
font-size:13px;
border-bottom:1px solid {color:Accent};
}
li.portrait{
border-top:4px solid {color:Accent};
padding-top:15px;
margin-top:25px;
}
h1.sidebar{
{block:IfNotShowIcon}border-bottom:4px solid {color:Accent};{/block:IfNotShowIcon}
{block:ifShowIcon}border-bottom:1px solid {color:Accent};{/block:ifShowIcon}
}
li{
list-style-type:none;
margin-bottom:5px;
padding:0;
line-height:17px;
}
li a{
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
color:{color:Links};
}
#sidebar{
float:right;
width:128px;
}
#sidebar a:hover{
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
color:{color:Text};
}
.postnotes{
margin:auto;
width:570px;
}
.viewnotes{
cursor:pointer;
height:15px;
float:right;
}
#entry:hover .notecount{
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
opacity:1 !important;
background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
}
.notecount{
background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
-webkit-text-stroke: 1px transparent;
font-weight:bold;
z-index:1000;
font-size:30px;
opacity:0;
display:table;
position:absolute;
height:180px;
overflow:hidden;
width:180px;
text-align:center;
}
#container{
margin:50px auto 0 auto;
width:725px;
}
#posts{
width:570px;
float:left;
}
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}
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23090799-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>

<body>

<div id="container">




{block:IfEndlessScroll}
<div class="autopagerize_page_element">
{/block:IfEndlessScroll}

{block:Posts}
<div id="entry">

{block:IndexPage}{block:Date}<a href="{Permalink}"><div class="notecount"><div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%"></p></div></div></a>{/block:Date}{/block:IndexPage}


{block:Text}
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{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}
<div class="quote">"{Quote}"</div>
{block:Source}<p>— {Source}</p>{/block:Source}
{/block:Quote}

{block:Link}
<h2><a href="{URL}">&raquo; {Name}</a></h2>{block:Description}
{Description}
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<b><a href="{Permalink}">{Title}</a></b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
{/block:Chat}


{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}"><div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}"></a>
{/block:AlbumArt}</div></a>
</div>
</div>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{/block:Audio}{/block:IndexPage}
{block:PermalinkPage}
{block:Audio}
<div class="post audio">
<div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50" height="50"></a>
{/block:AlbumArt}</div>
<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}({PlayCountWithLabel})</p></div></div>{/block:Caption}
</div>
{/block:Audio}
{/block:PermalinkPage}


{block:Answer}
<b>{Asker}: {Question}</b>
{Answer}
{/block:answer}

{block:Video}
<div class="video">
{Video-500}
</div>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:PermalinkPage}
{block:Date}{/block:Date}{block:HasTags}<br>Tags:&nbsp;{block:Tags}<a href="{TagURL}"><span style="border-bottom:1px solid {color:Links}; color:{color:Text}; line-height:14px;">{Tag}</span></a>&nbsp;&nbsp;{/block:Tags}
{/block:HasTags}
{block:PostNotes}<div class="viewnotes">View Notes</div>{/block:PostNotes}
<div class="postnotes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}


</div>
{/block:Posts}

{block:IfEndlessScroll}</div>{/block:IfEndlessScroll}

{block:IfNotEndlessScroll}
{block:Pagination}<div id="footer"><div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">&laquo; Previous</a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}

{block:NextPage}
<a href="{NextPage}">Next &raquo;</a>
{/block:NextPage}</div></div>
{/block:Pagination}
{/block:IfNotEndlessScroll}
</div></div>
</body>
</html>
adammusic
bump
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.