API tools faq
paste
Advertisement
tanaxmercedes

Whimsy's Grid Base Code

tanaxmercedes
Mar 24th, 2019
154
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.05 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Ⓒ𝙒𝙝𝙞𝙢𝙨𝙮𝙏𝙝𝙚𝙢𝙚𝙨
  4. designed and coded by @tanaboo
  5.  
  6. you do not have to keep the credit link or
  7. this text part of the code if you're using it as a base
  8. however, if you use it as a theme by itself
  9. or plan to make money off your themes,
  10. you must credit me
  11.  
  12. release date: 11.18.018
  13. last update: 01.19.019
  14.  
  15. -->
  16.  
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.  
  21.  
  22. <meta name="color:Background" content="#f6f6f6"/>
  23. <meta name="color:Text" content="#909090"/>
  24. <meta name="color:Link" content="#B49594"/>
  25. <meta name="color:Post BG" content="#ffffff"/>
  26. <meta name="color:Border" content="#e9e9e9"/>
  27. <meta name="color:Accent" content="#B49594">
  28. <meta name="color:Highlight" content="#B49594">
  29.  
  30. <meta name="image:Background" content=""/>
  31. <meta name="image:Header Pic" content=""/>
  32.  
  33. <meta name="if:Show Blog Title" content="1"/>
  34. <meta name="if:Show Header Pic" content="1"/>
  35. <meta name="if:Show Description" content="1"/>
  36. <meta name="if:Show Links" content="1"/>
  37. <meta name="if:Show Tags" content="1"/>
  38. <meta name="if:Infinite Scroll" content="1"/>
  39. <meta name="if:Two Columns" content="1"/>
  40. <meta name="if:Three Columns" content="0"/>
  41. <meta name="if:Custom Link 1" content="1"/>
  42. <meta name="if:Custom Link 2" content="1"/>
  43. <meta name="if:Custom Link 3" content="1"/>
  44.  
  45. <meta name="text:Title Font Size" content="14px"/>
  46. <meta name="text:Font Size" content="10px"/>
  47. <meta name="text:Link 1 Title" content="one"/>
  48. <meta name="text:Link 1 url" content="/"/>
  49. <meta name="text:Link 2 Title" content="two"/>
  50. <meta name="text:Link 2 url" content="/"/>
  51. <meta name="text:Link 3 Title" content="three"/>
  52. <meta name="text:Link 3 url" content="/"/>
  53.  
  54. <meta name="select:Font" content="trebuchet ms">
  55. <meta name="select:Font" content="lucida console">
  56. <meta name="select:Font" content="times new roman">
  57. <meta name="select:Font" content="georgia">
  58. <meta name="select:Font" content="verdana">
  59. <meta name="select:Font" content="courier new">
  60. <meta name="select:Font" content="arial">
  61. <meta name="select:Font" content="calibri">
  62. <meta name="select:Font" content="consolas">
  63. <meta name="select:Font" content="ms gothic">
  64.  
  65. <meta name="select:Title Font" content="trebuchet ms">
  66. <meta name="select:Title Font" content="lucida console">
  67. <meta name="select:Title Font" content="times new roman">
  68. <meta name="select:Title Font" content="georgia">
  69. <meta name="select:Title Font" content="verdana">
  70. <meta name="select:Title Font" content="courier new">
  71. <meta name="select:Title Font" content="arial">
  72. <meta name="select:Title Font" content="calibri">
  73. <meta name="select:Title Font" content="consolas">
  74. <meta name="select:Title Font" content="ms gothic">
  75.  
  76. <meta name="select:Description Text Align" content="justify">
  77. <meta name="select:Description Text Align" content="center">
  78. <meta name="select:Description Text Align" content="left">
  79. <meta name="select:Description Text Align" content="right">
  80.  
  81. <title>{Title}</title>
  82. <link rel="shortcut icon" href="{Favicon}">
  83. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  84. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  85.  
  86. <style type="text/css">
  87.  
  88. /* TUMBLR CONTROLS */
  89.  
  90. iframe.tmblr-iframe {
  91. z-index:99999999999999!important;
  92. top:0!important;
  93. right:0!important;
  94. opacity:0.4;
  95. /* delete invert(1) from here */
  96. filter:invert(1) contrast(150%);
  97. -webkit-filter:invert(1) contrast(150%);
  98. -o-filter:invert(1) contrast(150%);
  99. -moz-filter:invert(1) contrast(150%);
  100. -ms-filter:invert(1) contrast(150%);
  101. /* to here if your blog has a dark background */
  102. transform:scale(0.65);
  103. transform-origin:100% 0;
  104. -webkit-transform:scale(0.65);
  105. -webkit-transform-origin:100% 0;
  106. -o-transform:scale(0.65);
  107. -o-transform-origin:100% 0;
  108. -moz-transform:scale(0.65);
  109. -moz-transform-origin:100% 0;
  110. -ms-transform:scale(0.65);
  111. -ms-transform-origin:100% 0;}
  112.  
  113. iframe.tmblr-iframe:hover {
  114. opacity:0.6!important;}
  115.  
  116. /* TOOLTIPS */
  117.  
  118. #s-m-t-tooltip{
  119. font-size:8px;
  120. color:#000;
  121. background-color:#fff;
  122. letter-spacing:2px;
  123. min-width:50px;
  124. max-width:200px;
  125. overflow:auto;
  126. text-transform:uppercase;
  127. font-style:italic;
  128. display: none;
  129. position: absolute;
  130. z-index: 999999999999;
  131. padding:5px;
  132. margin:30px 0 15px 10px;
  133. -webkit-transition: all 0.2s ease-in-out;
  134. -moz-transition: all 0.2s ease-in-out;
  135. transition: all 0.2s ease-in-out;}
  136.  
  137. /* SCROLLBAR */
  138.  
  139. ::-webkit-scrollbar {
  140. width: 5px;
  141. height: 5px;
  142. }
  143. ::-webkit-scrollbar-button {
  144. width: 0px;
  145. height: 0px;
  146. }
  147. ::-webkit-scrollbar-thumb {
  148. background: #e1e1e1;
  149. border: 0px none #ffffff;
  150. border-radius: 50px;
  151. }
  152.  
  153. /* SELECTION */
  154.  
  155. ::selection {
  156. color: {color:Accent};
  157. background: {color:Background};
  158. }
  159. ::-moz-selection {
  160. color: {color:Accent};
  161. background: {color:Background};
  162. }
  163.  
  164. #content {
  165. margin-left:0%;
  166. padding-top:2%;
  167. width: 100%; /*changes # of columns*/
  168. float: left;
  169. }
  170.  
  171. body {
  172. background-color: {color:background};
  173. background-image: url({image:background});
  174. background-attachment:fixed;
  175. background-repeat:repeat;
  176. background-position:center;
  177. font-family: {select:Font};
  178. font-size: {text:Font Size};
  179. color: {color:text};
  180. }
  181.  
  182. a {
  183. color: {color:link};
  184. text-decoration:none;
  185. }
  186.  
  187. blockquote {
  188. padding-left:5px;
  189. border-left:1px dotted;
  190. color: {color:text};
  191. margin-left:3px;
  192. margin-bottom:5px;
  193. }
  194.  
  195. iframe, img, embed, object, video {
  196. max-width: 100%;
  197. }
  198.  
  199. img {
  200. height: auto;
  201. width: auto;
  202. }
  203.  
  204. #headerpic {
  205. width:auto;
  206. height:auto;
  207. }
  208.  
  209. #sidebar {
  210. height:auto;
  211. width:100%;
  212. margin-top:0px;
  213. padding:10px;
  214. margin-left:0;
  215. position:relative;
  216. background: {color:post bg};
  217. color:{color:text};
  218. font-size: 10px;
  219. font-family:arial;
  220. text-align:center;
  221. }
  222.  
  223. #blogtitle {
  224. font-size:2em;
  225. color:{color:accent}!important;
  226. }
  227.  
  228. .description {
  229. text-align:{select:description text align};
  230. padding:4px;
  231. }
  232.  
  233. #navlinks {
  234. margin:4px;
  235. }
  236.  
  237. article {
  238. position:relative;
  239. background: {color:post bg};
  240. margin: 12px;
  241. padding: 8px;
  242. border: 1px solid {color:border};
  243. width: 220px!important;
  244. overflow:auto;
  245. }
  246.  
  247. article img {
  248. width:100%;
  249. }
  250.  
  251. .title {
  252. text-align:center;
  253. text-transform:uppercase;
  254. font-family: {select:Title Font};
  255. font-size: {text:Title Font Size};
  256. }
  257.  
  258. .text {
  259. font-family: {select:Font};
  260. font-size: {text:Font Size};
  261. color: {color:text};
  262. width:100%;
  263. }
  264.  
  265. .photo {
  266. }
  267.  
  268. .photoset {
  269. }
  270.  
  271. .quote {
  272. text-align:center;
  273. }
  274.  
  275. .link {
  276. }
  277.  
  278. .audio {
  279. width:100%;
  280. }
  281.  
  282. .video{
  283. }
  284.  
  285. .video-player {
  286.  
  287. }
  288.  
  289. .answer {
  290. }
  291.  
  292. .ques {
  293. font-weight:bolder;
  294. }
  295.  
  296. .ans {
  297. font-style:italic;
  298. }
  299.  
  300. .chat{
  301. margin-left:-30px;
  302. }
  303.  
  304. .chat span {
  305. float: left;
  306. margin-right: 10px;
  307. }
  308.  
  309. .chat:nth-child(even) {
  310. background:#f9f9f9;
  311. }
  312.  
  313. .odd{
  314. background:#f6f6f6;
  315. }
  316.  
  317.  
  318. #perma {
  319. text-align: center;
  320. position: relative;
  321. text-transform:uppercase;
  322. margin-top:2px;
  323. padding:4px;
  324. font-size: 8px;
  325. {block:PermalinkPage}
  326. display:none;
  327. {/block:PermalinkPage}
  328. }
  329.  
  330. .tumblr_audio_player {
  331. width: 100%;
  332. height: 100px;
  333. overflow: hidden;
  334. position: relative;
  335. z-index: 1000;
  336. }
  337.  
  338. .pagination {
  339.  
  340. }
  341.  
  342. {block:ifnotinfinitescroll}
  343. .pagi {
  344. font-size:15px;
  345. font: {select:font};
  346. color: {color:link};
  347. text-align:center;
  348. padding:2px;
  349. padding-top:5px;
  350. }
  351. {/block:ifnotinfinitescroll}
  352.  
  353. {block:ifinfinitescroll}
  354. .pagi {
  355. display:none;
  356. }
  357. {/block:ifinfinitescroll}
  358.  
  359. hr {
  360. width:75%;
  361. border-top:1px solid {color:Borders};
  362. }
  363.  
  364. caption {
  365. margin:12px;
  366. }
  367.  
  368.  
  369. </style>
  370. </head>
  371. <body>
  372.  
  373. <div id="sidebar">
  374.  
  375. <div class="headerpic">
  376. {block:ifshowheaderpic}
  377. <img src="{image:Header Pic}" style="height:300px;">
  378. {/block:ifshowheaderpic}
  379. </div>
  380.  
  381. {block:ifshowblogtitle}
  382. <div id="blogtitle"><a href="/">{Title}</a></div>
  383. {/block:ifshowblogtitle}
  384. {block:ifshowdescription}
  385. <div class="description">{Description}</div>
  386. {/block:ifshowdescription}
  387. {block:ifshowlinks}
  388. <div id="navlinks">
  389. <a href="{text:ask link}">ask</a>
  390. <a href="/archive">grid</a>
  391. {block:ifcustomlink1}<a href="{text:link 1 url}">{text:link 1 title}</a>{/block:ifcustomlink1}
  392. {block:ifcustomlink2}<a href="{text:link 2 url}">{text:link 2 title}</a>{/block:ifcustomlink2}
  393. {block:ifcustomlink3}<a href="{text:link 3 url}">{text:link 3 title}</a>{/block:ifcustomlink3}
  394. <a href="https://whimsythemes.tumblr.com" title="theme by whimsythemes">thm</a>
  395. </div>
  396. {/block:ifshowlinks}
  397.  
  398. {block:Pagination}
  399. <div class="pagination">
  400. <div class="pagi">
  401. {block:PreviousPage}<a href="{PreviousPage}"><i class="fas fa-chevron-left"></i></a>{/block:PreviousPage}
  402. {block:NextPage}<a href="{NextPage}"><i class="fas fa-chevron-right"></i></a>{/block:NextPage}
  403. </div></div>
  404. {/block:Pagination}
  405. </div>
  406. <nav>
  407. <ul>
  408. {block:HasPages}
  409. {block:Pages}
  410. <li> <a href="{URL}">{Label}</a></li>
  411. {/block:Pages}
  412. {/block:HasPages}
  413. </ul>
  414. </nav>
  415.  
  416. <div id="content">
  417. {block:Posts}
  418. <article>
  419. {block:Text}
  420. <div class="text">
  421. {block:Title}<h1 class="title">
  422. <a href="{Permalink}">{Title}</a>
  423. </h1><hr>{/block:Title}
  424. {Body}
  425. {/block:Text}
  426.  
  427. {block:Photo}
  428. <div class="photo">
  429. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  430. {block:Caption}{Caption}{/block:Caption}
  431. {/block:Photo}
  432.  
  433. {block:Photoset}
  434. <div class="photoset">
  435. {block:IndexPage}
  436. {Photoset-500}
  437. {/block:IndexPage}
  438. {block:PermalinkPage}
  439. {Photoset-500}
  440. {/block:PermalinkPage}
  441. {block:Caption}{Caption}{/block:Caption}
  442. {/block:Photoset}
  443.  
  444. {block:Quote}
  445. <div class="quote">
  446. ❝ {Quote} ❞
  447. <br><br>{block:Source}<cite>&mdash; {Source}</cite>{/block:Source}
  448. {/block:Quote}
  449.  
  450. {block:Link}
  451. <div class="link">
  452. <h1 class="title"><a href="{URL}">{Name}</a><hr></h1>
  453. {block:Description}{Description}{/block:Description}
  454. {/block:Link}
  455.  
  456. {block:Chat}
  457. <div class="chat">
  458. <ul>
  459. {block:Lines}
  460. <div class="{Alt} user_{UserNumber}">
  461. {block:Label}
  462. <b>{Label}</b>{/block:Label}
  463. {Line}
  464. </div>
  465. {/block:Lines}
  466. </ul>
  467. {/block:Chat}
  468.  
  469. {block:Audio}
  470. <div class="audio">
  471. {block:AlbumArt}
  472. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  473. {/block:AlbumArt}
  474.  
  475. {block:AudioEmbed}
  476. {AudioEmbed}
  477. {/block:AudioEmbed}<br>
  478.  
  479. {block:TrackName}
  480. <b>track:</b> {TrackName}
  481. {/block:TrackName}</span><br>
  482. {block:Artist}
  483. <b>artist:</b> {Artist}
  484. {/block:Artist}
  485. {block:Caption}
  486. {Caption}
  487. {/block:Caption}
  488. {/block:Audio}
  489.  
  490. {block:Video}
  491. <div class="video">
  492. <div class="video-player">{Video-500}</div>
  493. {block:Caption}{Caption}{/block:Caption}
  494. {/block:Video}
  495.  
  496. {block:Answer}
  497. <div class="answer">
  498. {Asker} asked: <b><div class="ques">{Question}</div></b>
  499. <div class="ans">{Answer}</div>
  500. {/block:Answer}
  501. </div>
  502.  
  503. <div id="perma">
  504.  
  505. <hr><a href="{Permalink}" title="this post has {NoteCount} notes">{NoteCount} <i class="fas fa-heart"></i></a> &nbsp; <a href="{reblogURL}" title="reblog this post">reblog</a> &nbsp; <a href="{Permalink}" title="posted &mdash; {ShortMonth} {DayOfMonth} {Year} {12Hour}:{Minutes}{AmPm}">{TimeAgo}</a> &nbsp; {block:ifShowTags}{block:HasTags} <a style="font-size:9px;" title="{block:Tags}#{Tag} {/block:Tags}"><i class="fas fa-hashtag"></i></a>{block:HasTags} {block:ifShowTags}
  506.  
  507. </div>
  508.  
  509.  
  510. {block:PermalinkPage}
  511. {block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}{/block:Date}
  512. {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
  513. {block:HasTags}</br>tagged as: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  514. {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> - via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  515. {block:PostNotes}{PostNotes}{/block:PostNotes}
  516. </div></div>
  517. {/block:PermalinkPage}
  518. </footer>
  519. </article>
  520. {/block:Posts}
  521. </div>
  522.  
  523. <!-- SCRIPTS -->
  524.  
  525. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  526. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  527. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  528. {block:IfInfiniteScroll}
  529. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  530. <script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  531. {/block:IfInfiniteScroll}
  532.  
  533. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  534. <script>
  535. (function($){
  536. $(document).ready(function(){
  537. $("[title]").style_my_tooltips({
  538. tip_follows_cursor:true,
  539. tip_delay_time:0,
  540. tip_fade_speed:0
  541. }
  542. );
  543. });
  544. })(jQuery);
  545. </script>
  546.  
  547. <script>
  548. (function() {
  549. var $tumblelog = $('#content');
  550. {block:IfInfiniteScroll}
  551. $tumblelog.infinitescroll({
  552. navSelector : ".pagination",
  553. nextSelector : ".pagination a:first",
  554. itemSelector : "article",
  555. bufferPx : 50,
  556. done : "",
  557. loading: {
  558. img : "",
  559. msgText: ""
  560. },
  561. },
  562. function( newElements ) {
  563. var $newElems = $( newElements ).css({ opacity: 0 });
  564. $newElems.imagesLoaded(function(){
  565. $newElems.animate({ opacity: 1 });
  566. $tumblelog.masonry( 'appended', $newElems);
  567. });
  568. }
  569. );
  570. {/block:IfInfiniteScroll}
  571. $tumblelog.imagesLoaded( function(){
  572. $tumblelog.masonry({
  573. columnWidth: function( containerWidth ) {
  574. return containerWidth / 100;
  575. }
  576. });
  577. });
  578. })();
  579. </script>
  580.  
  581. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.js"></script>
  582. <script>
  583. SmoothScroll({
  584. // Scrolling Core
  585. animationTime : 700, // [ms]
  586. stepSize : 100, // [px]
  587. // Acceleration
  588. accelerationDelta : 50, // 50
  589. accelerationMax : 3, // 3
  590. // Keyboard Settings
  591. keyboardSupport : true, // option
  592. arrowScroll : 100, // [px]
  593. // Pulse (less tweakable)
  594. // ratio of "tail" to "acceleration"
  595. pulseAlgorithm : true,
  596. pulseScale : 4,
  597. pulseNormalize : 1,
  598. // Other
  599. touchpadSupport : false, // ignore touchpad by default
  600. fixedBackground : true,
  601. excluded : ''
  602. });
  603. </script>
  604.  
  605. <a href="https://whimsythemes.tumblr.com" title="theme by whimsythemes." style="position:fixed;font-size:18px;bottom:3px;right:5px;">
  606. <i class="fas fa-signature"></i>
  607. </a>
  608.  
  609. </body>
  610.  
  611.  
  612. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!