API tools faq
paste
jbtthemes

Theme 01: wanderer

jbtthemes
Jul 14th, 2016
910
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- THEME MADE BY BREQ --
  4.  
  5. @justiceofbreq-t.tumblr.com
  6. --------------------------
  7. THEME 01: WANDERER --
  8. --------------------------
  9. TERMS OF USAGE:
  10. - DO NOT REMOVE THE CREDIT
  11. - DO NOT REDISTRIBUTE
  12. - DO NOT CLAIM AS YOUR OWN
  13. - DO NOT USE AS A BASE
  14. -------------------------->
  15.  
  16. <html>
  17. <head>
  18. <title>{text:browser title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25. <!-- default appearance options -->
  26.  
  27. <meta name="color:background" content="#3b444b">
  28. <meta name="color:title" content="#9a9a9a">
  29. <meta name="color:posts" content="">
  30. <meta name="color:text" content="#3f3f3f">
  31. <meta name="color:description" content="#3f3f3f">
  32. <meta name="color:posttitle" content="#3f3f3f">
  33. <meta name="color:bold" content="#878787" />
  34. <meta name="color:italic" content="#878787" />
  35. <meta name="color:nav link" content="#006f94">
  36. <meta name="color:nav link hover" content="#ddd">
  37. <meta name="color:link" content="#0000ff">
  38. <meta name="color:link hover" content="#cbcbcb">
  39. <meta name="color:side link" content="#0000ff">
  40. <meta name="color:side link hover" content="#cbcbcb">
  41. <meta name="color:permalink" content="#a9a9a9" />
  42. <meta name="color:permalink hover" content="#ffffff" />
  43. <meta name="color:tags" content="#636363" />
  44. <meta name="color:tags hover" content="#fff" />
  45. <meta name="color:pagination" content="#fff"/>
  46. <meta name="color:pagishadow" content="#fff"/>
  47. <meta name="color:pagination hover" content="#fff"/>
  48. <meta name="color:tooltiptext" content="#fff"/>
  49. <meta name="color:tooltipbg" content="#006f94"/>
  50.  
  51. <meta name="image:portrait" content="" />
  52. <meta name="image:background" content="http://static.tumblr.com/poesisw/dxnoa9osk/wandererbg__2_.jpg" />
  53.  
  54. <meta name="text:browser title" content="this can be anything you want or just copy paste blog title"/>
  55. <meta name="text:font size" content="12px" />
  56. <meta name="text:containerbg" content="rgba(0,0,0,0)"/>
  57. <meta name="text:postbg" content="rgba(36.5%,54.1%,65.9%,0.7)"/>
  58.  
  59. <meta name="text:link 1" content="">
  60. <meta name="text:link 1 url" content="">
  61. <meta name="text:link 2" content="">
  62. <meta name="text:link 2 url" content="">
  63. <meta name="text:link 3" content="">
  64. <meta name="text:link 3 url" content="">
  65. <meta name="text:link 4" content="">
  66. <meta name="text:link 4 url" content="">
  67.  
  68. <meta name="text:side link 1" content="">
  69. <meta name="text:side link 1 url" content="">
  70. <meta name="text:side link 2" content="">
  71. <meta name="text:side link 2 url" content="">
  72. <meta name="text:side link 3" content="">
  73. <meta name="text:side link 3 url" content="">
  74.  
  75. <!-- scripts -->
  76.  
  77. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  78.  
  79. <script src="http://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script>
  80.  
  81. <script>
  82. (function($){
  83. $(document).ready(function(){
  84. $("a[title]").style_my_tooltips({
  85. tip_follows_cursor:true,
  86. tip_delay_time:90,
  87. tip_fade_speed:600,
  88. attribute:"title"
  89. });
  90. });
  91. })(jQuery);
  92. </script>
  93.  
  94. <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Poiret+One" rel="stylesheet">
  95.  
  96. </script>
  97.  
  98. </head>
  99.  
  100. <style type="text/css">
  101.  
  102. /*animation key frames*/
  103. /*grow*/
  104. @-webkit-keyframes grow {
  105. from { transform: none; }
  106. 50% { transform: scale(1.3); }
  107. to { transform: none; }}
  108. }
  109.  
  110. @-moz-keyframes grow {
  111. from { transform: none; }
  112. 50% { transform: scale(1.3); }
  113. to { transform: none; }
  114. }
  115.  
  116. @-o-keyframes grow {
  117. from { transform: none; }
  118. 50% { transform: scale(1.3); }
  119. to { transform: none; }
  120. }
  121.  
  122. @keyframes grow {
  123. from { transform: none; }
  124. 50% { transform: scale(1.3); }
  125. to { transform: none; }
  126. }
  127.  
  128. ::-webkit-scrollbar {
  129. width: 2px;
  130. height: 2px;
  131. }
  132. ::-webkit-scrollbar-button {
  133. width: 5px;
  134. height: 0px;
  135. }
  136. ::-webkit-scrollbar-thumb {
  137. background: {color:scroll};
  138. border: 0px none #ffffff;
  139. border-radius: 0px;
  140. }
  141. ::-webkit-scrollbar-track {
  142. background: {color:track};
  143. border: 0px none #ffffff;
  144. border-radius: 2px;
  145. }
  146. ::-webkit-scrollbar-corner {
  147. background: transparent;
  148. }
  149.  
  150. body {
  151. background-color:{color:background};
  152. font-family:arial;
  153. font-size: {text:font size};
  154. background-image:url('{image:background}');
  155. background-position:top left;
  156. background-repeat:no-repeat;
  157. background-attachment:fixed;
  158. background-size:cover;
  159. }
  160.  
  161. a {
  162. text-decoration:none;
  163. color:{color:link};
  164. -webkit-transition: all 0.7s ease;
  165. -moz-transition: all 0.7s ease;
  166. -o-transition: all 0.7s ease;
  167. }
  168.  
  169. a:hover {
  170. color:{color:link hover};
  171. }
  172.  
  173. b, strong {
  174. color:{color:bold};
  175. text-transform:uppercase;
  176. font-family: 'Poiret One', cursive;
  177. font-size:12px;
  178. }
  179.  
  180. i, em {
  181. color:{color:italic};
  182. text-transform:lowercase;
  183. font-family: 'Dancing Script', cursive;
  184. letter-spacing:1px;
  185. text-shadow:0 0 2px #000, 0 0 10px #fff;
  186. }
  187.  
  188. blockquote {
  189. padding:2px 7px;
  190. margin:3px 0 3px 8px;
  191. border-left:3px solid #006f94;
  192. }
  193.  
  194. blockquote img {
  195. max-width:100%;
  196. height:auto;
  197. }
  198.  
  199. img {
  200. max-width: 100%;
  201. }
  202.  
  203. h1 {
  204. font-family: 'Dancing Script', cursive;
  205. text-transform:uppercase;
  206. }
  207.  
  208. h2 {
  209. color:{color:posttitle};
  210. font-family: 'Poiret One', cursive;
  211. text-transform:lowercase;
  212. letter-spacing:2px;
  213. }
  214.  
  215. .title {
  216. font-family: 'Dancing Script', cursive;
  217. font-style: italic;
  218. text-transform:lowercase;
  219. font-size:70px;
  220. color:{color:title};
  221. text-align: right;
  222. text-shadow: -1px -2px 10px #000;
  223. }
  224.  
  225. /* customization for the title */
  226.  
  227. #titlecontainer {
  228. position:fixed;
  229. background-color:transparent;
  230. left:230px;
  231. height:350px;
  232. width:530px;
  233. top:170px;
  234. padding:10px;
  235. }
  236.  
  237. #header1 {
  238. font-style: italic;
  239. color:#a9a9a9;
  240. opacity:.7;
  241. text-align: bottom right;
  242. text-shadow: -1px -2px 10px #000;
  243. }
  244.  
  245. #container {
  246. position:fixed;
  247. background-color:{text:containerbg};
  248. left:490px;
  249. height:350px;
  250. overflow-y:scroll;
  251. width:530px;
  252. top:285px;
  253. padding: 10px;
  254. }
  255.  
  256. /* all the post info */
  257.  
  258. .posts {
  259. width:500px;
  260. background-color:{text:postbg};
  261. padding:10px;
  262. margin-bottom:30px;
  263. }
  264.  
  265. .permalinks {
  266. background-color:rgba(0,0,0,0.2);
  267. padding:5px;
  268. height:12px;
  269. }
  270.  
  271. .permalinks a {
  272. text-decoration:none;
  273. font-size: 9px;
  274. color:{color:permalink};
  275. }
  276.  
  277. .permalinks a:hover {
  278. color:{color:permalink hover};
  279. }
  280.  
  281. .date {
  282. float:left;
  283. }
  284.  
  285. .reblogs {
  286. float:right;
  287. }
  288.  
  289. {block:PermalinkPage}
  290. .tags {
  291. text-align:center;
  292. }
  293.  
  294. .tags a {
  295. text-decoration:none;
  296. font-size: 8px;
  297. text-transform:uppercase;
  298. color:{color:tags};
  299. }
  300.  
  301. .tags a:hover {
  302. color:{color:tags hover};
  303. }
  304. {/block:PermalinkPage}
  305.  
  306. /* sidebar stuff */
  307.  
  308. #sidebar {
  309. position:fixed;
  310. left:300px;
  311. top:450px;
  312. height:350px;
  313. width:200px;
  314. background:transparent;
  315. background-position: bottom left;
  316. background-repeat:no-repeat;
  317. background-attachment:fixed;
  318. opacity:0.2;
  319. -webkit-transition: all 0.7s ease;
  320. -moz-transition: all 0.7s ease;
  321. -o-transition: all 0.7s ease;
  322. }
  323.  
  324. #sidebar:hover {
  325. opacity:1;
  326. }
  327.  
  328. #description {
  329. font-size:10px;
  330. color:#a9a9a9;
  331. text-shadow: -1px -2px 10px #000;
  332. text-align: right;
  333. padding:10px;
  334. }
  335.  
  336. #sideimage img {
  337. max-width:100px;
  338. max-height:100px;
  339. margin-left:10px;
  340. }
  341.  
  342. #links {
  343. font-size:12px;
  344. padding:10px;
  345. text-align:right;
  346. }
  347.  
  348. #links a {
  349. display:inline-block;
  350. color:{color:side link};
  351. padding-left:10px;
  352. -webkit-transition: all 0.7s ease;
  353. -moz-transition: all 0.7s ease;
  354. -o-transition: all 0.7s ease;
  355. }
  356.  
  357. #links a:hover {
  358. color:{color:side link hover};
  359. letter-spacing:1px;
  360. }
  361.  
  362. /* customization for the scattered links */
  363.  
  364. #nlinks a {
  365. display:inline-block;
  366. text-shadow: -1px -2px 10px #fff, -1px -2px 10px #00ffff;
  367. color:{color:nav link};
  368. padding-left:10px;
  369. -webkit-transition: all 0.7s ease;
  370. -moz-transition: all 0.7s ease;
  371. -o-transition: all 0.7s ease;
  372. }
  373.  
  374. #nlinks a:hover {
  375. color:{color:nav link hover};
  376. letter-spacing:1px;
  377. -webkit-filter: blur(1px);
  378.  
  379. }
  380.  
  381. #link1 {
  382. position: fixed;
  383. font-size:40px;
  384. margin-left: 350px;
  385. margin-top: 200px;
  386. -webkit-animation-name: grow;
  387. -webkit-animation-duration: 3s;
  388. -webkit-animation-iteration-count: infinite;
  389. -webkit-animation-direction: alternate;
  390. -webkit-animation-timing-function: linear;
  391. -webkit-animation-fill-mode: forwards;
  392. -webkit-animation-delay: 0s;
  393. }
  394.  
  395. #link2 {
  396. position: fixed;
  397. font-size:30px;
  398. margin-left: 240px;
  399. margin-top:180px;
  400. -webkit-animation-name: grow;
  401. -webkit-animation-duration: 3s;
  402. -webkit-animation-iteration-count: infinite;
  403. -webkit-animation-direction: alternate;
  404. -webkit-animation-timing-function: linear;
  405. -webkit-animation-fill-mode: forwards;
  406. -webkit-animation-delay: 0s;
  407. }
  408.  
  409. #link3 {
  410. position: fixed;
  411. font-size:30px;
  412. margin-left: 180px;
  413. margin-top: 146px;
  414. -webkit-animation-name: grow;
  415. -webkit-animation-duration: 3s;
  416. -webkit-animation-iteration-count: infinite;
  417. -webkit-animation-direction: alternate;
  418. -webkit-animation-timing-function: linear;
  419. -webkit-animation-fill-mode: forwards;
  420. -webkit-animation-delay: 0s;
  421. }
  422.  
  423. #link4 {
  424. position: fixed;
  425. font-size:25px;
  426. margin-left: 250px;
  427. margin-top: 135px;
  428. -webkit-animation-name: grow;
  429. -webkit-animation-duration: 3s;
  430. -webkit-animation-iteration-count: infinite;
  431. -webkit-animation-direction: alternate;
  432. -webkit-animation-timing-function: linear;
  433. -webkit-animation-fill-mode: forwards;
  434. -webkit-animation-delay: 0s;
  435. }
  436.  
  437. #link5 {
  438. position: fixed;
  439. font-size:25px;
  440. margin-left: 160px;
  441. margin-top: 250px;
  442. -webkit-animation-name: grow;
  443. -webkit-animation-duration: 3s;
  444. -webkit-animation-iteration-count: infinite;
  445. -webkit-animation-direction: alternate;
  446. -webkit-animation-timing-function: linear;
  447. -webkit-animation-fill-mode: forwards;
  448. -webkit-animation-delay: 0s;
  449. }
  450.  
  451. #link6 {
  452. position: fixed;
  453. font-size:20px;
  454. margin-left: 100px;
  455. margin-top: 80px;
  456. -webkit-animation-name: grow;
  457. -webkit-animation-duration: 3s;
  458. -webkit-animation-iteration-count: infinite;
  459. -webkit-animation-direction: alternate;
  460. -webkit-animation-timing-function: linear;
  461. -webkit-animation-fill-mode: forwards;
  462. -webkit-animation-delay: 0s;
  463. }
  464.  
  465. /* more general stuffs for post and body */
  466.  
  467. #pagination {
  468. text-transform:uppercase;
  469. }
  470.  
  471. #pagination a {
  472. color:{color:nav link};
  473. font-size:12px;
  474. opacity: .8;
  475. text-shadow:0 0 10px {color:pagishadow};
  476. -webkit-transition: all 0.7s ease;
  477. -moz-transition: all 0.7s ease;
  478. -o-transition: all 0.7s ease;
  479. }
  480.  
  481. #pagination a:hover {
  482. color:{color:nav link hover};
  483. }
  484.  
  485. .retreat {
  486. position:fixed;
  487. top:640px;
  488. left:480px;
  489. }
  490.  
  491. .advance {
  492. position:fixed;
  493. top:660px;
  494. left:500px;
  495. }
  496.  
  497.  
  498. .asker {
  499. font-size:15px;
  500. font-style: italic;
  501. text-align:center;
  502. border-bottom:1px solid #eee;
  503. margin-bottom:5px;
  504. padding-bottom:3px;
  505. }
  506.  
  507. .question {
  508. font-style: italic;
  509. padding-left:50px;
  510. padding-right:50px;
  511. }
  512.  
  513. .quote {
  514. font-size:13px;
  515. letter-spacing:1px;
  516. text-align:center;
  517. border-bottom:1px solid #eee;
  518. margin-bottom:5px;
  519. padding-bottom:3px;
  520. }
  521.  
  522. .quotesource {
  523. font-size:10px;
  524. letter-spacing:1px;
  525. text-align:center;
  526. margin-bottom:5px;
  527. }
  528.  
  529. /*customization for tooltips */
  530. #s-m-t-tooltip {
  531. max-width:300px;
  532. border-radius: 0px; /*if you want rounded corners*/
  533. padding:4px;
  534. margin:15px 15px 5px 0px;/*how far it appears from link*/
  535. color:{color:tooltiptext};
  536. font-family: 'Cinzel', serif;
  537. font-size:12px;
  538. letter-spacing:0px;
  539. font-weight:100;
  540. background:{color:tooltipbg};
  541. z-index:99999;/*don't change this*/
  542. }
  543.  
  544. /* DO NOT REMOVE THIS. It's my credit and I worked very hard on it. */
  545.  
  546. #mycredit {
  547. z-index:8;
  548. bottom:0px;
  549. right:5px;
  550. height:30px;
  551. width:30px;
  552. opacity:0.8;
  553. position:fixed;
  554. padding:5px;}
  555.  
  556. {CustomCSS}
  557. </style></head>
  558.  
  559. <body>
  560. <div id="titlecontainer">
  561. <div id="header1">
  562. <h1 class="title">{Title}</h1></div></div>
  563. <div id="sidebar">
  564. <div id="sideimage"><img src="{image:portrait}"></div>
  565. <div id="description">{block:Description}{MetaDescription}{/block:Description}</div>
  566.  
  567. <div><div id="links">
  568. <div id="link"><a href="{text:side link 1 url}">{text:side link 1}</a></div>
  569. <div id="link"><a href="{text:side link 2 url}">{text:side link 2}</a></div>
  570. <div id="link"><a href="{text:side link 3 url}">{text:side link 3}</a></div>
  571. </div></div>
  572.  
  573. <!-- put more links or content here for info sidebar -->
  574.  
  575. </div>
  576.  
  577. <!-- these are for your main links, the little stars. add as many as you like but remember to make a div id for each link up in <style type='text/css'> -->
  578.  
  579. </div><div id="nlinks">
  580. <div id="link1"><a href="/" title="index">✧</a></div>
  581. <div id="link2"><a href="/ask" title="?">✧</a></div>
  582. <div id="link3"><a href="{text:link 1 url}" title="{text:link 1}">✧</a></div>
  583. <div id="link4"><a href="{text:link 2 url}" title="{text:link 2}">✧</a></div>
  584. <div id="link5"><a href="{text:link 3 url}" title="{text:link 3}">✧</a></div>
  585. <div id="link6"><a href="{text:link 4 url}" title="{text:link 4}">✧</a></div>
  586.  
  587. </div>
  588.  
  589. </div>
  590.  
  591. <div id="pagination">{block:Pagination}
  592. {block:PreviousPage}<a href="{PreviousPage}" class="retreat" title="retreat">Z.</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" class="advance" title="advance">A.</a>
  593. {/block:NextPage}
  594. {/block:Pagination}</div>
  595.  
  596. <div id="container">
  597.  
  598. {block:Posts}
  599.  
  600. <div class="posts">
  601.  
  602. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  603.  
  604. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  605.  
  606. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  607.  
  608. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  609.  
  610. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  611.  
  612. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  613.  
  614. {block:Chat}{block:Title}<h2>{Title}</h2></a>{/block:Title}
  615. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  616.  
  617. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  618.  
  619. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  620.  
  621. {block:Answer}
  622. <div class="asker">{Asker} wondered:</div>
  623. <div class="question">{Question}</div>
  624. {Answer}
  625. {/block:Answer}
  626.  
  627. <div class="permalinks">
  628. <div class="date"><a href="{Permalink}">{Timeago}</a> - <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a> - <a href="{Permalink}">n.{block:NoteCount}{NoteCount}{/block:NoteCount}</a></div>
  629. <div class="reblogs">{block:RebloggedFrom}
  630. <a href="{ReblogParentURL}">via</a>
  631. - <a href="{ReblogRootURL}">source</a>
  632. {/block:RebloggedFrom} - <a href="{ReblogURL}">reblog</a></div>
  633. </div>
  634.  
  635. {block:PermalinkPage}<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:PermalinkPage}
  636.  
  637. </div>
  638.  
  639. {block:Postnotes}<div class="permalinks">{PostNotes}</div>{/block:Postnotes}
  640.  
  641. {/block:Posts}
  642.  
  643. </div>
  644.  
  645. {block:ContentSource}
  646. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  647. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  648. {/block:SourceLogo}
  649. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  650. {/block:ContentSource}
  651.  
  652. <!-- DO NOT REMOVE MY CREDIT -->
  653. <div id="mycredit"><a href="http://justiceofbreq-t.tumblr.com/" title="theme by justiceofbreq-t"><img src="http://static.tumblr.com/poesisw/m7Hoa9vm3/justiceofbreqt-credit.png"></a></div>
  654. </body>
  655.  
  656. </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!