API tools faq
paste
Advertisement
hichew

theme 3: the blue theme

hichew
Aug 31st, 2014
1,108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. ┏━┓┏┳━━┳━━┓┏┓┏┳━━┳┓┏┳━━┓
  4. ┃┏┓╋┫┏━┫┃━┫┃┗┛┃┃━┫┗┛┃┃━┫
  5. ┃┃┃┃┃┗━┫┃━┫┃┃┃┃┃━┫┃┃┃┃━┫
  6. ┗┛┗┻┻━━┻━━┛┗┻┻┻━━┻┻┻┻━━┛
  7. -->
  8. <head>
  9. </script>
  10.  
  11. <script type="text/javascript"
  12. src="http://codysherman.com/tools/infinite-scrolling/code" ></script>
  13. <meta charset="utf-8">
  14. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  15. {block:Description}
  16. <meta name="description" content="{MetaDescription}" />
  17. {/block:Description}
  18.  
  19. <!-- COLORS -->
  20. <meta name="color:Background" content="#bad8eb">
  21. <meta name="color:Post BG" content="#ffffff">
  22. <meta name="color:Text" content="#222222">
  23. <meta name="color:Link" content="#427ea3">
  24. <meta name="color:Link Hover" content="#c5dfed">
  25. <meta name="color:Border" content="#427ea3">
  26. <meta name="color:footer" content="#dcecf5">
  27. <meta name="color:Links color" content="#dcecf5">
  28. <meta name="color:links text color" content="#427ea3">
  29. <meta name="color:links hover color" content="#97c5e0">
  30. <meta name="color:footer text color" content="#529ecc">
  31. <meta name="color:shadow" content="#75b1d6">
  32. <meta name="color:glow color"content="#ffffff">
  33.  
  34. <!-- IMG'S -->
  35. <meta name="image:Sidebar" content="https://31.media.tumblr.com/a816a6d225bf3e75f043262fa8c469d6/tumblr_inline_nb6kavPgkY1sk1ysm.jpg"/>
  36. <meta name="image:background" content="">
  37. <meta name="image:favicon" contenT="https://31.media.tumblr.com/04d0a0a83f3f923782419f74f2e28e57/tumblr_inline_n15muwtSLA1rqcq1b.gif">
  38. <meta name="image:cornerimage" content="">
  39. <meta name="image:floatie1" conetnt="">
  40. <meta name="image:floatie2" conetnt="">
  41. <meta name="image:floatie3" conetnt="">
  42. <meta name="image:floatie4" conetnt="">
  43. <meta name="image:floatie5" conetnt="">
  44.  
  45. <!-- TEXT -->
  46. <meta name="text:sidebartop" content="150">
  47. <meta name="text:sidebarposition" content="500">
  48. <meta name="text:postposition" content="400">
  49. <meta name="text:cornerimage bottom" content="0">
  50. <meta name="text:cornerimage left" content="5">
  51. <meta name="text:link above title" content="links. . .">
  52. <meta name="text:link title 1" content="title 1">
  53. <meta name="text:link url 1" content="link url 1">
  54. <meta name="text:link title 2" content="title 2">
  55. <meta name="text:link url 2" content="link url 2">
  56. <meta name="text:link title 3" content="title 3">
  57. <meta name="text:link url 3" content="link url 3">
  58. <meta name="text:link title 4" content="title 4">
  59. <meta name="text:link url 4" content="link url 4">
  60.  
  61. <!-- IF -->
  62. <meta name="if:shadow" content="0">
  63. <meta name="if:round" content="0">
  64. <meta name="if:bgcover" content="0">
  65. <meta name="if:ifsidebarimg" content="0">
  66. <meta name="if:glow" content="">
  67.  
  68.  
  69.  
  70. <title>{Title}</title>
  71.  
  72. <!-- Favicon -->
  73. <link rel="shortcut icon" href="{image:favicon}">
  74. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  75. <link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  76.  
  77. <script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  78.  
  79. <style type="text/css">
  80.  
  81. ::-webkit-scrollbar {
  82. width:10px;
  83. height:5px;
  84. background:{color:scrollbar};}
  85. ::-webkit-scrollbar-thumb {background:{color:Text};}
  86.  
  87. body {
  88. margin:0px;
  89. background:{color:Background} url({image:background}) {block:ifbgcover} no-repeat center fixed ;
  90. no-repeat center center fixed;
  91. -webkit-background-size: cover;
  92. -moz-background-size: cover;
  93. -o-background-size: cover;
  94. background-size: cover; {/block:ifbgcover}
  95.  
  96. {block:ifnotbgcover} top left fixed repeat {/block:ifnotbgcover};
  97.  
  98.  
  99.  
  100. line-height:140%;
  101. color: {color:Text};
  102. font-family: Lucida Sans;
  103. font-size: 11px;
  104. }
  105.  
  106.  
  107. a{
  108. color:{color:link};
  109. -webkit-transition: 0.6s ease;transition: 0.6s ease;
  110. -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
  111. }
  112.  
  113. a:hover{
  114. color:{color:link hover};
  115. -webkit-transition: 0.6s ease;transition: 0.6s ease;
  116. -o-transition: 0.6s ease;-moz-transition: 0.6s ease;
  117. }
  118.  
  119.  
  120.  
  121. .post a{
  122. color:{color:Link};
  123. text-decoration:none;
  124. font-weight:normal;
  125. }
  126.  
  127. .post a:hover{
  128. color:{color:Link Hover};
  129. text-decoration:none;
  130. }
  131.  
  132. /* POSTS */
  133. #wrapper{
  134. width:{text:postposition}px;
  135. margin:0 auto;
  136. padding:10px;
  137. }
  138.  
  139. /* SIDEBAR */
  140. #sidebar{
  141. margin-top: {text:sidebartop}px;
  142. margin-left: {text:sidebarposition}px;
  143. text-align:center;
  144. background:{color:post bg};
  145. width: 133px;
  146. padding:5px;
  147. position:fixed;
  148. border:1px solid {color:border};
  149.  
  150. {block:ifround}
  151. -moz-border-radius:3px; -webkit-border-radius:3px; {/block:ifround}
  152.  
  153. {block:ifshadow}
  154. -moz-box-shadow: 2px 2px {color:shadow};
  155. -webkit-box-shadow: 2px 2px {color:shadow};
  156. box-shadow: 5px 5px {color:shadow}; {/block:ifshadow}
  157.  
  158. {block:ifglow}
  159. -moz-box-shadow: 0 0 9px 1px {color:glow color};
  160. -webkit-box-shadow: 0 0 9px 1px {color:glow color};
  161. box-shadow: 0 0 9px 1px {color:glow color}; {/block:ifglow}
  162.  
  163. }
  164.  
  165.  
  166.  
  167.  
  168. #sidebarimg{
  169. margin-bottom:5px;
  170.  
  171. }
  172.  
  173. #sidebarimg:hover{
  174. }
  175.  
  176. #sidebarimg img{
  177. max-width:100%;
  178. {block:ifsidebarimg}
  179. width: 114px;
  180. height: 114px;
  181. margin: 3px 3px;
  182. {/block:ifsidebarimg}
  183.  
  184. }
  185.  
  186.  
  187. /* DESK */
  188. #description{
  189. margin:5px 1;
  190. width: 120px;
  191. text-align:center;
  192. }
  193.  
  194. #description a{
  195. color:{color:Link};
  196. text-decoration:none;
  197. }
  198.  
  199. #description a:hover{
  200. color:{color:Link Hover};
  201. }
  202.  
  203.  
  204.  
  205.  
  206.  
  207. /* POSTS */
  208. #content{
  209. width:450px;
  210.  
  211. padding:10px;
  212. margin-top:-30px;
  213. margin-left:-30px;
  214. overflow:hidden;
  215.  
  216. }
  217.  
  218. .post{
  219. width:400px;
  220. padding:15px;
  221. margin:45px 0 35px 0;
  222. overflow:hidden;
  223. text-align:justify;
  224. border:1px solid {color:border};
  225. background:{color:post bg};
  226.  
  227.  
  228. {block:ifround}
  229. -moz-border-radius:3px; -webkit-border-radius:3px; {/block:ifround}
  230.  
  231. {block:ifshadow}
  232.  
  233. -moz-box-shadow: 2px 2px {color:shadow};
  234. -webkit-box-shadow: 2px 2px {color:shadow};
  235. box-shadow: 5px 5px {color:shadow};
  236. {/block:ifshadow}
  237.  
  238. {block:ifglow}
  239. -moz-box-shadow: 0 0 9px 1px {color:glow color};
  240. -webkit-box-shadow: 0 0 9px 1px {color:glow color};
  241. box-shadow: 0 0 9px 1px {color:glow color}; {/block:ifglow}
  242. }
  243.  
  244. .post img{
  245. max-width:100%;
  246. }
  247.  
  248. .posttitle{
  249. font-weight:normal;
  250. font-size:12px;
  251. line-height:22px;
  252. text-decoration:none;
  253. margin:3px 0 -3px 0;
  254. }
  255.  
  256. .posttitle a{
  257. text-decoration:none;
  258. }
  259.  
  260. .quote{
  261. font-weight:normal;
  262. font-size:10px;
  263. font-style:italic;
  264. line-height:22px;
  265. text-decoration:none;
  266. }
  267.  
  268. .quotesource{
  269. text-align:right;
  270. }
  271.  
  272.  
  273. .question{
  274. padding-bottom:10px;
  275. margin:0;
  276. border-bottom:1px solid {color:Border};
  277. }
  278.  
  279. .caption{
  280. margin:0;
  281. }
  282.  
  283. blockquote{
  284. margin:0 0 0 15px;
  285. padding:0 0 0 10px;
  286. margin-left:5px;
  287. border-left:solid 2px grey ;
  288. }
  289.  
  290.  
  291.  
  292.  
  293. ol.notes li.note img {
  294. width:10px;
  295. height:10px;
  296. }
  297.  
  298. ol.notes{
  299. list-style-type:none;
  300. padding:2px 10px 2px 10px;
  301. font-size:10px;
  302. }
  303.  
  304.  
  305.  
  306. #picture
  307. {
  308. position:fixed;
  309. left:20px;
  310. bottom:3px;
  311. z-index:100
  312. }
  313.  
  314. /* FOOTER */
  315.  
  316. #footer{
  317. margin:3px;
  318. font-size:11px;
  319. font-style:none;
  320. line-height:16px;
  321. padding: 3px 3px;
  322. margin-top: 12px;
  323. background: {color:footer};
  324.  
  325. }
  326.  
  327.  
  328. .tumblr_audio_player {
  329. border: 1px solid {color:border};
  330. height: 50px;
  331. margin-left: 135px;
  332.  
  333. width:260px;
  334. }
  335.  
  336. .audioimgwrapper {
  337. position: absolute;
  338. left: 0px;
  339. top: 0px;
  340. border: 1px solid {color:border};
  341. overflow: hidden;
  342. width: 113px;
  343. height: 113px;
  344. }
  345.  
  346. .audioimgwrapper img {
  347. width: 100%;
  348. height: auto;
  349. }
  350.  
  351. .trackdetails {
  352. width: auto;
  353. display:inline-block;
  354. padding-top:10px;
  355. margin-left: 135px;
  356. min-height: 60px;
  357. }
  358.  
  359. .audiowrapper {
  360. position: relative;
  361. display:inline-block;
  362. }
  363.  
  364. a {color:;text-decoration:none;-webkit-tra… all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
  365.  
  366. .fufu {width:227px;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
  367.  
  368. .fufu:hover {-webkit-transform: translate(1em,0);-moz-transform: translate(1em,0);-o-transform: translate(1em,0);}
  369.  
  370. #biter
  371.  
  372. #bite a {display:block}
  373.  
  374. #bite .death {margin-top:-100px;filter: alpha(opacity = 0);opacity:0;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
  375.  
  376. #bite:hover .death {margin-top:0px;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out; filter: alpha(opacity = 100);filter: alpha(opacity = 100);opacity:100;}
  377.  
  378.  
  379. .side{
  380. width: 105px;
  381. text-align:center;
  382. font-size:8px;
  383. text-transform:uppercase;
  384. letter-spacing:2px;
  385.  
  386. }
  387.  
  388. .side a{
  389. width: 105px center;
  390. display:block;
  391. margin-bottom:4px;
  392. padding:1px 2px;
  393. color:{color:links text color};
  394. text-shadow:1px 1px 1px #eee);
  395. text-decoration: none;
  396. }
  397.  
  398. .side a:hover {
  399. background: {color:links hover color};
  400. }
  401.  
  402. .tfw{
  403. background:{color:links color};
  404. }
  405.  
  406. .sidee {
  407. width: 105px;
  408. color:{color:links text color};
  409. background:{color:links color};
  410. }
  411.  
  412.  
  413. .sidee a:hover {
  414. background: {color:links hover color};
  415. }
  416.  
  417.  
  418. {CustomCSS}
  419. </style>
  420.  
  421.  
  422. </head>
  423.  
  424.  
  425. <div style="position:fixed; bottom: {text:cornerimage bottom}px; left:{text:cornerimage left}px; z-index:-999">
  426. <img src="{image:cornerimage}"/></div>
  427.  
  428.  
  429. <body class="{block:IndexPage}index{/block:IndexPage} {block:PermalinkPage}permalink{/block:PermalinkPage}">
  430.  
  431. <script type="text/javascript" src="http://samisite.com/extras/HTMLobj-1640/moveobj.js"> </script>
  432. <script type="text/javascript">
  433.  
  434. /***********************************************
  435. * Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
  436. * Modified by Dynamic Drive for various improvements
  437. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  438. * Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!
  439. ***********************************************/
  440.  
  441. //Step 1: Define unique variable names depending on number of flying images (ie:3):
  442. var flyimage1, flyimage2, flyimage3, flyimage4, flyimage5
  443.  
  444. function pagestart(){
  445. //Step 2: Using the same variable names as 1), add or delete more of the below lines (47=width, height=68 of image):
  446. flyimage1=new Chip("flyimage1",40,62);
  447. flyimage2=new Chip("flyimage2",40,62);
  448. flyimage3=new Chip("flyimage3",40,62);
  449. flyimage4=new Chip("flyimage4",40,62);
  450. flyimage5=new Chip("flyimage5",40,62);
  451.  
  452.  
  453. //Step 3: Using the same variable names as 1), add or delete more of the below lines:
  454. movechip("flyimage1");
  455. movechip("flyimage2");
  456. movechip("flyimage3");
  457. movechip("flyimage4");
  458. movechip("flyimage5");
  459.  
  460. }
  461.  
  462. if (window.addEventListener)
  463. window.addEventListener("load", pagestart, false)
  464. else if (window.attachEvent)
  465. window.attachEvent("onload", pagestart)
  466. else if (document.getElementById)
  467. window.onload=pagestart
  468.  
  469. </script>
  470.  
  471. <!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
  472.  
  473.  
  474. <div id="flyimage1" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
  475. <img src="{image:floatie1}">
  476. </div>
  477.  
  478. <div id="flyimage2" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
  479. <img src="{image:floatie2}">
  480. </div>
  481.  
  482. <div id="flyimage3" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
  483. <img src="{image:floatie3}">
  484. </div>
  485.  
  486. <div id="flyimage4" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
  487. <img src="{image:floatie4}">
  488. </div>
  489.  
  490. <div id="flyimage5" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
  491. <img src="{image:floatie5}">
  492. </div>
  493.  
  494. </div>
  495.  
  496.  
  497.  
  498. </div>
  499. </div>
  500.  
  501.  
  502. <div id="wrapper">
  503.  
  504. <div id="sidebar">
  505.  
  506.  
  507. <div id="sidebarimg"><img src="{image:sidebar}"></div>
  508.  
  509. {block:Description}
  510. <div id="description">{Description}</div>
  511. {/block:Description}
  512. <br>
  513.  
  514. <div id="bite">
  515.  
  516. <center><div class="sidee">
  517. {text:link above title}</div>
  518. <br></center>
  519. <div class="death">
  520. <div align="center">
  521.  
  522. <div class="side">
  523. <a class ="tfw" href="{text:link url 1}">{text:link title 1}</a>
  524. <a class ="tfw" href="{text:link url 2}">{text:link title 2}</a>
  525. <a class ="tfw" href="{text:link url 3}">{text:link title 3}</a>
  526. <a class ="tfw" href="{text:link url 4}">{text:link title 4}</a>
  527. <a class ="tfw" href="http://nice-meme.tumblr.com/">Theme</a>
  528. </div>
  529. </div>
  530. </div>
  531. </div>
  532.  
  533. </div>
  534.  
  535. <div id="content">
  536. {block:Posts}
  537.  
  538. <!-- {block:NoRebloggedFrom}
  539. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  540. {/block:NoRebloggedFrom} -->
  541.  
  542. {block:ContentSource}<!-- {SourceURL}
  543. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  544. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  545. {/block:ContentSource}
  546.  
  547.  
  548. <div class="post">
  549.  
  550. {block:Text}
  551. {block:Title}
  552. <div class="posttitle">{Title}</div>
  553. {/block:Title}
  554. {Body}
  555. {/block:Text}
  556.  
  557. {block:Photo}
  558. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  559. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  560. {/block:Photo}
  561.  
  562. {block:Photoset}
  563. {Photoset-400}
  564. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  565. {/block:Photoset}
  566.  
  567. {block:Quote}
  568. <div class="quote">"{Quote}"</div>
  569. {block:Source}
  570. <div class="quotesource">{Source}</div>
  571. {/block:Source}
  572. {/block:Quote}
  573.  
  574. {block:Link}
  575. <div class="posttitle"><a href="{URL}">{Name}</a></div>
  576. {block:Description}
  577. <div class="description">{Description}</div>
  578. {/block:Description}
  579. {/block:Link}
  580.  
  581. {block:Chat}
  582. {block:Title}
  583. <div class="posttitle">{Title}</div>
  584. {/block:Title}
  585.  
  586. {block:Lines}
  587. <div class="{Alt} user_{UserNumber}">
  588. {block:Label}
  589. <b>{Label}</b>{/block:Label}
  590. &nbsp;{Line}
  591. </div>
  592. {/block:Lines}
  593. {/block:Chat}
  594.  
  595. {block:Video}
  596. {Video-400}
  597. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  598. {/block:Video}
  599.  
  600.  
  601. {block:Audio}
  602.  
  603. <div class="audiowrapper">
  604. {block:AlbumArt}
  605. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  606. {/block:AlbumArt}
  607.  
  608. {AudioPlayerWhite}
  609. <div class="trackdetails">
  610. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  611. {block:Artist}{Artist}{/block:Artist}<br/>
  612. {block:Album}{Album}{/block:Album}<br/>
  613. </div>
  614. </div>
  615.  
  616. {block:Caption}{Caption}{/block:Caption}
  617.  
  618.  
  619.  
  620. {/block:Audio}
  621.  
  622.  
  623. {block:Answer}
  624. <table style="border-bottom:0px solid #a0a0a0;padding-bottom:10px;margin-bottom:10px;">
  625. <tr>
  626. <td style="vertical-align:top;padding-right:5px;"><img src="{AskerPortraitURL-48}"></td>
  627. <td style="vertical-align:top;"><strong>{Asker} said:</strong> {Question}</td>
  628. </tr>
  629. </table>
  630. {Answer}
  631. {/block:Answer}
  632.  
  633. <div id="footer">
  634. <div class="footer"><center>
  635.  
  636. <a href="{Permalink}"><font color="{color:footer text color}">{block:Date}{timeago}{/block:Date}{block:NoteCount}</a></font><font color="{color:footer text color}"> ★ </font><a href="{Permalink}"><font color="{color:footer text color}">{NoteCountWithLabel}{/block:NoteCount} </a></font>
  637. <br>
  638.  
  639. {block:HasTags}
  640. {block:Tags}<font color="{color:footer text color}">#</font><a href="{TagURL}" title="{Tag}"><font color="{color:footer text color}">{Tag}</a></font> {/block:Tags}{/block:HasTags}</div></div></center>
  641.  
  642.  
  643. {block:PermalinkPage}
  644. <center>
  645. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}" ><font color="{color:footer text color}">via</a> <font color="{color:footer text color}">/</font> </font><a href="{ReblogRootURL}" title="{ReblogRootName}"><font color="{color:footer text color}">©</font></a> {/block:RebloggedFrom}</font></center>
  646.  
  647. {block:NoteCount}
  648. {block:PostNotes}{PostNotes}{/block:PostNotes}
  649.  
  650.  
  651. {/block:NoteCount}
  652. {/block:PermalinkPage}
  653.  
  654. </div>
  655. {/block:Posts}
  656. </div>
  657. </div>
  658.  
  659.  
  660. </div>
  661.  
  662. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  663. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  664.  
  665. <!-- add Javascript file here -->
  666. <!--<script src=""></script>-->
  667.  
  668.  
  669. </body>
  670.  
  671.  
  672. </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!