Advertisement
mogimochi

Theme [38] Lament

Jan 1st, 2016
12,999
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.52 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 38 Lament
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. ---------------------------------------------------------- VER 020917 -->
  16.  
  17. <meta name="image:background" content="">
  18. <meta name="image:sidebar" content="https://66.media.tumblr.com/2f82daa520524266f0712307bd8e4f17/tumblr_inline_o0ahmtoIkm1rshr70_540.jpg">
  19.  
  20. <meta name="color:background" content="#ffffff">
  21. <meta name="color:scrollbar" content="#cecece">
  22. <meta name="color:main content background" content="#ffffff">
  23. <meta name="color:main content border" content="#cecece">
  24. <meta name="color:description" content="#909090">
  25. <meta name="color:desc bold" content="#6e6e6e">
  26. <meta name="color:desc italic" content="#b2b2b2">
  27. <meta name="color:desc links" content="#DBA2A2">
  28. <meta name="color:desc links hover" content="#909090">
  29. <meta name="color:blog title" content="#828282">
  30. <meta name="color:blog navigation links" content="#a3a3a3">
  31. <meta name="color:blog navigation links hover" content="#656565">
  32. <meta name="color:navigation icons" content="#a3a3a3">
  33. <meta name="color:navigation icons hover" content="#888888">
  34. <meta name="color:panel title" content="#949494">
  35. <meta name="color:about panel basic info" content="#a3a3a3">
  36. <meta name="color:about panel biography" content="#9a9a9a">
  37. <meta name="color:custom links" content="#a3a3a3">
  38. <meta name="color:searchbox background" content="#f6f6f6">
  39. <meta name="color:searchbox text" content="#999999">
  40. <meta name="color:body text" content="#a3a3a3">
  41. <meta name="color:body bold" content="#DBA2A2">
  42. <meta name="color:body italic" content="#c1c1c1">
  43. <meta name="color:body links" content="#B299D1">
  44. <meta name="color:body links hover" content="#aaaaaa">
  45. <meta name="color:blockquote" content="#bbbbbb">
  46. <meta name="color:post title" content="#a3a3a3">
  47. <meta name="color:post title accent" content="#e69c9c">
  48. <meta name="color:post quote" content="#727272">
  49. <meta name="color:ask bubble text" content="#a3a3a3">
  50. <meta name="color:ask bubble border" content="#dedede">
  51. <meta name="color:permalink action buttons border" content="#dedede">
  52. <meta name="color:permalink text" content="#8a8a8a">
  53. <meta name="color:pagination text" content="#7a7a7a">
  54. <meta name="color:pagination links" content="#DBA2A2">
  55. <meta name="color:pagination links hover" content="#000000">
  56.  
  57. <meta name="if:show captions" content="1">
  58. <meta name="if:built in music player" content="0">
  59.  
  60. <meta name="text:username" content="">
  61. <meta name="text:billy music player code" content="">
  62. <meta name="text:link 1" content="">
  63. <meta name="text:link 1 url" content="">
  64. <meta name="text:link 2" content="">
  65. <meta name="text:link 2 url" content="">
  66. <meta name="text:link 3" content="">
  67. <meta name="text:link 3 url" content="">
  68. <meta name="text:link 4" content="">
  69. <meta name="text:link 4 url" content="">
  70. <meta name="text:link 5" content="">
  71. <meta name="text:link 5 url" content="">
  72. <meta name="text:link 6" content="">
  73. <meta name="text:link 6 url" content="">
  74. <meta name="text:link 7" content="">
  75. <meta name="text:link 7 url" content="">
  76. <meta name="text:link 8" content="">
  77. <meta name="text:link 8 url" content="">
  78. <meta name="text:link 9" content="">
  79. <meta name="text:link 9 url" content="">
  80. <meta name="text:about info 1" content="name: my name">
  81. <meta name="text:about info 2" content="birthday: 24/06/99 [16]">
  82. <meta name="text:about info 3" content="location: singapore">
  83. <meta name="text:about info 4" content="mbti: intj">
  84. <meta name="text:about info 5" content="status: hiatus">
  85. <meta name="text:about info 6" content="queue: turned off">
  86.  
  87. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  88. <script type="text/javascript" src="https://static.tumblr.com/lv6casp/aCNm74ixy/stepcarousel.js">
  89. /***********************************************
  90. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  91. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  92. * This notice must stay intact for legal use
  93. ***********************************************/
  94. </script>
  95.  
  96. <script type="text/javascript">
  97. stepcarousel.setup({
  98. galleryid: 'mygallery', //id of carousel DIV
  99. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  100. panelclass: 'panel', //class of panel DIVs each holding content
  101. autostep: {enable:false, moveby:1, pause:3000},
  102. panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  103. defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://66.media.tumblr.com/54e22e55cc25c8b63e9016be0c475586/tumblr_inline_nqytet04bm1rshr70_540.png', -40, 120], rightnav: ['https://66.media.tumblr.com/54e22e55cc25c8b63e9016be0c475586/tumblr_inline_nqytet04bm1rshr70_540.png', 10, 120]},
  104. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  105. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  106. })
  107. </script>
  108.  
  109. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  110. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  111. <link rel="shortcut icon" href="{Favicon}" />
  112.  
  113. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  114.  
  115. <style type="text/css">
  116.  
  117. @font-face { font-family: "pix"; src: url('https://dl.dropboxusercontent.com/s/68bdyrv4fsayhg8/04B_03__.TTF'); }
  118. @font-face { font-family: "bit"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  119.  
  120. body {
  121. background-color: {color:background};
  122. background-image: url({image:background});
  123. background-position: left bottom;
  124. background-attachment: fixed;
  125. margin: 0;
  126. word-wrap: break-word;
  127. }
  128.  
  129. a { text-decoration:none; }
  130.  
  131. ::-webkit-scrollbar {
  132. box-shadow: -1px 0 0 {color:scrollbar}; width: 9px; }
  133. ::-webkit-scrollbar-track-piece { background-color: {color:main content background}; }
  134. ::-webkit-scrollbar-thumb:vertical {
  135. border-top: 3px solid {color:main content background};
  136. border-bottom: 3px solid {color:main content background};
  137. border-left: 4px solid {color:main content background};
  138. border-right: 4px solid {color:main content background};
  139. box-shadow: -1px 0 0 {color:scrollbar};
  140. background-color: {color:scrollbar};
  141. }
  142.  
  143. #protector {
  144. width: 100%;
  145. height: 100%;
  146. position: fixed;
  147. z-index: 2;
  148. }
  149.  
  150. #main {
  151. width: 740px;
  152. background-color: {color:main content background};
  153. font-family: pix;
  154. border: 1px solid {color:main content border};
  155. position: relative;
  156. top: 50%;
  157. transform: translateY(-50%);
  158. height: 400px;
  159. box-shadow: 10px 10px 0 rgba(220,220,220,0.5);
  160. }
  161.  
  162. #music {
  163. z-index: 10;
  164. width: 70px;
  165. height: 30px;
  166. overflow: hidden;
  167. top: 50%;
  168. left: 50%;
  169. transform: translateY(-50%);
  170. position: absolute;
  171. z-index: 100;
  172. margin-top: -220px;
  173. margin-left: 300px;
  174. }
  175.  
  176. .musicgif {margin-left: 10px;}
  177. #music:hover .ongaku {margin-top: 3px;}
  178. .ongaku {
  179. margin-top: -20px;
  180. margin-left: 12px;
  181. transition: 0.6s;
  182. -moz-transition: 0.6s;
  183. -webkit-transition: 0.6s;
  184. -o-transition: 0.6s;
  185. }
  186.  
  187. .left {
  188. width: 180px;
  189. float: left;
  190. height: 400px;
  191. border-right: 1px solid {color:main content border};
  192. }
  193.  
  194. .icone {
  195. display: block;
  196. width: 140px;
  197. height: 175px;
  198. padding: 20px;
  199. border-bottom: 1px solid {color:main content border};
  200. }
  201.  
  202. .desc {
  203. font-family: pix;
  204. font-size: 8px;
  205. padding: 20px;
  206. color: {color:description};
  207. text-transform: uppercase;
  208. height: 32px;
  209. overflow: hidden;
  210. }
  211.  
  212. .desc b,strong { color: {color:desc bold}; }
  213. .desc i,em { color: {color:desc italic}; }
  214. .desc a { color: {color:desc links}; }
  215. .desc a:hover { color: {color:desc links hover}; }
  216.  
  217. .centd {
  218. position: relative;
  219. top: 50%;
  220. transform: translateY(-50%);
  221. }
  222.  
  223. #right {
  224. float: left;
  225. height: 400px;
  226. width: 559px;
  227. }
  228.  
  229. .topptitle {
  230. font-family: pix;
  231. font-size: 8px;
  232. text-transform: uppercase;
  233. letter-spacing: 1px;
  234. text-align: left;
  235. color: {color:blog title};
  236. padding: 20px;
  237. border-bottom: 1px solid {color:main content border};
  238. }
  239.  
  240. .llink {
  241. font-family: pix;
  242. font-size: 8px;
  243. text-transform: uppercase;
  244. letter-spacing: 2px;
  245. border-top: 1px solid {color:main content border};
  246. padding: 14px;
  247. color: {color:blog navigation links};
  248. transition: 0.8s;
  249. }
  250.  
  251. .llink:hover {
  252. letter-spacing: 4px;
  253. color: {color:blog navigation links hover};
  254. }
  255.  
  256. .stepcarousel {position: relative;height:400px;width:559px;}
  257. .stepcarousel .belt {position:absolute;left:0px;top:0px;}
  258. .stepcarousel .panel {
  259. float: left;
  260. overflow: auto;
  261. width: 559px;
  262. height: 351px;
  263. }
  264.  
  265. .topplinks {
  266. position: absolute;
  267. float: right;
  268. }
  269.  
  270. .htc {
  271. font-family: bit;
  272. font-size: 10px;
  273. letter-spacing: 2px;
  274. line-height: 10px;
  275. color: {color:panel title};
  276. border-bottom: 1px solid {color:main content border};
  277. padding: 17px 20px 18px 20px;
  278. text-align: left;
  279. }
  280.  
  281. .p2icon {
  282. width: 80px;
  283. height: 80px;
  284. float: left;
  285. padding: 20px;
  286. border-right: 1px solid {color:main content border};
  287. border-bottom: 1px solid {color:main content border};
  288. }
  289.  
  290. #infoblocks {
  291. float: left;
  292. height: 120px;
  293. width: 438px;
  294. }
  295.  
  296. .inbla, .inblb {
  297. font-size: 8px;
  298. text-transform: uppercase;
  299. text-align: left;
  300. float: left;
  301. width: 186.5px;
  302. height: 39.5px;
  303. line-height: 40px;
  304. padding: 0 16px;
  305. color: {color:about panel basic info};
  306. border-bottom: 1px solid {color:main content border};
  307. }
  308.  
  309. .inbla {
  310. border-right: 1px solid {color:main content border};
  311. }
  312.  
  313. .info {
  314. margin-top: 120px;
  315. height: 184px;
  316. width: 559px;
  317. overflow: auto;
  318. float: bottom;
  319. font-family: bit;
  320. font-size: 10px;
  321. color: {color:about panel biography};
  322. text-align: left;
  323. }
  324.  
  325. .faq {
  326. border-bottom: 1px solid {color:main content border};
  327. font-family: bit;
  328. font-size: 10px;
  329. color: {color:body text};
  330. text-align: left;
  331. padding: 20px;
  332. }
  333.  
  334. .faq blockquote {
  335. border-left: 1px solid {color:main content border};
  336. padding: 0 10px;
  337. margin: 10px;
  338. }
  339.  
  340. .bloglinks {
  341. width: 559px;
  342. display: block;
  343. }
  344.  
  345. .bla, .blb {
  346. font-family: pix;
  347. font-size: 8px;
  348. text-transform: uppercase;
  349. letter-spacing: 2px;
  350. color: {color:custom links};
  351. width: 33.2%;
  352. float: left;
  353. text-align: center;
  354. padding: 15.8px 0;
  355. border-bottom: 1px solid {color:main content border};
  356. }
  357.  
  358. .blb {
  359. border-left: 1px solid {color:main content border};
  360. border-right: 1px solid {color:main content border};
  361. }
  362.  
  363. #sf {
  364. margin-top: 20px;
  365. width: 445px;
  366. }
  367.  
  368. .sfm input {
  369. background-color: {color:searchbox background};
  370. font-size: 8px;
  371. border: 0px;
  372. text-transform: uppercase;
  373. margin-top: 0px;
  374. color: {color:searchbox text};
  375. letter-spacing: 1px;
  376. padding: 10px;
  377. font-family: pix;
  378. }
  379. :focus { outline:0; }
  380.  
  381. .linkpanelx {
  382. font-family: bit;
  383. font-size: 10px;
  384. text-align: left;
  385. color: {color:body text};
  386. margin-top: 20px;
  387. padding-left: 20px;
  388. }
  389.  
  390. .linkpanelx a { color: {color:body links}; text-decoration: underline; }
  391.  
  392. .toppicon {
  393. float: right;
  394. height: 48px;
  395. line-height: 48px;
  396. width: 48px;
  397. color: {color:navigation icons};
  398. border-left: 1px solid {color:main content border};
  399. }
  400.  
  401. .topplinksi {
  402. float: right;
  403. position: absolute;
  404. z-index: -9;
  405. width: 559px;
  406. height: 26px;
  407. line-height: 26px;
  408. }
  409.  
  410. .gallerynav {
  411. top: 0;
  412. width: 200px;
  413. z-index: 10;
  414. float: right;
  415. margin: 0 363px;
  416.  
  417. }
  418.  
  419. .gallerynav img {
  420. display: block;
  421. float: left;
  422. width: 49px;
  423. height: 48px;
  424. opacity: 0.3;
  425. }
  426.  
  427. #content {margin: 0;}
  428.  
  429. .post {
  430. padding: 26px;
  431. border-bottom: 1px solid {color:main content border};
  432. }
  433.  
  434. .photo {
  435. display: block;
  436. }
  437.  
  438. .ptitle {
  439. font-family: bit;
  440. color: {color:post title};
  441. text-align: left;
  442. font-size: 10px;
  443. text-transform: uppercase;
  444. padding-bottom: 3px;
  445. border-bottom: 1px solid {color:post title accent};
  446. }
  447.  
  448. .text {
  449. font-family: bit;
  450. color: {color:body text};
  451. text-align: left;
  452. font-size: 10px;
  453. }
  454.  
  455. .text a, .pqsrc a, .per a, .permapg a, .permant a {
  456. text-decoration: underline;
  457. color: {color:body links};
  458. }
  459.  
  460. .text a:hover, .pqsrc a:hover, .per a:hover, .permapg a:hover, .permant a:hover { color: {color:body links hover}; }
  461.  
  462. .text b,strong, .faq b,strong, .pqsrc b,strong, .permapg b,strong, .clab {
  463. color: {color:body bold};
  464. font-weight: 400;
  465. }
  466.  
  467. .text i,em, .pqsrc i,em {
  468. color: {color:body italic};
  469. }
  470.  
  471. blockquote {
  472. padding: 0 20px;
  473. margin: 5px;
  474. border-left: 1px solid {color:blockquote};
  475. }
  476.  
  477. .pquote {
  478. font-family: bit;
  479. font-size: 16px;
  480. color: {color:post quote};
  481. }
  482.  
  483. .pqsrc {
  484. font-family: pix;
  485. font-size: 8px;
  486. text-transform: uppercase;
  487. margin-top: 10px;
  488. letter-spacing: 2px;
  489. color: {color:body text};
  490. }
  491.  
  492. .line {
  493. text-align: left;
  494. font-size: 10px;
  495. font-family: bit;
  496. padding: 10px 20px;
  497. border-top: 1px solid {color:main content border};
  498. }
  499.  
  500. .line:first-child {
  501. border-top: 1px solid transparent;
  502. }
  503.  
  504. .askbubble {
  505. padding: 14px 20px;
  506. font-family: bit;
  507. font-size: 10px;
  508. border: 1px solid {color:ask bubble border};
  509. color: {color:ask bubble text};
  510. border-radius: 3px;
  511. text-align: left;
  512. }
  513.  
  514. .asking {
  515. margin-top: 10px;
  516. margin-bottom: 20px;
  517. height: 24px;
  518. }
  519.  
  520. .asktri {
  521. float: left;
  522. font-size: 24px;
  523. text-shadow: 1px 2px 0 {color:ask bubble border};
  524. color: {color:main content background};
  525. margin: -25px 40px;
  526. }
  527.  
  528. .askimg {
  529. float: left;
  530. border-radius: 3px;
  531. margin-left: 70px;
  532. }
  533.  
  534. .asker {
  535. float: left;
  536. color: {color:body links};
  537. text-transform: uppercase;
  538. margin: 4px 10px;
  539. font-size: 8px;
  540. font-family: pix;
  541. letter-spacing: 1px;
  542. }
  543.  
  544. .permalinke {
  545. text-align: left;
  546. height: 20px;
  547. margin-top: 10px;
  548. }
  549.  
  550. .picon {
  551. float: left;
  552. border: 1px solid {color:permalink action buttons border};
  553. width: 20px;
  554. height: 20px;
  555. line-height: 22px;
  556. font-size: 12px;
  557. text-align: center;
  558. margin-right: 6px;
  559. color: #aaa;
  560. }
  561.  
  562. #lb {
  563. line-height: 28px;
  564. }
  565.  
  566. .per {
  567. font-family: bit;
  568. font-size: 10px;
  569. color: {color:permalink text};
  570. padding: 5px 10px;
  571. float: left;
  572. }
  573.  
  574. .per a { text-transform: uppercase; }
  575.  
  576. .permapg {
  577. font-family: bit;
  578. font-size: 10px;
  579. color: {color:body text};
  580. padding: 20px 0 0 0;
  581. }
  582.  
  583. .permant {
  584. font-family: pix;
  585. font-size: 8px;
  586. text-transform: uppercase;
  587. letter-spacing: 1px;
  588. color: {color:body text};
  589. width: 100%;
  590. margin-left: -40px;
  591. width: 560px;
  592. }
  593.  
  594. .notes {
  595. padding: 10px 10px;
  596. text-align: left;
  597. line-height: 16px;
  598. }
  599.  
  600. .note { width: 560px; border-top: 1px solid {color:main content border}; }
  601.  
  602. .notes li {
  603. padding: 10px 20px;
  604. }
  605.  
  606. ol.notes {
  607. list-style-type: none;
  608. position: absolute;
  609. padding: 10px 20px;
  610. }
  611.  
  612. .notes img {
  613. width: 16px;
  614. height: 16px;
  615. float: left;
  616. border-radius: 2px;
  617. margin-right: 8px;
  618. }
  619.  
  620. #travel {
  621. padding: 40px 0;
  622. font-family: bit;
  623. font-size: 12px;
  624. color: {color:pagination text};
  625. letter-spacing: 10px;
  626. }
  627.  
  628. #travel a {color: {color:pagination links};}
  629. #travel a:hover { color: {color:pagination links hover}; }
  630.  
  631.  
  632. {CustomCSS}
  633.  
  634. </style>
  635. </head>
  636. <body>
  637.  
  638. <center>
  639.  
  640. {block:ifbuiltinmusicplayer}
  641. <div id="music">
  642. <div class="ongaku">
  643. {text:billy music player code}
  644. </div><!--ongaku-->
  645. <img class="musicgif" src="http://66.media.tumblr.com/tumblr_m1zdo0Zshi1r3we0y.gif">
  646. </div>
  647. {/block:ifbuiltinmusicplayer}
  648.  
  649. <div id="protector">
  650.  
  651. <div id="main">
  652.  
  653. <div class="left">
  654. <div class="lefticon">
  655. <img class="icone" src="{image:sidebar}">
  656. </div><!--lefticon-->
  657. <div class="desc"><div class="centd">{description}</div></div>
  658. <div class="leftlinks">
  659. <a href="/"><div class="llink">index</div></a>
  660. <a href="/archive"><div class="llink">archives</div></a>
  661. <a href="http://yukoki.tumblr.com"><div class="llink">theme</div></a>
  662. </div>
  663. </div><!--left-->
  664.  
  665. <div id="right">
  666.  
  667. <div class="topp">
  668. <div class="topplinks">
  669. <div class="topplinksi">
  670. <div class="toppicon"><span class="fa fa-search"></span></div>
  671. <div class="toppicon"><span class="fa fa-envelope"></span></div>
  672. <div class="toppicon"><span class="fa fa-user"></span></div>
  673. <div class="toppicon"><span class="fa fa-file-text"></span></div>
  674. </div><!--topplinksi-->
  675. <div class="gallerynav" id="mygallery-paginate">
  676. <img src="https://66.media.tumblr.com/9610518affcf283c4eb04850039ccdc8/tumblr_inline_nqz1cg0OG41rshr70_540.png" data-over="https://66.media.tumblr.com/0d36ba0f4cf18340cdb996b752e224cc/tumblr_inline_nqz1cmgXXH1rshr70_540.png" data-select="https://66.media.tumblr.com/0d36ba0f4cf18340cdb996b752e224cc/tumblr_inline_nqz1cmgXXH1rshr70_540.png" data-moveby="1" /></div><!--gallerynav-->
  677.  
  678. </div><!--topplinks-->
  679.  
  680. <div class="topptitle">{title}</div>
  681. </div><!--topp-->
  682.  
  683. <div id="mygallery" class="stepcarousel">
  684. <div class="belt">
  685.  
  686. <div class="panel"><!--panel 00: blog content-->
  687.  
  688. <div id="content">
  689.  
  690. {block:Posts}
  691. <div class="post">
  692.  
  693. {block:Photo}
  694. {linkopentag}<center><img class="photo" src="{PhotoURL-500}"></center>{linkclosetag}
  695. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  696. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  697. <div class="text">{Caption}</div>
  698. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  699. {/block:Photo}
  700.  
  701. {block:Photoset}
  702. <div class="photo">{Photoset-500}</div>
  703. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  704. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  705. <div class="text">{Caption}</div>
  706. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  707. {/block:Photoset}
  708.  
  709. {block:text}
  710. {block:Title}<div style="text-align:left;"><span class="ptitle"><span style="color:{color:post title accent}; padding: 0 2px;" class="fa fa-plus"></span> {Title}</span></div>{/block:Title}
  711. <div class="text">{body}</div>
  712. {/block:text}
  713.  
  714. {block:quote}
  715. <div class="pquote">{Quote}</div>
  716. {block:Source}<div class="pqsrc">{Source}</div>{/block:Source}
  717. {/block:quote}
  718.  
  719. {block:link}
  720. <a href="{URL}"><div style="text-align:left;"><span class="ptitle"><span style="color:{color:post title accent}; padding: 0 2px;" class="fa fa-link"></span> {Name}</span></div></a>
  721. <div class="text">{description}</div>
  722. {/block:link}
  723.  
  724. {block:chat}
  725. {block:title}<div style="text-align:left;"><span class="ptitle"><span style="color:{color:post title accent}; padding: 0 2px;" class="fa fa-comment-o"></span> {Title}</span></div>{/block:title}
  726. {block:lines}
  727. <div class="line">{block:label}<span class="clab">{Label}</span> {/block:label}{Line}</div>
  728. {/block:lines}
  729. {/block:chat}
  730.  
  731. {block:audio}
  732. {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
  733. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  734. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  735. <div class="text">{Caption}</div>
  736. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  737. {/block:audio}
  738.  
  739. {block:Video}
  740. <div class="photo">{Video-500}</div>
  741. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  742. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  743. <div class="text">{Caption}</div>
  744. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  745. {/block:Video}
  746.  
  747. {block:Answer}
  748. <div class="askbubble">{Question}</div>
  749. <div class="asking"><div class="asktri">◥</div><img class="askimg" src="{AskerPortraitURL-24}"> <div class="asker">{Asker}</div></div>
  750. <div class="text">{Answer}</div>
  751. {/block:Answer}
  752.  
  753. {block:indexpage}{block:date}
  754. <div class="permalinke">
  755. <a href="{ReblogURL}"><div class="picon"><i class="fa fa-retweet"></i></div></a><div class="picon" id="lb">{LikeButton size="14"}</div>
  756. <div class="per">Posted <a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}">{NoteCountWithLabel}</a>.</div>
  757. </div><!--permalinke-->
  758. {/block:date}{/block:indexpage}
  759.  
  760. </div><!--post-->
  761.  
  762. {block:permalinkpage}{block:date}
  763. <div class="permapg">
  764. Posted on <b>{DayOfWeek}</b>, <b>{DayOfMonth} {Month} {Year}</b> with <b>{NoteCountWithLabel}</b>.
  765. {block:rebloggedfrom}<br>Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a>.</br>{/block:rebloggedfrom}{block:notreblog}<br>An original post.</br>{/block:notreblog}
  766. {block:HasTags}{block:Tags}
  767. <a href="{TagURL}">#{Tag}</a>
  768. {/block:Tags}{/block:HasTags}
  769. </div><!--permapg-->
  770. {block:PostNotes}<div class="permant">{PostNotes-16}</div>{/block:PostNotes}
  771. {/block:date}{/block:permalinkpage}
  772.  
  773. {block:ContentSource}
  774. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  775. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  776. {/block:SourceLogo}
  777. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  778. {/block:ContentSource}
  779. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  780.  
  781. {/block:posts}
  782. </div><!--content-->
  783.  
  784. {block:pagination}<div id="travel">
  785. {block:PreviousPage}<a href="{PreviousPage}"><i class="fa fa-angle-left"></i></a>{/block:PreviousPage}
  786. {block:JumpPagination length="7"}{block:CurrentPage}
  787. <span class="current">{PageNumber}</span>
  788. {/block:CurrentPage}{block:JumpPage}
  789. <a class="destination" href="{URL}">{PageNumber}</a>
  790. {/block:JumpPage}{/block:JumpPagination}
  791. {block:NextPage}<a href="{NextPage}"><i class="fa fa-angle-right"></i></a>{/block:NextPage}
  792. </div><!--travel-->{/block:pagination}
  793. </div><!--panelcontent-->
  794.  
  795. <div class="panel"><!--panel 01: about the user-->
  796.  
  797. <div class="htc">about the blogger :: {text:username}</div>
  798. <img class="p2icon" src="{PortraitURL-96}">
  799. <div id="infoblocks">
  800. <div class="inbla">{text:about info 1}</div>
  801. <div class="inblb">{text:about info 2}</div>
  802. <div class="inbla">{text:about info 3}</div>
  803. <div class="inblb">{text:about info 4}</div>
  804. <div class="inbla">{text:about info 5}</div>
  805. <div class="inblb">{text:about info 6}</div>
  806. </div><!--infoblocks-->
  807. <div class="info"><div style="margin:20px;">
  808.  
  809. <!-- YOUR ABOUT PANEL'S BIOGRAPHY GOES HERE! DELETE THE TEST BLOCK BELOW --->
  810.  
  811. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim nunc ut nisi condimentum auctor non quis magna. Nunc placerat, velit vel pellentesque faucibus, erat odio volutpat dolor, vitae sollicitudin justo augue eget magna. Mauris porttitor elit nec venenatis luctus. Duis ut gravida elit. Aliquam dignissim, enim a imperdiet blandit, leo mauris pharetra lorem, eu cursus neque massa at diam. Nulla id dictum lacus. Praesent vitae cursus metus. Vivamus sit amet pellentesque nunc.
  812.  
  813. </div></div><!--info-->
  814. </div><!--aboutpanel-->
  815.  
  816. <div class="panel"><!--panel 02: contact-->
  817. <div class="htc">frequently asked questions</div>
  818.  
  819. <!-- FAQ SECTION ON THE FAQ+ASK PANEL. HERE'S AN EXAMPLE: --------------------
  820.  
  821. <div class="faq">
  822. <b>01</b> how often do you update this blog?
  823. <blockquote>evidently, not often enough. i try to update it more frequently, but because of schoolwork, i may not be able to come online for weeks at a time. i try to set up queues but they tend run out relatively quickly. :B</blockquote>
  824. </div>
  825.  
  826. ---------------------------------------------------------------------------->
  827.  
  828. <div class="faq">
  829. <b>01</b> Question one?
  830. <blockquote>Answer to question one!</blockquote>
  831. </div><!--faq-->
  832.  
  833. <div class="faq">
  834. <b>02</b> Question two?
  835. <blockquote>Answer to question two!</blockquote>
  836. </div><!--faq-->
  837.  
  838. <div class="faq">
  839. <b>03</b> Question three?
  840. <blockquote>Answer to question three!</blockquote>
  841. </div><!--faq-->
  842.  
  843. <div class="htc">{AskLabel}</div>
  844. <div style="padding: 20px;"><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{text:username}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></div>
  845. </p>
  846. </div><!--messagepanel-->
  847.  
  848. <div class="panel"><!--panel 04: navigation-->
  849. <div class="htc">blog links</div>
  850. <div class="bloglinks">
  851. {block:iflink1}<a href="{text:link 1 url}"><div class="bla">{text:link 1}</div></a>{/block:iflink1}
  852. {block:iflink2}<a href="{text:link 2 url}"><div class="blb">{text:link 2}</div></a>{/block:iflink2}
  853. {block:iflink3}<a href="{text:link 3 url}"><div class="bla">{text:link 3}</div></a>{/block:iflink3}
  854. {block:iflink4}<a href="{text:link 4 url}"><div class="bla">{text:link 4}</div></a>{/block:iflink4}
  855. {block:iflink5}<a href="{text:link 5 url}"><div class="blb">{text:link 5}</div></a>{/block:iflink5}
  856. {block:iflink6}<a href="{text:link 6 url}"><div class="bla">{text:link 6}</div></a>{/block:iflink6}
  857. {block:iflink7}<a href="{text:link 7 url}"><div class="bla">{text:link 7}</div></a>{/block:iflink7}
  858. {block:iflink8}<a href="{text:link 8 url}"><div class="blb">{text:link 8}</div></a>{/block:iflink8}
  859. {block:iflink9}<a href="{text:link 9 url}"><div class="bla">{text:link 9}</div></a>{/block:iflink9}
  860. </div><!--bloglinks-->
  861. <div class="htc" style="margin-top:120px;">search via tags</div>
  862.  
  863. <form action="/search" method="get" class="sfm">
  864. <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  865. <input type="submit" value="Search" id="sb"/>
  866. </form>
  867.  
  868. <div class="linkpanelx">
  869.  
  870. <!-- YOU CAN TYPE EXTRA LINK STUFF HERE, IT APPEARS BELOW THE SEARCHBOX, E.G:
  871.  
  872. frequent tags: <a href="/tagged/hello">#popular</a>, <a href="/tagged/hello">#tags</a>, <a href="/tagged/hello">#over</a>, <a href="/tagged/hello">#here</a>.
  873.  
  874. ---------------------------------------------------------------------------->
  875.  
  876. </div><!--linkpanelx-->
  877.  
  878. </div><!--navigationpanel-->
  879.  
  880. </div>
  881. </div>
  882.  
  883. <!-- /end pagination -->
  884.  
  885. </div><!--#right-->
  886.  
  887. </div>
  888.  
  889. </div><!--protector-->
  890.  
  891. </center>
  892.  
  893.  
  894. </body>
  895. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement