API tools faq
paste
Advertisement
Guest User

theme 24: excuse me lizzie; by primrosetylers

a guest
Jun 12th, 2014
777
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. theme 24: excuse me lizzie;
  7. coded by irma at primrosetylers.tumblr.com
  8. do not steal, remove the credit, or use as a base
  9.  
  10. -->
  11.  
  12. <title>{Title}</title>
  13. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <!-- meta stuffs go here -->
  18.  
  19. <meta name="color:background" content="#fff">
  20. <meta name="color:title" content="#000">
  21. <meta name="color:header" content="#fff">
  22. <meta name="color:header hover" content="#000">
  23. <meta name="color:title hover" content="#fff">
  24. <meta name="color:topbar link 1" content="#000">
  25. <meta name="color:topbar link 2" content="#aaa">
  26. <meta name="color:topbar link 3" content="#000">
  27. <meta name="color:topbar link 4" content="#aaa">
  28. <meta name="color:description" content="#000">
  29. <meta name="color:navi link" content="#000">
  30. <meta name="color:navi link hover" content="#fff">
  31. <meta name="color:navi link bg" content="#fff">
  32. <meta name="color:navi link bg hover" content="#000">
  33. <meta name="color:tooltip text" content="#fff">
  34. <meta name="color:tooltip background" content="#000">
  35. <meta name="color:posts" content="#fff">
  36. <meta name="color:post text" content="#000">
  37. <meta name="color:post info" content="#000">
  38. <meta name="color:post info hover" content="#aaa">
  39. <meta name="color:posts link" content="#aaa">
  40. <meta name="color:posts link hover" content="#000">
  41. <meta name="color:pagination" content="#aaa">
  42. <meta name="color:pagination hover" content="#000">
  43. <meta name="color:blockquote" content="#aaa">
  44.  
  45. <meta name="if:500px posts" content="0">
  46. <meta name="if:400px posts" content="1">
  47. <meta name="if:250px posts" content="0">
  48. <meta name="if:tiny cursor" content="1">
  49. <meta name="if:infinite scroll" content="0">
  50.  
  51. <meta name="text:link 1" content="home">
  52. <meta name="text:link 1 url" content="/">
  53. <meta name="text:link 2" content="ask">
  54. <meta name="text:link 2 url" content="/ask">
  55. <meta name="text:link 3" content="past">
  56. <meta name="text:link 3 url" content="/archive">
  57. <meta name="text:link 4" content="">
  58. <meta name="text:link 4 url" content="">
  59. <meta name="text:link 5" content="">
  60. <meta name="text:link 5 url" content="">
  61. <meta name="text:link 6" content="">
  62. <meta name="text:link 6 url" content="">
  63. <meta name="text:link 7" content="">
  64. <meta name="text:link 7 url" content="">
  65. <meta name="text:link 8" content="">
  66. <meta name="text:link 8 url" content="">
  67. <meta name="text:link 9" content="">
  68. <meta name="text:link 9 url" content="">
  69.  
  70.  
  71. <!-- metas end-->
  72.  
  73. <!-- sticky header script -->
  74.  
  75. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  76. <script type="text/javascript">
  77. $(function(){
  78. var stickyRibbonTop = $('#stickyribbon').offset().top;
  79.  
  80. $(window).scroll(function(){
  81. if( $(window).scrollTop() > stickyRibbonTop ) {
  82. $('#stickyribbon').css({position: 'fixed', top: '0px', width: '540px', margin: 'auto'});
  83. } else {
  84. $('#stickyribbon').css({position: 'static', top: '0px'});
  85. }
  86. });
  87. });
  88. </script>
  89. <!-- lazy load script -->
  90. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  91. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  92. <script type="text/javascript" charset="utf-8">
  93. var $j = jQuery.noConflict();
  94. $j(function() {
  95. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  96. $j("img").lazyload({
  97. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  98. effect: "fadeIn",
  99. });
  100. });
  101. </script>
  102.  
  103. <!-- click effect script -->
  104. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  105. </script>
  106.  
  107. <script>
  108. $(document).ready(function(){
  109. $("#q1").click(function(){
  110. $("#a1").slideToggle();
  111. $("#a2").hide();
  112. });
  113. });
  114. </script>
  115.  
  116. <script>
  117. $(document).ready(function(){
  118. $("#q2").click(function(){
  119. $("#a2").slideToggle();
  120. $("#a1").hide();
  121. });
  122. });
  123. </script>
  124.  
  125. <!-- infinite scroll script -->
  126.  
  127. {block:IfInfiniteScroll}
  128. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  129. {/block:IfInfiniteScroll}
  130. {block:IfNotInfiniteScroll}{/block:IfNotInfiniteScroll}
  131.  
  132.  
  133. <!-- tooltip script-->
  134.  
  135. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  136.  
  137. <style>
  138.  
  139. /*tooltip css*/
  140. div#qTip {
  141. padding: 3px;
  142. display: none;
  143. text-align: center;
  144. position: absolute;
  145. font-size:8px;
  146. line-height:9px;
  147. font-family:arial;
  148. z-index: 1000;
  149. border-radius:3px;
  150. background-color:{color:tooltip background};
  151. color:{color:tooltip text};
  152. text-transform:uppercase;
  153. letter-spacing: 1px;
  154. }
  155.  
  156. iframe#tumblr_controls {
  157. top: 0% !important;
  158. right:0% !important;
  159. opacity:0.3;
  160. position: fixed !important;
  161. filter:alpha(opacity=30);
  162. -webkit-transition: all 0.7s ease;
  163. -moz-transition: all 0.7s ease;
  164. -o-transition: all 0.7s ease;
  165. }
  166. iframe#tumblr_controls:hover{
  167. top:0% !important;
  168. right:0% !important;
  169. opacity:0.8;
  170. position: fixed !important;
  171. filter:alpha(opacity=80);
  172. -webkit-transition: all 0.7s ease;
  173. -moz-transition: all 0.7s ease;
  174. -o-transition: all 0.7s ease;
  175. }
  176.  
  177. body {
  178. background-color:{color:background};
  179. font-family:arial;
  180. color:{color:post text};
  181. font-size:10px;
  182. }
  183.  
  184. a {
  185. text-decoration:none;
  186. color:{color:posts link};
  187. -webkit-transition:0.5s;
  188. -moz-transition:0.5s;
  189. -ms-transition:0.5s;
  190. -o-transition:0.5s;
  191. }
  192.  
  193. blockquote {
  194. border-left:2px solid {color:blockquote};
  195. padding-left:10px;
  196. }
  197.  
  198. a:hover {
  199. color:{color:posts link hover};
  200. }
  201.  
  202. h2 {
  203. text-align:center;
  204. }
  205.  
  206. /*header*/
  207.  
  208. #header {
  209. width:540px;
  210. margin-left:auto;
  211. margin-right:auto;
  212. margin-top:-10px;
  213. text-align:center;
  214. }
  215.  
  216. #title {
  217. padding-top:75px;
  218. padding-bottom:15px;
  219. text-transform:uppercase;
  220. font-size:20px;
  221. letter-spacing:3px;
  222. color:{color:title};
  223. -webkit-transition:0.5s;
  224. -ms-transition:0.5s;
  225. -moz-transition:0.5s;
  226. -o-transition:0.5s;
  227. }
  228.  
  229. #header:hover #title {
  230. background-color:{color:header hover}; /*temp*/
  231. color:{color:title hover}; /*temp*/
  232. }
  233.  
  234. #stickyribbon {
  235. position:absolute;
  236. margin:auto;
  237. width:540px;
  238. }
  239.  
  240. .sticklink {
  241. display:inline-block;
  242. text-transform:uppercase;
  243. width:135px;
  244. font-size:12px;
  245. margin-left:-1px;
  246. margin-right:-2px;
  247. -webkit-transition:0.5s;
  248. -ms-transition:0.5s;
  249. -moz-transition:0.5s;
  250. -o-transition:0.5s;
  251. }
  252.  
  253.  
  254. #this {color:{color:topbar link 1}; background-color:{color:topbar link 1};}
  255. #this:hover {background-color:{color:background};}
  256. #is {color:{color:topbar link 2}; background-color:{color:topbar link 2};}
  257. #is:hover {background-color:{color:background};}
  258. #very {color:{color:topbar link 3}; background-color:{color:topbar link 3};}
  259. #very:hover {background-color:{color:background};}
  260. #fun {color:{color:topbar link 4}; background-color:{color:topbar link 4};}
  261. #fun:hover {background-color:{color:background};}
  262.  
  263.  
  264. .revealed {
  265. display:none;
  266. position:absolute;
  267. background-color:{color:background};
  268. padding-top:10px;
  269. padding-bottom:10px;
  270. font-size:11px;
  271. width:540px;
  272. }
  273.  
  274. #a1 {
  275. color:{color:description};
  276. }
  277.  
  278. #a2 {
  279. text-align:center;
  280. }
  281.  
  282. #a2 a:hover {
  283. color:{color:navi link hover};
  284. background-color:{color:navi link bg hover};
  285. }
  286.  
  287. #a2 a {
  288. width:160px;
  289. text-transform:uppercase;
  290. display:inline-block;
  291. -webkit-transition:0.5s;
  292. -ms-transition:0.5s;
  293. -moz-transition:0.5s;
  294. -o-transition:0.5s;
  295. color:{color:navi link}; /*temp*/
  296. background-color:{color:navi link bg}; /*temp*/
  297. }
  298.  
  299. /*footer*/
  300.  
  301. #footer {
  302. width:100%;
  303. text-align:center;
  304. font-size:11px;
  305. margin-top:35px;
  306. padding-bottom:15px;
  307. text-transform:uppercase;
  308. letter-spacing:2px;
  309. background-color:{color:background}; /*temp*/
  310. color:{color:pagination};
  311. }
  312.  
  313. #footer a {
  314. color:{color:pagination}; /*variable*/
  315. }
  316.  
  317. #footer a:hover {
  318. color:{color:pagination hover};
  319. }
  320.  
  321. /*posts*/
  322.  
  323. #wrap {
  324. padding-top:70px;
  325. margin-left:8px;
  326. }
  327.  
  328. #postage {
  329. {block:If500pxPosts}width:500px;{/block:If500pxPosts}
  330. {block:If400pxPosts}width:400px;{/block:if400pxPosts}
  331. {block:If250pxPosts}width:250px;{/block:if250pxPosts}
  332. margin-bottom:30px;
  333. margin-left:auto;
  334. margin-right:auto;
  335. background-color:{color:posts}; /*temp*/
  336. padding:10px;
  337. -webkit-transition:0.5s;
  338. -moz-transition:0.5s;
  339. -ms-transition:0.5s;
  340. -o-transition:0.5s;
  341. }
  342.  
  343. #words {
  344. font-style:italic;
  345. font-size:15px;
  346. }
  347.  
  348. .source {
  349. text-align:right;
  350. padding-right:5px;
  351. }
  352.  
  353. #linkpost {
  354. text-align:center;
  355. font-size:11px;
  356. }
  357.  
  358. .linkety {
  359. font-size:15px;
  360. }
  361.  
  362. #chat ul {
  363. list-style:none;
  364. font-family:consolas;
  365. margin-left:-30px;
  366. }
  367.  
  368. .label {
  369. text-transform:uppercase;
  370. font-weight:bold;
  371. }
  372.  
  373. #audioplayer {
  374. width:30px;
  375. height:30px;
  376. overflow:hidden;
  377. position:absolute;
  378. margin-top:35px;
  379. margin-left:35px;
  380. opacity:0.7;
  381. }
  382.  
  383. #albumart {
  384. width:100px;
  385. height:100px;
  386. background-color:#e3e3e3;
  387. }
  388.  
  389. #ask span {
  390. font-style:italic;
  391. }
  392.  
  393. #postage:hover .tags {
  394. opacity:1;
  395. }
  396.  
  397. .info {
  398. text-align:center;
  399. text-transform:uppercase;
  400. {block:If500pxPosts}width:500px;{/block:If500pxPosts}
  401. {block:If400pxPosts}width:400px;{/block:if400pxPosts}
  402. {block:If250pxPosts}width:250px;{/block:if250pxPosts}
  403. padding-top:8px;
  404. margin-top:10px;
  405. opacity:1;
  406. font-size:10px;
  407. -webkit-transition:0.6s;
  408. -moz-transition:0.6s;
  409. -ms-transition:0.6s;
  410. -o-transition:0.6s;
  411. }
  412.  
  413. .info a {
  414. color:{color:post info};
  415. }
  416.  
  417. .info a:hover {
  418. color:{color:post info hover};
  419. }
  420.  
  421. .tags {
  422. font-size:10px;
  423. text-transform:none;
  424. opacity:0;
  425. -webkit-transition:0.6s;
  426. -moz-transition:0.6s;
  427. -ms-transition:0.6s;
  428. -o-transition:0.6s;
  429. }
  430.  
  431. {block:IfTinyCursor}
  432. /* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;} /* End http://www.cursors-4u.com */
  433. {/block:IfTinyCursor}
  434.  
  435. {CustomCSS}
  436. </style>
  437. </head>
  438. <body>
  439.  
  440. <div id="header">
  441.  
  442. <div id="title">{Title}</div>
  443.  
  444. <div id="stickyribbon">
  445. <a href="/" title="to home"><div class="sticklink" id="this">refresh</div></a>
  446. <a id="q1" title="click"><div class="sticklink" id="is">about</div></a>
  447. <a id="q2" title="click"><div class="sticklink" id="very">navi</div></a>
  448. <a href="http://primrosetylers.tumblr.com" title="codes by primrosetylers"><div class="sticklink" id="fun">theme</div></a>
  449. <div id="a1" class="revealed">
  450. {Description}
  451. </div>
  452. <div id="a2" class="revealed">
  453. <a href="{text:link 1 url}"><div id="navlink">{text:link 1}</div></a>
  454. <a href="{text:link 2 url}"><div id="navlink">{text:link 2}</div></a>
  455. <a href="{text:link 3 url}"><div id="navlink">{text:link 3}</div></a>
  456. <a href="{text:link 4 url}"><div id="navlink">{text:link 4}</div></a>
  457. <a href="{text:link 5 url}"><div id="navlink">{text:link 5}</div></a>
  458. <a href="{text:link 6 url}"><div id="navlink">{text:link 6}</div></a>
  459. <a href="{text:link 7 url}"><div id="navlink">{text:link 7}</div></a>
  460. <a href="{text:link 8 url}"><div id="navlink">{text:link 8}</div></a>
  461. <a href="{text:link 9 url}"><div id="navlink">{text:link 9}</div></a>
  462.  
  463. </div>
  464. </div>
  465.  
  466. </div>
  467.  
  468. <div id="wrap">
  469. <div class = "autopagerize_page_element" >
  470. {block:Posts}
  471. <div id="postage">
  472.  
  473. {block:Text}
  474. <div id="text">
  475. <h2><a href="{Permalink}">{Title}</a></h2>
  476. {Body}
  477. </div> <!--text post-->
  478. {/block:Text}
  479.  
  480. {block:Photo}
  481. <div id="photo">
  482. {block:If500pxPosts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:If500pxPosts}
  483. {block:If400pxPosts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxPosts}
  484. {block:If250pxPosts}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{/block:if250pxPosts}
  485. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  486. </div> <!--photo post-->
  487. {/block:Photo}
  488.  
  489. {block:Panorama}
  490. <div id="panorama">
  491. {LinkOpenTag}
  492. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  493. {LinkCloseTag}
  494. {block:Caption}
  495. <div class="caption">{Caption}</div>
  496. {/block:Caption}
  497. </div> <!--panorama post-->
  498. {/block:Panorama}
  499.  
  500. {block:Photoset}
  501. <div id="photoset">
  502. {block:If500pxPosts}{Photoset-500}{/block:If500pxPosts}
  503. {block:If400pxPosts}{Photoset-400}{/block:if400pxPosts}
  504. {block:If250pxPosts}{Photoset-250}{/block:if250pxPosts}
  505. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  506. </div> <!--photoset-->
  507. {/block:Photoset}
  508.  
  509. {block:Quote}
  510. <div id="quote">
  511. <div id="words">{Quote}</div>
  512. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  513. </div> <!--quote-->
  514. {/block:Quote}
  515.  
  516. {block:Link}
  517. <div id="linkpost">
  518. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  519. <a href="{URL}" class="linkety" {Target}>{Name}</a>
  520. {block:Description}
  521. <div class="linkdesc">{Description}</div>
  522. {/block:Description}
  523. </div> <!--link-->
  524. {/block:Link}
  525.  
  526. {block:Chat}
  527. <div id="chat">
  528. <h2><a href="{Permalink}">{Title}</a></h2>
  529. <ul>
  530. {block:Lines}
  531. <li class="{Alt} user_{UserNumber}">
  532. {block:Label}
  533. <span class="label">{Label}</span>
  534. {/block:Label}{Line}
  535. </li>
  536. {/block:Lines}
  537. </ul>
  538. </div> <!--chat-->
  539. {/block:Chat}
  540.  
  541. {block:Video}
  542. <div id="video">
  543. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  544. {block:If500pxPosts}{Video-500}{/block:If500pxPosts}
  545. {block:If400pxPosts}{Video-400}{/block:if400pxPosts}
  546. {block:If250pxPosts}{Video-250}{/block:if250pxPosts}
  547. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  548. </div> <!--video-->
  549. {/block:Video}
  550.  
  551. {block:Audio}
  552. <div id="audio">
  553. <table style="padding:5px; background-color:#fff;margin-bottom:5px;">
  554. <tr>
  555. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  556. <div id="albumart">
  557. {block:AlbumArt}
  558. <img src="{AlbumArtURL}" style="width:100px;">
  559. {/block:AlbumArt}</div></td>
  560. <td style="vertical-align:top; font-size:11px; line-height:12px"> {block:TrackName}<i>title:</i> {TrackName} <br />{/block:TrackName}
  561. {block:Artist}<i>artist:</i> {Artist} <br />{/block:Artist}
  562. {block:Album}<i>album:</i> {Album} <br />{/block:Album}
  563. {block:PlayCount}<i>played:</i> {FormattedPlayCount} times{/block:PlayCount}
  564. </td>
  565. </tr>
  566. </table>
  567. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  568. </div> <!--audio-->
  569. {/block:Audio}
  570.  
  571. {block:Answer}
  572. <div id="ask">
  573. <p>— <span>{Asker}</span>: {Question}</p>
  574. <p>{block:Answerer}— <span>{Answerer}</span> replied: {/block:Answerer}{Answer}</p>
  575. {block:Answerer}<blockquote>{Replies}</blockquote>{/block:Answerer}
  576. </div> <!--ask-->
  577. {/block:Answer}
  578.  
  579. <div class="info">
  580. <a href="{Permalink}">{TimeAgo}</a>
  581. {block:RebloggedFrom} - <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} {block:ContentSource}, <a title="{SourceTitle}" href="{SourceURL}">src</a>{/block:ContentSource} <a href="{Permalink}">(♥ {NoteCount})</a> <a href="{ReblogURL}" title="reblog" target="_blank">↺</a>
  582. {block:HasTags}
  583. <div class="tags">
  584. {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}
  585. </div>
  586. {/block:HasTags}
  587. </div> <!--info-->
  588.  
  589. {block:PermalinkPage}
  590. {PostNotes}
  591. {/block:PermalinkPage}
  592.  
  593. </div> <!--postage-->
  594. {/block:Posts}
  595. </div> <!--wrap-->
  596.  
  597. {block:IfNotInfiniteScroll}
  598. {block:Pagination}
  599. <div id="footer">
  600. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} — {block:NextPage}<a href="{NextPage}">forth</a>{/block:NextPage}
  601. </div>
  602. {/block:Pagination}
  603. {block:IfNotInfiniteScroll}
  604. {block:IfInfiniteScroll}{/block:IfInfiniteScroll}
  605.  
  606.  
  607. </body>
  608. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!