API tools faq
paste
baechubaechubaechu

Babysoul (revamped)

baechubaechubaechu
Feb 24th, 2017
3,575
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.51 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. ** Babysoul (revamped) -Theme by Caro / baechys@tumblr
  7.  
  8. ------------------------------------------------------------------------
  9.  
  10. Scripts/Tutorials i used:
  11.  
  12. - Tooltips
  13. - Masonry with PXU Photosets and infinite scroll (tutorial crd to shythemes)
  14.  
  15. ------------------------------------------------------------------------
  16.  
  17. Photosets not working?
  18.  
  19. Chances are that your blog is hosted over one of tumblrs SSL-servers! Don't worry, it's nothing bad. Tumblr automatically selects this option when you make a new blog, but its easily changeable in the settings of your blog.
  20.  
  21. Just go into the settings for the blog youre using, scroll down until you see the point saying "Encryption - Always serve blog over SSL" and de-select that option.
  22.  
  23. (note: this might sound a little different if you use tumblr in a language that isnt english)
  24.  
  25. ------------------------------------------------------------------------
  26.  
  27. Any other questions?
  28.  
  29. Please visit baechys.tumblr.com/help
  30.  
  31. ------------------------------------------------------------------------
  32.  
  33. CREDIT TO HTTP://BAECHYS.TUMBLR.COM
  34. -->
  35.  
  36. <head>
  37.  
  38. <title>{title}</title>
  39. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  40. <link rel="shortcut icon" href="{favicon}" />
  41.  
  42. <meta name="image:avatar" content="http://static.tumblr.com/d70w4cr/aUDolvx8f/yellowsoul.png"/>
  43.  
  44. <meta name="color:text" content="#666666"/>
  45. <meta name="color:links" content="#b4d9d6"/>
  46. <meta name="color:links hover" content="#ffb1cc"/>
  47. <meta name="color:bold text" content="#666666"/>
  48. <meta name="color:selection" content="#bbe4d0"/>
  49. <meta name="color:scrollbar" content="#bbe4d0"/>
  50. <meta name="color:accent" content="#fad6ab"/>
  51.  
  52. <meta name="if:infinite scroll" content="0"/>
  53. <meta name="if:right sidebar" content="1"/>
  54. <meta name="if:avatar" content="1"/>
  55. <meta name="if:rounded avatar" content="1"/>
  56. <meta name="if:tags" content="1"/>
  57. <meta name="if:captions" content="1"/>
  58.  
  59. <meta name="select:post size" content="200px"/>
  60. <meta name="select:post size" content="210px"/>
  61. <meta name="select:post size" content="220px"/>
  62. <meta name="select:post size" content="230px"/>
  63. <meta name="select:post size" content="240px"/>
  64. <meta name="select:post size" content="250px"/>
  65. <meta name="select:post size" content="260px"/>
  66. <meta name="select:post size" content="270px"/>
  67. <meta name="select:post size" content="280px"/>
  68. <meta name="select:post size" content="290px"/>
  69. <meta name="select:post size" content="300px"/>
  70.  
  71. <meta name="text:post margin" content="20px"/>
  72. <meta name="text:link 1" content="link 1"/>
  73. <meta name="text:link 1 url" content="/"/>
  74. <meta name="text:link 2" content="link 2"/>
  75. <meta name="text:link 2 url" content="/"/>
  76. <meta name="text:link 3" content="link 3"/>
  77. <meta name="text:link 3 url" content="/"/>
  78. <meta name="text:link 4" content="link 4"/>
  79. <meta name="text:link 4 url" content="/"/>
  80. <meta name="text:link 5" content="link 5"/>
  81. <meta name="text:link 5 url" content="/"/>
  82.  
  83. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  84.  
  85. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  86. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  87. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  88.  
  89. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  90. <script>
  91. (function($){
  92. $(document).ready(function(){
  93. $("[title]").style_my_tooltips({
  94. tip_follows_cursor:true,
  95. tip_delay_time:0,
  96. tip_fade_speed:300
  97. }
  98. );
  99. });
  100. })(jQuery);
  101. </script>
  102.  
  103. <style type="text/css">
  104.  
  105. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  106. z-index:999999999!important;
  107. right:3px;
  108. margin-top:3px;
  109. -webkit-filter:invert(100%);
  110. -moz-filter:invert(100%);
  111. -filter:invert(100%);
  112. -webkit-transition: all 0.4s linear;
  113. -moz-transition: all 0.4s linear;
  114. transition: all 0.4s linear;
  115. }
  116.  
  117. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop:hover{
  118. opacity:1;
  119. }
  120.  
  121. .vignette, #vignette {
  122. opacity:0;
  123. }
  124. .lightbox-image, #tumblr_lightbox img {
  125. box-shadow:none !important;
  126. border-radius:0 !important;
  127. max-width:none;
  128. }
  129.  
  130. .tmblr-lightbox, #tumblr_lightbox {
  131. background-color:rgba(255,255,255,0.85) !important;
  132. }
  133.  
  134. body{
  135. margin:0px;
  136. padding:0px;
  137. font-family: 'open sans', arial, sans-serif;
  138. font-size:10px;
  139. color:{color:text};
  140. background:{color:background} url('{image:background}');
  141. background-attachment:fixed;
  142. }
  143. b, strong{
  144. color:{color:bold text};
  145. }
  146. a{
  147. color:{color:accent};
  148. text-decoration:none;
  149. }
  150.  
  151. a:hover{
  152. color:{color:links hover};
  153. -moz-transition-duration: 0.5s;
  154. -o-transition-duration: 0.5s;
  155. -webkit-transition-duration: 0.5s;
  156. transition-duration: 0.5s;
  157. }
  158.  
  159. h2{
  160. font-size:17px;
  161. color:{color:bold text};
  162. margin:3px;
  163. }
  164.  
  165. blockquote{
  166. margin:10px 0;
  167. padding:0 0 0 10px;
  168. border-left:1px solid {color:body font};
  169. }
  170.  
  171. pre{
  172. overflow:auto;
  173. background-color:#eee;
  174. display:block;
  175. padding:5px;
  176. }
  177.  
  178. /*DONT REMOVE OR DESTROY MY CREDITS
  179. LEAVE EVERYTHING WHERE IT IS*/
  180. #c{
  181. position:fixed;
  182. bottom: 10px;
  183. right: 10px;
  184. text-align:center;
  185. font-family:'open sans';
  186. z-index:999999;
  187. }
  188. #c a{
  189. background:{color:accent};
  190. font-size:12px;
  191. font-family:'open sans';
  192. color:#fff;
  193. font-size:10px;
  194. padding:5px;
  195. letter-spacing:1px;
  196. text-decoration:none;
  197. }
  198. #c a:hover{
  199. background:#fff;
  200. color:{color:accent};
  201. letter-spacing:1px;
  202. }
  203. /*DONT REMOVE OR DESTROY MY CREDITS
  204. LEAVE EVERYTHING WHERE IT IS*/
  205.  
  206. ::-webkit-scrollbar-thumb:vertical {
  207. background-color: {color:scrollbar};
  208. height:auto;
  209. }
  210.  
  211.  
  212. ::-webkit-scrollbar-thumb:horizontal {
  213. background:url('{image:scrollbar}');
  214. height:6px;
  215. }
  216.  
  217. ::-webkit-scrollbar {
  218. height:6px;
  219. width:6px;
  220. background:url('{image:scrollbar}');
  221. }
  222.  
  223. ::selection {
  224. background-color:{color:selection};
  225. color:white;}
  226.  
  227. #s-m-t-tooltip {
  228. max-width:100px;
  229. padding:4px 7px 4px 7px;
  230. margin:20px 14px 7px 10px;
  231. border:2px solid {color:accent};
  232. border-radius:5px;
  233. background-color:#fff;
  234. font-style: normal;
  235. font-size:10px;
  236. line-height:11px;
  237. letter-spacing:0px;
  238. text-transform:none;
  239. z-index:999999999;
  240. }
  241.  
  242. #postcont{
  243. {block:indexpage}
  244. width:calc({select:post size}*2 + {text:post margin}*4);
  245. {/block:indexpage}
  246. {block:permalinkpage}
  247. width:440px;
  248. padding-top:35px;
  249. {/block:permalinkpage}
  250. margin:auto;
  251. left:0px;
  252. right:0px;
  253. }
  254.  
  255. #post{
  256. {block:indexpage}
  257. width:{select:post size};
  258. margin:{text:post margin};
  259. {/block:indexpage}
  260. {block:permalinkpage}
  261. margin-top:20px;
  262. margin:0 auto;
  263. width:400px;
  264. {/block:permalinkpage}
  265. margin-bottom:20px;
  266. background:#fff;
  267. overflow:hidden;
  268. }
  269. #post img{
  270. max-width:100%;
  271. height:auto;
  272. }
  273.  
  274. #post img:hover{
  275. opacity:1;
  276. -webkit-transition: all 0.6s ease-in-out;
  277. -moz-transition: all 0.6s ease-in-out;
  278. -o-transition: all 0.6s ease-in-out;
  279. -ms-transition: all 0.6s ease-in-out;
  280. transition: all 0.6s ease-in-out;
  281. }
  282.  
  283. #quote{
  284. text-align:center;
  285. font-size:20px;
  286. color:{color:accent};
  287. }
  288.  
  289. #qa{
  290. padding:10px;
  291. }
  292.  
  293. #audio{
  294. padding:5px;
  295. width:295px;
  296. margin-bottom:5px;
  297. }
  298.  
  299. #tags{
  300. width:{select:post size};
  301. }
  302.  
  303. #tags a{
  304. color:{color:tags};
  305. padding-right:5px;
  306. text-decoration:none;
  307. }
  308.  
  309. #note{
  310. width:400px;
  311. margin:0 auto;
  312. }
  313. .notes img{width:20px; position:relative; top:1px; padding-right:5px;}
  314. ol.notes, .notes li{width:400px; list-style:none; margin:0px 0 -1px 5px; padding:5px}
  315.  
  316. #date{
  317. color:{color:accent};
  318. }
  319.  
  320. #sidebar{
  321. width:125px;
  322. padding:5px;
  323. position:fixed;
  324. margin-top:100px;
  325. {block:ifnotrightsidebar}
  326. margin-left:150px;
  327. {/block:ifnotrightsidebar}
  328. {block:ifrightsidebar}
  329. right:150px;
  330. {/block:ifrightsidebar}
  331. text-align:center;
  332. z-index:999999;
  333. }
  334.  
  335. #sidebar a{
  336. line-height:1.5em;
  337. margin:5px;
  338. }
  339.  
  340. #sidebar img{
  341. max-width:125px;
  342. max-height:125px;
  343. {block:ifroundedavatar}
  344. border-radius:100%;
  345. {/block:ifroundedavatar}
  346. }
  347.  
  348. {block:IndexPage}
  349. #post {
  350. opacity:0;
  351. z-index:-1;
  352. }
  353. {/block:IndexPage}
  354.  
  355. .pagi{
  356. margin:0 auto;
  357. width:{select:post size};
  358. padding:5px;
  359. margin:0 auto;
  360. margin-top:50px;
  361. margin-bottom:150px;
  362. overflow:hidden;
  363. text-align:center;
  364. }
  365. .pagi a{
  366. padding-left:5px;
  367. padding-right:5px;
  368. color:#fff;
  369. border-radius:3px;
  370. background-color:{color:accent};
  371. }
  372.  
  373. .pagi a:hover{
  374. background-color:#fff;
  375. color:{color:accent};
  376. }
  377.  
  378. .current_page{
  379. padding-left:5px;
  380. padding-right:5px;
  381. border-radius:3px;
  382. background-color:#fff;
  383. color:{color:accent};
  384. border:1px solid {color:accent};
  385. }
  386.  
  387. {CustomCSS}
  388. </style>
  389. </head>
  390. <body>
  391.  
  392. <div id="sidebar">
  393. {block:ifavatar}
  394. <a href="/" title="{title}"><img src="{image:avatar}"></a>
  395. {/block:ifavatar}
  396. <p>
  397. {description}
  398. <p>
  399. <a href="{text:link 1 url}">{text:link 1}</a>
  400. <a href="{text:link 2 url}">{text:link 2}</a>
  401. <a href="{text:link 3 url}">{text:link 3}</a>
  402. <a href="{text:link 4 url}">{text:link 4}</a>
  403. <a href="{text:link 5 url}">{text:link 5}</a>
  404. </div>
  405.  
  406. <div id="postcont">
  407. {block:Posts}
  408. <div id="post">
  409. {block:IndexPage}
  410. <div id="date">
  411. <a href="{permalink}" title="{TimeAgo}">{block:date}{MonthNumber}/{DayOfMonthWithZero}{/block:date}</a> {block:NoteCount}
  412.  
  413. +<a href="{permalink}" title="{noteCount} notes">{notecount}</a> {/block:NoteCount}
  414. </div>
  415. {block:IndexPage}
  416.  
  417. {block:Text}
  418. {block:Title}<h2>{Title}</h2>{/block:Title}
  419. {Body}
  420. {/block:Text}
  421.  
  422. {block:Photo}
  423. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  424.  
  425. {block:IndexPage}
  426. {block:IfCaptions}
  427. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  428. {/block:IfCaptions}
  429. {/block:IndexPage}
  430.  
  431. {block:permalinkpage}
  432. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  433. {/block:permalinkpage}
  434.  
  435. {/block:Photo}
  436.  
  437. {block:Photoset}
  438. <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>
  439.  
  440. {block:IndexPage}
  441. {block:IfCaptions}
  442. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  443. {/block:IfCaptions}
  444. {/block:IndexPage}
  445.  
  446. {block:permalinkpage}
  447. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  448. {/block:permalinkpage}
  449.  
  450. {/block:Photoset}
  451.  
  452. {block:Quote}
  453. <div id="quote">{Quote}</div> <br>
  454. {block:Source}<div align="center">- {Source}</div>{/block:Source}
  455. {/block:Quote}
  456.  
  457. {block:Link}
  458. <h2><a href="{URL}" target="{Target}">{Name}</a></h2>
  459. {block:Description}{Description}{/block:Description}
  460. {/block:Link}
  461.  
  462. {block:Chat}
  463. {block:Title}<h2>{Title}</h2>{/block:Title}
  464. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  465. {/block:Chat}
  466.  
  467. {block:Audio}
  468. <div id="audio"><center>{AudioPlayerWhite}</center></div>
  469. {block:PlayCount}<b>Played: </b>{FormattedPlayCount} times {/block:PlayCount} <br>
  470. {block:TrackName}<b>Title: </b>{TrackName}{/block:TrackName}<br>
  471. {block:Artist}<b>Artist: </b>{Artist}{/block:Artist} <br>
  472.  
  473. {block:IndexPage}
  474. {block:IfCaptions}
  475. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  476. {/block:IfCaptions}
  477. {/block:IndexPage}
  478.  
  479. {block:permalinkpage}
  480. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  481. {/block:permalinkpage}
  482.  
  483. {/block:Audio}
  484.  
  485. {block:Video}
  486. <center>{Video-250}</center>
  487. {block:IndexPage}
  488.  
  489. {block:IfCaptions}
  490. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  491. {/block:IfCaptions}
  492. {/block:IndexPage}
  493.  
  494. {block:permalinkpage}
  495. {block:caption}<span class="caption">{caption}</span>{/block:caption}
  496. {/block:permalinkpage}
  497. {/block:Video}
  498.  
  499. {block:Answer}
  500. <div id="qa">
  501. <b>{Asker}</b> said: <br>
  502. <b>" {Question} "</b>
  503. {Answer}
  504. </div>
  505. {/block:Answer}
  506.  
  507. {block:iftags}
  508. <div id="tags">
  509. {block:HasTags}
  510. {block:Tags}<a href="{TagURL}">#{tag}</a> {/block:Tags}
  511. {/block:HasTags}
  512. </div>
  513. {/block:iftags}
  514.  
  515. {block:PermalinkPage}
  516. <br><br>
  517. {block:Date}
  518. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  519. {/block:Date} <br>
  520. {block:NoteCount}
  521. <b>Notes:</b> {NoteCount}<br>
  522. {/block:NoteCount}
  523. {block:HasTags}
  524. <b>Tags</b>
  525. {block:Tags}
  526. <a href="{TagURL}">#{tag}</a>
  527. {/block:Tags}<br>
  528. {/block:HasTags}
  529. {block:RebloggedFrom}
  530. <br><b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  531. {block:ContentSource}
  532. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  533. {/block:ContentSource}
  534. {/block:RebloggedFrom}
  535. </div>
  536. {/block:PermalinkPage}
  537.  
  538. {block:PermalinkPage}
  539. {block:PostNotes}
  540. {block:NoteCount}
  541. <div id="note">
  542. {PostNotes}
  543. </div>
  544. {/block:NoteCount}
  545. {/block:PostNotes}
  546. {/block:permalinkpage}
  547. </div>
  548. {/block:Posts}
  549. </div><!-- postcont -->
  550.  
  551. {block:indexpage}
  552. {block:Pagination}
  553. <div class="pagi">
  554. {block:PreviousPage}
  555. <a href="{PreviousPage}"><</a>
  556. {/block:PreviousPage}
  557.  
  558. {block:JumpPagination length="3"}
  559. {block:CurrentPage}
  560. <span class="current_page">{PageNumber}</span>
  561. {/block:CurrentPage}
  562.  
  563. {block:JumpPage}
  564. <a class="jump_page" href="{URL}">{PageNumber}</a>
  565. {/block:JumpPage}
  566. {/block:JumpPagination}
  567.  
  568. {block:NextPage}
  569. <a class="next" href="{NextPage}">></a>
  570. {/block:NextPage}
  571.  
  572. </div>
  573. {/block:Pagination}
  574. {/block:indexpage}
  575.  
  576. </div><!-- wrapper -->
  577.  
  578. {block:IndexPage}
  579. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  580. {block:ifInfiniteScroll}
  581. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  582. {/block:ifInfiniteScroll}
  583. {/block:IndexPage}
  584. <script>
  585. $(document).ready(function(){
  586. $('.photo-slideshow').pxuPhotoset({
  587. lightbox: true,
  588. rounded: false,
  589. {block:indexpage}
  590. gutter: '2px',
  591. {/block:indexpage}
  592. {block:permalinkpage}
  593. gutter: '4px',
  594. {/block:permalinkpage}
  595. photoset: '.photo-slideshow',
  596. photoWrap: '.photo-data',
  597. photo: '.pxu-photo'
  598. });
  599. {block:IndexPage}
  600. var $container = $('#postcont');
  601. $container.masonry({ itemSelector: '#post' });
  602. $container.imagesLoaded(function(){
  603. $container.masonry();
  604. $container.find('#post').animate({ opacity: 1, zIndex: 1 });
  605. });
  606. {block:ifInfiniteScroll}
  607.  
  608. $container.infinitescroll({
  609. itemSelector: '#post',
  610. navSelector: '.pagi',
  611. nextSelector: '.next',
  612. loadingImg: '',
  613. loadingText: '<em></em>',
  614. bufferPx: 2000
  615. },
  616. function( newElements ) {
  617. var $newElems = $( newElements );
  618. $newElems.find('.photo-slideshow').pxuPhotoset({
  619. lightbox: true,
  620. rounded: false,
  621. {block:indexpage}
  622. gutter: '2px',
  623. {/block:indexpage}
  624. {block:permalinkpage}
  625. gutter: '4px',
  626. {/block:permalinkpage}
  627. photoset: '.photo-slideshow',
  628. photoWrap: '.photo-data',
  629. photo: '.pxu-photo'
  630. },
  631. function(){
  632. $container.masonry();
  633. });
  634. $newElems.imagesLoaded(function(){
  635. $container.masonry( 'appended', $newElems );
  636. $newElems.animate({ opacity: 1, zIndex: 1 });
  637. });
  638. });
  639. {/block:ifInfiniteScroll}
  640. {/block:IndexPage}
  641. });
  642. </script>
  643.  
  644. <div id="c">
  645. <a href="http://baechys.tumblr.com" title="Made with love by Caroline">BCHYS</a>
  646. </div>
  647.  
  648. </body>
  649. </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!