API tools faq
paste
pjo06

Theme #008 - OK Computer

pjo06
Jan 4th, 2016
1,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.43 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!--THEME BY CLARKEQGRIFFIN -->
  4. <!--#008 OK COMPUTER-->
  5.  
  6.  
  7.  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9.  
  10. <html>
  11. <head>
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  16.  
  17. <!--TEST BLOG 4-->
  18. <meta name="image:Sidebar" content=""/>
  19. <meta name="color:bg" content="#ffffff" />
  20. <meta name="color:accent" content="#f7f7f7" />
  21. <meta name="color:button" content="#e3e3e3" />
  22. <meta name="color:button border" content="#bababa" />
  23. <meta name="color:text" content="#363636" />
  24. <meta name="color:sidelinks" content="#5a5a5a" />
  25. <meta name="color:link" content="#363636" />
  26. <meta name="color:link hover" content="#c3c3c3" />
  27. <meta name="color:Scrollbar" content="#000000">
  28.  
  29.  
  30. <meta name="if:sidelink icons" content="0" />
  31. <meta name="if:description icon" content="0" />
  32. <meta name="if:post info icons" content="0" />
  33.  
  34.  
  35. <meta name="text:link 1 URL" content="/" />
  36. <meta name="text:link 1" content="" />
  37. <meta name="text:link 2 URL" content="/" />
  38. <meta name="text:link 2" content="" />
  39.  
  40.  
  41.  
  42.  
  43. <!--START-->
  44.  
  45. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  46.  
  47.  
  48.  
  49.  
  50. <!--TOOLTIPS-->
  51. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  52. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  54. <script>
  55. (function($){
  56. $(document).ready(function(){
  57. $("[title]").style_my_tooltips({
  58. tip_follows_cursor:true,
  59. tip_delay_time:100,
  60. tip_fade_speed:200
  61. });
  62. });
  63. })(jQuery);
  64. </script>
  65.  
  66.  
  67.  
  68. <style type="text/css">
  69.  
  70.  
  71.  
  72. #s-m-t-tooltip {
  73. max-width:300px;
  74. margin:15px;
  75. padding:3px 5px 3px 5px;
  76. border-radius:3px;
  77. background:black;
  78. color:white;
  79. z-index:999999;
  80. font-size:8px;
  81. font-style:none;
  82. font-weight:lighter;
  83. letter-spacing:1px;
  84. font-family:consolas, monaco, monospace;
  85. text-transform:uppercase;
  86. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  87. }
  88.  
  89. ::-webkit-scrollbar-thumb:vertical {background-color:{color:Scrollbar};height:5px;}
  90. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:Scrollbar};height:5px!important;}
  91. ::-webkit-scrollbar {background-color:{color:Background};height:5px;width:6px;}
  92.  
  93.  
  94.  
  95. body {
  96. font-family:consolas, monaco, monospace;
  97. font-size:11px;
  98. color:{color:text};
  99. background-color:{color:bg};
  100. }
  101.  
  102.  
  103. ::-moz-selection {
  104. background-color: #000;
  105. color: #fff;
  106. }
  107.  
  108. ::selection {
  109. background-color: #000;
  110. color: #fff;
  111. }
  112.  
  113. #entry {
  114. margin-bottom:120px;
  115. margin-left:20px;
  116. margin-top:-30px;
  117. }
  118.  
  119.  
  120.  
  121. /*SIDEBAR*/
  122.  
  123. #sidebar {
  124. width:160px;
  125. position:fixed;
  126. margin-left:180px;
  127. margin-top:40px;
  128.  
  129. }
  130.  
  131. #sidebar img {
  132. width:160px;
  133. text-align:center;
  134. padding-bottom:0px;
  135. margin-left:8px;
  136. margin-bottom:3px;
  137. border-radius:100px;
  138. box-shadow: 3px 3px 0px {color:button};
  139. background-color:{color:button};
  140.  
  141. }
  142.  
  143.  
  144.  
  145.  
  146. #description {
  147. width: 152px;
  148. background-color:{color:bg};
  149. text-align:justify;
  150. text-transform:none;
  151. letter-spacing:1px;
  152. line-height:11px;
  153. font-size:10px;
  154. padding:11px 14px 0px 14px;
  155.  
  156.  
  157. /*
  158. CONNECT*/
  159. border-left:1px solid {color:button};
  160. border-right:1px solid {color:button};
  161.  
  162.  
  163. /*border:1px solid {color:button};*/
  164. /*
  165. SIDE BORDER
  166. border-left:4px solid {color:button};
  167. border-radius:3px;*/
  168. /*border-bottom: 2px solid {color:button border};*/
  169. /*background-color:#ececec;*/
  170. /*background: url(http://pastebin.com/i/info.png) no-repeat 7px 7px;*/
  171. }
  172.  
  173. #pagination {
  174. text-align:center;
  175. width:180px;
  176. text-transform:uppercase;
  177. word-spacing:2px;
  178. margin-top:0px;
  179. letter-spacing:.8px;
  180. font-size:9px;
  181.  
  182. /*
  183. CONNECT*/
  184. border:1px solid {color:button};
  185. background-color:{color:accent};
  186. padding:16px 0px 16px 0px;
  187. border-bottom-left-radius:3px;
  188. border-bottom-right-radius:3px;
  189. }
  190.  
  191. #pagination a {
  192. background-color:{color:button};
  193. margin-left:-6px;
  194. padding:5px;
  195. border-radius:3px;
  196. border-bottom:2px solid {color:button border};
  197. /*border-right:2px solid gray;*/
  198. }
  199.  
  200.  
  201. #pagination a:hover {
  202. border-bottom:1px solid {color:button border};
  203. /*border-right:1px solid gray;*/
  204. text-decoration:none;
  205. color:{color:link};
  206. -webkit-transition: none;
  207. }
  208.  
  209.  
  210.  
  211. /*SIDELINKS*/
  212.  
  213. .sidelinks {
  214. position:relative;
  215. z-index:99999999;
  216. width:180px;
  217. margin-top:13px;
  218. margin-bottom:0px;
  219. text-align:center;
  220. word-spacing:4px;
  221. letter-spacing:.3px;
  222. line-height:24px;
  223. {block:ifnotsidelinkicons}
  224. font-size:9px;
  225. {block:ifnotsidelinkicons}
  226. {block:ifsidelinkicons}
  227. font-size:12px;
  228. {/block:ifsidelinkicons}
  229. text-transform:uppercase;
  230. display:inline-block;
  231. border-bottom:1px solid {color:bg};
  232. padding:12px 0px 12px 0px;
  233.  
  234. /*
  235. CONNECT*/
  236. background-color:{color:accent};
  237. border-top-left-radius:3px;
  238. border-top-right-radius:3px;
  239. border:1px solid {color:button};
  240.  
  241. }
  242.  
  243. .sidelinks a {
  244. color:{color:text};
  245. padding:5px;
  246. background-color:{color:button};
  247. border-radius:3px;
  248. border-bottom:2px solid {color:button border};
  249. }
  250.  
  251. .sidelinks a:hover {
  252. text-decoration:none;
  253. border-bottom:1px solid {color:button border};
  254. /*border-right:1px solid gray;*/
  255. color:{color:text};
  256. }
  257.  
  258.  
  259. a {
  260. text-decoration:none;
  261. color:{color:link};
  262. }
  263.  
  264. a:hover {
  265. text-decoration:none;
  266. color:{color:link hover};
  267. }
  268.  
  269. #title {
  270. text-align: left;
  271. font-weight:bold;
  272. text-transform:uppercase;
  273. margin-bottom:8px;
  274. font-size:10px;
  275.  
  276. }
  277.  
  278. /*POSTS*/
  279.  
  280. #posts {
  281. width:500px;
  282. margin-left:550px;
  283. margin-top:0px;
  284. margin-bottom:110px;
  285.  
  286.  
  287. }
  288.  
  289. #posts img {
  290. max-width:100%;
  291. height:100%;
  292. }
  293.  
  294.  
  295. #quote {
  296. font-style:italic;
  297. font-size: 17px;
  298. }
  299.  
  300. .source {
  301. font-style:italic;
  302. }
  303.  
  304. .title {
  305. font-size:18px;
  306. font-weight:none;
  307. font-style:italic;
  308. }
  309.  
  310. .linkname {
  311. font-size:20px;
  312. font-style:italic;
  313. }
  314.  
  315. /*AUDIO*/
  316.  
  317. #albumart {
  318. position:absolute;
  319. display:inline-block;
  320. z-index:999;
  321. margin-top:0px;
  322. margin-left:25px;
  323. /*background-color:{color:button};
  324. border-bottom:0px solid {color:button};*/
  325. border-radius:3px;
  326. }
  327.  
  328. .playbox {
  329. background-color:#fafafa;
  330. position:absolute;
  331. margin-left:60.5px;
  332. margin-top:36.5px;
  333. width:27px;
  334. height:27px;
  335. z-index:1000;
  336. opacity:.5;
  337. }
  338.  
  339. .playbutton {
  340. width: 27px;
  341. height: 27px;
  342. overflow: hidden;
  343. position: absolute;
  344. opacity:.5;
  345. -moz-transition-duration: 0.4s;
  346. -o-transition-duration: 0.4s;
  347. -webkit-transition-duration: 0.4s;
  348. transition-duration: 0.4s;
  349. }
  350.  
  351. .playbox:hover .playbutton {
  352. opacity:1;
  353. -moz-transition-duration: 0.4s;
  354. -o-transition-duration: 0.4s;
  355. -webkit-transition-duration: 0.4s;
  356. transition-duration: 0.4s;
  357. }
  358.  
  359. /*
  360. ORIGINAL
  361. .audiosrc {
  362. position:absolute;
  363. max-width:330px;
  364. margin-left:247px;
  365. margin-top:63px;
  366. font-size:9px;
  367. letter-spacing:1.5px;
  368. text-transform:uppercase;
  369. text-align:left;
  370. color:black;
  371.  
  372. }*/
  373.  
  374.  
  375. .audiosrc {
  376. position:absolute;
  377. display:inline-block;
  378. max-width:330px;
  379. margin-left:180px;
  380. top:37px;
  381. font-size:9px;
  382. letter-spacing:1.5px;
  383. text-transform:uppercase;
  384. text-align:left;
  385. color:black;
  386.  
  387. }
  388.  
  389. #srccontainer {
  390. position:relative;
  391. background-color:none;
  392. width:500px;
  393. height:100px;
  394. z-index:999;
  395. margin-bottom:45px;
  396. border-radius:6px;
  397. margin-top:15px;
  398. }
  399.  
  400.  
  401. /*QUESTION*/
  402.  
  403.  
  404. .question {
  405. background-color:#fafafa;
  406. width:500px;
  407. text-align:center;
  408. padding:10px;
  409. }
  410.  
  411. .asker {
  412. font-style:italic;
  413. text-transform:uppercase;
  414. font-size:12;
  415. text-align:center;
  416. }
  417.  
  418.  
  419.  
  420.  
  421. #postinfo {
  422. text-transform:uppercase;
  423. font-family:consolas, monaco, monospace;
  424. font-size:10px;
  425. margin-top:20px;
  426. padding:16px 25px 15px 25px;
  427. text-align:left;
  428. width:450px;
  429. line-height:12px;
  430. background-color:{color:accent};
  431. border-bottom:2px solid {color:button};
  432. border-radius:0px 0px 5px 5px;
  433. {block:Permalink}
  434. margin-bottom:30px;
  435. {/block:Permalink}
  436. }
  437.  
  438. .tags {
  439. margin-top:5px;
  440. font-size:10px;
  441. text-transform:none;
  442. padding-right:40px;
  443.  
  444. }
  445.  
  446.  
  447. .notes ol, .notes li{
  448. list-style:none;
  449. }
  450.  
  451.  
  452. ol.notes li.note img.avatar {
  453. vertical-align:-8px;
  454. border-radius:100%;
  455. margin-right:10px;
  456. width:16px;
  457. height:16px;
  458. margin-top:4px;
  459. margin-bottom:4px;
  460. }
  461.  
  462.  
  463. blockquote {
  464. padding-left:5px;
  465. border-left:2px solid {color:text};
  466. margin-left:14px;
  467. }
  468.  
  469.  
  470. blockquote blockquote {
  471. padding-left:5px;
  472. border-left:2px solid {color:text};
  473. margin-left:14px;
  474. }
  475.  
  476. #source a{
  477. bottom:10px;
  478. right:10px;
  479. position:fixed;
  480. background-color:{color:button};
  481. border-bottom:2px solid {color:button border};
  482. padding:6px 8px 6px 8px;
  483. border-radius:3px;
  484. }
  485.  
  486. #source a:hover {
  487. border-bottom:1px solid {color:button border};
  488. color:{color:link};
  489. }
  490.  
  491.  
  492. {block:ifdescriptionicon}
  493. #infomark{
  494. font-size:14px;
  495. margin-left:-15px;
  496. margin-top:-12px;
  497.  
  498. padding:10px;
  499. border:1px solid {color:button};
  500. border-left:4px solid {color:button};
  501. border-right:0px;
  502. background-color:{color:bg};
  503. border-top-left-radius:3px;
  504. border-bottom-left-radius:3px;
  505.  
  506. position:absolute;
  507. opacity:1;
  508. z-index:-1;
  509. width:0px;
  510. overflow:hidden;
  511.  
  512.  
  513. -moz-transition-duration: 0.4s;
  514. -o-transition-duration: 0.4s;
  515. -webkit-transition-duration: 0.4s;
  516. transition-duration: 0.4s;
  517. }
  518.  
  519. #description:hover #infomark{
  520. margin-left:-51px;
  521. margin-top:-12px;
  522.  
  523. opacity:1;
  524. z-index:-10000;
  525. width:13px;
  526. -moz-transition-duration: 0.4s;
  527. -o-transition-duration: 0.4s;
  528. -webkit-transition-duration: 0.4s;
  529. transition-duration: 0.4s;
  530. }
  531. {block:ifdescriptionicon}
  532.  
  533. {CustomCSS}</style>
  534.  
  535.  
  536. </head>
  537. <body>
  538.  
  539. <div id="entry">
  540.  
  541.  
  542. <!--sidebar-->
  543.  
  544.  
  545.  
  546.  
  547.  
  548. <div id="sidebar">
  549.  
  550. <!--<div id="title">{Title}</div>-->
  551.  
  552. {block:IfSidebarImage}
  553. <div id="sidebarimg"><span title="{Title}"><img src="{image:sidebar}"></span></div>
  554. {/block:IfSidebarImage}
  555.  
  556. <!--{image:sidebar}-->
  557.  
  558.  
  559. {block:ifsidelinkicons}
  560. <div class="sidelinks">
  561. <a href="/"><span title="home"><i class="fa fa-power-off" style="width:15px;"></i></span></a>
  562. <a href="/ask"><span title="ask"><i class="fa fa-envelope-o" style="width:15px;"></i></span></a>
  563. {block:IfLink1}<a href="{text:link 1 URL}"><span title="{text:link 1}"><i class="fa fa-folder-o" style="width:15px;"></i></span></a>{/block:IfLink1}
  564. {block:IfLink2}<a href="{text:link 2 URL}"><span title="{text:link 2}"><i class="fa fa-files-o" style="width:15px;"></i></span></a>{/block:IfLink2}
  565.  
  566. </div>
  567. {/block:ifsidelinkicons}
  568.  
  569.  
  570.  
  571. {block:ifnotsidelinkicons}
  572. <div class="sidelinks">
  573. <a href="/">home</i></a>
  574. <a href="/ask">ask</i></a>
  575. {block:IfLink1}<a href="{text:link 1 URL}">{text:link 1}</a>{/block:IfLink1}
  576. {block:IfLink2}<a href="{text:link 2 URL}">{text:link 2}</a>{/block:IfLink2}
  577.  
  578. </div>
  579. {/block:ifnotsidelinkicons}
  580.  
  581.  
  582.  
  583. <!--<img src="http://pastebin.com/i/info.png" style="width:14px;height:14px;margin-bottom:-4px">-->
  584.  
  585.  
  586.  
  587. <div id="description">
  588.  
  589. {block:ifdescriptionicon}
  590. <div id="infomark"><i class="fa fa-info-circle" style="opacity:.4;"></i></div>
  591. {/block:ifdescriptionicon}
  592.  
  593.  
  594. <div id="title">{Title}:</div>
  595. {description}<br><br>
  596. </div>
  597.  
  598. <div id="pagination">
  599. {block:Pagination}
  600. {block:PreviousPage}<a href="{PreviousPage}">prev</a>&nbsp;{/block:PreviousPage}{block:NextPage}&nbsp;<a href="{NextPage}">next</a>{/block:NextPage}
  601. {/block:Pagination}
  602. </div>
  603.  
  604.  
  605. </div>
  606.  
  607.  
  608.  
  609.  
  610. </div>
  611.  
  612.  
  613. <!--posts-->
  614.  
  615. {block:posts} <div id="posts">
  616.  
  617. {block:Text}
  618. <div class="title">{block:Title}{Title}{/block:Title}</div>{Body}
  619. {/block:Text}
  620.  
  621. {block:Photo}
  622. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}
  623. {/block:Photo}
  624.  
  625. {block:Photoset}
  626. {Photoset-500}{block:Caption}{Caption}{/block:Caption}
  627. {/block:Photoset}
  628.  
  629. {block:Quote}
  630. <div id="quote">{Quote}</div><div class="source">{block:Source}— {Source}{/block:Source}</div>
  631. {/block:Quote}
  632.  
  633. {block:Link}
  634. <a href="{URL}"><div class="linkname">{Name}</div></a>{block:Description}{description}{/block:Description}
  635. {/block:Link}
  636.  
  637. {block:Chat}
  638. {block:title}<h2>{Title}</h2>{/block:title}{block:lines}{block:label}<b>{label}</b>{/block:label} {line} <br>{/block:lines}
  639. {/block:Chat}
  640.  
  641.  
  642.  
  643. {block:Audio}
  644.  
  645. {block:AudioPlayer}
  646. <div class="audiocontainer">
  647. <div class="playbox"><div class="playbutton">{AudioPlayerWhite}</div></div>
  648. <div id="srccontainer">
  649. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100px" height="100px" style="border-radius:3px;">{/block:AlbumArt}</div>
  650. <div class="audiosrc">
  651. {block:Artist}<b>Artist</b>: {Artist}{/block:Artist}<br>
  652. {block:TrackName}<b>Track</b>: {TrackName}{/block:TrackName}<br>
  653. </div></div></div>
  654. {/block:AudioPlayer}
  655.  
  656. {block:AudioEmbed}
  657. {AudioEmbed}
  658. {/block:AudioEmbed}
  659.  
  660. {block:Caption}{Caption}
  661. {/block:Caption}
  662. {/block:Audio}
  663.  
  664. {block:video}
  665. {VideoEmbed-500}{block:Caption}{caption}{/block:Caption}
  666. {/block:video}
  667.  
  668. <!--{block:answer}
  669. <div class="question">
  670. <div class="asker">
  671. <b>{asker} said:</b></div>
  672. <br>{question}
  673. </div>
  674. {Answer}
  675. {/block:answer}-->
  676.  
  677.  
  678. <!--<div class="question">
  679.  
  680. <div class="asker">
  681. {Asker}
  682. </div>
  683. <div class="qa">
  684. {Question}
  685. <div class="tri"></div>
  686. </div>
  687. </div>
  688. {Answer}
  689. <div class="replies">
  690. {Replies}
  691. </div>-->
  692.  
  693.  
  694. <!--postinfo-->
  695.  
  696. <div id="postinfo">
  697.  
  698. <!--{block:Date}
  699. {TimeAgo}
  700. {/block:Date}-->
  701.  
  702.  
  703. {block:ifnotpostinfoicons}
  704. <b>File Info:</b>&nbsp;
  705. {/block:ifnotpostinfoicons}
  706.  
  707. {block:ifpostinfoicons}
  708. <span title="file info"><i class="fa fa-info-circle"></i></span>&nbsp;
  709. {/block:ifpostinfoicons}
  710.  
  711.  
  712. {block:Date}
  713. <span title="{DayOfMonthWithZero} {ShortMonth} {ShortYear}"><a href="{permalink}">{timeago}</a></span>
  714. {/block:Date}&nbsp;\&nbsp;
  715. <a href="{Permalink}">
  716. {NoteCountWithLabel}
  717. </a>
  718.  
  719.  
  720. {block:RebloggedFrom}
  721. <span style="float:right;">
  722. <!--<b>—Content source:</b>&nbsp;--><a href="{ReblogParentURL}"><span title="{ReblogParentname}">via</span></a>
  723. &nbsp;\&nbsp;
  724. <a href="{ReblogRootURL}"><span title="{ReblogRootname}">src</span></a>
  725. </span>
  726. {/block:RebloggedFrom}
  727.  
  728.  
  729.  
  730. <!--&nbsp;&nbsp;&nbsp;{block:RebloggedFrom}
  731. <a href="{ReblogParentURL}"><span title="{ReblogParentname}">via</span></a>&nbsp;/&nbsp;<a href="{ReblogRootURL}"><span title="{ReblogRootname}">src</span></a>
  732. {/block:RebloggedFrom}-->
  733.  
  734.  
  735. {block:ContentSource}
  736. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  737. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  738. {/block:SourceLogo}
  739. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  740. {/block:ContentSource}
  741.  
  742.  
  743. <br>
  744. <div class="tags">
  745.  
  746. {block:ifnotpostinfoicons}
  747. <span style="text-transform:uppercase"><b>saved as:</b></span>&nbsp;
  748. {/block:ifnotpostinfoicons}
  749.  
  750. {block:ifpostinfoicons}
  751. <span title="saved as"><i class="fa fa-floppy-o"></i></span>&nbsp;
  752. {/block:ifpostinfoicons}
  753.  
  754. {block:HasTags}
  755. {block:tags}
  756. <a href="{TagURL}"><i class="fa fa-angle-right"></i> {Tag}</a>&nbsp;
  757. {/block:tags}
  758. {/block:HasTags}
  759. </div>
  760.  
  761. <!--<i class="fa fa-angle-right"></i>-->
  762.  
  763.  
  764. </div>
  765.  
  766.  
  767.  
  768. <div class="notes">
  769. {block:PostNotes}{PostNotes}{/block:PostNotes}
  770. </div>
  771.  
  772.  
  773. </div>{/block:posts}
  774.  
  775. </div>
  776.  
  777. <div style="position:fixed; bottom:10px; right:10px; padding:2px 2px; font-size:11px;">
  778. <a href="http://clarkeqgriffin.tumblr.com"><span title="clarkeqgriffin"><i class="fa fa-code"></i></span></a>
  779. </div>
  780.  
  781. </body>
  782. </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!