API tools faq
paste
Advertisement
Sebastianstnn

Theme 08: Monsters

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