Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <link rel="shortcut icon" href="{Favicon}"/>
- <title>Navigation</title>
- <link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
- <!---------------------------------------------------------------------
- ----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
- ----------------------POPUP CODES BY FLANNELSAMMY----------------------
- -------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
- ------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
- ---------------------------------------------------------------------->
- <!------------- POPUP SCRIPT START -------------->
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script>
- $(document).ready(function() {
- //
- $('a.poplight[href^=#]').click(function() {
- var popID = $(this).attr('rel');
- var popURL = $(this).attr('href');
- var query= popURL.split('?');
- var dim= query[1].split('&');
- var popWidth = dim[0].split('=')[1];
- $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://media.tumblr.com/b28c104906c576285505ca134600853a/tumblr_inline_mfp5cwdybL1qh7cpd.gif" class="btn_close" title="Close" alt="Close" /></a>');
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 2;
- $('#' + popID).css({
- 'margin-top' : -popMargTop,
- 'margin-left' : -popMargLeft
- });
- $('body').append('<div id="fade"></div>');
- $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
- return false;
- });
- $('a.close, #fade').live('click', function() {
- $('#fade , .popup_block').fadeOut(function() {
- $('#fade, a.close').remove();
- });
- return false;
- });
- });
- </script>
- <!-------------- POPUP SCRIPT END --------------->
- <style type="text/css">
- ::-webkit-scrollbar-thumb {
- height:auto;
- background-color:gray;
- }
- ::-webkit-scrollbar {
- height:9px;
- width:1px;
- background-color:#FFFFFF;
- }
- /*-------------- POPUP CSS START ---------------*/
- #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;
- height:auto;
- padding: 5px;
- border: 3px solid #ddd;
- text-align:center;
- float: left;
- font-size: 12px;
- position: fixed;
- top: 55%; left: 55%;
- z-index: 99999;
- -webkit-box-shadow: 0px 0px 20px #000;
- -moz-box-shadow: 0px 0px 20px #000;
- box-shadow: 0px 0px 20px #000;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- }
- img.btn_close {
- float: right;
- margin: -2px -2px 0 0;
- }
- *html #fade {
- position: absolute;
- }
- *html .popup_block {
- position: absolute;
- }
- /*--------------- POPUP CSS END ----------------*/
- #container {
- position:absolute;
- width:600px;
- height:500px;
- margin:auto;
- top:0;
- bottom:0;
- left:0;
- right:0;
- }
- #sidebar {
- width:200px;
- height:500px;
- }
- #image {
- width:200px;
- height:400px;
- }
- #image img {
- width:200px;
- height:400px;
- }
- #title {
- width:15px;
- margin-top:-240px;
- margin-left:170px;
- font-size:18px;
- font-family: 'Raleway', sans-serif;
- text-transform:uppercase;
- word-wrap:break-word;
- line-height:125%;
- text-align:center;
- color:#333333; /*---------TITLE COLOR---------*/
- }
- #links a {
- display:inline-block;
- width:98px;
- margin-top:5px;
- background-color:#777777; /*--------LINK BG COLOR--------*/
- color:white; /*-------LINK TEXT COLOR-------*/
- line-height:255%;
- text-decoration:none;
- text-align:center;
- text-transform:uppercase;
- font-family:calibri;
- font-size:11px;
- letter-spacing:1px;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #links a:hover {
- background-color:#444444; /*-----LINK HOVER BG COLOR-----*/
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #content {
- float:right;
- width:380px;
- height:500px;
- padding-right:10px;
- margin-top:-500px;
- overflow-y: scroll;
- overflow-x: hidden;
- border-right:1px solid gray;
- }
- #content h1 {
- display:block;
- width:380px;
- margin-top:20px;
- text-decoration:none;
- font-family:calibri;
- color:#444444; /*-------TAG TITLE COLOR-------*/
- text-transform:uppercase;
- font-size:13px;
- font-weight:normal;
- letter-spacing:2px;
- line-height:150%;
- text-align:center;
- border-bottom:1px solid gray;
- }
- #content h1 a {
- display:block;
- width:380px;
- margin-top:20px;
- background-color:white;
- text-decoration:none;
- font-family:calibri;
- color:#444444;
- text-transform:uppercase;
- font-size:13px;
- font-weight:normal;
- letter-spacing:2px;
- line-height:150%;
- text-align:center;
- }
- #content h1 a:hover {
- background-color:white;
- letter-spacing:4px;
- color:#444444;
- }
- #content a {
- display:inline-block;
- width:187px;
- margin-top:5px;
- background-color:#eaeae8; /*---------TAG BG COLOR--------*/
- color:#666666; /*--------TAG TEXT COLOR-------*/
- line-height:150%;
- text-decoration:none;
- text-align:center;
- text-transform:none;
- font-family:calibri;
- font-size:11px;
- letter-spacing:1px;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- #content a:hover {
- background-color:#777777; /*------TAG HOVER BG COLOR-----*/
- color:white; /*-----TAG HOVER TEXT COLOR----*/
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- #popup {
- margin:20px 0px 20px 0px;
- }
- #popup h1 {
- display:block;
- width:300px;
- text-decoration:none;
- font-family:calibri;
- color:#444444; /*-------TAG TITLE COLOR-------*/
- text-transform:uppercase;
- font-size:13px;
- font-weight:normal;
- letter-spacing:2px;
- line-height:150%;
- text-align:center;
- border-bottom:1px solid gray;
- }
- #popup h1 a {
- display:block;
- width:300px;
- background-color:white;
- text-decoration:none;
- font-family:calibri;
- color:#444444;
- text-transform:uppercase;
- font-size:13px;
- font-weight:normal;
- letter-spacing:2px;
- line-height:150%;
- text-align:center;
- }
- #popup h1 a:hover {
- background-color:white;
- letter-spacing:4px;
- color:#444444;
- }
- #popup a {
- display:inline-block;
- width:300px;
- margin-top:10px;
- color:#666666; /*--------TAG TEXT COLOR-------*/
- line-height:150%;
- text-decoration:none;
- text-align:center;
- text-transform:none;
- font-family:calibri;
- font-size:11px;
- letter-spacing:1px;
- border-bottom:1px solid #DDDDDD;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- #popup a:hover {
- border-bottom:1px solid #777777;
- background-color:#777777; /*------TAG HOVER BG COLOR-----*/
- color:white; /*-----TAG HOVER TEXT COLOR----*/
- letter-spacing:4px;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- #credit {
- font-size:9px;
- font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
- font-style:italic;
- letter-spacing:1px;
- }
- #credit a {
- background-color:#fff;
- padding:5px;
- border-top:1px solid #e9e9e9;
- border-bottom:1px solid #e9e9e9;
- position:fixed;
- right:15px;
- bottom:10px;
- text-decoration:none;
- color:gray;
- -moz-transition-duration:1s;
- -webkit-transition-duration:1s;
- -o-transition-duration:1s;
- }
- #credit a:hover {
- color:#fff;
- background-color:#747474;
- -moz-transition-duration:1s;
- -webkit-transition-duration:1s;
- -o-transition-duration:1s;
- }
- </style>
- <body>
- <!--------------------------------------------
- CONTENT
- --------------------------------------------->
- <div id="container">
- <!------------- SIDEBAR -------------->
- <div id="sidebar">
- <div id="image">
- <img src="https://31.media.tumblr.com/4978d8cc5ca2c065b0c7355ad378ae7a/tumblr_n0pkfkKyUs1rv5n8go1_400.png"> <!---URL OF SIDEBAR PICTURE--->
- <div id="title">Navigation</div>
- </div>
- <div id="links">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <a href="/ask">Message</a>
- <a href="/submit">Submit</a>
- <a href="/tagged/answered">Answered</a>
- <a href="http://tumblr.com/dashboard">Dash</a>
- </div>
- </div>
- <!-------------- TAGS --------------->
- <!-----------------------------------
- SOME OF THE LINKS BELOW ARE FOR
- POPUPS AND SOME ARE FOR NORMAL
- LINKS.
- FOR NORMAL LINKS, YOU'LL ONLY
- HAVE TO CHANGE THE TEXT WITHIN
- THE <A> TAG. FOR POPUPS, YOU'LL
- NEED TO MAKE SURE THE NUMBER
- (01, 02, ETC.) CODING FOR THE
- LINK IS THE SAME NUMBER CODED
- FOR THE ASSOCIATED POPUP BOX
- BELOW.
- YOU CAN COPY AND PASTE EACH
- TYPE OF LINK OR TITLE TO HAVE
- AS MANY OR AS LITTLE AS YOU'D
- LIKE :)
- ------------------------------------>
- <div id="content">
- <h1>Tag Title Here</h1>
- <a href="#?w=300" rel="01" class="poplight">Click Me!</a>
- <a href="#?w=300" rel="02" class="poplight">Click Me!</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <h1>Tag Title Here</h1>
- <a href="#?w=300" rel="03" class="poplight">Click Me!</a>
- <a href="#?w=300" rel="04" class="poplight">Click Me!</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- </div>
- </div>
- <!--------------------------------------------
- POPUP BOXES
- --------------------------------------------->
- <!------------- BOX 01 -------------->
- <div id="01" class="popup_block"><div id="popup">
- <h1>Tag Title Here</h1>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- </div></div>
- <!------------- BOX 02 -------------->
- <div id="02" class="popup_block"><div id="popup">
- <h1>Tag Title Here</h1>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- </div></div>
- <!------------- BOX 03 -------------->
- <div id="03" class="popup_block"><div id="popup">
- <h1>Tag Title Here</h1>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- </div></div>
- <!------------- BOX 04 -------------->
- <div id="04" class="popup_block"><div id="popup">
- <h1>Tag Title Here</h1>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- <a href="/">Link Here</a>
- </div></div>
- <!--------------------------------------------
- CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
- --------------------------------------------->
- <div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement