API tools faq
paste
Advertisement
imgirlrauhl

Theme #23 - Keep him alive

imgirlrauhl
Mar 12th, 2015
1,906
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. Theme #23 - "Keep Him Alive" by Vanne @ vitanica.tumblr.com
  6.  
  7. .Do NOT remove the credits
  8. .Do NOT steal my codes
  9. .Do NOT use as base code
  10. .Do NOT claim as your own
  11.  
  12. Thank you so much for using my theme! <3
  13.  
  14. -->
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17.  
  18. <head>
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
  25. <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
  26. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  27.  
  28. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  30.  
  31. <meta name="image:Background" content="http://static.tumblr.com/n9vj50j/T4jnkgibi/captura_de_pantalla_2015-02-24_a_las_19.12.44.png"/>
  32. <meta name="image:Sidebar BG" content=""/>
  33. <meta name="image:Sidebar Image" content="http://static.tumblr.com/n9vj50j/Zarnkgiee/captura_de_pantalla_2014-05-15_a_las_12.05.09.png"/>
  34.  
  35. <meta name="color:Background" content="#f8f8f8"/>
  36. <meta name="color:Sidebar BG" content="#87d6e7"/>
  37.  
  38. <meta name="color:Title" content="#fff"/>
  39. <meta name="color:Title Shadow" content="#90d5e5"/>
  40.  
  41. <meta name="color:Main Nav Links" content="#ffffff"/>
  42. <meta name="color:Main Nav Links Shadow" content="#6dc2d4"/>
  43.  
  44. <meta name="color:Entries Text" content="#7e7e7e">
  45. <meta name="color:Entries BG" content="#ffffff">
  46. <meta name="color:Entries Shadow" content="#f3f3f3">
  47. <meta name="color:Entries Title" content="#6ab9d1">
  48. <meta name="color:Entries Title Border" content="#f5f5f5">
  49.  
  50. <meta name="color:Blockquote Border" content="#e6e6e6">
  51. <meta name="color:Blockquote BG" content="#fbfbfb">
  52. <meta name="color:Scrollbar" content="#6ec4d7">
  53. <meta name="color:Scrollbar Bottom" content="#e5e5e5">
  54. <meta name="color:Link" content="#67c0d4">
  55. <meta name="color:Link Hover" content="#d4d4d4">
  56. <meta name="color:Italic Text" content="#7cc9b2">
  57. <meta name="color:Bold Text" content="#75a7df">
  58. <meta name="color:Highlight BG" content="#88c9dc"/>
  59. <meta name="color:Highlight Text" content="#ffffff"/>
  60. <meta name="color:Tooltip Text" content="#ffffff"/>
  61. <meta name="color:Tooltip BG" content="#50b3c9"/>
  62.  
  63. <meta name="color:Ask BG" content="#fbfbfb"/>
  64. <meta name="color:Ask Text" content="#929292"/>
  65.  
  66. <meta name="color:Permalink BG" content="#b0e4ed"/>
  67. <meta name="color:Permalink Text" content="#6aafb8"/>
  68.  
  69. <meta name="text:Music Player" content="">
  70. <meta name="text:Link 1" content="">
  71. <meta name="text:Link 1 URL" content="">
  72. <meta name="text:Link 2" content="">
  73. <meta name="text:Link 2 URL" content="">
  74. <meta name="text:Link 3" content="">
  75. <meta name="text:Link 3 URL" content="">
  76. <meta name="text:Link 4" content="">
  77. <meta name="text:Link 4 URL" content="">
  78. <meta name="text:Link 5" content="">
  79. <meta name="text:Link 5 URL" content="">
  80. <meta name="text:Link 6" content="">
  81. <meta name="text:Link 6 URL" content="">
  82. <meta name="text:Link 7" content="">
  83. <meta name="text:Link 7 URL" content="">
  84. <meta name="text:Link 8" content="">
  85. <meta name="text:Link 8 URL" content="">
  86.  
  87. <meta name="if:Search Box" content="">
  88. <meta name="if:Show Captions" content="">
  89. <meta name="if:Image Fade" content="">
  90. <meta name="if:Black And White Images" content="">
  91.  
  92. <style type="text/css">
  93.  
  94. @import url(http://weloveiconfonts.com/api/?family=entypo|iconicfill);
  95.  
  96. /* entypo */
  97. [class*="entypo-"]:before {
  98. font-family: 'entypo', sans-serif;
  99. }
  100.  
  101. /* iconicfill */
  102. [class*="iconicfill-"]:before {
  103. font-family: 'IconicFill', sans-serif;
  104. }
  105.  
  106. html, body {
  107. height: 100%;
  108. margin: 0;
  109. padding: 0;
  110. word-wrap: break-word;
  111. font-family: Noto Sans;
  112. font-size: 12px;
  113. color: {color:Entries Text};
  114. background: {color:Background} url({image:Background}) repeat top center fixed;
  115. }
  116.  
  117. body { overflow: hidden; }
  118.  
  119. ::-webkit-scrollbar { width:5px; }
  120.  
  121. ::-webkit-scrollbar-track {
  122. background:{color:scrollbar bottom};
  123. border:2px solid rgba(0, 0, 0, 0.0);
  124. -moz-background-clip: border;
  125. -webkit-background-clip: border;
  126. background-clip: border-box;
  127.  
  128. -moz-background-clip: padding;
  129. -webkit-background-clip: padding;
  130. background-clip: padding-box;
  131.  
  132. -moz-background-clip: content;
  133. -webkit-background-clip: content;
  134. background-clip: content-box;
  135. }
  136.  
  137. ::-webkit-scrollbar-thumb { background:{color:scrollbar}; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
  138.  
  139. ::-webkit-scrollbar-thumb:window-inactive { background: rgba(200,200,200,0.4); }
  140.  
  141. blockquote {
  142. margin: 10px 0px 0px 3px;
  143. padding: 2px 7px 2px 7px;
  144. background: {color:Blockquote BG};
  145. border-left: 2px solid {color:Blockquote Border};}
  146.  
  147. ::selection {
  148. background: {color:Highlight BG};
  149. color: {color:Highlight Text};}
  150.  
  151. a {
  152. color: {color:Link};
  153. text-decoration: none;
  154. -webkit-transition: all .4s ease;
  155. -moz-transition: all .4s ease;
  156. -o-transition: all .4s ease;
  157. transition: all .4s ease;}
  158. a:hover {
  159. color: {color:Link Hover};
  160. text-decoration: none;}
  161.  
  162. b, strong {
  163. font-weight: 700;
  164. color: {color:Bold Text};
  165. letter-spacing: 0px;
  166. word-spacing: 2px;}
  167.  
  168. i, em {
  169. font-weight: 400italic;
  170. letter-spacing: 0px;
  171. word-spacing: 2px;
  172. color: {color:Italic Text};}
  173.  
  174. pre {
  175. padding: 10px;
  176. background: {color:Ask BG};}
  177.  
  178. /* sidebar */
  179. #sidebar {
  180. position: absolute;
  181. margin-left: 0px;
  182. width: 270px;
  183. height: 620px;
  184. padding: 0px;
  185. background: {color:Sidebar BG} url({image:Sidebar BG}) fixed;
  186. }
  187.  
  188. #title {
  189. position: absolute;
  190. margin-top: -50px;
  191. margin-left: 270px;
  192. width: 690px;
  193. height: 50px;
  194. text-align: center;
  195. line-height: 50px;
  196. font-size: 30px;
  197. font-family: courier new;
  198. font-weight: bold;
  199. letter-spacing: 2px;
  200. overflow: hidden;
  201. padding: 0px;
  202. color: {color:Title};
  203. text-shadow: 1px 1px {color:Title Shadow};
  204. }
  205.  
  206. #icon {
  207. position: absolute;
  208. margin: 20px;
  209. width: 180px;
  210. }
  211.  
  212. #icon img {
  213. width: 170px;
  214. border: 5px solid {color:Main Nav Links Shadow};
  215. }
  216.  
  217. #nav {
  218. position: absolute;
  219. margin-top: 20px;
  220. margin-left: 215px;
  221. width: 40px;
  222. }
  223.  
  224. #nav a {
  225. position: relative;
  226. display: block;
  227. width: 40px;
  228. height: 40px;
  229. text-align: center;
  230. line-height: 40px;
  231. margin-bottom: 3px;
  232. color: {color:Main Nav Links};
  233. }
  234.  
  235. #nav i {
  236. font-size: 22px;
  237. line-height: 40px;
  238. color: {color:Main Nav Links};
  239. text-shadow: 3px 3px {color:Main Nav Links Shadow};
  240. }
  241.  
  242. .mwah {
  243. position: absolute;
  244. top: 0px;
  245. margin-left: -195px;
  246. color: {color:Entries Text};
  247. background: {color:Sidebar BG} url({image:Sidebar BG}) fixed;
  248. padding: 10px 15px;
  249. width: 160px;
  250. height: 400px;
  251. z-index: 99999;
  252. }
  253.  
  254. .mwah h1 {
  255. border-bottom: 3px solid;
  256. padding: 4px;
  257. font-size: 16px;
  258. font-family: courier new;
  259. text-transform: uppercase;
  260. color: {color:Main Nav Links};
  261. text-shadow: 3px 3px {color:Main Nav Links Shadow};
  262. }
  263.  
  264. .mwah a {
  265. display: block;
  266. margin: 0px;
  267. width: 160px !important;
  268. height: 20px !important;
  269. text-align: left !important;
  270. line-height: 20px !important;
  271. font-family: courier new;
  272. font-size: 13px;
  273. font-weight: bold;
  274. padding-left: 5px;
  275. text-transform: uppercase;
  276. color: {color:Main Nav Links};
  277. }
  278.  
  279. .mwah a:hover {
  280. letter-spacing: 4px;
  281. color: {color:Main Nav Links};
  282. text-shadow: 3px 3px {color:Main Nav Links Shadow};
  283. }
  284.  
  285. /* music player */
  286. .musicplayer {
  287. position: absolute;
  288. margin: 0px;
  289. width: 40px;
  290. height: 40px;
  291. }
  292.  
  293. .micon {
  294. position: absolute;
  295. margin-left: 5px;
  296. top: 5px;
  297. width: 30px;
  298. height: 30px;
  299. opacity: 0;
  300. overflow: hidden;
  301. background: {color:Main Nav Links};
  302. box-shadow: 3px 3px {color:Main Nav Links Shadow};
  303. -webkit-border-radius: 30px;
  304. -moz-border-radius: 30px;
  305. border-radius: 30px;
  306. -webkit-transition: all .4s ease;
  307. -moz-transition: all .4s ease;
  308. -o-transition: all .4s ease;
  309. transition: all .4s ease;
  310. }
  311.  
  312. .musicplayer:hover .micon { opacity: 1; }
  313.  
  314. .mplay {
  315. margin-left: -22px;
  316. margin-top: -9px;
  317. width: 60px;
  318. height: 30px;
  319. overflow: hidden;
  320. }
  321.  
  322. #description {
  323. margin-top: 10px;
  324. width: 180px;
  325. font-size: 10px;
  326. font-family: Noto Sans;
  327. color: {color:Main Nav Links};
  328. }
  329.  
  330. #description i, #description b, #description a, #description a:hover { color: {color:Main Nav Links}; }
  331. #description a { text-decoration: line-through; }
  332.  
  333. /*search box*/
  334. #searchbox {
  335. position: absolute;
  336. margin-left: 4px;
  337. bottom: 0px;
  338. padding: 10px;
  339. }
  340.  
  341. #searchic {
  342. position: absolute;
  343. width: 25px;
  344. height: 25px;
  345. margin-left: 4px;
  346. }
  347.  
  348. #searchic i { line-height: 25px; color: {color:Entries Text}; }
  349.  
  350. #sf {
  351. width: 120px;
  352. float: left;
  353. border: 1px solid {color:Entries BG};
  354. padding: 5px 5px 5px 23px;
  355. margin-left: -4px;
  356. outline: none;
  357. color: {color:Entries Text};
  358. background: {color:Entries BG};
  359. }
  360.  
  361. /* posts */
  362. .contt {
  363. padding-top: 100px;
  364. margin: 0 auto;
  365. width: 960px;
  366. }
  367.  
  368. #container {
  369. position: relative;
  370. margin-left: 270px;
  371. width: 690px;
  372. height: 600px;
  373. overflow: auto;
  374. padding-top: 20px;
  375. background: rgba(255, 255, 255, .5);
  376. }
  377.  
  378. .entry {
  379. position: relative;
  380. width: 250px;
  381. margin-left: 20px;
  382. margin-bottom: 20px;
  383. float: left;
  384. padding: 30px;
  385. text-align: justify;
  386. font-size: 12px;
  387. font-family: Noto Sans;
  388. color: {color:Entries Text};
  389. background: {color:Entries BG};
  390. box-shadow: 3px 3px {color:Entries Shadow};
  391. }
  392.  
  393. .entry img { max-width: 100%; }
  394. .entry a { font-weight: bold; }
  395.  
  396. h1 {
  397. font-size: 16px;
  398. text-align: left;
  399. letter-spacing: 2px;
  400. text-transform: uppercase;
  401. font-family: Courier New;
  402. padding: 0px 10px 7px 10px;
  403. margin: 10px 0px 10px 0px;
  404. color: {color:Entries Title};
  405. border-bottom: 2px solid {color:Entries Title Border};
  406. }
  407.  
  408. /* image fade / black and white images */
  409. {block:IfImageFade}
  410. .entry img {
  411. opacity: .7;
  412. -webkit-transition: all .4s ease;
  413. -moz-transition: all .4s ease;
  414. -o-transition: all .4s ease;
  415. transition: all .4s ease;
  416. }
  417.  
  418. .entry img:hover {
  419. opacity: 1;
  420. }
  421.  
  422. .photoset{
  423. opacity: .7;
  424. -webkit-transition: all .4s ease;
  425. -moz-transition: all .4s ease;
  426. -o-transition: all .4s ease;
  427. transition: all .4s ease;
  428. }
  429.  
  430. .photoset:hover{
  431. opacity: 1;
  432. -webkit-transition: all .4s ease;
  433. -moz-transition: all .4s ease;
  434. -o-transition: all .4s ease;
  435. transition: all .4s ease;
  436. }
  437. {/block:IfImageFade}
  438.  
  439. {block:IfBlackAndWhiteImages}
  440. .entry img{
  441. -webkit-filter:grayscale(80%);
  442. -webkit-transition: all .4s ease;
  443. -moz-transition: all .4s ease;
  444. -o-transition: all .4s ease;
  445. transition: all .4s ease;
  446. }
  447.  
  448. .entry img:hover{
  449. -webkit-filter:none;
  450. -webkit-transition: all .4s ease;
  451. -moz-transition: all .4s ease;
  452. -o-transition: all .4s ease;
  453. transition: all .4s ease;
  454. }
  455.  
  456. .entry img, .photoset{
  457. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\'
  458. values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* FIREFOX 3.5+ */
  459. filter: gray; /* IE6-9 */
  460. -webkit-filter: grayscale(80%);
  461. -webkit-transition: all .4s ease;
  462. -moz-transition: all .4s ease;
  463. -o-transition: all .4s ease;
  464. transition: all .4s ease;
  465. }
  466.  
  467. .entry img:hover,.photoset:hover{
  468. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\'
  469. values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* FIREFOX 3.5+ */
  470. filter: gray; /* IE6-9 */
  471. -webkit-filter: grayscale(0%);
  472. -webkit-transition: all .4s ease;
  473. -moz-transition: all .4s ease;
  474. -o-transition: all .4s ease;
  475. transition: all .4s ease;
  476. }
  477. {/block:IfBlackAndWhiteImages}
  478.  
  479. /* ask */
  480. #ask {
  481. margin-left: 0px;
  482. background: {color:Ask BG};
  483. color: {color:Ask Text};
  484. font-family: Consolas;
  485. padding: 10px;
  486. }
  487.  
  488. #ask img { float: left; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
  489.  
  490. #asker {
  491. margin-left: 40px;
  492. height: 30px;
  493. padding-left: 0px;
  494. font-family: courier new;
  495. font-size: 12px;
  496. line-height: 30px;
  497. text-transform: uppercase;
  498. font-weight: bold;
  499. letter-spacing: 1px;
  500. background: {color:Ask BG};
  501. color: {color:Ask Text};
  502. }
  503.  
  504. #answer { margin-top: 10px; }
  505.  
  506. /* quote */
  507. #quote {
  508. padding: 8px 8px 4px 8px;
  509. text-align: center;
  510. font-weight: bold;
  511. font-style: italic;
  512. font-size: 14px;
  513. font-family: Courier new;
  514. letter-spacing: 1px;
  515. color: {color:Italic Text};
  516. }
  517.  
  518. #quotesource {
  519. padding: 3px;
  520. text-align: center;
  521. font-size: 8px;
  522. font-weight: bold;
  523. font-family: courier new;
  524. text-transform: uppercase;
  525. letter-spacing: 1px;
  526. color: {color:Bold Text};
  527. }
  528.  
  529. /* chat */
  530. .chat { margin: 0; }
  531.  
  532. .chat .chat1 { margin-left: 0px; }
  533.  
  534. .chat .chat1 .chat2 { border-bottom: 3px solid {color:Italic Text}; margin-bottom: 2px; padding: 4px 4px 5px 5px; }
  535.  
  536. .chat .chat1 .chat2.even { border-bottom: 3px solid {color:Bold Text}; }
  537.  
  538. /*music post*/
  539. #audio img {
  540. width: 80px;
  541. height: 80px;
  542. float: left;
  543. margin-right: 20px;
  544. {block:IfImageFade}
  545. opacity: 1;
  546. {/block:IfImageFade}
  547. }
  548.  
  549. #albumart { position: absolute; }
  550.  
  551. #playerholder {
  552. background: #fff;
  553. width: 80px;
  554. height: 80px;
  555. margin: 0px;
  556. overflow: hidden;
  557. position: absolute;
  558. opacity: .5;
  559. -webkit-transition: all 0.5s ease-in-out;
  560. -moz-transition: all 0.5s ease-in-out;
  561. -o-transition: all 0.5s ease-in-out;
  562. -ms-transition: all 0.5s ease-in-out;
  563. transition: all 0.5s ease-in-out;
  564. }
  565.  
  566. #player {
  567. width: 28px;
  568. margin-left: 26px;
  569. margin-top: 26px;
  570. overflow: hidden;
  571. -webkit-transition: all 0.5s ease-in-out;
  572. -moz-transition: all 0.5s ease-in-out;
  573. -o-transition: all 0.5s ease-in-out;
  574. -ms-transition: all 0.5s ease-in-out;
  575. transition: all 0.5s ease-in-out;
  576. }
  577.  
  578. #playerholder:hover {
  579. opacity: .9;
  580. }
  581.  
  582. /* permalink */
  583. #perma {
  584. position: absolute;
  585. bottom: -15px;
  586. left: 0px;
  587. width: 310px;
  588. height: 24px;
  589. line-height: 24px;
  590. font-size: 9px;
  591. opacity: 0;
  592. text-align: center;
  593. font-family: courier new;
  594. font-weight: bold;
  595. text-transform: uppercase;
  596. letter-spacing: 1px;
  597. color: {color:Permalink Text};
  598. background: {color:Permalink BG};
  599. -webkit-transition: all .4s ease;
  600. -moz-transition: all .4s ease;
  601. -o-transition: all .4s ease;
  602. transition: all .4s ease;
  603. }
  604.  
  605. #perma a { color: {color:Permalink Text}; }
  606.  
  607. .entry:hover #perma { bottom: 0px; opacity: 1; }
  608.  
  609. /* permalink */
  610. #reblog {
  611. position: absolute;
  612. top: -15px;
  613. left: 15px;
  614. width: 70px;
  615. height: 24px;
  616. line-height: 24px;
  617. font-size: 9px;
  618. opacity: 0;
  619. text-align: center;
  620. font-family: courier new;
  621. font-weight: bold;
  622. text-transform: uppercase;
  623. letter-spacing: 1px;
  624. background: {color:Permalink BG};
  625. -webkit-transition: all .4s ease;
  626. -moz-transition: all .4s ease;
  627. -o-transition: all .4s ease;
  628. transition: all .4s ease;
  629. }
  630.  
  631. #reblog a { color: {color:Permalink Text}; }
  632. #reblog i { color: {color:Permalink Text}; }
  633.  
  634. .entry:hover #reblog { top: -7px; opacity: 1; }
  635.  
  636. /*pagination*/
  637. #pagination {
  638. position: relative;
  639. float: left;
  640. width: 310px;
  641. height: 40px;
  642. text-align: center;
  643. margin-left: 20px;
  644. margin-bottom: 20px;
  645. }
  646.  
  647. #pagination a {
  648. display: inline-block;
  649. margin: 2px 2px 0px 2px;
  650. padding: 12px;
  651. text-align: center;
  652. font-family: Courier New;
  653. font-size: 14px;
  654. font-weight: bold;
  655. text-transform: uppercase;
  656. letter-spacing: 1px;
  657. color: {color:Main Nav Links};
  658. background: {color:Sidebar BG};
  659. }
  660.  
  661. #pagination i { color: {color:Main Nav Links}; }
  662.  
  663. #pagination a:hover { text-shadow: 3px 3px {color:Main Nav Links Shadow}; }
  664.  
  665. span.selectedpage {
  666. color: {color:Main Nav Links};
  667. background: {color:Sidebar BG};
  668. display: inline-block;
  669. padding: 12px;
  670. text-align: center;
  671. font-family: Courier New;
  672. font-size: 14px;
  673. font-weight: bold;
  674. text-transform: uppercase;
  675. letter-spacing: 1px;
  676. }
  677.  
  678. /* notes */
  679. .postdate {
  680. position: relative;
  681. margin-left: 20px;
  682. margin-bottom: 20px;
  683. float: left;
  684. width: 280px;
  685. padding: 15px;
  686. text-align: left;
  687. font-size: 12px;
  688. font-family: Noto Sans;
  689. color: {color:Entries Text};
  690. background: {color:Entries BG};
  691. box-shadow: 3px 3px {color:Entries Shadow};
  692. }
  693.  
  694. .post_notes {
  695. position: relative;
  696. margin-left: 20px;
  697. margin-bottom: 20px;
  698. float: left;
  699. width: 250px;
  700. max-height: 400px;
  701. overflow: auto;
  702. padding: 30px;
  703. text-align: justify;
  704. font-size: 10px;
  705. font-family: Noto Sans;
  706. color: {color:Entries Text};
  707. background: {color:Entries BG};
  708. box-shadow: 3px 3px {color:Entries Shadow};
  709. }
  710.  
  711. ol.notes { list-style-type: none; padding:0; margin:0; }
  712.  
  713. li.note {
  714. margin: 0px auto;
  715. padding: 7px;
  716. display: block;
  717. border-bottom: 1px solid {color:Entries Shadow};
  718. }
  719.  
  720. ol.notes li.note img.avatar {
  721. padding: 0px;
  722. border-radius: 20px;
  723. -moz-border-radius: 20px;
  724. margin-right: 10px;
  725. margin-bottom: -5px;
  726. }
  727.  
  728. #s-m-t-tooltip{
  729. position: absolute;
  730. margin: 13px;
  731. letter-spacing: 1px;
  732. z-index: 9999;
  733. font-size: 9px;
  734. font-weight: bold;
  735. font-family: Courier New;
  736. background: {color:Tooltip BG};
  737. color: {color:Tooltip Text};
  738. text-transform: uppercase;
  739. padding: 4px;
  740. -webkit-transition: all .4s ease;
  741. -moz-transition: all .4s ease;
  742. -o-transition: all .4s ease;
  743. transition: all .4s ease;
  744. -webkit-border-radius: 4px;
  745. -moz-border-radius: 4px;
  746. border-radius: 4px;
  747. }
  748.  
  749. </style>
  750.  
  751. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  752.  
  753. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  754.  
  755. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  756. <script type="text/javascript">
  757. $(window).load(function () {
  758. $('#container').masonry({
  759. itemSelector : ".entry",
  760. },
  761. function() { $('#container').masonry({ appendedContent: $(this) }); }
  762. );
  763. });
  764. </script>
  765.  
  766. <script type="text/javascript">
  767. jQuery(document).ready(function() {
  768. jQuery(".mwah").hide();
  769. //toggle the componenet with class msg_body
  770. jQuery(".fringe").click(function()
  771. {
  772. jQuery(this).next(".mwah").slideToggle(500);
  773. });});
  774. </script>
  775.  
  776. </head>
  777.  
  778. <body>
  779.  
  780. <div class="contt">
  781.  
  782. <div id="title">{Title}</div>
  783.  
  784. <div id="sidebar">
  785. <div id="icon"><img src="{image:Sidebar Image}"><div id="description">{Description}</div></div>
  786. <div id="nav">
  787. <a href="/" title="refresh"><i class="fa fa-retweet"></i></a>
  788. <a href="/ask" title="message"><i class="fa fa-envelope"></i></a>
  789. <a href="http://vitanica.tumblr.com" title="theme"><i class="fa fa-star"></i></a>
  790. <a href="#" class="fringe" title="links"><i class="fa fa-plus"></i></a>
  791. <div class="mwah"><h1>links</h1>
  792. {block:iflink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:iflink1}
  793. {block:iflink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:iflink2}
  794. {block:iflink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:iflink3}
  795. {block:iflink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:iflink4}
  796. {block:iflink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:iflink5}
  797. {block:iflink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:iflink6}
  798. {block:iflink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:iflink7}
  799. {block:iflink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:iflink8}
  800. {block:iflink9}<a href="{text:Link 9 URL}">{text:Link 9}</a>{/block:iflink9}
  801. {block:iflink10}<a href="{text:Link 10 URL}">{text:Link 10}</a>{/block:iflink10}
  802. </div>
  803. <a href="#">
  804. <div class="musicplayer"><i class="fa fa-headphones"></i>
  805. <div class="micon">
  806. <div class="mplay">{text:Music Player}</div>
  807. </div>
  808. </div>
  809. </a>
  810. </div>
  811.  
  812. {block:IfSearchBox}
  813. <div id="searchbox">
  814. <div id="searchic"><i class="fa fa-search"></i></div>
  815. <form action="/search" method="get" class="sfm">
  816. <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  817. </form>
  818. </div><!-- /div search box -->
  819. {/block:IfSearchBox}
  820. </div>
  821.  
  822. <div id="container">
  823. {block:Posts}
  824. <div class="entry">
  825.  
  826. {block:Text}
  827. {block:Title}<h1><b><i class="fa fa-bars"></i></b> {Title}</h1>{/block:Title}
  828. {Body}
  829. {block:IndexPage}
  830. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  831. {/block:IndexPage}
  832. {/block:Text}
  833.  
  834. {block:Photo}
  835. {LinkOpenTag}<img src="{PhotoURL-highres}" width="500px" alt="{PhotoAlt}">{LinkCloseTag}
  836. {block:IndexPage}
  837. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  838. {/block:IndexPage}
  839. {/block:Photo}
  840.  
  841. {block:Photoset}
  842. {Photoset-250}
  843. {block:IndexPage}
  844. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  845. {/block:IndexPage}
  846. {/block:Photoset}
  847.  
  848. {block:Video}
  849. {Video-250}
  850. {block:IndexPage}
  851. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  852. {/block:IndexPage}
  853. {/block:Video}
  854.  
  855. {block:Quote}
  856. <div id="quote"><i class="fa fa-quote-left"></i> {Quote} <i class="fa fa-quote-right"></i></div>
  857. <div id="quotesource">-{Source}</div>
  858. {block:IndexPage}
  859. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  860. {/block:IndexPage}
  861. {/block:Quote}
  862.  
  863. {block:Audio}
  864. {block:AlbumArt}<div id="audio"><img src="http://static.tumblr.com/n9vj50j/ww2nkeppi/captura_de_pantalla_2015-02-26_a_las_19.34.07.png">
  865. <div id="albumart"><img src="{AlbumArtURL}"></div>
  866. <div id="playerholder">
  867. <div id="player">{AudioPlayerWhite}</div>
  868. </div>
  869. </div>{/block:AlbumArt}
  870. <center>{block:TrackName}<br><big><b>{TrackName}</b></big>{/block:TrackName}
  871. {block:Artist}<br> by {Artist}{/block:Artist}
  872. <p><font style="font-size: 8px; text-transform: uppercase;">This song has been played {FormattedPlayCount} times</font></center>
  873. {block:IfShowCaptions}{block:Caption}<p>{Caption}{/block:Caption}{/block:IfShowCaptions}
  874. {/block:Audio}
  875.  
  876. {block:Answer}
  877. <div id="ask"><img src="{AskerPortraitURL-30}">
  878. <div id="asker">{Asker} sent:</div>
  879. <br>{Question}</div>
  880. <div id="answer">{Answer}</div>
  881. {/block:Answer}
  882.  
  883. {block:Link}
  884. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  885. {Description}
  886. {/block:Link}
  887.  
  888. {block:Chat}
  889. {block:Title}<h1>{Title}</h1>{/block:Title}
  890. <div class="chat">
  891. <div class="chat1">
  892. {block:Lines}
  893. <div class="chat2 {Alt}">
  894. {block:Label}
  895. {Label}
  896. {/block:Label}
  897. {Line} </div>
  898. {/block:Lines}
  899. </div>
  900. </div>
  901. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  902. {/block:Chat}
  903.  
  904.  
  905. {block:IndexPage}
  906. {block:Date}
  907. <div id="perma">
  908. <a href="{permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} / {NoteCount} </a>
  909.  
  910. {block:RebloggedFrom}/ <a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a>{/block:RebloggedFrom}
  911.  
  912. {block:ContentSource}/ <a href="{SourceURL}" title="{SourceTitle}">Source</a> {/block:ContentSource}</div>
  913.  
  914. <div id="reblog"><a href="{reblogurl}" target="_blank" style="color: {color:Reblog Button Text}; background: {color:Reblog Button BG};"><i class="fa fa-retweet"></i> reblog</a></div>
  915. {/block:Date}
  916. {/block:IndexPage}
  917.  
  918.  
  919. </div><!-- /div entry -->
  920.  
  921. {block:PermalinkPage}
  922. {block:Date}
  923. <div class="postdate">
  924. <i class="fa fa-calendar"></i> <b>Posted on:</b> {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year} at {12Hour}:{Minutes}{AmPm} with <b>{NoteCount}</b> notes.
  925. {block:RebloggedFrom}<br><i class="fa fa-random"></i> <b>Reblogged from:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a>
  926. <br><i class="fa fa-user"></i> <b>Originally posted by: </b><a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  927. {block:HasTags}<br><i class="fa fa-tags"></i> <b>Tagged as:</b> {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  928. </div>
  929. {/block:Date}
  930. {block:PostNotes}<div class="post_notes">{PostNotes}</div>
  931. {/block:PostNotes}
  932. {/block:PermalinkPage}
  933.  
  934. {/block:Posts}
  935.  
  936. {block:Pagination}
  937. <div id="pagination">
  938. {block:PreviousPage}
  939. <a href="{PreviousPage}"><i class="fa fa-minus"></i></a>
  940. {/block:PreviousPage}
  941. {block:JumpPagination length="4"}
  942. {block:CurrentPage}
  943. <span class="selectedpage"><i class="fa fa-times"></i></span>
  944. {/block:CurrentPage}
  945. {block:JumpPage}
  946. <a class="jump_page" href="{URL}">{PageNumber}</a>
  947. {/block:JumpPage}
  948. {/block:JumpPagination}
  949. {block:NextPage}
  950. <a href="{NextPage}"><i class="fa fa-plus"></i></a>
  951. {/block:NextPage}
  952. </div>
  953. {/block:Pagination}
  954.  
  955. </div> <!-- /div containerr -->
  956.  
  957. </div><!-- /contt -->
  958.  
  959. </body>
  960. </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!