Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!------note "CREDIT" page----------
- SPHS TIGER BAND THEME BY: ELYSE YIM
- LAST UPDATE: 06/06/14
- -----------
- conditions:
- -DO NOT DISTRIBUTE
- -CODE CHANGES ALLOWED BY WEBMASTER AND PERMITTED ADMINS ONLY
- ------------------------------------>
- <!DOCTYPE html>
- <html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="altertnate" type="application/rss+xml" href="{RSS}">
- <meta name="description" content="" />
- <meta http-equiv="x-dns-prefetch-control" content="off"/>
- <script type=”text/javascript” src=”http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js”></script> <script type=”text/javascript” src=”http://static.tumblr.com/bmdsqsc/ogWm7q8w1/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>
- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,300' rel='stylesheet' type='text/css'>
- <link href="//fonts.googleapis.com/css?family=Pacifico:400" rel="stylesheet" type="text/css">
- <!---APPEARANCE OPTIONS
- ----------------------->
- <meta name="text:Link 1 Url" content=""/>
- <meta name="text:Link 1 Name" content=""/>
- <meta name="text:Link 2 Url" content=""/>
- <meta name="text:Link 2 Name" content=""/>
- <meta name="text:Link 3 Url" content=""/>
- <meta name="text:Link 3 Name" content=""/>
- <meta name="text:Link 4 Url" content=""/>
- <meta name="text:Link 4 Name" content=""/>
- <meta name="text:Link 5 Url" content=""/>
- <meta name="text:Link 5 Name" content=""/>
- <meta name="image:Title image" content=""/>
- <meta name="image:top" content=""/>
- <!---CSS
- ---------------------->
- <style type="text/css">
- /*GENERAL*/
- .container {
- width: 1000px;
- margin: auto;
- }
- body {
- margin:0;
- font-family: Calibri;
- font-size: 12px;
- color: #5b5b5b;
- }
- a {
- text-decoration: none;
- color: #f07818;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- a:hover {
- color: #5b5b5b;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- /*SCROLLBAR*/
- ::-webkit-scrollbar-thumb:vertical {background-color: #5b5b5b; height: 10px;}
- ::-webkit-scrollbar-thumb:horizontal {background-color: #5b5b5b; height:10px!important;}
- ::-webkit-scrollbar {background-color: #ffa500; height:8px; width:5px;}
- iframe#tumblr_controls {-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out; right:3px !important; position: fixed !important;}
- /*SIDEBAR*/
- #header {
- background-color: #ffa500;
- position: relative;
- width: 100%;
- z-index:100;
- }
- #header img {
- margin-bottom: -3px;
- max-height:150px;
- }
- .sidebar {
- width: 100%;
- height: 35px;
- background-color: #5b5b5b;
- position: fixed;
- z-index: 100;
- }
- .toplinks {
- width: 100%;
- text-align: center;
- line-height: 35px;
- text-transform: uppercase;
- position: fixed;
- z-index: 101;
- }
- .toplinks a {
- margin: 0 15px;
- color: #757575;
- -moz-transition-duration: 0.3s;
- -o-transition-duration: 0.3s;
- -webkit-transition-duration: 0.3s;
- transition-duration: 0.3s;
- }
- .toplinks a:hover {
- color: #e2e2e2;
- border-bottom: 1px solid #ffa500;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- .blog-title {
- font-family: "Roboto Condensed";
- font-size: 14px;
- padding: 0 8px;
- }
- .blog-title a {
- color: #fff;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- .blog-title a:hover {
- color: #ffa500;
- border-bottom: 1px solid #e2e2e2;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- /*LITERAL SIDEBAR*/
- .literal {
- width: 250px;
- height: 100%;
- margin-top:17px;
- margin-left: -75px;
- margin-right: auto;
- text-align: left;
- position: fixed;
- top: 180px;
- }
- .updates {
- border-top: 1px solid #d2d2d2;
- padding: 10px 0px;
- }
- .mainlinks {
- padding: 15px 10px;
- color: #5b5b5b;
- font-style: none;
- width: 100%;
- }
- .mainlinks ul {
- list-style: none;
- margin-left: -52px;
- margin-top: -10px;
- }
- .mainlinks li {
- padding-top: 3px;
- }
- .mainlinks a {
- display: block;
- padding: 4px 3px;
- color: #5b5b5b;
- width: 100%;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .mainlinks a:hover {
- text-decoration: underline;
- background-color: #ffa500;
- color: #fff;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .who {
- color: #ffa500;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .literal:hover .who {
- display: none;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .hover {
- display:none;
- color: #d2d2d2;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .literal:hover .hover {
- cursor: pointer;
- display: block;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .desc {
- display: none;
- max-width: 250px;
- margin: 17px 0;
- padding: 6px 10px;
- color: #d2d2d2;
- text-align: justify;
- }
- .credit {
- position: fixed;
- right: 5px;
- bottom: 3px;
- padding: 20px 10px;
- }
- .credit a {
- color: #000;
- text-align: center;
- }
- .credit a:hover {
- color: #ffa500;
- }
- /*NAVIGATION*/
- .nav {
- border-top: 1px solid #d2d2d2;
- font-size: 11px;
- text-align: ;
- padding: 15px 6px;
- }
- .jump_page {
- padding: 2px 5px 2px 5px;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .jump_page:hover {
- background-color: #ffa500;
- color: #fff;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .current_page {
- background-color:#ffa500;
- color: #fff;
- padding: 2px 5px 2px 5px;
- }
- .nextpage {
- padding-left: 5px;
- }
- .lastpage {
- padding-right: 5px;
- }
- /*MEDIA ICONS*/
- .media {
- border-top: 1px solid #d2d2d2;
- padding: 10px 0px;
- }
- .medianame {
- font-family: "Roboto Condensed";
- font-size: 16px;
- }
- .media img {
- max-width: 45px;
- opacity: 0.8;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .media img:hover {
- opacity: 1;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- /*POSTS*/
- #about {
- padding-bottom: 5px;
- margin-bottom: 15px;
- font-size: 16px;
- }
- .postcol {
- width: 540px;
- margin-left: 240px;
- margin-top: 90px;
- }
- .posts {
- border-bottom: 1px solid #d2d2d2;
- background-color: #fff;
- padding: 0 10px;
- margin-left: 10px;
- }
- /*POST INFO*/
- .postinfo {
- margin-bottom: 60px;
- padding-bottom: 5px;
- padding-top: 2px;
- color: #cdcdcd;
- }
- .postinfo a {
- padding-right: 25px;
- color: #cdcdcd;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .postinfo a:hover {
- color: #ffa500;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .tags {
- color: #757575;
- max-width: 500px;
- padding: 2px 0;
- word-wrap: break-word;
- }
- .tags a {
- color: #757575;
- margin-right: 8px;
- margin-left: 1px;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .tags a:hover {
- color: #ffa500;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- /*ASKS*/
- .question {
- background-color: #e2e2e2;
- padding: 5px 10px;
- }
- #asker {
- color: #fff;
- font-style: italic;
- }
- /*AUDIO*/
- .cover {
- width: 250px;
- height: auto;
- }
- .playbutton {
- z-index: 100;
- position: absolute;
- margin-left: 25px;
- margin-top:150px;
- }
- /*LINKS*/
- .link {
- font-family: "Roboto Condensed";
- font-size: 16px;
- text-transform: uppercase;
- text-align: left;
- background-color: #e2e2e2;
- padding: 8px 6px;
- }
- .arrow {
- margin-left: 10px;
- }
- /*POPUP*/
- #fade {
- display: none;
- background: #000;
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- opacity: .80;
- z-index: 9999;
- }
- .popup_block{
- display: none;
- background: #fff;
- padding: 20px;
- float: left;
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 99999;
- }
- img.btn_close {
- float: right;
- margin: -55px -55px 0 0;
- }
- *html #fade {
- position: absolute;
- }
- *html .popup_block {
- position: absolute;
- }
- .popheader {
- width: 300px;
- height: 125px;
- background-color: #e2e2e2;
- color: #5b5b5b;
- line-height: 125px;
- text-align: center;
- text-transform: uppercase;
- font-family: "Roboto Condensed";
- font-size: 32px;
- }
- .poptable {
- width: 300px;
- margin: 16px 0;
- }
- .poptable td {
- background-color: #ffa500;
- border: 2px solid #ffa500;
- width: 148px;
- padding: 16px 26px;
- text-align: center;
- vertical-align: middle;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- .poptable td:hover {
- background-color: #fff;
- color: #ffa500;
- border: 2px solid #ffa500;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- .poptable td a {
- color: #fff;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .poptable td a:hover {
- color: #ffa500;
- -moz-transition-duration: 0.7s;
- -o-transition-duration: 0.7s;
- -webkit-transition-duration: 0.7s;
- transition-duration: 0.7s;
- }
- .search-bar {
- position: fixed;
- z-index: 1000;
- right: 450px;
- margin-top: 8px;
- }
- .search-bar input {
- border: 0px;
- outline: none !important;
- margin-top: 0px;
- padding: 4px 8px;
- background-color: #f5f5f5;
- color: #999;
- font-size: 9px;
- font-family: calibri, helvetica, arial;
- letter-spacing: 1px;
- text-transform: uppercase;
- position: fixed;
- }
- #sbimg {
- height: 11px;
- vertical-align: top;
- margin-left: 130px;
- }
- </style>
- <!--SCRIPTS-->
- <script type="text/javascript"
- src="http://www.google.com/jsapi"></script>
- <script type="text/javascript">
- google.load("jquery", "1.3");
- google.setOnLoadCallback(function() {
- jQuery(function($) {
- var elementPosition = $('.sidebar').offset();
- $(window).scroll(function(){
- if($(window).scrollTop() > elementPosition.top){
- $('.sidebar').css('position','fixed').css('top','0');
- } else {
- $('.sidebar').css('position','static');
- }
- });
- var elementPosition = $('.toplinks').offset();
- $(window).scroll(function(){
- if($(window).scrollTop() > elementPosition.top){
- $('.toplinks').css('position','fixed').css('top','0');
- } else {
- $('.toplinks').css('position','static');
- }
- });
- $(function() {
- $('.hover').click(function() {
- $(this).find('.desc').slideToggle();
- });
- });
- });
- });
- </script>
- <!--POP UP CODE-->
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script>
- $(document).ready(function() {
- //
- //When you click on a link with class of poplight and the href starts with a #
- $('a.poplight[href^=#]').click(function() {
- var popID = $(this).attr('rel'); //Get Popup Name
- var popURL = $(this).attr('href'); //Get Popup href to define size
- //Pull Query & Variables from href URL
- var query= popURL.split('?');
- var dim= query[1].split('&');
- var popWidth = dim[0].split('=')[1]; //Gets the first query string value
- //Fade in the Popup and add close button
- $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
- //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 2;
- //Apply Margin to Popup
- $('#' + popID).css({
- 'margin-top' : -popMargTop,
- 'margin-left' : -popMargLeft
- });
- //Fade in Background
- $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
- $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
- return false;
- });
- //Close Popups and Fade Layer
- $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
- $('#fade , .popup_block').fadeOut(function() {
- $('#fade, a.close').remove(); //fade them both out
- });
- return false;
- });
- });
- </script>
- </head>
- <!---HTML
- --------------------->
- <body>
- <a href="/"><div id="header">
- <img src="{image:top}">
- </div></a>
- <div class="sidebar">
- <form action="/search" method="get" class="search-bar">
- <input type="text" name="q" value="{SearchQuery}" id="sb"/>
- <input type="image" value="Search" src="http://www.clker.com/cliparts/Q/l/L/B/F/a/search-icon-md.png" id="sbimg"/>
- </form>
- <div class="toplinks">
- <a href="/archive">ARCHIVE</a>
- <a href="#?w=300" rel="popup_name" class="poplight">LINKS</a>
- <span class="blog-title"><a href="/">{Title}{block:IFTitleimage}<img src="{image:Title image}"/>{/block:IFTitleimage}</a></span>
- <a href="/contact">contact</a>
- <a href="/faq">FAQ</a>
- {block:SubmissionsEnabled}<a href="/submit">SUBMIT</a>{/block:SubmissionsEnabled}
- </div>
- </div>
- <div class="container">
- <div class="literal">
- <div class="who"><h2>WHO ARE WE?</h2></div>
- <span class="hover"><h2>(CLICK ME!)</h2>
- <div class="desc">
- {Description}
- </div></span>
- <div class="updates">
- <h2>RECENT UPDATES</h2>
- <div class="mainlinks">
- <ul>
- <li>{block:IfLink1Name}<a href="{text:Link 1 Url}">{text:Link 1 Name}</a>{/block:IfLink1Name}</li>
- <li>{block:IfLink2Name}<a href="{text:Link 2 Url}">{text:Link 2 Name}</a>{/block:IfLink2Name}</li>
- <li>{block:IfLink3Name}<a href="{text:Link 3 Url}">{text:Link 3 Name}</a>{/block:IfLink3Name}</li>
- <li>{block:IfLink4Name}<a href="{text:Link 4 Url}">{text:Link 4 Name}</a>{/block:IfLink4Name}</li>
- <li>{block:IfLink5Name}<a href="{text:Link 5 Url}">{text:Link 5 Name}</a>{/block:IfLink5Name}</li>
- </ul>
- </div>
- </div>
- <div class="nav">
- {block:Pagination}{block:PreviousPage}
- <span class="lastpage"><a href="{PreviousPage}">↽</a></span>
- {/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}
- <span class="nextpage"><a href="{NextPage}">⇀</a></span>
- {/block:NextPage}{/block:Pagination}
- </div>
- </div>
- <!--POPUP CONTENT-->
- <div id="popup_name" class="popup_block">
- <div class="popheader">LINKS</div>
- <div class="poptable"><table>
- <tr>
- <td><a href="https://facebook.com/sphsmusicboosters"><div style= "height: 100%; width: 100%;">facebook<br /> (music boosters)</div></a></td>
- <td><a href="http://www.sphsmusicboosters.com/"><div style= "height: 100%; width: 100%;">website<br /> (music boosters)</div></a></td>
- </tr>
- <tr>
- <td><a href="https://www.facebook.com/groups/21401999299/"><div style= "height: 100%; width: 100%;">facebook<br /> (band)</div></a></td>
- <td><a href="/previous"><div style= "height: 100%; width: 100%;">previous shows</div></a></td>
- </tr>
- <tr>
- <td><a href="/ask"><div style= "height: 100%; width: 100%;">ask </div></a></td>
- <td><a href="/credit"><div style="height: 100%; width: 100%;">credit<br /></div></a></td>
- </tr>
- </table></div>
- </div>
- <div class="postcol">
- <!--POSTS-->
- <div class="posts" id="about">
- <em>This is a design project for practice, <u>not the official SPHS Band website</u>, though all info on this Tumblr is accurate.
- <br />The official website can be see at <a href="/">TBA</a>, created by Andrew Son (band webmaster).
- <br />-Elyse Y (contact through ask)
- </em>
- </div>
- {block:Posts}
- <div class="posts">
- <!--TEXT-->
- {block:Text}
- {block:Title}<h2>{Title}</h2>{/block:Title}
- {Body}
- {/block:Text}
- <!--ASKS-->
- {block:Answer}
- <div class="question"><table style="padding-bottom:5px; padding-top: 5px; margin-left:3px;">
- <tr>
- <td style="vertical-align:top; padding-right:10px; width:64px; height: auto;"><img src ="{AskerPortraitURL-48}"></td>
- <td style="vertical-align:top;"><span id="asker">{Asker} asked: {Question}</span></td>
- </tr>
- </table></div>
- {Answer}
- {/block:Answer}
- <!--PHOTO-->
- {block:Photo}
- {LinkOpenTag}
- <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
- {LinkCloseTag}
- {block:Caption}{Caption}{/block:Caption}
- {/block:Photo}
- <!--PHOTOSET-->
- {block:Photoset}
- {Photoset-500}
- {block:Caption}{Caption}{/block:Caption}
- {/block:Photoset}
- <!--LINKS-->
- {block:Link}
- <div class="link"><a href="{URL}">{Name} <span class="arrow">→</span></a></div>
- <div id="linksdesc">{block:Description}{Description}{/block:Description}</div>
- {/block:Link}
- <!--AUDIO-->
- {block:Audio}
- {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
- {block:AlbumArt}
- <img class="cover" src="{AlbumArtURL}">
- {/block:AlbumArt}
- {block:Caption}{Caption}{/block:Caption}
- {/block:Audio}
- <!--VIDEO-->
- <div class="video">
- {block:Video}
- {Video-500}
- {block:Caption}{Caption}{/block:Caption}
- {/block:Video}
- </div>
- <!--POST DIV--></div>
- <!--POST INFO-->
- <div class="tags">
- {block:PermalinkPage} {block:HasTags}{block:Tags}#<a href="{TagURL}">{TAG}</a>{/block:Tags}{/block:HasTags}{/block:PermalinkPage}
- </div>
- <div class="postinfo">
- {block:Date}
- <a href="{Permalink}"> {MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a> <a href="{Permalink}">{TimeAgo}</a> {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a></span>
- </div>
- {/block:Date}
- {/block:Posts}
- {block:NoSearchResults}
- <h2>No posts found tagged "{SearchQuery}". Sorry!</h2>
- {/block:NoSearchResults}
- </div>
- <div class="credit"><a href="/credit">©</a></div>
- <!--CONTAINER DIV--></div>
- <script src="http://static.tumblr.com/qwfkpqk/evSmlscpv/list.min.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment