API tools faq
paste
jbtthemes

evergreen (revamped)

jbtthemes
May 1st, 2017
516
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- THEME MADE BY BREQ --
  4.  
  5. @rpjustxce.tumblr.com
  6. --------------------------
  7. THEME 02: evergreen (revamped) --
  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>{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="#fff"/>
  28. <meta name="color:body" content="#000"/>
  29. <meta name="color:border" content="#000"/>
  30. <meta name="color:description" content="#4f4f4f"/>
  31. <meta name="color:title" content="#224b37"/>
  32. <meta name="color:posttitle" content="#224b37"/>
  33. <meta name="color:bold" content="#11261c"/>
  34. <meta name="color:italic" content="#979482"/>
  35. <meta name="color:blockquote" content="#1d1d1d"/>
  36. <meta name="color:link" content="#347153"/>
  37. <meta name="color:link hover" content="#000"/>
  38. <meta name="color:navlink" content="#898989"/>
  39. <meta name="color:navlink hover" content="#000"/>
  40. <meta name="color:permalink" content="#686868" />
  41. <meta name="color:permalink hover" content="#000" />
  42. <meta name="color:tags" content="#686868" />
  43. <meta name="color:tags hover" content="#000" />
  44. <meta name="color:pagination" content="#686868" />
  45. <meta name="color:pagination hover" content="#000" />
  46. <meta name="color:scrollbar" content="#224b37" />
  47. <meta name="color:scrollbar1" content="#fff" />
  48. <meta name="color:tooltiptext" content="#fff"/>
  49. <meta name="color:tooltipborder" content="767676"/>
  50. <meta name="color:tooltipbg" content="767676"/>
  51.  
  52. <meta name="image:background" content="" />
  53. <meta name="image:portrait1" content="http://static.tumblr.com/poesisw/DYmop9uqi/untitled-1.png" />
  54. <meta name="image:portrait2" content="http://static.tumblr.com/poesisw/m4Qop9uqv/untitled-2.png" />
  55.  
  56. <meta name="text:font size" content="11px" />
  57. <meta name="text:liststyletype icon" content="o" />
  58.  
  59. <meta name="if:greyscale" content="0"/>
  60.  
  61. <meta name="text:link1" content="link 1">
  62. <meta name="text:link1url" content="">
  63. <meta name="text:link2" content="link 2">
  64. <meta name="text:link2url" content="">
  65. <meta name="text:link3" content="link 3">
  66. <meta name="text:link3url" content="">
  67. <meta name="text:link4" content="link 4">
  68. <meta name="text:link4url" content="">
  69.  
  70. <!-- scripts -->
  71.  
  72. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  73.  
  74. <script src="http://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script>
  75.  
  76. <script>
  77. (function($){
  78. $(document).ready(function(){
  79. $("a[title]").style_my_tooltips({
  80. tip_follows_cursor:true,
  81. tip_delay_time:90,
  82. tip_fade_speed:600,
  83. attribute:"title"
  84. });
  85. });
  86. })(jQuery);
  87. </script>
  88.  
  89. <!--custom fonts-->
  90. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Satisfy" rel="stylesheet">
  91.  
  92. </head>
  93. <style type="text/css">
  94.  
  95. /*customize scrollbar*/
  96. ::-webkit-scrollbar {
  97. width: 5px;
  98. height: 2px;
  99. }
  100. ::-webkit-scrollbar-button {
  101. width: 0px;
  102. height: 0px;
  103. }
  104. ::-webkit-scrollbar-thumb {
  105. background:{color:scrollbar};
  106. background: -moz-linear-gradient(top, {color:scrollbar} 0%, {color:scrollbar1}; 100%); /* FF3.6-15 */
  107. background: -webkit-linear-gradient(top, {color:scrollbar} 0%, {color:scrollbar1} 100%); /* Chrome10-25,Safari5.1-6 */
  108. background: linear-gradient(to bottom, {color:scrollbar} 0%, {color:scrollbar1} 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  109. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#530a09', endColorstr='#110303',GradientType=0 ); /* IE6-9 */
  110. }
  111. ::-webkit-scrollbar-track {
  112. background: transparent;
  113. }
  114. ::-webkit-scrollbar-corner {
  115. background: transparent;
  116. }
  117.  
  118. body {
  119. background-color:{color:background};
  120. font-family: arial;
  121. font-size: {text:font size};
  122. color:{color:body};
  123. background-image:url({image:background});
  124. background-position: top left;
  125. background-repeat:no-repeat;
  126. background-attachment:fixed;
  127. background-size:cover;
  128. }
  129.  
  130. a {
  131. text-decoration:none;
  132. color:{color:link};
  133. -webkit-transition: all 0.7s ease;
  134. -moz-transition: all 0.7s ease;
  135. -o-transition: all 0.7s ease;
  136. }
  137.  
  138. a:hover {
  139. color:{color:link hover};
  140. }
  141.  
  142. b, strong {
  143. color:{color:bold};
  144. text-transform:uppercase;
  145. }
  146.  
  147. i, em {
  148. color:{color:italic};
  149. font-family:'Satisfy', cursive;
  150. text-transform:lowercase;
  151. letter-spacing:1px;
  152. font-weight:100;
  153. }
  154.  
  155. blockquote {
  156. padding:2px 7px;
  157. margin:3px 0 3px 8px;
  158. border-left:1px dotted {color:blockquote};
  159. }
  160.  
  161. blockquote img {
  162. max-width:100%;
  163. height:auto;
  164. }
  165.  
  166. img {
  167. max-width: 100%;
  168. }
  169.  
  170. h1 {
  171. font-family:'Satisfy', cursive;
  172. font-size:30px;
  173. color:{color:posttitle};
  174. text-align:right;
  175. text-transform: lowercase;
  176. border-bottom:1px dotted {color:posttitle};
  177. letter-spacing:3px;
  178. font-weight:100;
  179. }
  180.  
  181. /*customization for list style type*/
  182. ul {
  183. list-style: none;
  184. padding: 0;
  185. }
  186.  
  187. li {
  188. padding-left: 5px;
  189. }
  190.  
  191. li:before {
  192. font-size:8px;
  193. content: "{text:liststyletype icon}"; /* FontAwesome Unicode */
  194. display: inline-block;
  195. margin-left: 5px; /* same as padding-left set on li */
  196. padding-right:5px;
  197. width: 1.3em; /* same as padding-left set on li */
  198. }
  199.  
  200. /* customization for post container */
  201.  
  202. #container {
  203. position:absolute;
  204. left:675px;
  205. height:100%;
  206. overflow-y:scroll;
  207. width:540px;
  208. top:10px;
  209. padding:10px;
  210. }
  211.  
  212. /* all the post info */
  213.  
  214. .posts {
  215. width:500px;
  216. padding:10px;
  217. margin-bottom:30px;
  218. padding-bottom:10px;
  219. margin-right:10px;
  220. }
  221.  
  222. {block:IfGreyscale}
  223. .posts img {
  224. -webkit-filter: grayscale(100%);
  225. -webkit-transition: all 0.6s ease-in-out;
  226. -moz-transition: all 0.6s ease-in-out;
  227. -o-transition: all 0.6s ease-in-out;
  228. -ms-transition: all 0.6s ease-in-out;
  229. transition: all 0.6s ease-in-out;
  230. }
  231.  
  232. .posts img:hover {
  233. -webkit-filter: grayscale(0%);
  234. -webkit-transition: all 0.6s ease-in-out;
  235. -moz-transition: all 0.6s ease-in-out;
  236. -o-transition: all 0.6s ease-in-out;
  237. -ms-transition: all 0.6s ease-in-out;
  238. transition: all 0.6s ease-in-out;
  239. }
  240.  
  241. .html_photoset {
  242. -webkit-filter: grayscale(100%);
  243. -webkit-transition: all 0.6s ease-in-out;
  244. -moz-transition: all 0.6s ease-in-out;
  245. -o-transition: all 0.6s ease-in-out;
  246. -ms-transition: all 0.6s ease-in-out;
  247. transition: all 0.6s ease-in-out;
  248. }
  249.  
  250. .html_photoset:hover {
  251. -webkit-filter: grayscale(0%);
  252. -webkit-transition: all 0.6s ease-in-out;
  253. -moz-transition: all 0.6s ease-in-out;
  254. -o-transition: all 0.6s ease-in-out;
  255. -ms-transition: all 0.6s ease-in-out;
  256. transition: all 0.6s ease-in-out;
  257. }
  258.  
  259. .player {
  260. background-color:#000;
  261. -webkit-border-radius:50px;
  262. -moz-border-radius:50px;
  263. border-radius:100%;
  264. position:absolute;
  265. z-index:1000;
  266. margin-left:35%;
  267. margin-top:11px;
  268. opacity:.8;
  269. }
  270.  
  271. {/block:IfGreyscale}
  272.  
  273. /*customization for permalinks "post info"*/
  274. .permalinks {
  275. text-align: center;
  276. text-transform: lowercase;
  277. padding-top: 10px;
  278. font-size:8px;
  279. color:{color:permalink};
  280. }
  281.  
  282. .permalinks a {
  283. color:{color:permalink};
  284. }
  285.  
  286. .permalinks a:hover {
  287. color:{color:permalink hover};
  288. }
  289.  
  290. .tags {
  291. margin-top:5px;
  292. text-align:center;
  293. text-transform:lowercase;
  294. }
  295.  
  296. .tags a {
  297. text-decoration:none;
  298. font-size: 8px;
  299. text-transform:lowercase;
  300. color:{color:tags};
  301. }
  302.  
  303. .tags a:hover {
  304. color:{color:tags hover};
  305. }
  306.  
  307. .notes a {
  308. color:{color:permalink};
  309. }
  310.  
  311. .notes a:hover {
  312. color:{color:permalink hover};
  313. }
  314.  
  315. .notes li {
  316. text-align:left;
  317. }
  318.  
  319. .notes li:before {
  320. content: ""; /* FontAwesome Unicode */
  321. display: inline-block;
  322. margin-left: 0px; /* same as padding-left set on li */
  323. width: 1.3em; /* same as padding-left set on li */
  324. }
  325.  
  326. /* sidebar stuff */
  327.  
  328. #sidebar {
  329. position:fixed;
  330. left:425px;
  331. top:180px;
  332. height:450px;
  333. width:250px;
  334. background:transparent;
  335. overflow:hidden;
  336. }
  337.  
  338. /* customization for the title */
  339.  
  340. #title {
  341. font-family:'Satisfy', cursive;
  342. font-size: 25px;
  343. text-align: center;
  344. font-style: italic;
  345. text-transform: lowercase;
  346. font-weight: bold;
  347. color:{color:title};
  348. padding-bottom:30px;
  349. }
  350.  
  351. /*customization for description*/
  352.  
  353. #description {
  354. width:150px;
  355. margin-right:auto;
  356. margin-left:auto;
  357. font-size:10px;
  358. font-family: 'Inconsolata', monospace;
  359. color:{color:description};
  360. text-align:center;
  361. padding:10px;
  362. }
  363.  
  364. /* customize your sidebar images "portraits" */
  365.  
  366. #sidebar img {
  367. display:block;
  368. height:100px;
  369. width:100px;
  370. margin-right:auto;
  371. margin-left:auto;
  372. border:4px solid {color:title};
  373. padding:15px;
  374. margin-bottom:30px;
  375. }
  376.  
  377. /*customize your scattered nav links*/
  378.  
  379. #navlinks {
  380. width:100%;
  381. height:auto;
  382. font-family: 'Inconsolata', monospace;
  383. display:inline-block;
  384. text-align:center;
  385. }
  386.  
  387. .navlinks a {
  388. letter-spacing:1px;
  389. color:{color:navlink};
  390. padding-left:2px;
  391. padding-right:2px;
  392. -webkit-transition: all 0.7s ease;
  393. transition: all 0.7s ease;
  394. -moz-transition: all 0.7s ease;
  395. -o-transition: all 0.7s ease;
  396. }
  397.  
  398. .navlinks a:hover {
  399. color:{color:navlink hover};
  400. border-bottom:1px solid {color:border};
  401. letter-spacing:3px;
  402. -webkit-transition: all 0.7s ease;
  403. transition: all 0.7s ease;
  404. -moz-transition: all 0.7s ease;
  405. -o-transition: all 0.7s ease;
  406. }
  407.  
  408. /* customization for pagination */
  409.  
  410. #pagination {
  411. width:100%;
  412. height:auto;
  413. text-align:center;
  414. margin-top:-20px;
  415. margin-bottom:40px;
  416. }
  417.  
  418. #pagination a {
  419. color:{color:pagination};
  420. }
  421.  
  422. #pagination a:hover {
  423. color:{color:pagination hover};
  424. }
  425.  
  426. .current_page {
  427. padding:2px;
  428. color:{color:pagination hover};
  429. }
  430.  
  431. .jump_page {
  432. padding:4px;
  433. color:{color:pagination};
  434. }
  435.  
  436. /* more general stuffs for post and body */
  437.  
  438. .asker {
  439. font-size:15px;
  440. font-style: italic;
  441. text-align:center;
  442. margin-bottom:5px;
  443. padding-bottom:3px;
  444. }
  445.  
  446. .question {
  447. font-style: italic;
  448. text-align:center;
  449. padding-right:30px;
  450. padding-left:30px;
  451. padding-bottom:10px;
  452. }
  453.  
  454. .answer {
  455. border-top:1px dotted {color:body};
  456. }
  457.  
  458. .quote {
  459. font-size:13px;
  460. letter-spacing:1px;
  461. text-align:right;
  462. border-bottom:1px dotted {color:body};
  463. margin-bottom:5px;
  464. padding-bottom:10px;
  465. }
  466.  
  467. .quotesource {
  468. font-size:10px;
  469. letter-spacing:1px;
  470. text-align:center;
  471. margin-bottom:5px;
  472. }
  473.  
  474. .media {
  475. position:relative;
  476. display:inline-block;
  477. width:100%;
  478. }
  479.  
  480. .musicwrapper {
  481. position: relative;
  482. display:inline-block;
  483. }
  484.  
  485. .albumimgwrapper {
  486. position: absolute;
  487. opacity:.7;
  488. overflow: hidden;
  489. margin-left:254px;
  490. width: 57px;
  491. height: 55px;
  492. }
  493.  
  494. .pbbg {
  495. position: absolute;
  496. left: 8px;
  497. top: 5px;
  498. width: 30px;
  499. height: 30px;
  500. margin-left:250px;
  501. background-color: transparent;
  502. padding: 10px;
  503. opacity:.4;
  504. filter: alpha(opacity=40);
  505. -moz-opacity: 0.4;
  506. -khtml-opacity: 0.4;
  507. transition: opacity .7s ease-in-out;
  508. -moz-transition: opacity .7s ease-in-out;
  509. -webkit-transition: opacity .7s ease-in-out;
  510. }
  511.  
  512. .pbbg:hover {
  513. opacity: 1;
  514. filter: alpha(opacity=100);
  515. -moz-opacity: 1;
  516. -khtml-opacity: 1;
  517. }
  518.  
  519. .playerbutton {
  520. position: relative;
  521. width: 30px;
  522. height: 30px;
  523. overflow:hidden;
  524. }
  525.  
  526. .pbhug {
  527. position: absolute;
  528. top: -30px;
  529. left: -10px;
  530. }
  531.  
  532. .tumblr_audio_player {
  533. height: 90px;
  534. width: 270px;
  535. }
  536.  
  537. .albuminfo {
  538. padding:10px;
  539. display:inline-block;
  540. margin-left: 90px;
  541. min-height: 75px;
  542. }
  543.  
  544.  
  545. /*customization for tooltips */
  546. #s-m-t-tooltip {
  547. max-width:300px;
  548. border-radius: 0px; /*if you want rounded corners*/
  549. padding:4px;
  550. margin:15px 15px 5px 0px;/*how far it appears from link*/
  551. color:{color:tooltiptext};
  552. border:1px solid {color:tooltipborder};
  553. font-size:10px;
  554. letter-spacing:1px;
  555. background:{color:tooltipbg};
  556. z-index:99999;/*don't change this*/
  557. }
  558.  
  559. /* DO NOT REMOVE THIS. It's my credit and I worked very hard on it. */
  560. #mycredit {
  561. z-index:999999999;
  562. bottom:5px;
  563. right:5px;
  564. height:30px;
  565. width:30px;
  566. opacity:.2;
  567. position:fixed;
  568. padding:5px;
  569. -webkit-transition: 0.8s ease-in;
  570. -moz-transition: .8s ease-in;
  571. transition: .8s ease-in;
  572. }
  573.  
  574. #mycredit:hover {
  575. transform:rotate(90deg);
  576. opacity:1;
  577. }
  578.  
  579. {CustomCSS}
  580.  
  581. </style>
  582.  
  583. <body>
  584.  
  585. <!-- DO NOT REMOVE MY CREDIT -->
  586. <div id="mycredit"><a href="http://rpjustxce.tumblr.com/" title="theme by Justxce Themes"><img src="http://static.tumblr.com/ewpefvd/Uteohiglh/rpj-icon.png"></a></div>
  587.  
  588.  
  589. <!--sidebar-->
  590. <div id="sidebar">
  591. <div id="title">{Title}</div><!--title-->
  592. <!--pagination -->
  593. {block:Pagination}
  594. <div id="pagination">
  595. {block:PreviousPage}
  596. <a href="{PreviousPage}">⇠ </a>
  597. {/block:PreviousPage}
  598.  
  599. {block:JumpPagination length="3"}
  600. {block:CurrentPage}
  601. <span class="current_page">{PageNumber}</span>
  602. {/block:CurrentPage}
  603. {block:JumpPage}
  604. <a class="jump_page" href="{URL}">{PageNumber}</a>
  605. {/block:JumpPage}
  606. {/block:JumpPagination}
  607.  
  608. {block:NextPage}
  609. <a href="{NextPage}"> ⇢</a>
  610. {/block:NextPage}
  611. </div>
  612. {/block:Pagination}
  613. <!--sidebar images "portraits"-->
  614. <img src="{image:portrait1}" style="height:40px; width:40px; padding:5px; margin-top:-20px; margin-left:55px; border-width:3px;">
  615. <img src="{image:portrait2}" style="height:40px; width:40px; padding:5px; margin-top:-86px; margin-right:55px; border-width:3px;">
  616. <!--connected bar between 2 little portraits-->
  617. <div class="bar" style="width:30px; height:3px; background:{color:title}; margin-top:-60px; margin-bottom:40px; margin-right:auto; margin-left:auto"></div>
  618. <!--nav links -->
  619. <div id="navlinks" class="navlinks">
  620. <a href="/">index</a>
  621. <a href="/ask">ask</a>
  622. <a href="/submit">submit</a>
  623. <a href="/archive">archive</a>
  624. </div>
  625. <!--description -->
  626. <div id="description">{block:Description}{Description}{/block:Description}
  627. </div>
  628. <!--nav links -->
  629. <div id="navlinks" class="navlinks">
  630. <a href="{text:link1url}">{text:link1}</a>
  631. <a href="{text:link2url}">{text:link2}</a>
  632. <a href="{text:link3url}">{text:link3}</a>
  633. <a href="{text:link4url}">{text:link4}</a>
  634. </div>
  635. </div>
  636. <!--container with post stuff-->
  637. <div id="container">
  638.  
  639. {block:Posts}
  640.  
  641. <div class="posts">
  642.  
  643. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  644.  
  645. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  646.  
  647. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  648.  
  649. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  650.  
  651. {block:Quote}<div class="quote">❝ {Quote}❞</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  652.  
  653. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  654.  
  655. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  656. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  657.  
  658. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  659.  
  660. {block:AudioPlayer}
  661. <div class="musicwrapper">
  662. {block:AlbumArt}<div class="albumimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  663. <div class="pbbg"><div class="playerbutton"><div class="pbhug">{AudioPlayerBlack}
  664. </div></div></div><div class="albuminfo">
  665. {block:TrackName}{TrackName}{/block:TrackName}<br/>{block:Artist}Artist: {Artist}{/block:Artist}<br/>{block:Album}Album: {Album}{/block:Album}
  666. </div></div>{/block:AudioPlayer}
  667.  
  668. {block:Answer}
  669. <div class="asker">{Asker} wondered,</div>
  670. <div class="question">❝ {Question} ❞</div>
  671. <div class="answer">{Answer}</div>
  672. {/block:Answer}
  673.  
  674. <div class="permalinks">
  675. <div class="date"><a href="{Permalink}">{Timeago} </a>/ {DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} / <a href="{Permalink}">{block:NoteCount} n{NoteCount}{/block:NoteCount}</a></div>
  676. <div class="reblogs">{block:RebloggedFrom}
  677. <a href="{ReblogParentURL}">via - </a>
  678. <a href="{ReblogRootURL}">source - </a>
  679. {/block:RebloggedFrom} <a href="{ReblogURL}">reblog</a></div>
  680. </div>
  681.  
  682. {block:PermalinkPage}<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:PermalinkPage}
  683.  
  684. {block:PostNotes}<div class="notes">{PostNotes}</div>
  685. {/block:PostNotes}
  686. </div>
  687. {/block:Posts}
  688.  
  689. </div>
  690.  
  691. {block:ContentSource}
  692. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  693. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  694. {/block:SourceLogo}
  695. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  696. {/block:ContentSource}
  697.  
  698. </body>
  699.  
  700. </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!