Code mouseover

Fermé
berber21 - Modifié par berber21 le 20/11/2011 à 18:00
Bonjour à tous,

J'ai un tumblr et j'ai remarqué sur un thème dont j'ai le code un truc plutôt cool. Lorsque vous passez la souris sur vos photo, un bandeau apparaît sur le côté avec des infos sur la photo.

Je voudrais donc intégrer ce petit "mouseover"
Pouvez-vous m'aidez à l'incruster?

Voici le code du thème où le "mouseover" est intégré, mais je ne vois que partiellement les codes et je n'arrive pas à avoir un résultat esthétiquement parlant concluant sur mon thème à moi.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- ----------------------------------
Theme Absolute by Max Davis, 2011.
http://themes.themaxdavis.com
---------------------------------- -->

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="color:Background" content="#fff"/>
<meta name="color:Center" content="#fff"/>
<meta name="color:Text" content="#B3B3B3"/>
<meta name="color:Title" content="#777777"/>
<meta name="color:Link" content="#777777"/>
<meta name="color:Hover" content="#777777"/>

<meta name="image:Background" content="http://static.tumblr.com/8jq17g7/DVwlrxkj5/bg_body.gif" />

<meta name="if:infinite scrolling" content="1"/>
<meta name="if:2 Columns" content="0"/>
<meta name="if:3 Columns" content="0"/>
<meta name="if:Shadow" content="1"/>
<meta name="if:Round Borders" content="1"/>
<meta name="if:Lobster Font" content="1"/>
<meta name="if:Open Sans Font" content="0"/>
<meta name="if:Center Light Transparent" content="0"/>
<meta name="if:Center Dark Transparent" content="0"/>
<meta name="if:Show Captions" content="0"/>
<meta name="if:Show Submit" content="0" />
<meta name="if:Show RSS" content="0" />
<meta name="if:Show Archive" content="0" />
<meta name="if:Show Random" content="0" />

<meta name="text:Next Page" content="Next Page" />
<meta name="text:Previous Page" content="Previous Page" />
<meta name="text:Ask Title" content="Ask" />
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
<meta name="robots" content="noindex"/>
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>

<style type="text/css">
iframe#tumblr_controls {top: 1px !important;margin: 0 0 0 0;right:4px !important;position:fixed !important;}#install_theme{opacity:0.75;position:fixed;right:6px; top:27px;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;display:none;}

a{color:{color:Link};text-decoration:none;-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
a:hover{color:{color:Hover};-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
:-moz-any-link:focus{outline: none;}
img{border:none;}

body{
background:{color:background} url({image:Background}) repeat center top;
background-attachment: fixed;
color: {color:text};
font-family: 'open sans', arial, sans-serif;
font-size: 10px;
line-height: 12px;
overflow-x:hidden;
margin:0px;
text-align: left;}

#center{
margin:10px auto 20px;
position:relative;
{block:if2columns}width:760px;{/block:if2columns}
{block:ifNot2columns}width:380px;{/block:ifNot2columns}
{block:if3columns}width:840px;{/block:if3columns}}

#content{
margin-top:5px;
{block:if2columns}width:760px;{/block:if2columns}
{block:ifNot2columns}width:380px;{/block:ifNot2columns}
{block:if3columns}width:840px;{/block:if3columns}}

#header{
{block:if2columns}width:730px;{/block:if2columns}
{block:ifNot2columns}width:350px;{block:ifNot2columns}
{block:if3columns}width:810px;{/block:if3columns}
margin:15px 5px 5px;
background-color: {color:center};
overflow:hidden;
padding:10px;
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);
{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.8);{/block:ifCenterDarkTransparent}
{block:ifShadow}
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
{/block:ifShadow}}

#header div.links{
float:right;
{block:ifNot3columns}
{block:if2columns}
width:250px;
{/block:if2columns}
{block:ifNot2columns}
width:350px;margin-top:5px;
{/block:ifNot2columns}
{/block:ifNot3columns}
{block:if3columns}
width:350px;margin-top:0px;
{/block:if3columns}}
#header ul.links{
margin:0;
padding:0;
list-style:none;
{block:ifNot3columns}
{block:if2columns}
width:250px;
{/block:if2columns}
{block:ifNot2columns}
width:350px;
{/block:ifNot2columns}
{/block:ifNot3columns}
{block:if3columns}
width:350px;
{/block:if3columns}}
#header ul.links li{
margin:2.5px;
{block:ifNot3columns}width:100px;{block:ifNot2columns}width:150px;{/block:ifNot2columns}{/block:ifNot3columns}
{block:if3columns}width:150px;{block:if3columns}
padding:5px 10px;
overflow:hidden;
float:left;
background-color:rgba(0,0,0,0.1);
{block:ifRoundBorders}
margin:1.5px;
{block:ifNot3columns}width:102px;
{block:ifNot2columns}
width:152px;
{/block:ifNot2columns}{/block:ifNot3columns}
{block:if3columns}width:152px;{block:if3columns}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.5);{/block:ifCenterDarkTransparent}
-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
#header ul.links li:hover{
background:transparent;
-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
#header #description{max-width:400px;}

.caption{padding:0px 10px;}
.portrait {
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
float:left;}

#entry {
background-color: {color:center};{block:ifNot3columns}
{block:if2columns}
{block:IndexPage}
width:350px;
float:left;
padding:10px;
margin:5px;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
padding:10px;
margin:5px;
float:left;
{/block:PermalinkPage}
{/block:if2columns}
{block:ifNot2columns}
width:350px;
float:left;
padding:10px;
margin:5px;
{/block:ifNot2columns}{/block:ifNot3columns}
{block:if3columns}
{block:IndexPage}
width:250px;
float:left;
padding:10px;
margin:5px;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
padding:10px;
margin:5px;
float:left;
{/block:PermalinkPage}
{/block:if3columns}
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
{block:ifCenterLightTransparent}
background-color:rgba(255,255,255,0.5);
{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}
background-color:rgba(0,0,0,0.8);
{/block:ifCenterDarkTransparent}
{block:ifShadow}
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
{/block:ifShadow}overflow:hidden;}

#entry_photo {
background-color: {color:center};{block:ifNot3columns}
{block:if2columns}{block:IndexPage}width:370px;float:left;padding:0px;margin:5px;{/block:IndexPage}
{block:PermalinkPage}width:400px;padding:10px;margin:5px;float:left;{/block:PermalinkPage}{/block:if2columns}
{block:ifNot2columns}width:370px;float:left;padding:0px;margin:5px;{/block:ifNot2columns}{/block:ifNot3columns}
{block:if3columns}{block:IndexPage}width:270px;float:left;padding:0px;margin:5px;{/block:IndexPage}
{block:PermalinkPage}width:400px;padding:10px;margin:5px;float:left;{/block:PermalinkPage}{/block:if3columns}
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.8);{/block:ifCenterDarkTransparent}
{block:ifShadow}
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
{/block:ifShadow}overflow:hidden;}


h1{
font-family: 'CodeProLightDemoRegular';
font-size: 30px;
font-style:normal;
line-height: 25px;
font-weight:normal;
color: {color:title};}

blockquote{
margin:3px 10px;
color: {color:text};}

#notes{
{block:if2columns}
float: left;
margin: 5px 5px 5px 435px;
padding: 10px;
position: absolute;
width: 300px;
font-size:9px;
{/block:if2columns}
{block:ifNot2columns}
margin:5px;
float:left;
padding: 10px;
width: 350px;
{/block:ifNot2columns}
{block:if3columns}
float: left;
margin: 5px 5px 5px 435px;
padding: 10px;
position: absolute;
width: 380px;
font-size:10px;
{/block:if3columns}
background-color: {color:center};
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);
{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.8);{/block:ifCenterDarkTransparent}
{block:ifShadow}
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
{/block:ifShadow}}
ol.notes {
padding: 0px;
font-weight:normal;
margin: 0px 0px;
list-style-type: none !important;
border-bottom: 0px;
margin-left: 0px;
text-align: left;}
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
display:none;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
.user_7 .label, .user_8 .label, .user_9 .label {font-weight:normal;}

#answer{
margin-top: 8px;
margin-left: -34px;}

.title{
font-family:arial;font-weight:bold;letter-spacing:-1px;text-transform:uppercase;font-size:20px;
{block:ifLobsterFont}font-family: 'Lobster', cursive;font-size: 25px;font-weight:normal;letter-spacing:0px;text-transform:none;{/block:ifLobsterFont}
{block:ifOpensansFont}font-family: 'Open Sans', cursive;font-weight:800;letter-spacing:-1px;text-transform:uppercase;{/block:ifopensansFont}
line-height: 30px;
display:block;
color: {color:title};}

.title_header{
font-family:arial;font-weight:bold;letter-spacing:-1px;text-transform:uppercase;font-size:15px;
{block:ifLobsterFont}font-family: 'Lobster', cursive;font-weight:normal;letter-spacing:0px;text-transform:none;{/block:ifLobsterFont}
{block:ifOpensansFont}font-family: 'Open Sans', cursive;font-weight:800;letter-spacing:-1px;text-transform:uppercase;{/block:ifopensansFont}
font-size: 20px;
line-height: 20px;
display:block;
color: {color:title};margin-bottom:5px;}

.title4{
font-style:normal;
font-family: 'open sans', sans-serif;
font-size:10px;
display:block;
padding:3px 6px;
margin:3px 0;
width:auto;
background-color:rgba(0,0,0,0.1);color:{color:title};
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.5);{/block:ifCenterDarkTransparent}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);{/block:ifCenterLightTransparent}
{block:ifRoundBorders}
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}}

.title5{
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size:17px;display:block;margin:3px 0;color:{color:title};}

.permalink{
height:auto;
margin-top:10px;
padding:7px 0;
line-height:15px;
text-align:center;
border-top:solid 1px rgba(0,0,0,0.1);
overflow:hidden;}

#photo {{block:IndexPage}{block:ifNot3columns}width:370px;{/block:ifNot3columns}{block:if3columns}width:270px;{/block:if3columns}{/block:IndexPage}{block:PermalinkPage}width:400px;{/block:PermalinkPage}overflow:hidden;}
#photo img {max-width:500px;display:block;-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;
{block:ifRoundBorders}{block:IfNotShowCaptions}
-o-border-radius: 3px
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;{/block:IfNotShowCaptions}
{block:IfShowCaptions}
border-top-right-radius:3px;
border-top-left-radius:3px;
{/block:IfShowCaptions}
{/block:ifRoundBorders}}
div#photo div#picture {position:relative;}
div#photo div#picture div#info_2 {
position:absolute;
top:0;
left:0;
opacity:0;
{block:ifNot3columns}
width:185px;
margin-left:370px;
height:100%;{/block:ifNot3columns}
{block:if3columns}
width:135px;
margin-left:250px;
height:100%;{/block:if3columns}
{block:ifNotCenterLightTransparent}
-moz-box-shadow: inset 0 0 100px #000000;
-webkit-box-shadow: inset 0 0 100px #000000;
box-shadow: inset 0 0 100px #000000;
{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}
background:rgba(255,255,255,0.7);
{/block:ifCenterLightTransparent}
{block:ifNotCenterLightTransparent}
background:url(http://static.tumblr.com/8jq17g7/45Blh4wij/_.png);
{/block:ifNotCenterLightTransparent}
visibility:hidden;
z-index:998;
text-align:center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;}
div#photo:hover div#picture div#info_2 {
opacity:1;
{block:ifNot3columns}margin-left:185px;{/block:ifNot3columns}
{block:if3columns}margin-left:135px;{/block:if3columns}
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;}
div#photo div#picture div#info_2 div#holder {
position:absolute;
{block:ifNot3columns}width:185px;{/block:ifNot3columns}
{block:if3columns}width:100px;{/block:if3columns}
top:45%;
height:auto;
text-align:center;
z-index:999;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;}
div#photo div#picture div#info_2 div#holder a,div#photo div#picture div#info_2 div#holder a:hover {
text-decoration:none;}
div#photo div#picture div#info_2 div#holder #day {
font-size:30px;
line-height:15px;}
div#photo div#picture div#info_2 div#holder #month {
font-size:9px;
color:white;margin-left:100px;
{block:ifNot3columns}width:185px;{/block:ifNot3columns}
{block:if3columns}width:135px;{/block:if3columns}
text-transform:uppercase;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;}
div#photo div#picture div#info_2 div#holder #month a {color:white;}
div#photo div#picture div#info_2 div#holder #month a:hover {color:white;}
div#photo div#picture div#info_2 div#holder #note_count {
font-weight:normal;
{block:ifLobsterFont}font-family: 'lobster', sans-serif;{/block:ifLobsterFont}
{block:ifOpensansFont}font-family: 'Open Sans', cursive;font-weight:800;letter-spacing:-1px;text-transform:uppercase;{/block:ifopensansFont}
letter-spacing: -1px;
color:white;margin-left:100px;
{block:ifNot3columns}width:185px;{/block:ifNot3columns}
{block:if3columns}width:135px;{/block:if3columns}
line-height: 10px;
letter-spacing:-0.5px;
font-size:30px;
font-weight:bold;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;}
div#photo:hover div#picture div#info_2 div#holder #note_count{
margin-left:0px;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;}
div#photo:hover div#picture div#info_2 div#holder #month {
margin-left:0px;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
div#photo div#picture div#info_2 div#holder #note_count a {color:white;}
div#photo div#picture div#info_2 div#holder #note_count a:hover{color:white;}
div#photo div#picture:hover div#info_2 {
visibility:visible;}
div#shadowphoto{{block:ifNotCenterLightTransparent}text-shadow: 0 0 0.4em #000, 0 0 0.4em #000,0 0 0.4em #000;{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}text-shadow: 0 0 3px rgba(0,0,0,0.4);{/block:ifCenterLightTransparent}}


.permalink_button{
{block:ifNotCenterLightTransparent}background-color:rgba(0,0,0,0.7);border:1px solid rgba(0,0,0,0.5);color:#fff;{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.5);color:#888;{/block:ifCenterLightTransparent}padding:3px 5px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:3px;border-radius:2px;float:left;{block:ifNot3columns}margin:30px 5px;width:70px;{block:ifNot3columns}{block:if3columns}margin:15px 5px;width:113px;{block:if3columns}}
.permalink_button a{
{block:ifNotCenterLightTransparent}color:#fff;{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}color:#888;{/block:ifCenterLightTransparent}}
.permalink_button a:hover{
{block:ifNotCenterLightTransparent}color:#fff;{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}color:#888;{/block:ifCenterLightTransparent}}
#permalink_button a:hover{
{block:ifNotCenterLightTransparent}color:#fff;{/block:ifNotCenterLightTransparent}
{block:ifCenterLightTransparent}color:#888;{/block:ifCenterLightTransparent}}

.chat {margin-left:-40px;margin-top:0px;}
.chat li {padding:5px;list-style-type:none;
{block:ifRoundBorders}
-o-border-radius: 3px
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}}
.chat li:nth-child(even) {background-color:rgba(0,0,0,0.1);color:{color:Text};{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.5);{/block:ifCenterDarkTransparent}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);{/block:ifCenterLightTransparent}}

.audio {
width:auto;padding:5px;background-color:black;opacity:0.1;
{block:ifCenterLightTransparent}opacity:0.5;background-color:white;
{/block:ifCenterLightTransparent}
{block:ifCenterDarkTransparent}opacity:0.5;
{/block:ifCenterDarkTransparent}
{block:ifRoundBorders}
-o-border-radius: 3px
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}}

#photosidebaradd{
margin-top: -100px;
margin-left: -30px;}

div.padd {
line-height: 11px;
padding-top: 0px;
padding-left: 5px;
margin: 0px;}

.album_art {
{block:IndexPage}width:350px;{block:if3columns}width:250px;{/block:if3columns}{/block:IndexPage}
{block:PermalinkPage}width:400px;{/block:PermalinkPage}
{block:ifRoundBorders}
-o-border-radius: 3px
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}}

.top{position:fixed;bottom:5px;right:5px;padding:2px 5px;{block:ifNotBackToTopButton}display:none;{/block:ifNotBackToTopButton}
{block:ifCenterDarkTransparent}background-color:rgba(0,0,0,0.5);{/block:ifCenterDarkTransparent}
{block:ifCenterLightTransparent}background-color:rgba(255,255,255,0.5);{/block:ifCenterLightTransparent}
{block:ifRoundBorders}
-o-border-radius: 3px
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
{/block:ifRoundBorders}}

{CustomCSS}
</style><script src="http://themaxdavisthemes.com/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
{block:ifBackToTopButton}
<script type="text/javascript">
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>{/block:ifBackToTopButton}
{block:Ifinfinitescrolling}<script src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:Ifinfinitescrolling}
{block:IndexPage}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#entry, #entry_photo',
isAnimated : true
});
});

