[go: up one dir, main page]
Scribd
Upload
31 views12 pages

Boop

The document is the HTML and CSS code for a blog template. It includes styling for different page elements like posts, photos, quotes, and more. Styles are included for both index and permalink pages.

Uploaded by

Fabres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views12 pages

Boop

The document is the HTML and CSS code for a blog template. It includes styling for different page elements like posts, photos, quotes, and more. Styles are included for both index and permalink pages.

Uploaded by

Fabres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>

<!--
"Maple & Oak 1.8" by The Theme Shop
http://www.thelayoutshop.net
-->

<meta name="font:Body" content="Arial, Helvetica, sans-serif"/>


<meta name="font:Title" content="Georgia, Times New Roman, serif"/>
<meta name="color:Text" content="#222222">
<meta name="color:Links" content="#ec6d71">
<meta name="color:Hover" content="#f2c9ac">
<meta name="color:Title" content="#252525">
<meta name="color:Background" content="#FFFFFF">
<meta name="color:PostsBackground" content="#FFFFFF">
<meta name="if:Two columns" content="0"/>
<meta name="if:Magnify" content="0"/>
<meta name="if:Use Loading Box" content="1"/>

<meta name="image:Background" content=""/>


<meta name="image:Header" content=""/>
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<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 src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
{block:IndexPage}
<script src='http://dl.dropbox.com/u/10308294/js/jquery.masonry2-0.min.js'
type='text/javascript'></script>
<script type="text/javascript"
src="http://dl.dropbox.com/u/10308294/un/jquery.infinitescroll.min.js"></script>
{/block:IndexPage}

<script type="text/javascript"
src="http://static.tumblr.com/1s4z8hu/1kflriygl/jscriptf-min.js"></script>

<script type="text/javascript">
// Smooth Scroll to Top
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1)
+']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 700);
return false;
}
}
});
});
</script>
<style type="text/css">
body{
overflow-x:hidden;
background:{color:Background} url('{image:background}') fixed;
font-family:{font:Body};
font-size:10px;
letter-spacing:0px;
color:{color:text};
}

a:link, a:visited{
color:{color:links};
text-decoration:none;
}

a:hover{
color:{color:hover};
text-decoration:none;
}

img a{
border:0px !important;
}

#container{
{block:IndexPage}
{block:IfTwoColumns}width:900px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:900px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage} width:500px;{/block:PermalinkPage}
margin:0 auto;
background:{color:PostsBackground};
}

#infscr-loading {
z-index: 5000;
position: fixed;
left: 41%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
text-align:center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
{block:IfNotUseLoadingBox}display:none !important;{/block:IfNotUseLoadingBox}
}

#description{
padding:10px;
width:880px;
{block:PermalinkPage}width:480px;{/block:PermalinkPage}
}

.nav{
font-size:9px;
font-weight:bold;
padding:20px;
}

.description{
padding-top:15px;
font-size:10px;
}

.description h1{
font-family:{font:Title};
color:{color:title};
font-weight:400;
font-size:20px;
text-align:center;
}

#footer{
clear:both;
}

#posts{
margin:0 auto;
{block:IndexPage}
{block:IfTwoColumns}width:900px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:900px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage} width:500px;{/block:PermalinkPage}
background:{color:PostsBackground};
}

.post{
{block:IndexPage}
{block:IfTwoColumns}width:450px /**/{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns}
float:left;
{/block:IndexPage}
{block:PermalinkPage}
{block:IfTwoColumns}width:480px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:480px;{/block:IfNotTwoColumns}
{/block:PermalinkPage}
margin-right:0px;
margin-top:0px;
background:{color:PostsBackground};
}

.post h3{
font-weight:bold;
font-size:11px;
text-transform:uppercase;
padding:5px;
text-align:center;
{block:IndexPage}
{block:IfTwoColumns}width:410px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:260px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage}
{block:IfTwoColumns}width:460px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:460px;{/block:IfNotTwoColumns}
{/block:PermalinkPage}
}

.caption, .notestags{
padding:10px;
{block:PermalinkPage}
{block:IfTwoColumns}width:480px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:PermalinkPage}
}

