API tools faq
paste
raingurl

Baechu-Theme (revamped)

raingurl
Jun 23rd, 2023
16
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 diff
  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. ** Baechu -Theme by Caro / baechys@tumblr
  7.  
  8. Updated as of August 25th, 2016:
  9.  
  10. - More fonts + font sizes
  11. - Minor bug fixes
  12.  
  13. Updated as of December 31st, 2016:
  14.  
  15. - This theme is now responsive! Any post-width from 250px - 500px is now available and working in this theme.
  16.  
  17. Updated as of April 12th 2016:
  18.  
  19. - Photoset-issue fixed
  20. - Added customized lightboxes
  21.  
  22. ------------------------------------------------------------------------
  23.  
  24. Script/s used:
  25.  
  26. - Tooltips
  27. - PXU Photoset Resizing
  28.  
  29. ------------------------------------------------------------------------
  30.  
  31. FAQ:
  32.  
  33. Can i edit/tweak this theme?
  34. - Tweak and edit it as much as you want! But don't you dare touch my credits in any way possible
  35.  
  36. Can i use this theme as a base-code?
  37. - No you cant.
  38.  
  39. Can i release my edited version of your theme?
  40. - No you cant, and if i find out about you doing that, i will report you.
  41.  
  42. ------------------------------------------------------------------------
  43.  
  44. Any other questions?
  45.  
  46. Please visit baethms.tumblr.com/ask
  47.  
  48. ------------------------------------------------------------------------
  49.  
  50. CREDIT TO HTTP://BAECHYS.TUMBLR.COM
  51. -->
  52.  
  53. <head>
  54.  
  55. <title>{title}</title>
  56. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  57. <link rel="shortcut icon" href="{favicon}" />
  58.  
  59. <meta name="image:background" content=""/>
  60. <meta name="image:sidebar img" content=""/>
  61. <meta name="image:container bg" content="http://static.tumblr.com/c8f93e108fe511692b1c258193108ce9/3cfauon/kURng6a9y/tumblr_static_22j4nasnd89w0gcc0cc0cwso4.png"/>
  62.  
  63. <meta name="color:background" content="#fff"/>
  64. <meta name="color:body font" content="#666666"/>
  65. <meta name="color:links" content="#888"/>
  66. <meta name="color:links hover" content="#ffb1cc"/>
  67. <meta name="color:bold text" content="#666666"/>
  68. <meta name="color:selection" content="#bbe4d0"/>
  69. <meta name="color:blockquotes" content="#666666"/>
  70. <meta name="color:scrollbar" content="#bbe4d0"/>
  71. <meta name="color:tooltips border" content="#fe5a94"/>
  72. <meta name="color:toplinks 1" content="#bbe4d0"/>
  73. <meta name="color:toplinks 2" content="#9ad7b9"/>
  74.  
  75. <meta name="select:font" content="open sans" title="open sans"/>
  76. <meta name="select:font" content="arial" title="arial"/>
  77. <meta name="select:font" content="calibri" title="calibri"/>
  78. <meta name="select:font" content="verdana" title="verdana"/>
  79.  
  80. <meta name="select:font size" content="10px" title="10px"/>
  81. <meta name="select:font size" content="11px" title="11px"/>
  82. <meta name="select:font size" content="12px" title="12px"/>
  83.  
  84. <meta name="text:post width" content="400"/>
  85. <meta name="text:updates" content="put your updates or your favorite song lyrics in here! you can use basic html to style this to your liking as well ~"/>
  86. <meta name="text:link 1" content="link 1"/>
  87. <meta name="text:link 1 url" content="/"/>
  88. <meta name="text:link 2" content="link 2"/>
  89. <meta name="text:link 2 url" content="/"/>
  90. <meta name="text:link 3" content="link 3"/>
  91. <meta name="text:link 3 url" content="/"/>
  92. <meta name="text:link 4" content="link 4"/>
  93. <meta name="text:link 4 url" content="/"/>
  94. <meta name="text:link 5" content="link 5"/>
  95. <meta name="text:link 5 url" content="/"/>
  96.  
  97. <!------------------------- imported fonts ------------------------->
  98.  
  99. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  100.  
  101. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  102.  
  103. <!-- photosets -->
  104. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  105. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  106. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  107.  
  108. <script>
  109. $(document).ready(function(){
  110. $('.photo-slideshow').pxuPhotoset({
  111. lightbox: true,
  112. rounded: false,
  113. gutter: '4px',
  114. borderRadius: '0px',
  115. photoset: '.photo-slideshow',
  116. photoWrap: '.photo-data',
  117. photo: '.pxu-photo'
  118. });
  119. });
  120. </script>
  121. <!-- tooltips -->
  122. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  123. <script>
  124. (function($){
  125. $(document).ready(function(){
  126. $("[title]").style_my_tooltips({
  127. tip_follows_cursor:true,
  128. tip_delay_time:200,
  129. tip_fade_speed:300
  130. }
  131. );
  132. });
  133. })(jQuery);
  134. </script>
  135.  
  136. <style type="text/css">
  137.  
  138. /*------------------------- controls -------------------------*/
  139.  
  140. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  141. z-index:999999999!important;
  142. right:3px;
  143. opacity:0.3;
  144. -webkit-filter:invert(100%);
  145. -moz-filter:invert(100%);
  146. -filter:invert(100%);
  147. -webkit-transition: all 0.4s linear;
  148. -moz-transition: all 0.4s linear;
  149. transition: all 0.4s linear;
  150. }
  151.  
  152. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop:hover{
  153. opacity:1;
  154. }
  155.  
  156. /*------------------------- lightbox -------------------------*/
  157.  
  158. .vignette, #vignette {
  159. opacity:0;
  160. }
  161. .lightbox-image, #tumblr_lightbox img {
  162. box-shadow:none !important;
  163. border-radius:0 !important;
  164. max-width:none;
  165. }
  166.  
  167. .tmblr-lightbox, #tumblr_lightbox {
  168. background-color:rgba({RGBcolor:background},0.85) !important;
  169. }
  170.  
  171. /*------------------------- sasics -------------------------*/
  172.  
  173. body{
  174. margin:0px;
  175. padding:0px;
  176. font-family:{select:font}, arial, sans-serif;
  177. font-size:{select:font size};
  178. line-height:150%;
  179. color:{color:body font};
  180. background:{color:background} url('{image:background}');
  181. background-attachment:fixed;
  182. }
  183. b, strong{
  184. color:{color:bold text};
  185. }
  186. a{
  187. color:{color:links};
  188. text-decoration:none;
  189. }
  190. h2{
  191. font-size:20px;
  192. text-align:center;
  193. color:{color:bold text};
  194. margin:auto;
  195. line-height:100%;
  196. }
  197. blockquote{
  198. border-left:1px solid #888;
  199. padding:0 0 0 10px;
  200. margin:10px 0;
  201. }
  202. a:hover{
  203. color:{color:links hover};
  204. -moz-transition-duration: 0.5s;
  205. -o-transition-duration: 0.5s;
  206. -webkit-transition-duration: 0.5s;
  207. transition-duration: 0.5s;
  208. }
  209.  
  210. /*DONT REMOVE OR DESTROY MY CREDITS
  211. LEAVE EVERYTHING WHERE IT IS*/
  212. #c{
  213. position:fixed;
  214. bottom: 10px;
  215. right: 10px;
  216. padding:5px;
  217. text-align:center;
  218. z-index:999999;
  219. }
  220. #c a{
  221. background:{color:links hover};
  222. font-size:12px;
  223. color:#fff;
  224. font-size:10px;
  225. padding:5px;
  226. letter-spacing:1px;
  227. text-decoration:none;
  228. }
  229. #c a:hover{
  230. background:#fff;
  231. border:1px solid{color:links hover};
  232. color:{color:links hover};
  233. letter-spacing:1px;
  234. }
  235. /*DONT REMOVE OR DESTROY MY CREDITS
  236. LEAVE EVERYTHING WHERE IT IS*/
  237.  
  238. ::-webkit-scrollbar-thumb:vertical {
  239. background-color: {color:scrollbar};
  240. height:auto;
  241. border-radius:5px;
  242. }
  243.  
  244.  
  245. ::-webkit-scrollbar-thumb:horizontal {
  246. background:url('{image:scrollbar}');
  247. height:6px;
  248. }
  249.  
  250. ::-webkit-scrollbar {
  251. height:8px;
  252. width:5px;
  253. background:url('{image:scrollbar}');
  254. }
  255.  
  256. ::selection {
  257. background-color:{color:selection};
  258. color:white;}
  259.  
  260. #s-m-t-tooltip {
  261. max-width:100px;
  262. padding:5px 10px 5px 10px;
  263. margin:20px 14px 7px 10px;
  264. border:2px solid {color:tooltips border};
  265. background-color:#fff;
  266. font-style: normal;
  267. font-size:11px;
  268. line-height:11px;
  269. letter-spacing:0px;
  270. text-transform:none;
  271. z-index:999999999;
  272. }
  273. #post{
  274. width:{text:post width}px;
  275. margin:0 auto;
  276. margin-top:20px;
  277. margin-bottom:50px;
  278. background:#fff;
  279. overflow:hidden;
  280. }
  281. #post img{
  282. max-width:100%;
  283. }
  284.  
  285. #quote{
  286. text-align:center;
  287. padding-bottom:7px;
  288. font-size:18px;
  289. color:{color:bold text};
  290. }
  291.  
  292. #audio{
  293. width:400px;
  294. }
  295.  
  296. #tags{
  297. border-top:1px solid {color:toplinks 1};
  298. padding-top:5px;
  299. margin-top:10px;
  300. }
  301.  
  302. #tags a{
  303. color:{color:tags};
  304. padding-left:5px;
  305. padding-right:5px;
  306. font-size:11px;
  307. font-family:calibri;
  308. text-decoration:none;
  309. }
  310.  
  311. #note{
  312. width:{text:post width}px;
  313. margin:0 auto;
  314. background:#fff;
  315. color:{color:body text};
  316. }
  317. .notes img{width:20px; position:relative; top:1px; padding-right:5px;}
  318. ol.notes, .notes li{width:400px; list-style:none; margin:0px 0 -1px 5px; padding:5px}
  319.  
  320. #pagi{
  321. margin:0 auto;
  322. width:{text:post width}px;
  323. padding:20px;
  324. margin-bottom:50px;
  325. text-align:center;
  326. }
  327. #pagi a{
  328. text-decoration:none;
  329. color:{color:links};
  330. }
  331.  
  332. #pad{
  333. position:fixed;
  334. margin-top:75px;
  335. margin-left:375px;
  336. height:13px;
  337. width:calc({text:post width}px + 70px);
  338. background-color:#fff;
  339. background-image:url('{image:container bg}');
  340. border-left:1px solid #eee;
  341. border-right:1px solid #eee;
  342. border-top:1px solid {color:toplinks 1};
  343. }
  344.  
  345. #container {
  346. position:fixed;
  347. overflow:auto;
  348. margin-left:375px;
  349. margin-top:88px;
  350. height:475px;
  351. width:calc({text:post width}px + 70px);
  352. border-left:1px solid #eee;
  353. border-right:1px solid #eee;
  354. border-bottom:1px solid #eee;
  355. background-image:url('{image:container bg}');
  356. background-color:#fff
  357. }
  358. #toplink{
  359. position:fixed;
  360. margin-top:62px;
  361. margin-left:375px;
  362. }
  363. #toplink a{
  364. font-family:courier;
  365. font-size:11px;
  366. color:#fff;
  367. padding-left:10px;
  368. padding-right:10px;
  369. border-top-left-radius:3px;
  370. border-top-right-radius:3px;
  371. }
  372.  
  373. #toplink a:nth-of-type(odd) {background-color: {color:toplinks 1};}
  374. #toplink a:nth-of-type(even) {background-color: {color:toplinks 2};}
  375.  
  376. #toplink a:hover:nth-of-type(odd) {background-color:#fff; color:{color:toplinks 1};}
  377. #toplink a:hover:nth-of-type(even) {background-color: #fff; color:{color:toplinks 2};}
  378.  
  379. #sidebar{
  380. position:fixed;
  381. margin-top:95px;
  382. margin-left:178px;
  383. width:150px;
  384. padding:5px;
  385. border-top:1px solid {color:toplinks 1};
  386. border-left:1px solid #eee;
  387. border-right:1px solid #eee;
  388. border-bottom:1px solid #eee;
  389. background-color:#fff;
  390. background-image:url('{image:container bg}');
  391. text-align:center;
  392. }
  393. #sidebar img{
  394. max-width:150px;
  395. min-width:150px;
  396. max-height:150px;
  397. padding-bottom:5px;
  398. }
  399.  
  400. #sidelink{
  401. position:fixed;
  402. margin-top:82px;
  403. margin-left:178px;
  404. }
  405. #sidelink a{
  406. font-family:courier;
  407. font-size:11px;
  408. color:#fff;
  409. background:{color:toplinks 1};
  410. padding-left:5px;
  411. padding-right:5px;
  412. border-top-left-radius:3px;
  413. border-top-right-radius:3px;
  414. }
  415. #sidelink a:hover{
  416. background:#fff;
  417. color:{color:toplinks 1};
  418. }
  419.  
  420. #notepad{
  421. position:fixed;
  422. margin-top:350px;
  423. margin-left:178px;
  424. width:150px;
  425. padding:5px;
  426. border-top:1px solid {color:toplinks 2};
  427. border-left:1px solid #eee;
  428. border-right:1px solid #eee;
  429. border-bottom:1px solid #eee;
  430. background-color:#fff;
  431. background-image:url('{image:container bg}');
  432. }
  433. #notey{
  434. position:fixed;
  435. margin-left:178px;
  436. margin-top:337px;
  437. }
  438.  
  439. #notey a{
  440. color:#fff;
  441. font-family:courier;
  442. font-size:11px;
  443. background:{color:toplinks 2};
  444. padding-left:5px;
  445. padding-right:5px;
  446. border-top-left-radius:3px;
  447. border-top-right-radius:3px;
  448. }
  449. #notey a:hover{
  450. background:#fff;
  451. color:{color:toplinks 2};
  452. }
  453.  
  454.  
  455.  
  456. {CustomCSS}
  457. </style>
  458. </head>
  459. <body>
  460.  
  461. <div id="sidelink">
  462. <a href="/">{title}</a>
  463. </div>
  464.  
  465. <div id="sidebar">
  466. <img src="{image:sidebar img}"><br>
  467. {block:description}{description}{/block:description}
  468. </div>
  469.  
  470. <div id="notey">
  471. <a href="/">Updates</a>
  472. </div>
  473. <div id="notepad">
  474. {text:updates}
  475. </div>
  476.  
  477. <div id="toplink">
  478. <a href="{text:link 1 url}">{text:link 1}</a>
  479. <a href="{text:link 2 url}">{text:link 2}</a>
  480. <a href="{text:link 3 url}">{text:link 3}</a>
  481. <a href="{text:link 4 url}">{text:link 4}</a>
  482. <a href="{text:link 5 url}">{text:link 5}</a>
  483. </div>
  484.  
  485. <div id="pad"></div>
  486.  
  487. <div id="container">
  488.  
  489. {block:Posts}
  490. <div id="post">
  491.  
  492. {block:Text}
  493. {block:Title}<h2>{Title}</h2>{/block:Title}
  494. {Body}
  495. {/block:Text}
  496.  
  497. {block:Photo}
  498. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  499. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  500. {/block:Photo}
  501.  
  502. {block:Photoset}
  503. <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>
  504. {block:caption}{caption}{/block:caption}
  505. {/block:Photoset}
  506.  
  507. {block:Quote}
  508. <div id="quote">{Quote}</div> <br>
  509. {block:Source}<div align="center">- {Source}</div>{/block:Source}
  510. {/block:Quote}
  511.  
  512. {block:Link}
  513. <h2><a href="{URL}" target="{Target}">{Name}</a></h2>
  514. {block:Description}{Description}{/block:Description}
  515. {/block:Link}
  516.  
  517. {block:Chat}
  518. <h2>{block:Title}{Title}{/block:Title}</h2>
  519. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  520. {/block:Chat}
  521.  
  522. {block:Audio}
  523. <div id="audio"><center>{AudioPlayerWhite}</center></div>
  524. {block:PlayCount}<b>Played: </b>{FormattedPlayCount} times {/block:PlayCount} <br>
  525. {block:TrackName}<b>Title: </b>{TrackName}{/block:TrackName}<br>
  526. {block:Artist}<b>Artist: </b>{Artist}{/block:Artist} <br>
  527. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  528. {/block:Audio}
  529.  
  530. {block:Video}
  531. <center>{Video-400}</center>
  532. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  533. {/block:Video}
  534.  
  535. {block:Answer}
  536. <b>{Asker} whispered: {Question} </b> <br>
  537. {Answer}
  538. {/block:Answer}
  539.  
  540. {block:IndexPage}
  541. <div id="tags">
  542. {block:Date}
  543. <a href="{permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>
  544. {/block:Date}
  545. {block:NoteCount} |
  546. +<a href="{permalink}" title="{NoteCount} Notes">{NoteCount}</a>
  547. {/block:NoteCount} <br>
  548. {block:HasTags}
  549. {block:Tags}<a href="{TagURL}" style="padding-right:5px">{tag}</a> {/block:Tags}
  550. {/block:HasTags}
  551. </div>
  552. {/block:IndexPage}
  553.  
  554. {block:PermalinkPage}
  555. <br><br>
  556. {block:Date}
  557. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  558. {/block:Date} <br>
  559. {block:NoteCount}
  560. <b>Notes:</b> {NoteCount}<br>
  561. {/block:NoteCount}
  562. {block:HasTags}
  563. <b>Tags</b>
  564. {block:Tags}
  565. <a href="{TagURL}">#{tag}</a>
  566. {/block:Tags}<br>
  567. {/block:HasTags}
  568. {block:RebloggedFrom}
  569. <br><b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  570. {block:ContentSource}
  571. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  572. {/block:ContentSource}
  573. {/block:RebloggedFrom}
  574. </div>
  575. {/block:PermalinkPage}
  576.  
  577. {block:PermalinkPage}
  578. {block:PostNotes}
  579. {block:NoteCount}
  580. <div id="note">
  581. {PostNotes}
  582. </div>
  583. {/block:NoteCount}
  584. {/block:PostNotes}
  585. {/block:permalinkpage}
  586. </div>
  587. {/block:Posts}
  588.  
  589. {block:indexpage}
  590. {block:Pagination}
  591. <div id="pagi">
  592. {block:PreviousPage}
  593. <a href="{PreviousPage}"> < </a>
  594. {/block:PreviousPage}
  595.  
  596. {block:JumpPagination length="3"}
  597. {block:CurrentPage}
  598. <span class="current_page">{PageNumber}</span>
  599. {/block:CurrentPage}
  600.  
  601. {block:JumpPage}
  602. <a class="jump_page" href="{URL}">{PageNumber}</a>
  603. {/block:JumpPage}
  604. {/block:JumpPagination}
  605.  
  606. {block:NextPage}
  607. <a href="{NextPage}"> > </a>
  608. {/block:NextPage}
  609.  
  610. </div>
  611. {/block:Pagination}
  612. {/block:indexpage}
  613.  
  614. </div>
  615.  
  616.  
  617. <div id="c">
  618. <a href="http://baechys.tumblr.com" title="Made with love by Caroline">BCHYS</a>
  619. </div>
  620.  
  621. </body>
  622.  
  623. </html>
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!