$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '{block:Ifinfinitescrolling}#entry, #entry_photo{/block:Ifinfinitescrolling}',
donetext : 'The End.',
loadingText : 'Loading...',
loadingImg : '',
extraScrollPx : 50,
bufferPx : 10000,
debug : false,
errorCallback: function() {
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 750, easing: 'linear', queue: false}}, function(){$newElems.fadeIn();} );
});
}); $('#content').show(500);
});
</script>{/block:IndexPage}
</head>
<body>
<div id="center">
<div id="header">
<div class="portrait" style="float:left;"><a href="/" title="Index"><img src="{PortraitURL-48}" /></a></div>
<div style="margin-left:10px;float:left;"><a href="/" title="Index"><div class="title_header">{title}</a></div>
<div id="description">{description}</div></div>
<div class="links">
<ul class="links">
{block:AskEnabled}<a href="/ask"><li>{block:ifasktitle}{text:Ask Title}{/block:ifasktitle}
{block:ifnotasktitle}{AskLabel}{/block:ifnotasktitle}</li></a>{/block:AskEnabled}
{block:ifShowSubmit}<a href="/submit"><li>Submit</li></a> {/block:ifShowSubmit}
{block:HasPages}{block:Pages}<a href="{URL}"><li>{Label}</li></a>{/block:Pages}
{/block:HasPages}
{block:ifLink1Title}
<a href="{text:Link 1}" title="{text:Link 1 Title}"><li>{text:Link 1 Title}</li></a>
{/block:ifLink1Title}
{block:ifLink2Title}
<a href="{text:Link 2}" title="{text:Link 2 Title}"><li>{text:Link 2 Title}</li></a>
{/block:ifLink2Title}
{block:ifLink3Title}
<a href="{text:Link 3}" title="{text:Link 3 Title}"><li>{text:Link 3 Title}</li></a>
{/block:ifLink3Title}
{block:ifLink4Title}
<a href="{text:Link 4}" title="{text:Link 4 Title}"><li>{text:Link 4 Title}</li></a>
{/block:ifLink4Title}
{block:ifLink5Title}
<a href="{text:Link 5}" title="{text:Link 5 Title}"><li>{text:Link 5 Title}</li></a>
{/block:ifLink5Title}
{block:ifShowArchive}<a href="/archive"><li>Archive</li></a> {/block:ifShowArchive}
{block:ifShowRandom}<a href="/random"><li>Random</li></a>{/block:ifShowRandom}
{block:ifShowRSS}<a href="{RSS}"><li>RSS</li></a>{/block:ifShowRSS}
{block:Ifinfinitescrolling}<a href="http://themes.themaxdavis.com/" title="Theme Absolute"><li>Theme</li></a>{/block:Ifinfinitescrolling}
</ul>
</div>
</div>
<div id="content">
<div id="posts">
{block:Posts}
{block:Quote}
<div id="entry">
<center><span class="title">{Quote}</span><br></center>
<center>{block:Source}{Source}{/block:Source}</center>
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Quote}

{block:Text}
<div id="entry">
{block:Title}<span class="title">{Title}</span>{/block:Title}{Body}
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Text}


{block:Link}
<div id="entry">
<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{block:Link}


{block:Answer}
<div id="entry">
<table width="100%" border="0px" cellpadding="0" cellspacing="0">
<tbody style="border-spacing: 0px;">
<td width="30px" style="vertical-align: top; width: 30px; padding: 0px;">
<span class="answer_portrait"><img class="answer_portrait" src="{AskerPortraitURL-30}"/></span></td><td>
<div class="padd" width="100%" style="margin-left:;">
{Asker} asked:<br>
{Question}<br><div class="answer"><div class="text"><em>{Answer}</em></div></div><br>
</div></td></tr></tbody></table>
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Answer}


{block:Photo}
<div id="entry_photo">
<div class="post">
<div id="extraonephoto">
<div id="photo">
{block:IndexPage}
<div id="picture">
{block:Date}
<div id="info_2">
<div id="holder">
<div id="note_count"><a href="{Permalink}"><div id="shadowphoto">{block:ifNot3columns}{NoteCountWithLabel}{/block:ifNot3columns}{block:if3columns}{NoteCount}{/block:if3columns}</div><br></a></div>
<div id="month"><div id="shadowphoto"><a href="{Permalink}">Posted on {DayOfWeek}{block:ifNot3columns}, {DayOfMonth} {Month} {Year}{/block:ifNot3columns}</a>.</div></span><br>
</div>
<center><span id="permalink_button">
<a href="{ReblogURL}" target="_blank" class="permalink_button">Reblog</a>
{block:ifNot3columns}<a href="{Permalink}" class="permalink_button">Permalink</a>{/block:ifNot3columns}</span></center></div></div>{/block:Date}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" {block:ifNot3columns}width="370px" {/block:ifNot3columns}{block:if3columns}width="270px"{/block:if3columns}/></div></div></div></div>{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
{/block:IndexPage}
{block:PermalinkPage}
<center><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="400px"/></center>
</div></div></div>{/block:PermalinkPage}
</div>
{/block:Photo}


{block:Chat}
<div id="entry">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}</li>{/block:Lines}</ul>
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Chat}

{block:Audio}
<div id="entry">
{block:AlbumArt}<img src="{AlbumArtURL}" class="album_art"/>{/block:AlbumArt}
<div class="audio">{block:ifNotCenterLightTransparent}{AudioPlayerBlack}{/block:ifNotCenterLightTransparent}{block:ifCenterLightTransparent}{AudioPlayerWhite}{/block:ifCenterLightTransparent}</div>
<span class="title4">{PlayCountWithLabel}</span>
{block:TrackName}<span class="title4">{TrackName}</span>{/block:TrackName}
{block:Artist}<span class="title4">{Artist}</span>{/block:Artist}
{block:Album}<span class="title4">{Album}</span>{/block:Album}
{block:Caption}<span class="title4">{Caption}</span>{/block:Caption}
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Audio}

{block:Video}
<div id="entry">
{block:ifNot2columns}<center>{Video-250}</center>{/block:ifNot2columns}
{block:if2columns}{block:IndexPage}<center>{Video-250}</center>{/block:IndexPage}
{block:PermalinkPage}{Video-400}{/block:PermalinkPage}{/block:if2columns}
{block:IndexPage}<br>{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>
{/block:Video}

{block:Photoset}
<div id="entry">
{block:ifNot2columns}<center>{Photoset-250}</center>{/block:ifNot2columns}
{block:if2columns}{block:IndexPage}<center>{Photoset-250}</center>{/block:IndexPage}
{block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}{/block:if2columns}
{block:IndexPage}<br>{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}
{block:IndexPage}{block:Date}<div class="permalink">
<a href="{Permalink}">Posted on {DayOfWeek}, {DayOfMonth} {Month}</a>{block:NoteCount} with
<a href="{Permalink}">{NoteCountWithLabel}</a>.{/block:NoteCount}
</div>{/block:Date}{/block:IndexPage}
</div>{/block:Photoset}

{block:PostNotes}<div id="entry">
{block:Caption}{Caption}<div style="height:1px;background-color:black;opacity:0.1;{block:ifCenterDarkTransparent}opacity:0.5;{/block:ifCenterDarkTransparent}width:100%;margin-top:8px;margin-bottom:5px;"></div>{/block:Caption}
{block:NoteCount}<font color="{color:link}">{NoteCountWithLabel}</font><br>{/block:NoteCount}
Posted on <font color="{color:link}">{DayOfWeek}, {DayOfMonth} {Month}</font><br>
{block:HasTags} Tagged as: {block:Tags}<a href="{TagURL}" style="text-decoration:underline;">{Tag}</a>   {/block:Tags}<br>{/block:HasTags}
{block:RebloggedFrom}
Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
Posted by: <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
{/block:RebloggedFrom}
{block:Source}Source: {Source}<br>{/block:Source}
<div style="height:1px;background-color:black;opacity:0.1;{block:ifCenterDarkTransparent}opacity:0.5;{/block:ifCenterDarkTransparent}width:100%;margin-top:8px;margin-bottom:5px;"></div>
<div><div style="position:absolute;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" style="float:left;">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div></div>
<div style="margin-left:63px;">
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&layout=button_count&show_faces=false&width=200&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;
overflow:hidden; width:200px; height:21px;"></iframe>
</div>
</div>
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
{block:IfNotinfinitescrolling}
{block:IndexPage}<div id="entry" align="center">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}" style="margin-right:7px;">{text:Previous Page}</a>
{/block:PreviousPage}

{block:JumpPagination length="8"}
{block:CurrentPage}
<span class="current_page" style="margin:0 2px;">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage}
<a class="jump_page" href="{URL}" style="margin:0 2px;">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}

{block:NextPage}
<a href="{NextPage}" style="margin-left:7px;">{text:Next Page}</a>
{/block:NextPage}
{/block:Pagination}
</div>{/block:IndexPage}

<div id="entry" align="center">Theme <a href="http://themes.themaxdavis.com/">Absolute</a> by <a href="http://themaxdavisthemes.com/">Max Davis</a></div>{/block:IfNotinfinitescrolling}
</div>
</div>
</div>
{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
<div id="install_theme"><a href="http://themes.themaxdavis.com/"><img src="http://static.tumblr.com/8jq17g7/Re3lqefyw/install.png" /></a></div>
</body></html>