API tools faq
paste
baechubaechubaechu

The Red (Revamped)

baechubaechubaechu
Sep 5th, 2015
5,471
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6. ** The Red -Theme (revamp) by Caro / baechys@tumblr
  7.  
  8. Updated as of August 25th 2017 -
  9.  
  10. - Design changes + bug fixes
  11.  
  12. ------------------------------------------------------------------------
  13.  
  14. Script/s used:
  15.  
  16. - Tooltips
  17. - PXU Photosets
  18.  
  19. ------------------------------------------------------------------------
  20.  
  21. Questions?
  22.  
  23. Please visit baechys.tumblr.com/mail
  24.  
  25. ------------------------------------------------------------------------
  26.  
  27. CREDIT TO HTTP://BAECHYS.TUMBLR.COM
  28. -->
  29.  
  30. <head>
  31.  
  32. <title>{title}</title>
  33. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  34. <link rel="shortcut icon" href="{favicon}" />
  35.  
  36. <meta name="image:sidebar img" content="http://static.tumblr.com/ow7ogwc/oMwnu7h49/baechyhead.png"/>
  37.  
  38. <meta name="color:background" content="#d4f3e2"/>
  39. <meta name="color:body font" content="#666666"/>
  40. <meta name="color:links" content="#93e0e7"/>
  41. <meta name="color:links hover" content="#d4f3e2"/>
  42. <meta name="color:bold text" content="#666666"/>
  43. <meta name="color:selection" content="#bbe4d0"/>
  44. <meta name="color:scrollbar" content="#bbe4d0"/>
  45. <meta name="color:accent 1" content="#bdecf0"/>
  46. <meta name="color:accent 2" content="#d4f3e2"/>
  47. <meta name="color:topbar border" content="#bdecf0"/>
  48.  
  49. <meta name="text:link 1" content="link 1"/>
  50. <meta name="text:link 1 url" content="/"/>
  51. <meta name="text:link 2" content="link 2"/>
  52. <meta name="text:link 2 url" content="/ask"/>
  53. <meta name="text:link 3" content="link 3"/>
  54. <meta name="text:link 3 url" content="/archive"/>
  55. <meta name="text:link 4" content="link 4"/>
  56. <meta name="text:link 4 url" content="/"/>
  57. <meta name="text:link 5" content="link 5"/>
  58. <meta name="text:link 5 url" content="/"/>
  59. <meta name="text:link 6" content="link 6"/>
  60. <meta name="text:link 6 url" content="/"/>
  61. <meta name="text:link 7" content="link 7"/>
  62. <meta name="text:link 7 url" content="/"/>
  63.  
  64. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  65.  
  66. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  67. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  68. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  69.  
  70. <script>
  71. $(document).ready(function(){
  72. $('.photo-slideshow').pxuPhotoset({
  73. lightbox: true,
  74. rounded: false,
  75. gutter: '4px',
  76. borderRadius: '0px',
  77. photoset: '.photo-slideshow',
  78. photoWrap: '.photo-data',
  79. photo: '.pxu-photo'
  80. });
  81. });
  82. </script>
  83. <!-- tooltips -->
  84. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  85. <script>
  86. (function($){
  87. $(document).ready(function(){
  88. $("[title]").style_my_tooltips({
  89. tip_follows_cursor:true,
  90. tip_delay_time:200,
  91. tip_fade_speed:300
  92. }
  93. );
  94. });
  95. })(jQuery);
  96. </script>
  97.  
  98. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  99.  
  100. <style type="text/css">
  101. @import url(http://weloveiconfonts.com/api/?family=entypo);
  102.  
  103. /* entypo */
  104. [class*="entypo-"]:before {
  105. font-family: 'entypo', sans-serif;
  106. }
  107.  
  108. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  109. z-index:999999999!important;
  110. right:3px;
  111. margin-top:3px;
  112. -webkit-filter:invert(100%);
  113. -moz-filter:invert(100%);
  114. -filter:invert(100%);
  115. -webkit-transition: all 0.4s linear;
  116. -moz-transition: all 0.4s linear;
  117. transition: all 0.4s linear;
  118. }
  119.  
  120. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop:hover{
  121. opacity:1;
  122. }
  123.  
  124. .vignette, #vignette {
  125. opacity:0;
  126. }
  127. .lightbox-image, #tumblr_lightbox img {
  128. box-shadow:none !important;
  129. border-radius:0 !important;
  130. max-width:none;
  131. }
  132.  
  133. .tmblr-lightbox, #tumblr_lightbox {
  134. background-color:rgba({RGBcolor:background},0.85) !important;
  135. }
  136.  
  137. body{
  138. margin:0px;
  139. padding:0px;
  140. font-family:'open sans', arial, sans-serif;
  141. font-size:10px;
  142. line-height:150%;
  143. color:{color:body font};
  144. background:{color:background} url('{image:background}');
  145. background-attachment:fixed;
  146. }
  147. b, strong{
  148. color:{color:bold text};
  149. }
  150. a{
  151. color:{color:links};
  152. text-decoration:none;
  153. }
  154.  
  155. a:hover{
  156. color:{color:links hover};
  157. -moz-transition-duration: 0.5s;
  158. -o-transition-duration: 0.5s;
  159. -webkit-transition-duration: 0.5s;
  160. transition-duration: 0.5s;
  161. }
  162.  
  163. h2{
  164. font-size:20px;
  165. color:{color:accent};
  166. font-style:italic;
  167. margin:0px 0px 5px 0px;
  168. line-height:100%;
  169. }
  170.  
  171. blockquote{
  172. margin:10px 0;
  173. padding:0 0 0 10px;
  174. border-left:1px solid {color:body font};
  175. }
  176.  
  177. pre{
  178. overflow:auto;
  179. background-color:#eee;
  180. display:block;
  181. padding:5px;
  182. }
  183.  
  184. /*DONT REMOVE OR DESTROY MY CREDITS
  185. LEAVE EVERYTHING WHERE IT IS*/
  186. #c{
  187. position:fixed;
  188. bottom: 10px;
  189. right: 10px;
  190. text-align:center;
  191. font-family:trebuchet ms;
  192. z-index:999999;
  193. }
  194. #c a{
  195. background:{color:links hover};
  196. font-size:12px;
  197. font-family:trebuchet ms;
  198. color:#fff;
  199. font-size:10px;
  200. padding:5px;
  201. letter-spacing:1px;
  202. text-decoration:none;
  203. }
  204. #c a:hover{
  205. background:#fff;
  206. border:1px solid{color:links hover};
  207. color:{color:links hover};
  208. letter-spacing:1px;
  209. }
  210. /*DONT REMOVE OR DESTROY MY CREDITS
  211. LEAVE EVERYTHING WHERE IT IS*/
  212.  
  213. ::-webkit-scrollbar-thumb:vertical {
  214. background-color: {color:scrollbar};
  215. height:auto;
  216. }
  217.  
  218.  
  219. ::-webkit-scrollbar-thumb:horizontal {
  220. background:url('{image:scrollbar}');
  221. height:5px;
  222. }
  223.  
  224. ::-webkit-scrollbar {
  225. height:5px;
  226. width:5px;
  227. background:url('{image:scrollbar}');
  228. }
  229.  
  230. ::selection {
  231. background-color:{color:selection};
  232. color:white;}
  233.  
  234. #s-m-t-tooltip {
  235. max-width:100px;
  236. padding:5px 10px 5px 10px;
  237. margin:20px 14px 7px 10px;
  238. border-top:2px solid {color:accent 1};
  239. border-left:2px solid {color:accent 1};
  240. border-right:2px solid {color:accent 2};
  241. border-bottom:2px solid {color:accent 2};
  242. background-color:#fff;
  243. font-style: normal;
  244. font-size:10px;
  245. line-height:11px;
  246. letter-spacing:0px;
  247. text-transform:none;
  248. z-index:999999999;
  249. }
  250.  
  251. #wrap{
  252. width:702px;
  253. margin:0 auto;
  254. }
  255.  
  256. #postcont{
  257. width:350px;
  258. margin:0 auto;
  259. margin-top:15px;
  260. }
  261.  
  262. .container{
  263. position:fixed;
  264. overflow:auto;
  265. width:450px;
  266. margin-left:252px;
  267. height:calc(100% - 38px);
  268. margin-top:38px;
  269. padding:0px;
  270. background-color:#fff;
  271. }
  272.  
  273. #topbar{
  274. position:fixed;
  275. z-index:9999;
  276. width:702px;
  277. padding:10px 0px;
  278. background-color:#fff;
  279. border-bottom:2px solid {color:topbar border};
  280. text-align:center;
  281. }
  282.  
  283. #linkwrap{
  284. width:450px;
  285. margin-left:252px;
  286. }
  287.  
  288. #topbar a{
  289. border-bottom:none;
  290. color:#fff;
  291. font-size:12px;
  292. padding:0px 10px;
  293. text-align:center;
  294. font-weight:bold;
  295. }
  296.  
  297. #topbar a:nth-of-type(odd) {color: {color:accent 1};}
  298. #topbar a:nth-of-type(even) {color: {color:accent 2};}
  299.  
  300. #topbar a:hover:nth-of-type(odd) {color:{color:accent 2};}
  301. #topbar a:hover:nth-of-type(even) {color:{color:accent 1};}
  302.  
  303. #title{
  304. width:250px;
  305. position:absolute;
  306. text-align:left;
  307. }
  308.  
  309. #title a{
  310. font-size:17px;
  311. font-weight:bold;
  312. color:{color:accent 2};
  313. text-shadow: 1px 1px {color:accent 1};
  314. border-bottom:none;
  315. }
  316.  
  317. #title a:hover{
  318. color:{color:accent 1};
  319. text-shadow:1px 1px {color:accent 2};
  320. }
  321.  
  322. #sidebar{
  323. margin-top:38px;
  324. width:250px;
  325. border-right:2px solid {color:topbar border};
  326. position:fixed;
  327. height:calc(100% - 38px);
  328. background-color:#fff;
  329. }
  330.  
  331. #descwrap{
  332. margin-left:50px;
  333. margin-top:20px;
  334. width:150px;
  335. }
  336.  
  337. #sidebar .desc{
  338. width:150px;
  339. padding-left:5px;
  340. border-left:2px solid {color:accent 1};
  341. }
  342.  
  343. #sidebar .smolpic img{
  344. margin-bottom:10px;
  345. max-width:150px;
  346. max-height:150px;
  347. border-radius:5px;
  348. }
  349.  
  350. #sidebar .smolpic a{
  351. border-bottom:none;
  352. }
  353.  
  354. #post{
  355. margin-top:30px;
  356. width:350px;
  357. margin-bottom:60px;
  358. background:#fff;
  359. overflow:hidden;
  360. }
  361. #post img{
  362. max-width:100%;
  363. height:auto;
  364. }
  365.  
  366. #post img:hover{
  367. opacity:1;
  368. -webkit-transition: all 0.6s ease-in-out;
  369. -moz-transition: all 0.6s ease-in-out;
  370. -o-transition: all 0.6s ease-in-out;
  371. -ms-transition: all 0.6s ease-in-out;
  372. transition: all 0.6s ease-in-out;
  373. }
  374.  
  375. #quote{
  376. text-align:center;
  377. font-size:17px;
  378. color:{color:bold text};
  379. }
  380.  
  381. #q{
  382. width:260px;
  383. padding:15px;
  384. background-color:#f0f0f0;
  385. border-radius:5px;
  386. margin-top:-40px;
  387. }
  388.  
  389. #qimg{
  390. display:inline-block;
  391. margin-left:300px;
  392. }
  393.  
  394. #qimg img{
  395. border-radius:5px;
  396. }
  397.  
  398. #audio{
  399. padding:5px;
  400. width:295px;
  401. margin-bottom:5px;
  402. }
  403.  
  404. #tags{
  405. background:#fff;
  406. margin-top:10px;
  407. width:300px;
  408. color:#999;
  409. }
  410.  
  411. #tags a{
  412. color:{color:tags};
  413. padding-left:5px;
  414. padding-right:5px;
  415. text-decoration:none;
  416. }
  417.  
  418. #note{
  419. width:350px;
  420. margin-bottom:60px;
  421. margin-top:25px;
  422. background:#fff;
  423. overflow:hidden;
  424. }
  425. .notes img{width:20px; position:relative; top:1px; padding-right:5px;}
  426. ol.notes, .notes li{width:300px; list-style:none; margin:0px 0 -1px 5px; padding:5px}
  427.  
  428. #pagi{
  429. width:350px;
  430. padding:10px;
  431. margin-bottom:60px;
  432. margin-top:25px;
  433. background:#fff;
  434. text-align:center;
  435. font-size:15px;
  436. font-weight:bold;
  437. color:{color:accent 1};
  438. text-shadow:1px 1px {color:accent 2};
  439. }
  440.  
  441. #pagi a{
  442. font-size:15px;
  443. font-weight:bold;
  444. padding:5px 0px 5px 0px;
  445. border-bottom:none;
  446. color:{color:accent 1};
  447. text-shadow:1px 1px {color:accent 2};
  448. }
  449.  
  450. #pagi a:hover{
  451. color:{color:accent 1};
  452. text-shadow:1px 1px {color:accent 2};
  453. }
  454.  
  455. {CustomCSS}
  456. </style>
  457. <body>
  458.  
  459. <div id="wrap">
  460.  
  461. <div id="topbar">
  462. <div id="title"><a href="/">{title}</a></div>
  463. <div id="linkwrap">
  464. <a href="{text:link 1 url}">{text:link 1}</a>
  465. <a href="{text:link 2 url}">{text:link 2}</a>
  466. <a href="{text:link 3 url}">{text:link 3}</a>
  467. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}
  468. {block:iflink5}<a href="{text:link 5 url}">{text:link 5}</a>{/block:iflink5}
  469. {block:iflink6}<a href="{text:link 6 url}">{text:link 6}</a>{/block:iflink6}
  470. {block:iflink7}<a href="{text:link 7 url}">{text:link 7}</a>{/block:iflink7}
  471. </div>
  472. </div> <!-- topbar -->
  473.  
  474. <div id="sidebar">
  475. <div id="descwrap">
  476. <div class="smolpic">
  477. <a href="/" title="{title}"><img src="{image:sidebar img}"></a>
  478. </div>
  479. <div class="desc">
  480. {description}
  481. </div>
  482. </div>
  483. </div>
  484.  
  485. <div class="container">
  486.  
  487. <div id="postcont">
  488. {block:Posts}
  489. <div id="post">
  490.  
  491. {block:Text}
  492. {block:Title}<h2>{Title}</h2>{/block:Title}
  493. {Body}
  494. {/block:Text}
  495.  
  496. {block:Photo}
  497. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  498. {block:caption}{caption}{/block:caption}
  499. {/block:Photo}
  500.  
  501. {block:Photoset}
  502. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  503. {block:caption}{caption}{/block:caption}
  504. {/block:Photoset}
  505.  
  506. {block:Quote}
  507. <div id="quote">{Quote}</div> <br>
  508. {block:Source}<div align="center">- {Source}</div>{/block:Source}
  509. {/block:Quote}
  510.  
  511. {block:Link}
  512. <h2><a href="{URL}" target="{Target}">{Name}</a></h2>
  513. {block:Description}{Description}{/block:Description}
  514. {/block:Link}
  515.  
  516. {block:Chat}
  517. {block:Title}<h2>{Title}</h2>{/block:Title}
  518. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  519. {/block:Chat}
  520.  
  521. {block:Audio}
  522. <div id="audio"><center>{AudioPlayerWhite}</center></div>
  523. {block:PlayCount}<b>Played: </b>{FormattedPlayCount} times {/block:PlayCount} <br>
  524. {block:TrackName}<b>Title: </b>{TrackName}{/block:TrackName}<br>
  525. {block:Artist}<b>Artist: </b>{Artist}{/block:Artist} <br>
  526. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  527. {/block:Audio}
  528.  
  529. {block:Video}
  530. <center>{Video-250}</center>
  531. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  532. {/block:Video}
  533.  
  534. {block:Answer}
  535. <div id="qimg">
  536. <img src="{AskerPortraitURL-40}">
  537. </div>
  538. <div id="q">
  539. <b>{Asker}</b> asked: <br> {Question}
  540. </div>
  541.  
  542. {Answer}
  543. {/block:Answer}
  544.  
  545. {block:IndexPage}
  546. <div style="color:{color:links}">
  547. <b>
  548. {block:Date}<a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}</a>{/block:date}
  549. </b> <br>
  550. {block:NoteCount}
  551. <a href="{permalink}">{NoteCount} Notes</a>
  552. {/block:NoteCount}
  553. {block:HasTags}
  554. •{block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}
  555. {/block:HasTags}
  556. <div style="float:right">
  557. {LikeButton color="grey" size="13"}
  558. </div>
  559. <div style="float:right; padding-right:5px">
  560. {ReblogButton color="grey" size="13"}
  561. </div>
  562. </div>
  563. {/block:IndexPage}
  564.  
  565. {block:PermalinkPage}
  566. <div style="float:right">
  567. {LikeButton color="grey" size="13"}
  568. </div>
  569. <div style="float:right; padding-right:5px">
  570. {ReblogButton color="grey" size="13"}
  571. </div>
  572. {block:Date}
  573. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  574. {/block:Date} <br>
  575. {block:NoteCount}
  576. <b>Notes:</b> {NoteCount}<br>
  577. {/block:NoteCount}
  578. {block:HasTags}
  579. <b>Tags:</b>
  580. {block:Tags}
  581. <a href="{TagURL}">#{tag}</a>
  582. {/block:Tags}<br>
  583. {/block:HasTags}
  584. {block:RebloggedFrom}
  585. <br>
  586. <b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  587. {block:ContentSource}
  588. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  589. {/block:ContentSource}
  590. {/block:RebloggedFrom}
  591.  
  592. {/block:PermalinkPage}
  593. </div> <!-- posts end -->
  594.  
  595. {block:PermalinkPage}
  596. {block:PostNotes}
  597. {block:NoteCount}
  598. <div id="note">
  599. {PostNotes}
  600. </div>
  601. {/block:NoteCount}
  602. {/block:PostNotes}
  603. {/block:permalinkpage}
  604. {/block:Posts}
  605.  
  606. {block:indexpage}
  607. {block:Pagination}
  608. <div id="pagi">
  609. {block:PreviousPage}
  610. <a href="{PreviousPage}"> < </a>
  611. {/block:PreviousPage}
  612.  
  613. {block:JumpPagination length="3"}
  614. {block:CurrentPage}
  615. <span class="current_page">{PageNumber}</span>
  616. {/block:CurrentPage}
  617.  
  618. {block:JumpPage}
  619. <a class="jump_page" href="{URL}">{PageNumber}</a>
  620. {/block:JumpPage}
  621. {/block:JumpPagination}
  622.  
  623. {block:NextPage}
  624. <a href="{NextPage}"> > </a>
  625. {/block:NextPage}
  626.  
  627. </div>
  628. {/block:Pagination}
  629. {/block:indexpage}
  630. </div><!-- postcont -->
  631.  
  632. </div> <!-- container end -->
  633. </div> <!-- wrapper end -->
  634.  
  635.  
  636. <div id="c"><a href="http://baechys.tumblr.com" title="Made with Love by Caroline">BCHYS</a></div>
  637.  
  638. </body>
  639.  
  640. </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!