.text{
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:justify;
}

.text img a{
border:0px !important;
}

.text img{
{block:IndexPage}
{block:IfTwoColumns}max-width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}max-width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage}max-width:500px;{block:PermalinkPage}
height:auto;
border:0px !important;
}

.dunno{
background:{color:PostsBackground};
padding:10px;
position:absolute;
top:0;
z-index:3;
opacity:0;
overflow:hidden;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
text-align:center;
text-transform:uppercase;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage}display:none;{block:PermalinkPage}
}

.d_con{

{block:IfMagnify}
.photo:hover .dunno{
width:480px;
opacity:0.85;
overflow:hidden;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
{/block:IfMagnify}

.photo{
padding-bottom:-3px;
width:auto;
}

{block:IndexPage}{block:IfMagnify}.photo:hover img{
position:relative;
overflow: visible;
width:500px;
height:auto;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
z-index:2;}
{/block:IfMagnify}{/block:IndexPage}

.photo img{
{block:IndexPage}
{block:IfTwoColumns}width:450px; /**/{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns}
{/block:IndexPage}
{block:PermalinkPage}width:500px;{/block:PermalinkPage}
height:auto;
overflow: hidden;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
z-index:1;
}

.photoset_w{
padding:20px 0 10px 0 !important;
{block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns}
{block:IfTwoColumns}width:450px;{/block:IfTwoColumns}
}

.photoset_w .html_photoset iframe{


margin-left:auto;
margin-right:auto;
display:block;
}

.link{
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:justify;
}

.chat{
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:justify;
}

.chat ul, .chat ul li{


list-style:none;
margin:0px;
padding:0px;
}

.chat .label{
font-weight:bold;
font-style:italic;
text-transform:lowercase;
}

.quote{
font-size:15px;
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:left;
}

.qsource{
text-align:right;
}

.video embed, .video object, .video iframe{


{block:IndexPage}
{block:IfTwoColumns}width:450px !important;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:300px !important;{/block:IfNotTwoColumns}
{/block:IndexPage}
height:auto !important;
}

.player{
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:justify;
}

.audio_player{
background:#fff;
}

.audio {
height:30px;
overflow-y: hidden;
}
.audio span {
color:#ffffff;
font-size:1px;
}
.audio span a{
color:#ffffff;
font-size:1px;
}

.artist{
text-transform:lowercase;
padding:10px;
text-align:center;

{block:IndexPage}
{block:IfTwoColumns}width:410px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:260px;{/block:IfNotTwoColumns}
{/block:IndexPage}

.ask{
padding:10px;
{block:IndexPage}
{block:IfTwoColumns}width:430px;{/block:IfTwoColumns}
{block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns}
{/block:IndexPage}
text-align:justify;
text-transform:lowercase;
}

.ask p{
margin-top:0px;
}

#footer{
}

.source{
display:none;
height:0px !important;
}

.p_separator{
border-top:1px solid {color:text};
padding-top:10px;
margin:0 120px;
}

.p_meta{
text-align:center;
text-transform:uppercase;
font-size:10px !important;
}

.perma_pagi{
padding:10px 0;
}

.backtop{
position:fixed;
bottom:10px;
right:10px;
background:{color:links};
width: 40px;
height: 40px;
font-size:18px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
transition-duration:0.5s;
}

.backtop a{
color:{color:PostsBackground}
}

.backtop p{
text-align: center;
margin-top: 7px;
}

{CustomCSS}

</style>
</head>

<body>

<div id="container">
<div class="description">

{block:IfHeaderImage}<center><a href="/"><img src="{image:Header}"


border="0"/></a></center>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1><a href="/">{Title}</a></h1>{/block:IfNotHeaderImage}

<div class="nav"><center>
{block:AskEnabled}<a href="/ask">{AskLabel}</a> &middot; {/block:AskEnabled}
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> &middot;
{/block:Pages} {/block:HasPages}
{block:IfCustomLinkOneTitle} <a href="{text:Custom Link One}"> {text:Custom Link
One Title}</a> &middot; {/block:ifCustomLinkOneTitle}
{block:ifCustomLinkTwoTitle} <a href="{text:Custom Link Two}"> {text:Custom Link
Two Title}</a> &middot; {/block:ifCustomLinkTwoTitle}
{block:ifCustomLinkThreeTitle} <a href="{text:Custom Link Three}"> {text:Custom
Link Three Title}</a> &middot; {/block:ifCustomLinkThreeTitle}

<br /></center></div>
{block:Description}<p id="description">{Description}</p>{/block:Description}
<br /><br />

</div>
<div id="posts">

{block:Posts}
{block:Text}
<div class="post text">
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>
<div class="p_separator"></div>
{/block:Title}

{Body}
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
</div>
{/block:Text}

{block:Photo}
<div class="post photo">
{block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" {PhotoAlt}
border="0"/></a>
<div class="dunno"><div class="d_con"><a href="{Permalink}">Permalink</a>
{block:NoteCount} &middot; <a href="{Permalink}">{NoteCount}</a>
{/block:NoteCount}&middot; {Timeago}</div></div>{/block:IndexPage}

{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-500}" {PhotoAlt} border="0"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}

</div>
{/block:Photo}

{block:Photoset}
<div class="post photoset_w">
{block:IfNotTwoColumns}{Photoset-250}{/block:IfNotTwoColumns}
{block:IfTwoColumns}{Photoset-400}{/block:IfTwoColumns}
{block:PermalinkPage}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Photoset}

{block:Quote}
<div class="post quote">
"{Quote}"
{block:Source}
<div class="qsource"><h3>{Source}</h3></div>
{/block:Source}
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
</div>
{/block:Quote}

{block:Link}
<div class="post link">
<h3><a href="{URL}" {Target}>{Name}</a></h3>
<div class="p_separator"></div>
{block:Description}
{Description}
{/block:Description}
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
</div>
{/block:Link}

{block:Chat}
<div class="post chat">
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>
<div class="p_separator"></div>
{/block:Title}

<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
</div>
{/block:Chat}

{block:Video}
<div class="post video">
{Video-500}
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>

{block:PermalinkPage}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Video}

{block:Audio}
<div class="post player">
<div class="audio" id="{postID}">{AudioPlayerWhite}</div>
<div class="artist">{block:Artist}<b>{Artist}</b>{/block:Artist}
{block:TrackName}<em>{TrackName}</em>{/block:TrackName}</div>
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
{block:PermalinkPage}{block:Caption}<div
class="caption">{Caption}</div>{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Audio}

{block:Answer}
<div class="post ask">

<div class="answer"><strong>{Asker} asked:</strong><p><em>{Question}</em></p></div>


<div><strong>{title} answered:</strong>{Answer}</div>
<div class="p_separator"></div>
<div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} &middot;
<a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}&middot; {Timeago}</div>
<div style="clear:both;"></div>
</div>
{/block:answer}

{block:PermalinkPage}
<div class="perma_pagi">
<center>{block:PermalinkPagination} {block:PreviousPost} &laquo; <a
href="{PreviousPost}">Previous Post</a> {/block:PreviousPost} | {block:NextPost} <a
href="{NextPost}">Next Post</a> &raquo; {/block:NextPost}
{/block:PermalinkPagination}</center>
</div>

<div class="notestags">{block:NoteCount}{NoteCount} notes{/block:NoteCount}


{block:HasTags}
| {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} {/block:HasTags}</div>
<div class="source">
{block:ContentSource}
<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}"
alt="{SourceTitle}" />
{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
</a>
{/block:ContentSource}
{block:RebloggedFrom} <a href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}

</div>
{/block:PermalinkPage}

{/block:Posts}

{block:PostNotes}{PostNotes}{/block:PostNotes}
</div><!--END posts-->
<div id="footer">
{block:NextPage}
<a href="{NextPage}">forth</a>
{/block:NextPage}

{block:PreviousPage}
<a href="{PreviousPage}">back</a>
{/block:PreviousPage}
</div>
</div><!--END container-->

<div class="backtop"><p><a href="#top">&uarr;</a></p></div>


</body>
</html>

You might also like