API tools faq
paste
trenzalours

header base

trenzalours
Sep 8th, 2014
271
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <!-- header base for htmlheroes
  12. -->
  13.  
  14.  
  15. <meta name="color:Background" content="#ffffff"/>
  16. <meta name="color:Title" content="#000000"/>
  17. <meta name="color:Text" content="#aaaaaa"/>
  18. <meta name="color:Link" content="#000000"/>
  19. <meta name="color:Hover" content="#ffffff"/>
  20. <meta name="color:Scrollbar" content="#000000"/>
  21. <meta name="color:Accent" content="#eeeeee"/>
  22.  
  23. <meta name="if:400px" content="1">
  24. <meta name="if:Lazy Load" content="0">
  25.  
  26.  
  27. <meta name="text:Link 1 URL" content="" />
  28. <meta name="text:Link 1" content="" />
  29. <meta name="text:Link 2 URL" content="" />
  30. <meta name="text:Link 2" content="" />
  31. <meta name="text:Link 3 URL" content="" />
  32. <meta name="text:Link 3" content="" />
  33. <meta name="text:Link 4 URL" content="" />
  34. <meta name="text:Link 4" content="" />
  35. <meta name="text:Link 5 URL" content="" />
  36. <meta name="text:Link 5" content="" />
  37.  
  38.  
  39.  
  40.  
  41. <!-- jquery for tooltips-->
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  43.  
  44. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  45.  
  46. <script>
  47.  
  48. (function($){
  49.  
  50. $(document).ready(function(){
  51.  
  52. $("a[title]").style_my_tooltips({
  53.  
  54. tip_follows_cursor:true,
  55.  
  56. tip_delay_time:40,
  57.  
  58. tip_fade_speed:400,
  59.  
  60. attribute:"title"
  61.  
  62. });
  63.  
  64. });
  65.  
  66. })(jQuery);
  67.  
  68. </script>
  69.  
  70. <!--CSS customization here. -->
  71.  
  72. <style type="text/css">
  73.  
  74. #s-m-t-tooltip{
  75. padding:4px 9px;
  76. position:absolute;
  77. margin: 10px 20px;
  78. padding:5px;
  79. font-size:10px;
  80. font-family:sans-serif;
  81. z-index: 99999999999;
  82. letter-spacing:1px;
  83. text-transform:lowercase;
  84. background:{color:background};}
  85.  
  86.  
  87.  
  88. ::-webkit-scrollbar{width: 6px;}
  89. ::-webkit-scrollbar-thumb{background:{color:scrollbar};:0.3;}
  90.  
  91. ::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.3);}
  92.  
  93.  
  94. /* LAYOUT BASICS */
  95.  
  96. blockquote {padding:5px 0 5px 30px;
  97. border-left:1px solid {color:text};
  98. margin-left:30px;}
  99.  
  100. body {
  101. background:{color:background};
  102. color:{color:text};
  103. font-family:sans-serif;
  104. font-size:10px;
  105. letter-spacing:1px;
  106. text-align:justify;
  107. margin:0;
  108. line-height:1.3em;}
  109.  
  110.  
  111.  
  112.  
  113. a {
  114. color:{color:accent};
  115. text-decoration:none;
  116. -webkit-transition: all 1s ease;
  117. -moz-transition: all 1s ease;
  118. -o-transition: all 1s ease;
  119. -ms-transition: all 1s ease;
  120. transition: all 1s ease;}
  121.  
  122. a:hover {
  123. color:{color:hover};
  124. text-decoration:none;
  125. -webkit-transition: all 1s ease;
  126. -moz-transition: all 1s ease;
  127. -o-transition: all 1s ease;
  128. -ms-transition: all 1s ease;
  129. transition: all 1s ease;}
  130.  
  131. img{opacity:1;
  132. border:none;
  133. text-decoration:none}
  134.  
  135.  
  136. small {
  137. font-size:10px;}
  138.  
  139. big {
  140. font-size:12px;}
  141.  
  142. pre{
  143. background:{color:background};
  144. padding:10px;
  145. color:{color:text};
  146. font-family:arial;
  147. text-transform:uppercase;
  148. font-size:10px;
  149. letter-spacing:1px;
  150. white-space: pre-wrap;
  151. white-space: -moz-pre-wrap;
  152. white-space: -pre-wrap;
  153. white-space: -o-pre-wrap;
  154. word-wrap: break-word;}
  155.  
  156. code{
  157. text-transform:lowercase;
  158. font-style:italic;
  159. }
  160.  
  161. b,strong{
  162. color:{color:accent};
  163. font-weight:bold;
  164. }
  165. em,i{
  166. color:{color:accent};
  167. font-style:italic;
  168. }
  169.  
  170.  
  171. strike{
  172. text-decoration: line-through;
  173. }
  174.  
  175.  
  176. #title {
  177. font-size:12px;
  178. line-height:1.4em;
  179. margin-bottom:10px;
  180. text-transform:uppercase;
  181. text-align:left;
  182. font-family:sans-serif;
  183. }
  184.  
  185.  
  186.  
  187.  
  188. /*Sidebar*/
  189.  
  190. .sidebar{
  191. top:20px;
  192. left:50%;
  193. margin-left:-147px;
  194. position:relative;
  195. width:300px;
  196. background:{color:background};
  197. z-index:1;
  198. padding:5px;
  199. margin-bottom:35px;
  200. }
  201.  
  202. /*Blog Title*/
  203.  
  204. .btitle{
  205. text-align:center;
  206. font-size:24px;
  207. font-family:sans-serif;
  208. color:{color:title}; margin:10px 0;}
  209.  
  210. .btitle a{
  211. color:{color:title};
  212. }
  213. .btitle a:hover{
  214. text-decoration:none;
  215. color:{color:hover};
  216. -webkit-transition: all 1s ease;
  217. -moz-transition: all 1s ease;
  218. -o-transition: all 1s ease;
  219. -ms-transition: all 1s ease;
  220. transition: all 1s ease;
  221. }
  222.  
  223. /*Description*/
  224.  
  225. .descript{
  226. padding:10px;
  227. font-size:9px;
  228. word-spacing:2px;
  229. text-align:center;
  230. color:{color:title};}
  231. /*Sidebar Links*/
  232. .links{
  233. text-align:center;
  234. display:inline-block;
  235. width:300px;
  236. }
  237.  
  238. .links a{
  239. padding:5px;
  240. margin-right:2px;color:{color:link};}
  241.  
  242. .links a:hover{
  243. color:{color:hover};
  244. opacity:.7;
  245.  
  246. }
  247.  
  248.  
  249. /*Pagination*/
  250.  
  251. #pagination {
  252. margin-bottom:50px;
  253. width:auto;
  254. word-spacing:-3px;
  255. {block:if400px}
  256. width:400px;
  257. {/block:if400px}
  258. {block:ifnot400px}
  259. width:250px;
  260. margin-left:60px;
  261. {/block:ifnot400px}
  262.  
  263. }
  264. #pagination a{
  265. color:{color:link};
  266. margin-top:-50px;
  267. {block:if400px}
  268. margin-left:-8px;
  269. {/block:if400px}
  270. {block:ifnot400px}
  271. margin-left:0px;
  272. {/block:ifnot400px}
  273. }
  274.  
  275.  
  276.  
  277. /*Container*/
  278. #con {
  279. left:50%;
  280. margin-left:-193px;
  281. position:absolute;
  282. }
  283.  
  284.  
  285.  
  286. /*Posts*/
  287.  
  288. #entries{
  289. width:400px;
  290. margin-top:0px;}
  291.  
  292. .posts {
  293. background:{color:background};
  294. {block:ifnot400px}
  295. width:250px;
  296. {/block:ifnot400px}
  297. {block:if400px}
  298. width:400px;
  299. {/block:if400px}
  300. padding:20px 20px 17px;
  301. {block:IndexPage}
  302. margin-bottom:100px;
  303. {/block:IndexPage}
  304. {block:PermalinkPage}
  305. margin-bottom:75px;
  306. {/block:PermalinkPage}
  307. -webkit-transition: all 1s ease;
  308. -moz-transition: all 1s ease;
  309. -o-transition: all 1s ease;
  310. -ms-transition: all 1s ease;
  311. transition: all 1s ease;
  312. -webkit-transition: all 1s ease;
  313. -moz-transition: all 1s ease;
  314. -o-transition: all 1s ease;
  315. -ms-transition: all 1s ease;
  316. transition: all 1s ease;
  317.  
  318. }
  319.  
  320.  
  321. .posts img, .posts li, .posts blockquote {max-width: 100%;}
  322. .caption {width:100%;margin-top:10px;}
  323.  
  324.  
  325. /*Quote*/
  326.  
  327. #ink{
  328. font-family:sans-serif;
  329. text-transform:lowercase;
  330. letter-spacing:1px;
  331. text-align:justify;
  332. font-size:13px;
  333. line-height:19px;
  334. font-weight:none;
  335. padding:10px;
  336. }
  337.  
  338. #ink a{
  339. color:{color:text};
  340. }
  341. #ink-source a{
  342. color:{color:text};
  343. }
  344.  
  345. #ink-source {
  346. text-align:right;
  347. font-style:none;
  348. font-weight:none;
  349. text-transform:uppercase;
  350. letter-spacing:1px;
  351. margin-top:5px;
  352. margin-bottom:20px;}
  353.  
  354. /*Audio*/
  355.  
  356. .player iframe {
  357. width: 32px;
  358. height: 32px;}
  359.  
  360. .tracks{
  361. {block:if400px}
  362. width: 250px;
  363. padding:7px;
  364. {/block:if400px}
  365. {block:ifnot400px}
  366. width: 110px;
  367. padding:3px;
  368. {/block:ifnot400px}
  369. }
  370.  
  371. .playerbuttonbg {
  372. position: absolute;
  373. left: 36px;
  374. top: 36px;
  375. width: 32px;
  376. height: 32px;
  377. background-color: #ffffff;
  378. padding: 10px;
  379. -webkit-border-radius: 40px;
  380. -moz-border-radius: 40px;
  381. border-radius: 40px;
  382. opacity: .4;
  383. filter: alpha(opacity=40);
  384. -moz-opacity: 0.4;
  385. -khtml-opacity: 0.4;
  386. transition: opacity .7s ease-in-out;
  387. -moz-transition: opacity .7s ease-in-out;
  388. -webkit-transition: opacity .7s ease-in-out;
  389. }
  390.  
  391. .playerbuttonbg:hover {
  392. opacity: 1;
  393. filter: alpha(opacity=100);
  394. -moz-opacity: 1;
  395. -khtml-opacity: 1;
  396. }
  397.  
  398. .newplayerbutton {
  399. position: relative;
  400. width: 26px;
  401. height: 26px;
  402. overflow: hidden;
  403. margin-top:-10px;
  404. }
  405.  
  406. .playerbuttonhug {
  407. position: absolute;
  408. top: -18px;
  409. left: -7px;
  410. }
  411.  
  412. #albumart { float:left; margin:0px 7px;}
  413.  
  414. .tumblr_audio_player {
  415. height:33px;
  416. width:35px;
  417. -moz-transform: scale(0.60, 0.60);
  418. -webkit-transform: scale(0.60, 0.60);
  419. -o-transform: scale(0.60, 0.60);
  420. -ms-transform: scale(0.60, 0.60);
  421. transform: scale(0.60, 0.60);
  422. -moz-transform-origin: top left;
  423. -webkit-transform-origin: top left;
  424. -o-transform-origin: top left;
  425. -ms-transform-origin: top left;
  426. transform-origin: top left;
  427. }
  428.  
  429. .audioimgwrapper {
  430. position: absolute;
  431. left: 0px;
  432. top: 0px;
  433. {block:if400px}
  434. margin-top:15px;
  435. {/block:if400px}
  436. {block:ifnot400px}
  437. margin-top:5px;
  438. {/block:ifnot400px}
  439. margin-left:7px;
  440. -webkit-border-radius: 1px;
  441. -moz-border-radius: 1px;
  442. border-radius: 1px;
  443. overflow: hidden;
  444. width: 109px;
  445. height: 109px;
  446. }
  447.  
  448. .audioimgwrapper img {
  449. width: 100%;
  450. height: auto;
  451. -webkit-border-radius: 1px;
  452. -moz-border-radius: 1px;
  453. border-radius: 1px;
  454. }
  455.  
  456. .trackdetails {
  457. width: auto;
  458. display:inline-block;
  459. margin-left: 128px;
  460. min-height: 85px;
  461. }
  462.  
  463. .audiowrapper {
  464. position: relative;
  465. display:inline-block;
  466. margin-bottom:10px;
  467. }
  468.  
  469. /* Asks */
  470.  
  471. .ques {
  472. margin-bottom:10px;
  473. text-transform:uppercase;
  474. letter-spacing:1px;
  475. color:{color:text};
  476. padding:10px;
  477. line-height:13px;
  478. }
  479.  
  480. .ques a{
  481. color:{color:text};
  482. }
  483.  
  484. .who {
  485. font-weight:bold;
  486. padding:10px;
  487. color:{color:text};
  488. }
  489.  
  490.  
  491. .who a{
  492. color:{color:accent};}
  493.  
  494.  
  495. .answer {
  496. margin-top:10px;
  497. padding:10px;
  498. letter-spacing:1px;
  499. text-transform:uppercase;
  500. color:{color:text};
  501. letter-spacing:1px;}
  502.  
  503.  
  504. /*Chat*/
  505.  
  506. .chat ol {
  507. padding:0;
  508. list-style:none;
  509. }
  510. .line {padding:5px 0;}
  511.  
  512. .label {font-weight:bold;
  513. }
  514.  
  515.  
  516. /*Permalink and notes*/
  517.  
  518. .infos {
  519. padding:10px 0;
  520. font-size:8px;
  521. letter-spacing:1px;
  522. text-transform:uppercase;
  523. text-align:center;
  524. margin-top:5px;
  525. background:{color:background};}
  526.  
  527. .infos a {margin:0 5px;
  528. text-decoration:none;
  529. color:{color:link};}
  530. .infos a:hover {color:{color:hover};}
  531. .up {cursor:pointer;}
  532.  
  533.  
  534. /*Tags*/
  535.  
  536. .tags {
  537. opacity:1;
  538. padding:4px;
  539. text-transform:lowercase;
  540. margin-top:4px;
  541. word-break:break-all;
  542. -webkit-transition: all 0.8s ease;
  543. -moz-transition: all 0.8s ease;
  544. transition: all 0.8s ease;
  545. }
  546.  
  547. .tags a{
  548. text-decoration:none;}
  549.  
  550.  
  551. /*Page Notes*/
  552.  
  553. .pagenotes {
  554. {block:if400px}
  555. width:350px;
  556. margin-left:-2px;
  557. {/block:if400px}
  558. {block:ifnot400px}
  559. width:245px;
  560. margin-left:48px;
  561. {/block:ifnot400px}
  562. margin-top:25px;
  563. padding:25px;
  564. position:relative;
  565. margin-bottom:50px;
  566. font-size:8px;
  567. }
  568. .pagenotes img {
  569. display:none!important;}
  570. .pagenotes ol {
  571. margin:0;
  572. padding:0;
  573. display:block;
  574. }
  575. .pagenotes li {
  576. line-height:200%;
  577. list-style-type:none;
  578. text-align:left;
  579. font-size:8px;
  580. letter-spacing:1px;
  581. font-family:arial;
  582. text-transform:uppercase;
  583. }
  584.  
  585.  
  586.  
  587. /*Credit*/
  588. #creds {
  589. font-family:sans-serif;
  590. bottom:10px;
  591. position:fixed;
  592. right:6px;
  593. float:right;
  594. padding:5px;
  595. z-index:1;
  596. -webkit-transition: all 1s ease;
  597. -moz-transition: all 1s ease;
  598. -o-transition: all 1s ease;
  599. -ms-transition: all 1s ease;
  600. transition: all 1s ease;
  601. }
  602. #creds a{
  603. color:{color:text};
  604. -webkit-transition: all 1s ease-in;
  605. -moz-transition: all 1s ease-in;
  606. -o-transition: all 1s ease-in;
  607. -ms-transition: all 1s ease-in;
  608. transition: all 1s ease-in;
  609. }
  610.  
  611.  
  612. #creds a:hover {
  613. text-decoration:none;
  614. color:white;
  615. border:1px solid transparent;
  616. -webkit-transition: all 1s ease-out;
  617. -moz-transition: all 1s ease-out;
  618. -o-transition: all 1s ease-out;
  619. -ms-transition: all 1s ease-out;
  620. transition: all 1s ease-out;
  621. }
  622.  
  623. {CustomCSS}
  624.  
  625.  
  626. </style>
  627.  
  628. {block:ifLazyLoad}
  629. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  630. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  631. <script type="text/javascript" charset="utf-8">
  632. var $j = jQuery.noConflict();
  633. $j(function() {
  634. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  635. $j("img").lazyload({
  636. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  637. effect: "fadeIn",
  638. });
  639. });
  640. </script>
  641. {/block:ifLazyLoad}
  642.  
  643. </head>
  644.  
  645. <body>
  646.  
  647. <div class="sidebar">
  648. <div class="btitle"><a href="/">{Title}</a></div>
  649. <div class="links">
  650. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  651. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  652. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  653. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  654. <a href="{text:Link 5 URL}">{text:Link 5}</a>
  655. </div>
  656.  
  657. <div class="descript">{Description}</div>
  658. </div>
  659.  
  660. <div id="con">
  661. <div id="line"></div>
  662. <div id="entries" class="{select:Post Size}" >
  663.  
  664. {block:Posts}
  665. <div class="posts" class="{select:Post Size}">
  666.  
  667. {block:Quote}
  668. <div id="ink">{Quote}</div>
  669. {block:Source}<div id="ink-source">{Source}</div>{/block:Source}
  670. {/block:Quote}
  671.  
  672.  
  673.  
  674. {block:Text}
  675. {block:Title}
  676. <div id="title">{Title}</div>{/block:Title}
  677. {Body}
  678.  
  679. {/block:Text}
  680.  
  681. {block:Link}
  682. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  683. {/block:Link}
  684.  
  685. {block:Chat}
  686. {block:Title}
  687. <h1>{Title}</h1>
  688. {/block:Title}
  689. <div class="chat">
  690. <ol>{block:Lines}
  691. <li class="line {Alt}">
  692. {block:Label}
  693. <span class="label">
  694. {Label}</span>
  695. {/block:Label}{Line}</li>
  696. {/block:Lines}
  697. </ol></div>
  698. {/block:Chat}
  699.  
  700.  
  701. {block:Photo}
  702.  
  703. {LinkOpenTag}
  704. {block:ifnot400px}<img src="{PhotoURL-250}">{/block:ifnot400px}
  705. {block:if400px}<img src="{PhotoURL-400}">{/block:if400px}
  706. {LinkCloseTag}
  707.  
  708. {block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink}
  709. {/block:Photo}
  710.  
  711. {block:Photoset}
  712. {block:if400px}{Photoset-400}{/block:if400px}
  713. {block:ifnot400px}{Photoset-250}{/block:ifnot400px}
  714. {block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink}
  715. {/block:Photoset}
  716.  
  717. {block:Video}
  718. {block:if400px}{Video-400}{/block:if400px}
  719. {block:ifnot400px}{Video-250}{/block:ifnot400px}
  720. {block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink}
  721. {/block:Video}
  722.  
  723. {block:AudioPlayer}
  724.  
  725. <div class="audiowrapper">
  726. {block:AlbumArt}
  727. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  728. {/block:AlbumArt}
  729.  
  730. <div class="playerbuttonbg">
  731. {AudioPlayerWhite}
  732. </div>
  733.  
  734. <div class="trackdetails">
  735.  
  736. {block:TrackName}<p class="tracks">{TrackName}</p>{/block:TrackName}
  737. {block:Artist}<p class="tracks">{Artist}</p>{/block:Artist}
  738. {block:Album}<p class="tracks">{Album}</p>{/block:Album}
  739. </div>
  740. </div>
  741. {block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink}
  742. {/block:AudioPlayer}
  743.  
  744. {block:Answer}
  745. <div class="ques">
  746. <div class="who" >{Asker} said: {Question}</div>
  747. <div class="answer">{Answer}</div>
  748. </div>
  749. {/block:Answer}
  750.  
  751. {block:Date}
  752. <div class="infos">
  753. <a href="{Permalink}">{Timeago}</a>{block:NoteCount}<a href="{Permalink}">{NoteCountwithlabel}</a>{/block:NoteCount}<a href="{ReblogURL}" target="_blank">reblog</a>{block:permalinkpage}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:permalinkpage}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">-{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  754. </div>
  755. {/block:Date}
  756.  
  757.  
  758. </div>
  759.  
  760.  
  761. {block:PostNotes}
  762. <div class="pagenotes">
  763. {PostNotes}
  764. </div>
  765. {/block:PostNotes}
  766.  
  767.  
  768. {/block:Posts}
  769.  
  770. <div id="pagination">
  771. {block:Pagination}
  772. {block:PreviousPage}
  773. <a href="{PreviousPage}" class="prev" style="float:left">back</a>
  774. {/block:PreviousPage}
  775.  
  776.  
  777. {block:NextPage}
  778. <a href="{NextPage}" class="next"style="float:right">next</a>
  779. {/block:NextPage}
  780. {/block:Pagination}
  781. </div>
  782.  
  783.  
  784.  
  785. </div>
  786.  
  787. </div>
  788.  
  789.  
  790.  
  791. <div id="creds"><a title="trenzathemes" href="http://trenzathemes.tumblr.com/">TT</a></div>
  792.  
  793. </div>
  794.  
  795.  
  796.  
  797. </body>
  798. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!