API tools faq
paste
mhango

Wonderful World Theme

mhango
May 5th, 2020
3,995
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.15 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3.  
  4. <html>
  5.  
  6. <head>
  7.  
  8. <!--
  9.  
  10. Theme: Wonderful World by mhango
  11. Version 2 (18th July 2020)
  12.  
  13. Credits to
  14. @buildthemes for the base code
  15. @painthemes for the scroll to top
  16. friconix.com & icons8.com for the icons
  17. fonts.google.com for the fonts
  18.  
  19. Rules: - don't reupload or claim as your own
  20. - never remove the credit(s)!
  21. - thievery will be reported
  22. - don't take/use parts of the theme
  23.  
  24. -->
  25.  
  26.  
  27. <meta name="color:Background" content="#ffffff" />
  28. <meta name="color:Text" content="#444444" />
  29. <meta name="color:Link" content="#ffa95d" />
  30. <meta name="color:Link Hover" content="#ffd0a6" />
  31. <meta name="color:Accent" content="#ffbf86" />
  32. <meta name="color:Borders" content="#dddddd" />
  33. <meta name="color:Sidebar Background" content="#f6f6f6" />
  34. <meta name="color:Text Post Background" content="#f6f6f6"/>
  35. <meta name="color:Photo Overlay" content="#ffbf86"/>
  36. <meta name="color:Text Highlight" content="#ffe7d1" />
  37. <meta name="color:Scrollbar" content="#dddddd" />
  38. <meta name="image:Background" content="" />
  39. <meta name="text:About Section Title" content="About" />
  40. <meta name="text:Links Section Title" content="Navigation" />
  41. <meta name="text:Stats Section Title" content="Stats" />
  42. <meta name="text:Networks Section Title" content="Networks" />
  43. <meta name="text:News Section Title" content="News" />
  44. <meta name="text:Link 1 Title" content="home" />
  45. <meta name="text:Link 1 URL" content="/" />
  46. <meta name="text:Link 1 Friconix Icon" content="fi-xnluxl-home" />
  47. <meta name="text:Link 2 Title" content="ask" />
  48. <meta name="text:Link 2 URL" content="/ask" />
  49. <meta name="text:Link 2 Friconix Icon" content="fi-xnluxl-envelope" />
  50. <meta name="text:Link 3 Title" content="archive" />
  51. <meta name="text:Link 3 URL" content="/archive" />
  52. <meta name="text:Link 3 Friconix Icon" content="fi-xnluxl-folder" />
  53. <meta name="text:Link 4 Title" content="more" />
  54. <meta name="text:Link 4 URL" content="/" />
  55. <meta name="text:Link 4 Friconix Icon" content="fi-xnluxl-three-bars-wide" />
  56. <meta name="text:Link 5 Title" content="" />
  57. <meta name="text:Link 5 URL" content="/" />
  58. <meta name="text:Link 5 Friconix Icon" content="fi-xnluxl-camera" />
  59. <meta name="text:Link 6 Title" content="" />
  60. <meta name="text:Link 6 URL" content="/" />
  61. <meta name="text:Link 6 Friconix Icon" content="fi-xnluxl-bulb" />
  62. <meta name="text:Link 7 Title" content="" />
  63. <meta name="text:Link 7 URL" content="/" />
  64. <meta name="text:Link 7 Friconix Icon" content="fi-xnluxl-archive-wide" />
  65. <meta name="text:Link 8 Title" content="" />
  66. <meta name="text:Link 8 URL" content="/" />
  67. <meta name="text:Link 8 Friconix Icon" content="fi-xnluxl-heart-wide" />
  68. <meta name="text:Stats 1 Title" content="Online" />
  69. <meta name="text:Stats 1 Code" content="" />
  70. <meta name="text:Stats 2 Title" content="Visits" />
  71. <meta name="text:Stats 2 Code" content="" />
  72. <meta name="text:Stats 3 Title" content="Followers" />
  73. <meta name="text:Stats 3 Code" content="" />
  74. <meta name="text:Network 1 Code" content="" />
  75. <meta name="text:Network 2 Code" content="" />
  76. <meta name="text:Network 3 Code" content="" />
  77. <meta name="text:Network 4 Code" content="" />
  78. <meta name="text:News 1 Title" content="05/05/20" />
  79. <meta name="text:News 1 Text" content="your news go here" />
  80. <meta name="text:News 2 Title" content="23/04/20" />
  81. <meta name="text:News 2 Text" content="your news go here" />
  82. <meta name="text:News 3 Title" content="21/04/20" />
  83. <meta name="text:News 3 Text" content="your news go here" />
  84. <meta name="if:Show Stats Section" content="1" />
  85. <meta name="if:Show Networks Section" content="1" />
  86. <meta name="if:Show News Section" content="1" />
  87. <meta name="select:Body Font" content="'ABeeZee', Helvetica, Arial, sans-serif" title="ABeeZee">
  88. <meta name="select:Body Font" content="'Arimo', Helvetica, Arial, sans-serif" title="Arimo">
  89. <meta name="select:Body Font" content="'Avalon', Helvetica, Arial, sans-serif" title="Avalon">
  90. <meta name="select:Body Font" content="'Didact Gothic', Helvetica, Arial, sans-serif" title="Didact Gothic">
  91. <meta name="select:Body Font" content="'Fira Sans', Helvetica, Arial, sans-serif" title="Fira Sans">
  92. <meta name="select:Body Font" content="'Gudea', Helvetica, Arial, sans-serif" title="Gudea">
  93. <meta name="select:Body Font" content="'Hind', Helvetica, Arial, sans-serif" title="Hind">
  94. <meta name="select:Body Font" content="'Imprima', Helvetica, Arial, sans-serif" title="Imprima">
  95. <meta name="select:Body Font" content="'Karla', Helvetica, Arial, sans-serif" title="Karla">
  96. <meta name="select:Body Font" content="'Lato', Helvetica, Arial, sans-serif" title="Lato">
  97. <meta name="select:Body Font" content="'Maven Pro', Helvetica, Arial, sans-serif" title="Maven Pro">
  98. <meta name="select:Body Font" content="'Muli', Helvetica, Arial, sans-serif" title="Muli">
  99. <meta name="select:Body Font" content="'Nunito', Helvetica, Arial, sans-serif" title="Nunito">
  100. <meta name="select:Body Font" content="'Quicksand', Helvetica, Arial, sans-serif" title="Quicksand">
  101. <meta name="select:Body Font" content="'Raleway', Helvetica, Arial, sans-serif" title="Raleway">
  102. <meta name="select:Body Font" content="'Roboto', Helvetica, Arial, sans-serif" title="Roboto">
  103. <meta name="select:Body Font" content="'Rubik', Helvetica, Arial, sans-serif" title="Rubik">
  104. <meta name="select:Body Font" content="'Source Serif Pro', Helvetica, Arial, sans-serif" title="Source Serif Pro">
  105. <meta name="select:Body Font" content="'Varela Round', Helvetica, Arial, sans-serif" title="Varela Round">
  106. <meta name="select:Body Font" content="'Work Sans', Helvetica, Arial, sans-serif" title="Work Sans">
  107.  
  108. <meta name="select:Title Font" content="'DM Serif Text', Helvetica, Arial, sans-serif" title="DM Serif Text">
  109. <meta name="select:Title Font" content="'IBM Flex Sans', Helvetica, Arial, sans-serif" title="IBM Flex Sans">
  110. <meta name="select:Title Font" content="'Kadwa', Helvetica, Arial, sans-serif" title="Kadwa">
  111. <meta name="select:Title Font" content="'Lato', Helvetica, Arial, sans-serif" title="Lato">
  112. <meta name="select:Title Font" content="'Lexend Deca', Helvetica, Arial, sans-serif" title="Lexend Deca">
  113. <meta name="select:Title Font" content="'Montserrat', Helvetica, Arial, sans-serif" title="Montserrat">
  114. <meta name="select:Title Font" content="'Objectivity', Helvetica, Arial, sans-serif" title="Objectivity">
  115. <meta name="select:Title Font" content="'Oswald', Helvetica, Arial, sans-serif" title="Oswald">
  116. <meta name="select:Title Font" content="'Playfair Display', Helvetica, Arial, sans-serif" title="Playfair Display">
  117. <meta name="select:Title Font" content="'Poiret One', Helvetica, Arial, sans-serif" title="Poiret One">
  118. <meta name="select:Title Font" content="'PT Mono', Helvetica, Arial, sans-serif" title="PT Mono">
  119. <meta name="select:Title Font" content="'Raleway', Helvetica, Arial, sans-serif" title="Raleway">
  120. <meta name="select:Title Font" content="'Roboto', Helvetica, Arial, sans-serif" title="Roboto">
  121. <meta name="select:Title Font" content="'Roboto Slab', Helvetica, Arial, sans-serif" title="Roboto Slab">
  122. <meta name="select:Title Font" content="'Yanone Kaffeesatz', Helvetica, Arial, sans-serif" title="Yanone Kaffeesatz">
  123.  
  124.  
  125.  
  126. <!-- google fonts -->
  127.  
  128. <link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/avalon/stylesheet.css?v=1">
  129. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  130. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  131. <link href='https://fonts.googleapis.com/css?family=Italianno' rel='stylesheet' type='text/css'>
  132. <link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
  133. <link href='https://fonts.googleapis.com/css?family=Muli:400,300,300italic,400italic' rel='stylesheet' type='text/css'>
  134. <link href='https://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
  135. <link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
  136. <link href="https://fonts.googleapis.com/css?family=Kadwa" rel="stylesheet">
  137. <link href='https://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'>
  138. <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  139. <link href='https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500' rel='stylesheet' type='text/css'>
  140. <link href='https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic,300italic,300' rel='stylesheet' type='text/css'>
  141. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  142. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Arimo|Didact+Gothic|Fira+Sans|Nunito|Rubik&display=swap" rel="stylesheet">
  143. <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro&display=swap" rel="stylesheet">
  144. <link href="https://fonts.googleapis.com/css?family=Hind:700|IBM+Plex+Sans|Oswald|Yanone+Kaffeesatz&display=swap" rel="stylesheet">
  145. <link href="https://fonts.googleapis.com/css?family=DM+Serif+Text|Lato|Lexend+Deca|PT+Mono|Poiret+One|Roboto|Roboto+Slab&display=swap" rel="stylesheet">
  146. <link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
  147.  
  148.  
  149. <!-- friconix icons code -->
  150.  
  151. <script defer src="https://friconix.com/cdn/friconix.js"></script>
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"></script>
  159.  
  160.  
  161. {block:Description}
  162. <meta name="description" content="{MetaDescription}" />
  163. {/block:Description}
  164.  
  165. <meta charset="utf-8">
  166. <link rel="shortcut icon" href={Favicon}>
  167.  
  168.  
  169. <title>{Title}</title>
  170. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  171. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  172.  
  173.  
  174. <style type="text/css">
  175.  
  176.  
  177. .tmblr-iframe {
  178. position:fixed;
  179. z-index:99999999999999999 !important;
  180. }
  181.  
  182. @font-face{
  183. font-family:Objectivity;
  184. src: url(https://static.tumblr.com/lrtkpti/h7Mpvzc6h/objectivity-medium.otf);}
  185.  
  186. /*
  187. https://static.tumblr.com/lrtkpti/h7Mpvzc6h/objectivity-medium.otf
  188. https://static.tumblr.com/lrtkpti/byypvzcke/objectivity-bold.otf
  189. */
  190.  
  191. ::-webkit-scrollbar-thumb{
  192. background-color: {color:scrollbar};
  193. border: 3px solid {color:background};
  194. height:auto;
  195. -moz-border-radius: 10px;
  196. border-radius: 0px;
  197. }
  198.  
  199. ::-webkit-scrollbar {
  200. height:auto;
  201. width:9px;
  202. background-color: {color:background};
  203. border: 4px solid {color:background};
  204. }
  205.  
  206. ::-moz-selection {
  207. background: {color:Text highlight};
  208. color: {color:text};
  209. }
  210.  
  211. ::selection {
  212. background: {color:Text highlight};
  213. color: {color:text};
  214. }
  215.  
  216. body {
  217. background: {color:Background} url('{image:Background}');
  218. background-attachment:fixed;
  219. background-repeat:repeat;
  220. color: {color:text};
  221. font-family: {select:body font};
  222. font-weight:500;
  223. font-size:11px;
  224. margin: 0;
  225. padding: 0;
  226.  
  227. }
  228.  
  229. a, a:visited {
  230. color: {color:link};
  231. text-decoration: none;
  232. -webkit-transition: all 0.5s ease-in-out;
  233. -moz-transition: all 0.5s ease-in-out;
  234. -o-transition: all 0.5s ease-in-out;
  235. -ms-transition: all 0.5s ease-in-out;
  236. transition: all 0.5s ease-in-out;
  237. }
  238.  
  239. a:hover {
  240. color:{color:link hover};
  241. -webkit-transition: all 0.5s ease-in-out;
  242. -moz-transition: all 0.5s ease-in-out;
  243. -o-transition: all 0.5s ease-in-out;
  244. -ms-transition: all 0.5s ease-in-out;
  245. transition: all 0.5s ease-in-out;
  246. }
  247.  
  248. blockquote {
  249. background: transparent;
  250. margin: 0;
  251. padding: 0;
  252. border-left: 1px solid {color:borders};
  253. padding-left: 2%;
  254. padding-right:2%;
  255. {block:indexpage}
  256. border:none;
  257. padding:0;
  258. margin:0;
  259. {/block:indexpage}
  260. }
  261.  
  262. .tumblr_video_container {
  263. max-width: 100%!important;
  264. height:auto;
  265. }
  266.  
  267. iframe, img, embed, object, video {
  268. max-width: 100%;
  269. }
  270.  
  271. img {
  272. height: auto;
  273. width: auto;
  274. }
  275.  
  276.  
  277. /* scroll to top code 2 */
  278.  
  279. #scroll:link, #scroll:visited {
  280. display: none;
  281. position: fixed;
  282. bottom: 20px;
  283. right: 45px;
  284. font-size:16px;
  285. width:30px;
  286. }
  287.  
  288.  
  289. /* tooltip code 2 */
  290.  
  291. #s-m-t-tooltip {
  292. font-weight:600;
  293. font-family: {select:body font};
  294. font-size: 10px;
  295. color:{color:text};
  296. background-color:{color:Background};
  297. text-align: center;
  298. max-width:150px;
  299. border: 1px solid {color:borders};
  300. overflow:auto;
  301. text-transform:uppercase;
  302. position: absolute;
  303. z-index: 999999999999;
  304. padding: 5px 5px 5px 5px;
  305. box-shadow:0px 0px rgba(0,0,0,0.2);
  306. -webkit-transition: all 0.2s ease-in-out;
  307. -moz-transition: all 0.2s ease-in-out;
  308. transition: all 0.2s ease-in-out;
  309. margin:20px 0px 15px 10px;
  310. }
  311.  
  312.  
  313. /* post hover effects */
  314.  
  315. #overlay {
  316. position:absolute;
  317. left:0;
  318. top:0;
  319. background: rgba({RGBcolor:Photo Overlay}, 0);
  320. width:100%;
  321. height:100%;
  322. box-sizing:border-box;
  323. -webkit-transition: all .5s ease-in-out;
  324. -moz-transition: all .5s ease-in-out;
  325. -ms-transition: all .5s ease-in-out;
  326. -o-transition: all .5s ease-in-out;
  327. transition: all .5s ease-in-out;
  328.  
  329. }
  330.  
  331. .post:hover #overlay{
  332. background: rgba({RGBcolor:Photo Overlay}, 0.4);
  333. -webkit-transition: all .5s ease-in-out;
  334. -moz-transition: all .5s ease-in-out;
  335. -ms-transition: all .5s ease-in-out;
  336. -o-transition: all .5s ease-in-out;
  337. transition: all .5s ease-in-out;
  338.  
  339. }
  340.  
  341. .permabutton, .reblogbutton {
  342. {block:indexpage}
  343. position:absolute;
  344. width:auto;
  345. height:auto;
  346. padding: 5px 5px 5px 5px;
  347. border:1px solid {color:borders};
  348. -webkit-transition: all 0.5s ease-in-out;
  349. -moz-transition: all 0.5s ease-in-out;
  350. -o-transition: all 0.5s ease-in-out;
  351. -ms-transition: all 0.5s ease-in-out;
  352. transition: all 0.5s ease-in-out;
  353. font-size:10px;
  354. font-weight:700;
  355. text-transform:uppercase;
  356. margin:5px;
  357. background:#fff;
  358. opacity:0;
  359. {/block:indexpage}
  360. }
  361.  
  362. .permabutton {
  363. left:8px;
  364. top:8px;
  365. }
  366.  
  367. .reblogbutton {
  368. left:8px;
  369. top:38px;
  370. }
  371.  
  372. .permabutton a, .permabutton a:visited, .reblogbutton a, .reblogbutton a:visited {
  373. color: {color:text};
  374. text-decoration: none;
  375. -webkit-transition: all 0.5s ease-in-out;
  376. -moz-transition: all 0.5s ease-in-out;
  377. -o-transition: all 0.5s ease-in-out;
  378. -ms-transition: all 0.5s ease-in-out;
  379. transition: all 0.5s ease-in-out;
  380. }
  381.  
  382. .permabutton:hover, .reblogbutton:hover {
  383. background:{color:accent};
  384. border:1px solid {color:accent};
  385. -webkit-transition: all 0.5s ease-in-out;
  386. -moz-transition: all 0.5s ease-in-out;
  387. -o-transition: all 0.5s ease-in-out;
  388. -ms-transition: all 0.5s ease-in-out;
  389. transition: all 0.5s ease-in-out;
  390. }
  391.  
  392. .post:hover .permabutton, .post:hover .reblogbutton {
  393.  
  394. {block:indexpage}
  395. opacity:1;
  396. -webkit-transition: all 0.5s ease-in-out;
  397. -moz-transition: all 0.5s ease-in-out;
  398. -o-transition: all 0.5s ease-in-out;
  399. -ms-transition: all 0.5s ease-in-out;
  400. transition: all 0.5s ease-in-out;
  401. {/block:indexpage}
  402.  
  403. }
  404.  
  405. /* test post perma */
  406.  
  407. .permainfo, .rebloginfo {
  408. {block:indexpage}
  409. opacity:1;
  410. margin-top:-8px;
  411. margin-left:3px;
  412. margin-right:3px;
  413. font-size:10px;
  414. text-transform:uppercase;
  415. font-weight:700;
  416. display:inline-block;
  417. color:{color:text};
  418. padding-bottom:2px;
  419. -webkit-transition: all 0.5s ease-in-out;
  420. -moz-transition: all 0.5s ease-in-out;
  421. -o-transition: all 0.5s ease-in-out;
  422. -ms-transition: all 0.5s ease-in-out;
  423. transition: all 0.5s ease-in-out;
  424. {/block:indexpage}
  425. }
  426.  
  427. .permainfo {
  428. {block:indexpage}
  429. float:left;
  430. {/block:indexpage}
  431. }
  432.  
  433. .rebloginfo {
  434. {block:indexpage}
  435. float:right;
  436. {/block:indexpage}
  437. }
  438.  
  439. .rebloginfo:hover, .permainfo:hover {
  440. padding-bottom:2px;
  441. color:{color:link hover};
  442. -webkit-transition: all 0.5s ease-in-out;
  443. -moz-transition: all 0.5s ease-in-out;
  444. -o-transition: all 0.5s ease-in-out;
  445. -ms-transition: all 0.5s ease-in-out;
  446. transition: all 0.5s ease-in-out;
  447. }
  448.  
  449.  
  450. .notebox {
  451. background:{color:Text Post Background};
  452. width:auto;
  453. height:auto;
  454. padding:10px;
  455. margin-top:5px;
  456. }
  457.  
  458. #content {
  459. left:50%;
  460. margin-top:40px;
  461. position:absolute;
  462. {block:indexpage}
  463. margin-left: -25.5vw;
  464. width: 62vw;
  465. {/block:indexpage}
  466. {block:permalinkpage}
  467. margin-left: -17.5vw;
  468. width: 30vw;
  469. {/block:permalinkpage}
  470. }
  471.  
  472. .post {
  473. background: {color:text post background};
  474. border:1px solid {color:background};
  475. padding:0vw;
  476. margin:2.6vw;
  477. {block:indexpage}
  478. width:15vw;
  479. height:auto;
  480. {/block:indexpage}
  481. {block:PermalinkPage}
  482. width: 30vw;
  483. height:auto;
  484. {/block:PermalinkPage}
  485. }
  486.  
  487. .post img {
  488. position:relative;
  489. display:block;
  490. }
  491.  
  492. .photoset img {
  493. {block:indexpage}
  494. padding-bottom:0.6vw;
  495. {/block:indexpage}
  496. }
  497.  
  498. .photoset {
  499. {block:indexpage}
  500. margin-bottom:-0.6vw;
  501. {/block:indexpage}
  502. }
  503.  
  504. #sidebar {
  505. background: {color:sidebar background};
  506. border:1px solid {color:borders};
  507. padding: .8vw;
  508. color: {color:text};
  509. width: 15vw;
  510. float:left;
  511. height:auto;
  512. right: 50%;
  513. margin-right:30vw;
  514. top: 6vw;
  515. position:fixed;
  516. box-shadow:0px 0px rgba(0,0,0,0.3);
  517. text-align:center;
  518. z-index: 99;
  519. font-weight:600;
  520. }
  521.  
  522. #sidebar .title {
  523. font-size:13px;
  524. padding:.3vw;
  525. text-align:center;
  526. border-bottom:1px solid {color:borders};
  527. margin-bottom:.5vw;
  528. font-family: {select:title font};
  529. }
  530.  
  531. #sidebar dl dt {
  532. float:left;
  533. font-weight:600;
  534. text-align:left;
  535. text-decoration:none;
  536. }
  537.  
  538. #sidebar dl dd {
  539. text-align:left;
  540. }
  541.  
  542. .newssection {
  543. font-weight:300;
  544. }
  545.  
  546. .newssection dl dt {
  547. margin-left:2vw;
  548. width:5vw;
  549. padding:0vw 0vw .5vw 0.2vw;
  550. }
  551.  
  552. .newssection dl dd {
  553. padding:0vw .0vw .5vw 0vw;
  554. }
  555.  
  556. .statssection dl dt {
  557. margin-left:2vw;
  558. width:5vw;
  559. padding:0vw 0vw .5vw 1.5vw;
  560. }
  561.  
  562. .statssection dl dd {
  563. padding:0vw .0vw .5vw 0vw;
  564. }
  565.  
  566. #sidebar img {
  567. height:auto;
  568. width:2vw;
  569. }
  570.  
  571.  
  572. dl {
  573. margin:0px;
  574. padding:0px;
  575. }
  576.  
  577.  
  578. .desc {
  579. text-align:center;
  580. display:inline-block;
  581. margin-bottom:0vw;
  582. font-weight:400;
  583.  
  584. }
  585.  
  586. .navigation {
  587. float:center;
  588. }
  589.  
  590. .navigation a {
  591. padding:0.4vw;
  592. margin:0.3vw 0.3vw;
  593. background:{color:background};
  594. border:1px solid {color:borders};
  595. color:{color:text};
  596. text-decoration:none;
  597. letter-spacing:.5px;
  598. width:5vw;
  599. height:auto;
  600. display:inline-block;
  601. float:center;
  602. font-size:12px;
  603. -webkit-transition: all 0.5s ease-in-out;
  604. -moz-transition: all 0.5s ease-in-out;
  605. -o-transition: all 0.5s ease-in-out;
  606. -ms-transition: all 0.5s ease-in-out;
  607. transition: all 0.5s ease-in-out;
  608. }
  609.  
  610. .navigation a:hover {
  611. background:{color:accent};
  612. -webkit-transition: all 0.5s ease-in-out;
  613. -moz-transition: all 0.5s ease-in-out;
  614. -o-transition: all 0.5s ease-in-out;
  615. -ms-transition: all 0.5s ease-in-out;
  616. transition: all 0.5s ease-in-out;
  617. }
  618.  
  619. #header {
  620. text-align:left;
  621. }
  622.  
  623. #topbar {
  624. border-bottom:1px solid {color:borders};
  625. background:{color:sidebar background};
  626. top:0;
  627. left:0;
  628. height:auto;
  629. width:100%;
  630. margin:auto;
  631. position:fixed;
  632. padding:0px;
  633. z-index:5;
  634. }
  635.  
  636. #topbar a {
  637. text-decoration: none;
  638. }
  639.  
  640. .blogtitle {
  641. position:relative;
  642. text-align:center;
  643. text-transform:none;
  644. font-weight:700;
  645. -webkit-font-smoothing: antialiased;
  646. -moz-osx-font-smoothing: grayscale;
  647. font-family: {select:title font};
  648. z-index: 999;
  649. display:inline-block;
  650. float:left;
  651. padding:.5vw;
  652. margin-bottom:.2vw;
  653. margin-left:1vw
  654. }
  655.  
  656. .blogtitle a, .blogtitle a:visited {
  657. color: {color:text};
  658. text-decoration:none;
  659. font-size:20px;
  660. text-decoration: none;
  661. -webkit-transition: all 0.5s ease-in-out;
  662. -moz-transition: all 0.5s ease-in-out;
  663. -o-transition: all 0.5s ease-in-out;
  664. -ms-transition: all 0.5s ease-in-out;
  665. transition: all 0.5s ease-in-out;
  666. }
  667.  
  668. .blogtitle a:hover {
  669. color:{color:link hover};
  670. -webkit-transition: all 0.5s ease-in-out;
  671. -moz-transition: all 0.5s ease-in-out;
  672. -o-transition: all 0.5s ease-in-out;
  673. -ms-transition: all 0.5s ease-in-out;
  674. transition: all 0.5s ease-in-out;
  675. }
  676.  
  677.  
  678. .text img {
  679. width:96%;
  680. max-width:100%;
  681. text-align:center;
  682. margin:auto;
  683. }
  684.  
  685.  
  686. .chat span {
  687. float: left;
  688. margin-right: 1%;
  689. }
  690.  
  691. .chat {
  692. padding: 5px 10px;
  693. border:1px solid {color:borders};
  694. background:{color:text post background};
  695. }
  696.  
  697. .chat .label {
  698. font-weight:700;
  699. }
  700.  
  701. .text {
  702. background:{color:text post background};
  703. padding: 5px 10px;
  704. border:1px solid {color:borders};
  705. }
  706.  
  707. .text a {
  708. max-width:100%;
  709. }
  710.  
  711. .asker {
  712. color:{color:link};
  713. font-weight:700;
  714. }
  715.  
  716. .quoteyo {
  717. font-size:14px;
  718. font-weight:700;
  719. font-family: {select:title font};
  720. }
  721.  
  722. .quotesource {
  723. padding-top:5px;
  724. padding-bottom:5px;
  725. }
  726.  
  727. .title {
  728. font-family: {select:title font};
  729. padding-top:0px;
  730. margin-bottom:10px;
  731. font-size:13px;
  732. font-weight:700;
  733. line-height:22px;
  734. text-align:center;
  735. letter-spacing:0.5px;
  736. }
  737.  
  738. .title a {
  739. color:{color:text};
  740. text-decoration: none;
  741. -webkit-transition: all 0.5s ease-in-out;
  742. -moz-transition: all 0.5s ease-in-out;
  743. -o-transition: all 0.5s ease-in-out;
  744. -ms-transition: all 0.5s ease-in-out;
  745. transition: all 0.5s ease-in-out;
  746. }
  747.  
  748. .title a:hover {
  749. color:{color:link hover};
  750. color:{color:link hover};
  751. -webkit-transition: all 0.5s ease-in-out;
  752. -moz-transition: all 0.5s ease-in-out;
  753. -o-transition: all 0.5s ease-in-out;
  754. -ms-transition: all 0.5s ease-in-out;
  755. transition: all 0.5s ease-in-out;
  756. }
  757.  
  758. #notes {
  759. display:inline-block;
  760. }
  761.  
  762. #notes img {
  763. display:inline-block;
  764. }
  765.  
  766. ol.notes {
  767. list-style-type:none;
  768. line-height:150%;
  769. padding:0px;
  770. margin 0px 0px;
  771. border-bottom:solid 1px {color:borders};
  772. }
  773.  
  774. ol.notes li.note {
  775. border-top:1px solid {color:borders};
  776. padding:5px;
  777. }
  778.  
  779. ol.notes li.note img {
  780. padding:0px !important;
  781. }
  782.  
  783. ol.notes li.note img.avatar {
  784. vertical-align:-4px;
  785. margin-right:5px;
  786. width:16px;
  787. height:16px;
  788. }
  789.  
  790. .metadata {
  791. display: inline-block;
  792. width: 100%;
  793. }
  794.  
  795. .notecount {
  796. float: right;
  797. }
  798.  
  799. .reblogged {
  800. float: right;
  801. margin: 3% 0;
  802. width: 100%;
  803. }
  804.  
  805. #tags {
  806. text-align:left;
  807. opacity: 1;
  808. }
  809.  
  810. #tags, nav ul, .chat ul {
  811. list-style: none;
  812. list-style-image: none;
  813. margin: 0;
  814. padding: 0;
  815. }
  816.  
  817. #tags li {
  818. float: left;
  819. margin-right: 1%;
  820. }
  821.  
  822. .notes {
  823. clear: both;
  824. padding: 0px;
  825. }
  826.  
  827. .caption {
  828. margin:10px 0px 0px 20px;
  829. }
  830.  
  831. .caption ul {
  832. list-style: none;
  833. list-style-image: none;
  834. margin: 0;
  835. padding: 0;
  836. line-height:150%;
  837. }
  838.  
  839. .infoheading {
  840. font-weight:700;
  841. color:{color:text};
  842. -moz-osx-font-smoothing:grayscale;
  843. -webkit-font-smoothing:antialiased;
  844. font-smoothing:antialiased;
  845. -webkit-text-stroke: 0.45px rgba({RGBcolor:text}, 0.4);
  846. }
  847.  
  848. .sourcesxxx {
  849. filter:alpha(opacity=0);
  850. opacity:0;
  851. }
  852.  
  853. #important {
  854. bottom:2px;
  855. left:5px;
  856. width:15px;
  857. font-size:12px;
  858. position:fixed;
  859. z-index:9999999999999999999999999999;
  860. }
  861.  
  862.  
  863. {CustomCSS}
  864.  
  865. </style>
  866.  
  867. </head>
  868.  
  869. <body>
  870.  
  871.  
  872.  
  873.  
  874.  
  875.  
  876. <div id="topbar">
  877.  
  878.  
  879. <div class="blogtitle"><a href="/">{Title}</a></div>
  880.  
  881. </div>
  882.  
  883.  
  884. <div id="sidebar">
  885.  
  886.  
  887. <div class="title">{text:About Section Title}</div>
  888.  
  889. <div class="desc">{Description}</div></p>
  890.  
  891.  
  892. <div class="title">{text:Links Section Title}</div>
  893.  
  894. <div class="navigation">
  895. <a href="{text:Link 1 URL}"><i class="{text:Link 1 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 1 Title}</a>
  896. <a href="{text:Link 2 URL}"><i class="{text:Link 2 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 2 Title}</a><br>
  897. <a href="{text:Link 3 URL}"><i class="{text:Link 3 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 3 Title}</a>
  898. <a href="{text:Link 4 URL}"><i class="{text:Link 4 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 4 Title}</a>
  899. <!-- more links -->
  900. {block:iflink5title}
  901. <a href="{text:Link 5 URL}"><i class="{text:Link 5 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 5 Title}</a>
  902. {/block:iflink5title}
  903. {block:iflink6title}
  904. <a href="{text:Link 6 URL}"><i class="{text:Link 6 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 6 Title}</a>
  905. {/block:iflink6title}
  906. {block:iflink7title}
  907. <a href="{text:Link 7 URL}"><i class="{text:Link 7 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 7 Title}</a>
  908. {/block:iflink7title}
  909. {block:iflink8title}
  910. <a href="{text:Link 8 URL}"><i class="{text:Link 8 Friconix Icon}"></i>&nbsp;&nbsp;{text:Link 8 Title}</a>
  911. {/block:iflink8title}</p>
  912. </div>
  913.  
  914. {block:ifshowstatssection}
  915. <div class="title">{text:Stats Section Title}</div>
  916. <div class="statssection">
  917. <dl>
  918. {block:ifstats1code}<dt>{text:Stats 1 Title}: </dt><dd>{text:Stats 1 Code}</dd>{/block:ifstats1code}
  919. {block:ifstats2code}<dt>{text:Stats 2 Title}: </dt><dd>{text:Stats 2 Code}</dd>{/block:ifstats2code}
  920. {block:ifstats3code}<dt>{text:Stats 3 Title}: </dt><dd>{text:Stats 3 Code}</dd>{/block:ifstats3code}
  921. </dl>
  922. </div></p>
  923. {/block:ifshowstatssection}
  924.  
  925.  
  926. {block:ifshownetworkssection}
  927. <div class="title">{text:Networks Section Title}</div>
  928.  
  929. {block:ifNetwork1code}{text:Network 1 Code} &nbsp;{/block:ifNetwork1code}
  930. {block:ifNetwork2code}{text:Network 2 Code} &nbsp;{/block:ifNetwork2code}
  931. {block:ifNetwork3code}{text:Network 3 Code} &nbsp;{/block:ifNetwork3code}
  932. {block:ifNetwork4code}{text:Network 4 Code} &nbsp;{/block:ifNetwork4code}
  933. </p>
  934. {/block:ifshownetworkssection}
  935.  
  936.  
  937. {block:ifshownewssection}
  938. <div class="title">{text:News Section Title}</div>
  939.  
  940. <div class="newssection">
  941. <dl>
  942. {block:ifNews1title}<dt>{text:News 1 Title}:</dt><dd>{text:News 1 Text}</dd>{/block:ifNews1title}
  943. {block:ifNews2title}<dt>{text:News 2 Title}:</dt><dd>{text:News 2 Text}</dd>{/block:ifNews2title}
  944. {block:ifNews3title}<dt>{text:News 3 Title}:</dt><dd>{text:News 3 Text}</dd>{/block:ifNews3title}
  945. </dl>
  946. </div>
  947. {/block:ifshownewssection}
  948.  
  949. </div>
  950.  
  951.  
  952.  
  953.  
  954.  
  955. <div id="content">
  956.  
  957.  
  958. {block:Posts}
  959.  
  960. {block:ContentSource}<!-- {SourceURL}
  961. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  962. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  963. {/block:ContentSource}
  964.  
  965. <!-- {block:NoRebloggedFrom}
  966. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  967. {/block:NoRebloggedFrom} -->
  968.  
  969. <div class="post">
  970.  
  971. {block:Text}
  972.  
  973. <div class="text">
  974. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}<div class="textbody">
  975. {Body}</div>
  976. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  977.  
  978. </div>
  979. {/block:Text}
  980.  
  981. {block:Photo}
  982.  
  983. <div class="photo">
  984. {LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>{LinkCloseTag}
  985. {block:indexpage}<div id="overlay"></div>
  986. <div class="permabutton"><a href="{Permalink}">{notecountwithlabel}</a></div><div class="reblogbutton"><a href="{ReblogURL}" target="_blank">reblog</a></div>{/block:indexpage}
  987. </div>
  988. {/block:Photo}
  989.  
  990. {block:Photoset}
  991.  
  992. <div class="photoset">
  993. {block:IndexPage}
  994.  
  995. {block:Photos}
  996. <a href="{permalink}"><img src="{PhotoURL-500}" width="218px" /></a>
  997. {/block:Photos}<div id="overlay"></div>
  998. <div class="permabutton"><a href="{Permalink}">{notecountwithlabel}</a></div><div class="reblogbutton"><a href="{ReblogURL}" target="_blank">reblog</a></div>
  999. {/block:IndexPage}
  1000. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  1001.  
  1002. </div>
  1003. {/block:Photoset}
  1004.  
  1005. {block:Quote}
  1006.  
  1007. <div class="text">
  1008. <div class="quoteyo">{Quote}</div>
  1009. <div class="quotesource">{block:Source}- {Source}{/block:Source}</div>
  1010. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1011. </div>
  1012. {/block:Quote}
  1013.  
  1014. {block:Link}
  1015.  
  1016. <div class="text">
  1017. <div class="title"><a href="{URL}">{Name}</a></div>
  1018. {block:Description}{Description}{/block:Description}
  1019. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1020. </div>
  1021. {/block:Link}
  1022.  
  1023. {block:Chat}
  1024.  
  1025. <div class="chat">
  1026. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1027. <ul>
  1028. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  1029. </ul>
  1030. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1031. </div>
  1032. {/block:Chat}
  1033.  
  1034. {block:Audio}
  1035.  
  1036. <div class="audio">{block:TrackName}{TrackName} by{/block:TrackName} {block:Artist}{Artist} <br><br>{/block:Artist}
  1037. {AudioPlayerGrey}
  1038. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1039. </div>
  1040. {/block:Audio}
  1041.  
  1042. {block:Video}
  1043.  
  1044. <div class="video">
  1045. <div class="video-player">{Video-500}</div>
  1046. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1047. </div>
  1048. {/block:Video}
  1049.  
  1050. {block:Answer}
  1051.  
  1052. <div class="text">
  1053. <p><div style="border-bottom: 1px solid {color:Text highlight};"><span class="asker">{Asker} said:</span> {Question}</p></div>
  1054. {Answer}
  1055.  
  1056. {block:indexpage}<div class="notebox"><a href="{Permalink}"><div class="permainfo">{notecountwithlabel}</div></a><a href="{ReblogURL}" target="_blank"><div class="rebloginfo">reblog</div></a></div>{/block:indexpage}
  1057. </div>
  1058. {/block:Answer}
  1059.  
  1060.  
  1061. <footer class="details">
  1062. {block:PermalinkPage}
  1063. <div class="caption">
  1064. {block:caption}{Caption}{/block:caption}
  1065. {block:Date}
  1066. <ul>
  1067. {block:HasTags}<li><div id="tags"><span class="infoheading">Tagged with:</span> {block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}</div></li>{/block:HasTags}
  1068. <li><span class="infoheading">Posted:</span> {timeago}</li>
  1069. {block:NoteCount}<li><span class="infoheading">Notecount:</span> {notecount}</li>{/block:NoteCount}
  1070. {block:RebloggedFrom}<li><span class="infoheading">Via:</span> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a></li>{/block:RebloggedFrom}
  1071. {block:ContentSource}<li><span class="infoheading">Source:</span> <a href="{SourceURL}" target="_blank">{SourceTitle}</a></li>{/block:ContentSource}
  1072. </ul>
  1073. {/block:Date}
  1074. {block:PostNotes}<div id="notes">{PostNotes-16}</div>{/block:PostNotes}
  1075. </div>
  1076. {/block:PermalinkPage}</footer>
  1077.  
  1078. </div>
  1079.  
  1080. {/block:Posts}
  1081.  
  1082. </div>
  1083.  
  1084. {block:Pagination}
  1085.  
  1086. <div class="pagination">
  1087. {block:PreviousPage}<a href="{PreviousPage}"> </a>{/block:PreviousPage}
  1088. {block:NextPage}<a href="{NextPage}"> </a>{/block:NextPage}
  1089. </div>
  1090.  
  1091. {/block:Pagination}
  1092.  
  1093.  
  1094. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  1095.  
  1096. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  1097. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  1098. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1099. <script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1100.  
  1101. <!--Code for infinite scroll and grid layout-->
  1102.  
  1103. <script>
  1104. (function() {
  1105. var $tumblelog = $('#content');
  1106.  
  1107. $tumblelog.infinitescroll({
  1108. navSelector : ".pagination",
  1109. nextSelector : ".pagination a:first",
  1110. itemSelector : ".post",
  1111. bufferPx : 50,
  1112. done : "",
  1113. loading: {
  1114. img : "",
  1115. msgText: ""
  1116. },
  1117. },
  1118. function( newElements ) {
  1119. var $newElems = $( newElements ).css({ opacity: 0 });
  1120. $newElems.imagesLoaded(function(){
  1121. $newElems.animate({ opacity: 1 });
  1122. $tumblelog.masonry( 'appended', $newElems);
  1123. });
  1124. }
  1125. );
  1126.  
  1127. $tumblelog.imagesLoaded( function(){
  1128. $tumblelog.masonry({
  1129. columnWidth: function( containerWidth ) {
  1130. return containerWidth / 100;
  1131. }
  1132. });
  1133. });
  1134. })();
  1135. </script>
  1136.  
  1137. <!-- scroll to top code 1 -->
  1138.  
  1139. <script type="text/javascript">
  1140.  
  1141. $(function(){$window=$(window);$link=$("#scroll");$link.click(function(){$("html, body").animate({scrollTop:0},"slow")});$window.scroll(function(){if($window.scrollTop()<=0){$link.fadeOut("slow")}else{$link.fadeIn("fast")}})});
  1142.  
  1143. </script>
  1144.  
  1145.  
  1146. <!-- tooltip code 1 -->
  1147.  
  1148. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1149.  
  1150. <script>
  1151.  
  1152. (function($){
  1153.  
  1154. $(document).ready(function(){
  1155.  
  1156. $("[title]").style_my_tooltips({
  1157.  
  1158. tip_follows_cursor:true,
  1159.  
  1160. tip_delay_time:90,
  1161.  
  1162. tip_fade_speed:600,
  1163.  
  1164. attribute:"title"
  1165.  
  1166. });
  1167.  
  1168. });
  1169.  
  1170. })(jQuery);
  1171.  
  1172. </script>
  1173.  
  1174. <div id="important"><a href="https://mhango.tumblr.com" target="_blank" title="theme by mhango"><img src="https://img.icons8.com/ios/50/000000/cloud.png" /></a></div>
  1175.  
  1176. </body>
  1177.  
  1178. <!-- scroll to top code 3 -->
  1179.  
  1180. <a href="javascript:;" id="scroll" rel="nofollow" title="scroll to top"><img src="https://img.icons8.com/ios-glyphs/50/000000/chevron-up.png"></a>
  1181.  
  1182. <!-- end of scroll to top code 3 -->
  1183.  
  1184.  
  1185. </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!