factorystyling.tumblr.com
Im doing my friends tumblr. I took a theme and edited it. 2 things i need to fix...if i make a single post. theres no code to click the picture and open it in another window. Its unclickable. & With lightbox, when i view big pictures in lightbox it a skews the big pictures ... see the most recent most. How can i fix this? This is my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<!--
✧ "Opaque" is a theme for Tumblr.com, designed by
✧ JASON LUCAS
✧ http://andbamnan.tumblr.com
✧ http://opaque-theme.tumblr.com
✧ http://www.tumblr.com/theme/31524
-->
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}</title>
<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{PostSummary}{/block:PermalinkPage}" />
<meta name="author" content="Jason Lucas" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css" />
<!-- Customizable Options -->
<meta name="color:Text" content="#979797"/>
<meta name="color:Links" content="#000000"/>
<meta name="font:Body" content="Helvetica"/>
<meta name="font:Header" content="Helvetica"/>
<meta name="if:Infinite Scroll" content="1" />
<meta name="if:Show Ask" content="1" />
<meta name="if:Show Archive" content="1" />
<meta name="if:Show RSS" content="1" />
<style type="text/css">
/*General Markup */
body {
color: {color:Text};
font-size: 10px;
font-family: {font:Body};
line-height: 15px;
letter-spacing: 1px;
cursor: default;
background: #FFFFFF;
background-image: url();
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background-color: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #ffffff;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
::-webkit-scrollbar-thumb:window-inactive {
background-color: #ffffff;
}
a img, a img:hover {
border-width: 0px;
background-color: #FFF;
}
*:active, *:focus {
outline: 0px;
}
a {
font-family: {font:Header};
color: {color:Links};
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
font-style: normal;
font-size: 8px;
}
a.photo:hover {
background-color: #FFF;
}
img {
max-width: 530px;
opacity: 0.85;
border: 0;
filter:alpha(opacity=85);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}
h1 {
font-family: {font:Header};
text-transform: uppercase;
}
h2 {
font-family: {font:Header};
text-transform: uppercase;
}
h3 {
font-family: {font:Header};
text-transform: uppercase;
}
hr {
color: #FFF;
background-color: #FFF;
border: 0px dotted #ffffff;
margin: 15px 0;
border-style: dotted none none;
}
ol, ul {
padding: 0 0 0 10px;
margin: 0 0 8px 0;
}
p {
margin: 0;
padding-bottom: 8px;
}
blockquote, li blockquote {
border-left: 0px solid #ffffff;
padding: 0 0 0 10px;
margin: 0 0 8px 0;
}
blockquote > p:first-child {
padding: 0;
}
pre code {
font-family: 'Courier New', Courier, monospace;
background: #ffffff;
}
b, strong {
font-weight: normal;
color: #000000;
}
i, em {
font-family: {font:Header};
font-size: 10px;
font-style: italic;
}
.bull {
padding: 0 15px 0 15px;
}
.bull2 {
padding: 0 60px 0 60px;
}
.space {
padding-left: 15px;
}
.clear {
clear: both;
color: #FFF;
}
.right {
float: right;
}
.center {
width: 100%;
text-align: center;
}
/* End General Markup */
/* Content Container Markup */
#wrapper {
position: relative;
width: 100%;
padding: 0;
text-align: center;
margin: 0px auto;
}
#wrapper #header {
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
}
#wrapper #content {
position: relative;
width: 840px;
height: 100%;
margin: 50px auto 50px auto;
}
/* End Content Container Markup */
/* Header Markup */
.headbox {
width: 100%;
position: center;
overflow: hidden;
text-align: center;
background-color: #FFF;
border-bottom: 0px dotted #ffffff;
}
.headboxtitle {
text-transform: uppercase;
color: #000;
font-family: {font:Header};
padding: 20px;
border-bottom: 0px dotted #ffffff;
background-color: #ffffff;
}
.headboxtext {
width: 840px;
margin: 10;
text-align: center;
padding: 0px;
font-family: {font:Header};
text-transform: uppercase;
}
.headboxtext img {
display: none;
}
.headboxinfo {
padding: 0px;
border-top: 0px dotted #ffffff;
background-color: #Ffffff;
font-family: {font:Header};
}
.headboxtitle i, .headboxtitle em, .headboxtext i, .headboxtext em, .headboxinfo i, .headboxinfo em {
text-transform: lowercase;
font-size: 10px;
font-style: italic;
color: #ffffff;
}
/* End Header Markup */
/* Entry Markup */
.entry {
position: relative;
float: center;
text-align: center;
display: inline-block;
margin: 15px;
width: 250px;
background-color: #FFF;
-webkit-border-radius:4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-moz-box-shadow: 0px 2px 2px #ffffff;
-webkit-box-shadow: 0px 2px 2px #ffffff;
box-shadow: 0px 2px 2px #ffffff;
{block:PermalinkPage}
position: relative !important;
width: 500px;
background-color: transparent;
{/block:PermalinkPage}
}
.entry img {
display: block;
}
.entrytitle {
text-transform: uppercase;
color: #000;
font-family: {font:Header};
padding: 10px;
border-bottom: 1px dotted #ffffff;
background-color: #ffffff;
}
.entrytext {
padding: 10px;
text-align: center;
position: relative;
}
.entrytext hr {
margin-top: 2px;
}
.entrytext img {
{block:IndexPage}
max-width: 250px;
{/block:IndexPage}
{block:PermalinkPage}
max-width: 500px;
{/block:PermalinkPage}
margin: 7px 0 7px -10px;
}
.entrytags {
padding: 10px;
text-align: justify;
position: relative;
border-top: 1px dotted #ffffff;
}
.entrytags a {
font-style: italic;
text-transform: lowercase;
font-size: 10px;
color: #ffffff;
margin-right: 10px;
display: inline-block;
padding-left: 15px;
background-image: url();
background-repeat: no-repeat;
}
.tags {
min-height: 15px;
height: 15px;
display: block;
overflow: hidden;
}
.entryinfo {
padding: 10px;
border-top: 1px dotted #ffffff;
background-color: #ffffff;
font-family: {font:Header};
}
/* End Entry Markup */
/* Photo Entry Markup */
.photoinfo {
font-family: {font:Header};
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}
{block:IndexPage}
.entry:hover .photoinfo {
opacity: 0.9;
filter:alpha(opacity=0.9);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}
{/block:IndexPage}
.photoinfotable {
height: 100%;
width: 100%;
}
.photoinfotd {
text-align: center;
padding: 10px;
width: 100%;
background-color: #FFF;
height: 10px;
}
.photoset .photoset_row .photoset_photo {
margin-left: 5px !important;
margin-top: 5px !important;
}
.photoset_row img {
margin-bottom: -5px;
}
#vignette {
display: none;
}
#tumblr_lightbox {
background-image: url('http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png') !important;
background-color: transparent !important;
}
#tumblr_lightbox img {
opacity: 1;
filter:alpha(opacity=100);
}
#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
-moz-box-shadow: 0px 2px 2px #CCC !important;
-webkit-box-shadow: 0px 2px 2px #CCC !important;
box-shadow: 0px 2px 2px #CCC !important;
}
/* End Photo Entry Markup */
/* Audio Entry Markup */
.audio {
font-family: {font:Header};
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.audioplayer {
-webkit-border-radius: 18px;
border-radius: 18px;
-moz-border-radius: 18px;
height: 38px;
width:38px;
overflow: hidden;
background-color: #FFF;
position: absolute;
text-align: center;
top: 33px;
left: 33px;
opacity: 0.9;
filter:alpha(opacity=0.9);
}
.albumart {
width: 100px;
height: 100px;
float: left;
background-color: #FFF;
-moz-box-shadow:inset 3px 2px 20px #ffffff;
-webkit-box-shadow:inset 3px 2px 20px #ffffff;
box-shadow:inset 3px 2px 20px #ffffff;
}
/* End Photo Entry Markup */
/* Permalink Markup */
.permbox {
width: 280px;
position: relative;
overflow: hidden;
margin: 15px 15px 0 0;
background-color: transparent;
float: right;
}
.perminfo {
padding: 10px;
border-bottom: 1px dotted #ffffff;
font-family: {font:Header};
text-align: justify;
}
/* End Permalink Markup */
#pagination {
{block:IfInfiniteScroll}
display: none;
{/block:IfInfiniteScroll}
font-family: {font:Header};
width: 100%;
padding: 10px 0 0 0;
text-transform: uppercase;
margin-top: 50px;
background-color: #ffffff;
border-top: 1px dotted #ffffff;
position: relative;
bottom: 0px;
left: 0px;
/*display: none;*/
}
#infscr-loading {
z-index: 5000;
position: fixed;
text-align: left;
background-color: transparent;
margin-left: 845px;
bottom: 40px;
text-transform: uppercase;
}
#top-link {
position: fixed;
z-index: 5000;
width: 120px;
padding: 5px;
border-bottom: 1px dotted #ffffff;
right: 0;
bottom: 33px;
background-color: {color:Background};
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
}
/* Theme Credit -- Please do not delete */
#themecredit {
position: fixed;
z-index: 5;
background: transparent;
padding: 10px;
bottom: 0;
right: 0;
}
/* End Theme Credit */
/* Notes Markup */
ol.notes {
border-top: 1px dotted #ffffff;
text-align: justify;
text-transform: none;
width: 500px;
list-style-type: none;
margin: 30px 0 30px 15px;
padding: 30px 0;
}
ol.notes img.avatar {
margin: 5px 10px -4px 10px;
-moz-box-shadow: 0px 2px 2px #ffffff;
-webkit-box-shadow: 0px 2px 2px #ffffff;
box-shadow: 0px 2px 2px #EFEFEF;
}
ol.notes blockquote {
margin: 0 0 0 40px !important;
}
ol.notes blockquote a {
text-decoration: none;
}
li.note.more_notes_link_container {
padding-top: 30px;
}
/* End Notes Markup */
/* Your Custom CSS from the Tumblr Customize -> Advanced Options goes in here */
{CustomCSS}
/* End Your Custom CSS from the Tumblr Customize -> Advanced Options goes in here */
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/glziqhp/DMKlqoahr/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/df28qmy/Mpalh3i8p/jquery.scrollto-1.4.0-min.js" type="text/javascript"></script>
{block:IfInfiniteScroll}<script src="http://static.tumblr.com/glziqhp/dTTlsbw8e/jquery.infinitescroll.min.js"></script>{/block:IfInfiniteScroll}
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="headbox">
<div class="headboxtitle">
<h1><a href="/">{Title}</a>
</div>
<div class="headboxtext">
{Description}
</div>
<div class="headboxinfo">
{block:IfShowAsk}<a href="/ask">Contact</a>{/block:IfShowAsk}
{block:IfShowArchive}<span class="bull">∖</span><a href="/archive">Archive</a>{/block:IfShowArchive}
{block:IfShowRSS}<span class="bull">∖</span><a href="{RSS}">RSS</a>{/block:IfShowRSS}
{block:HasPages}{block:Pages}<span class="bull">∖</span><a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
</div>
</div>
</div>
<div id="content">
{block:Posts}
{block:Text}
<div class="entry">
<div class="entrytitle">
<h3>{block:Title}<a href="{Permalink}" target="new">{Title}</a>{/block:Title}</h3>
</div>
<div class="entrytext" style="margin-bottom: -8px !important;">
{Body}
</div>
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF; border-bottom: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Text}
{block:Photo}
<div class="entry" margin="15px !important;">
{block:IndexPage}
<img src="{PhotoURL-250}" alt="{PhotoAlt}" width="250px">
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px">{LinkCloseTag}
{/block:PermalinkPage}
{block:IndexPage}
<div class="photoinfo">
<table class="photoinfotable">
<tr><td></td></tr>
{block:HasTags}
<hr style="margin: 5px -10px; border-color: #CCC; width: 250px;">
<div class="entrytags" style="padding: 0; border: 0; text-align: center;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
<tr><td></td></tr>
</table>
</div>
{/block:IndexPage}
</div>
{block:PermalinkPage}
<div class="permbox">
{block:HasTags}
<div class="entrytags" style="border: 0 !important;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
<div class="entrytext">
{Caption}<br><br>
</div>
</div>
{/block:PermalinkPage}
<img src="http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png" style="display: none;">
{/block:Photo}
{block:Audio}
<div class="entry">
<div class="entrytitle">
<h3><a href="{Permalink}" target="new">{block:TrackName}{TrackName}{/block:TrackName}</a></h3>
</div>
<div class="entrytext" style="height: 100px; padding: 0;">
<div class="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}" class="albumart" style="margin: 0 !important;">
{/block:AlbumArt}
</div>
<div class="audioplayer">
<div style="margin: 5px 0 0 5px; width: 18px; overflow:hidden;" id="{postID}">
{AudioPlayerWhite}
</div>
</div>
<div style="padding: 10px 10px 10px 110px;">
<p>{block:Artist}<i>by</i> <a href="http://www.last.fm/music/{Artist}" target="new">{Artist}</a>{/block:Artist}</a></p>
<hr>
{block:IndexPage}
<span class="right" style="font-family: {font:Header};">{PlayCount} plays</span>
{/block:IndexPage}
</div>
</div>
{block:HasTags}
<div class="entrytags">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{block:PermalinkPage}
<div class="permbox">
<div class="perminfo">
</div>
<div class="entrytext">
{Caption}
</div>
</div>
{/block:PermalinkPage}
{/block:Audio}
{block:Quote}
<div class="entry">
<div class="entrytitle">
<h3><a href="{Permalink}" target="new">"{Quote}"</a></h3>
</div>
<div class="entrytext" style="text-align: right !important;">
{block:Source}~ {Source}{/block:Source}
</div>
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Quote}
{block:Chat}
<div class="entry">
<div class="entrytitle">
<h3>{block:Title}<a href="{Permalink}" target="new">{Title}</a>{/block:Title}</h3>
</div>
<div class="entrytext" style="margin-bottom: -8px !important;">
<table cellspacing="0">
{block:Lines}
<tr>{block:Label}<td class="name line{UserNumber}" style="padding-right: 10px; text-align: right;"><h1 style="margin-bottom: 8px;">{Label}</h1></td>{block:Label}<td class="words line{UserNumber}" style="padding-bottom: 8px;">{Line}</td></tr>
{/block:Lines}
</table>
</div>
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Chat}
{block:Video}
<div class="entry">
{Video-250}
{block:Caption}
<div class="entrytext" style="margin-bottom: -8px !important;">
<div class="caption">{Caption}</div>
</div>
{/block:Caption}
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Video}
{block:Answer}
<div class="entry">
<div class="entrytitle">
<b>{Asker} asked:</b>
</div>
<div class="entrytext" style="margin-bottom: -8px !important;">
<p>{Question}</p>
<hr>
<i>{Answer}</i>
</div>
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Answer}
{block:Link}
<div class="entry">
<div class="entrytitle">
<h3><a href="{URL}" target="new">{Name}</a></h3>
</div>
<div class="entrytext" style="margin-bottom: -8px !important;">
{Description}
</div>
{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
</div>
{/block:Link}
{block:Permalink}
<div class="clear"> </div>
{PostNotes}
{/block:Permalink}
{block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}--> {/block:ContentSource}
{/block:Posts}
</div>
<div class="clear"></div>
<a href="#"><div id="top-link"><span class="top-link">Scroll To Top</span></div></a>
<div id="themecredit">
<a href="http://opaque-theme.tumblr.com/" target="new"></a> <i></i> <a href="http://andbamnan.tumblr.com"></a>
</div>
<ul id="pagination">
<li>
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}{lang:PREV}{block:PreviousPage}</a>{/block:PreviousPage}
<span class="bull">✧</span>
{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">{/block:NextPage}{lang:NEXT}{block:NextPage}</a>{/block:NextPage}
{/block:Pagination}
</li>
</ul>
</body>
<!-- Masonry JS -->
<script type="text/javascript">
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entry',
columnWidth: 280
});
});
$container.infinitescroll({
navSelector : '#pagination', // selector for the paged navigation
nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2)
itemSelector : '.entry', // selector for all items you'll retrieve
loading: {
img: 'http://static.tumblr.com/glziqhp/1hJlo5wh1/ajax-loader__1_.gif',
donetext : ''
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
<!-- End Masonry JS -->
<!-- Scroll To Top JS -->
<script type="text/javascript">
//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.hide(); //in case the user forgot
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$('#top-link').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Scroll To Top JS -->
<!-- jquery CSS fix for old browsers JS -->
<script type="text/javascript">
$(document).ready(function() {
$('.followlinks li:nth-child(4n+4)').css({'margin-right' : '0'});
$('.notes li:last-child').css({'margin-bottom' : '-10px'});
});
</script>
<!-- End jquery CSS fix for old browsers JS -->
</html>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)