Advertisement
uchihaclan

guts theme

Jul 16th, 2021 (edited)
1,151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.56 KB | None | 0 0
  1. <html>
  2. <!---
  3.  
  4. guts theme by @ps1
  5.  
  6. material icons can be changed. those are the giant symbols.
  7. toggle pixel links to remove text links.
  8. toggle notes pixel to remove star in middle. you can also resize icon pixels so they're not cutting the posts.
  9. message for q's!
  10.  
  11. base icon in theme
  12. https://ruwustem.tumblr.com/post/188058020503/im-used-to-fighting-to-survive-but-what-grows
  13.  
  14. photosets
  15. https://annasthms.github.io/photosets/
  16.  
  17. --->
  18.  
  19. <head>
  20. <title>{Title}</title>
  21. <link rel="icon" href="{image:FavIcon}" type="image/gif" >
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}
  24. <meta name="description" content="{MetaDescription}" />
  25. {/block:Description}
  26.  
  27. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  28. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  29.  
  30. <!--- Add Custom Fonts Here (like Google Fonts) --->
  31.  
  32. <!--- Then add Font name to the 'Font Family' in Theme Options Area --->
  33.  
  34. <meta name="image:favicon" content=""/>
  35. <meta name="image:icon" content="https://64.media.tumblr.com/dce37aed887c468ef59be308153a19df/tumblr_pyohh8VWro1wt3cyxo7_500.png"/>
  36. <meta name="image:background" content=""/>
  37. <meta name="image:container bg" content=""/>
  38. <meta name="image:header bg" content=""/>
  39. <meta name="image:notes pxl" content="https://i.imgur.com/FG30UaO.gif"/>
  40. <meta name="image:link1" content="https://i.imgur.com/9vO0XIJ.gif"/>
  41. <meta name="image:link2" content="https://i.imgur.com/KoGOjwV.gif"/>
  42. <meta name="image:link3" content="https://i.imgur.com/kVdDVz7.gif"/>
  43. <meta name="image:link4" content="https://i.imgur.com/Au9IgPP.gif"/>
  44. <meta name="image:cursor" content="https://i.imgur.com/kvmHWly.png"/>
  45.  
  46. <meta name="color:background" content="#fff">
  47. <meta name="color:container" content="#fff">
  48. <meta name="color:posts" content="#fff">
  49. <meta name="color:header" content="#fff">
  50. <meta name="color:txtbox font" content="#000">
  51. <meta name="color:txtbox glow outline" content="#ff0000">
  52. <meta name="color:title" content="#000">
  53. <meta name="color:title glow outline" content="#ff0000">
  54. <meta name="color:font" content="#000">
  55. <meta name="color:font glow outline" content="#000">
  56. <meta name="color:links" content="#000">
  57. <meta name="color:post links" content="#000">
  58. <meta name="color:links hover" content="#ff0000">
  59. <meta name="color:links glow outline" content="#ff0000">
  60. <meta name="color:tooltip bg" content="#fff">
  61. <meta name="color:tooltip border" content="#000">
  62. <meta name="color:tooltip color" content="#000">
  63. <meta name="color:tooltip glow outline" content="#000">
  64. <meta name="color:select bg" content="#000">
  65. <meta name="color:select txt" content="#fff">
  66. <meta name="color:container border" content="#000">
  67. <meta name="color:post border" content="#000">
  68. <meta name="color:icon border" content="#000">
  69.  
  70.  
  71. <meta name="select:container border" content="solid"/>
  72. <meta name="select:container border" content="dashed"/>
  73. <meta name="select:container border" content="dotted"/>
  74. <meta name="select:container border" content="double"/>
  75. <meta name="select:container border" content="inset"/>
  76. <meta name="select:container border" content="outset"/>
  77. <meta name="select:container border" content="ridge"/>
  78. <meta name="select:container border" content="groove"/>
  79.  
  80.  
  81. <meta name="select:container border size" content="1"/>
  82. <meta name="select:container border size" content="2"/>
  83. <meta name="select:container border size" content="3"/>
  84. <meta name="select:container border size" content="4"/>
  85. <meta name="select:container border size" content="5"/>
  86. <meta name="select:container border size" content="0"/>
  87.  
  88. <meta name="select:post border" content="solid"/>
  89. <meta name="select:post border" content="dashed"/>
  90. <meta name="select:post border" content="dotted"/>
  91. <meta name="select:post border" content="double"/>
  92. <meta name="select:post border" content="inset"/>
  93. <meta name="select:post border" content="outset"/>
  94. <meta name="select:post border" content="ridge"/>
  95. <meta name="select:post border" content="groove"/>
  96.  
  97.  
  98. <meta name="select:post border size" content="1"/>
  99. <meta name="select:post border size" content="2"/>
  100. <meta name="select:post border size" content="3"/>
  101. <meta name="select:post border size" content="4"/>
  102. <meta name="select:post border size" content="5"/>
  103. <meta name="select:post border size" content="0"/>
  104.  
  105. <meta name="select:icon border" content="solid"/>
  106. <meta name="select:icon border" content="dashed"/>
  107. <meta name="select:icon border" content="dotted"/>
  108. <meta name="select:icon border" content="double"/>
  109. <meta name="select:icon border" content="inset"/>
  110. <meta name="select:icon border" content="outset"/>
  111. <meta name="select:icon border" content="ridge"/>
  112. <meta name="select:icon border" content="groove"/>
  113.  
  114.  
  115. <meta name="select:icon border size" content="1"/>
  116. <meta name="select:icon border size" content="2"/>
  117. <meta name="select:icon border size" content="3"/>
  118. <meta name="select:icon border size" content="4"/>
  119. <meta name="select:icon border size" content="5"/>
  120. <meta name="select:icon border size" content="0"/>
  121.  
  122.  
  123. <meta name="select:icon position" content="center"/>
  124. <meta name="select:icon position" content="top"/>
  125. <meta name="select:icon position" content="left"/>
  126. <meta name="select:icon position" content="right"/>
  127. <meta name="select:icon position" content="bottom"/>
  128.  
  129. <meta name="select:header txt align" content="center"/>
  130. <meta name="select:header txt align" content="left"/>
  131. <meta name="select:header txt align" content="right"/>
  132. <meta name="select:header txt align" content="justify"/>
  133.  
  134. <meta name="select:title txt align" content="center"/>
  135. <meta name="select:title txt align" content="left"/>
  136. <meta name="select:title txt align" content="right"/>
  137. <meta name="select:title txt align" content="justify"/>
  138.  
  139. <meta name="select:material icon size" content="18"/>
  140. <meta name="select:material icon size" content="24"/>
  141. <meta name="select:material icon size" content="36"/>
  142. <meta name="select:material icon size" content="48"/>
  143.  
  144. <meta name="select:notes pxl height" content="auto"/>
  145. <meta name="select:notes pxl height" content="18"/>
  146. <meta name="select:notes pxl height" content="24"/>
  147. <meta name="select:notes pxl height" content="36"/>
  148. <meta name="select:notes pxl height" content="48"/>
  149.  
  150.  
  151.  
  152. <meta name="text:title" content="あああああああああ">
  153. <meta name="text:title size" content="22">
  154.  
  155. <meta name="text:txtbox1" content="yo what the f@ck">
  156. <meta name="text:txtbox2" content="is going on????">
  157. <meta name="text:txtbox size" content="14">
  158. <meta name="text:font family" content="verdana">
  159. <meta name="text:post font size" content="14">
  160.  
  161. <meta name="if:pxl linkz" content="0" />
  162. <meta name="if:notes pxl" content="0" />
  163. <meta name="if:round border" content="0" />
  164. <meta name="if:circle icon" content="0" />
  165. <meta name="if:xp scrollbar" content="0" />
  166. <meta name="if:dark scrollbar" content="0" />
  167. <meta name="if:glow text" content="0" />
  168. <meta name="if:outline text" content="0" />
  169. <meta name="if:links underline" content="0"/>
  170. <meta name="if:bold links" content="0"/>
  171. <meta name="if:italic links" content="0"/>
  172. <meta name="if:custom cursor" content="0" />
  173. <meta name="if:tile background" content="0" />
  174. <meta name="if:tile container background" content="0" />
  175. <meta name="if:tile header background" content="0" />
  176. <meta name="if:hide title" content="0"/>
  177. <meta name="if:hide links" content="0"/>
  178. <meta name="if:redirect" content="0" />
  179. <meta name="if:hide caption" content="0"/>
  180. <meta name="if:hide tags" content="0" />
  181.  
  182. <meta name="text:redirect link" content="/tagged/0">
  183. <meta name="text:link 1" content="ONE">
  184. <meta name="text:link 1 URL" content="/">
  185. <meta name="text:link 2" content="TWO">
  186. <meta name="text:link 2 URL" content="/">
  187. <meta name="text:link 3" content="THREE">
  188. <meta name="text:link 3 URL" content="/">
  189. <meta name="text:link 4" content="FOUR">
  190. <meta name="text:link 4 URL" content="/">
  191.  
  192.  
  193. <style type="text/css">
  194.  
  195. .material-icons {
  196. font-family: 'Material Icons';
  197. font-weight: normal;
  198. font-style: normal;
  199. font-size: {select:material icon size}px;
  200. display: inline-block;
  201. line-height: 1;
  202. vertical-align: bottom;
  203. text-transform: none;
  204. letter-spacing: normal;
  205. word-wrap: normal;
  206. white-space: nowrap;
  207. direction: ltr;
  208.  
  209. -webkit-font-smoothing: antialiased;
  210.  
  211. text-rendering: optimizeLegibility;
  212.  
  213. -moz-osx-font-smoothing: grayscale;
  214.  
  215. font-feature-settings: 'liga';
  216. }
  217.  
  218. ::-moz-selection {
  219. background: {color:select bg};
  220. color: {color:select txt};}
  221.  
  222. ::selection {
  223. background: {color:select bg};
  224. color: {color:select txt};}
  225.  
  226. #s-m-t-tooltip {
  227. z-index: 999999999;
  228. background-color: {color:tooltip bg};
  229. color: {color:tooltip color};
  230. font-size: {text:Font Size}px;
  231. text-align: center;
  232. {block:IfGlowText}
  233. text-shadow: 0 0 2px {color:tooltip glow outline};
  234. {/block:IfGlowText}
  235. {block:IfOutlineText}
  236. text-shadow: -1px 0 {color:tooltip glow outline}, 0 1px {color:tooltip glow outline}, 1px 0 {color:tooltip glow outline}, 0 -1px {color:tooltip glow outline};
  237. {/block:IfOutlineText}
  238. {block:IfRoundBorder}
  239. border-radius: 4px;
  240. {/block:IfRoundBorder}
  241. border: {select:post border size}px {select:post border} {color:tooltip border};
  242. transition: all 0.3s ease-out;
  243. -o-transition: all 0.3s ease-out;
  244. -webkit-transition: all 0.3s ease-out;
  245. -moz-transition: all 0.3s ease-out;
  246. text-transform: normal;
  247. max-width: 300px;
  248. display: block;
  249. word-wrap: break-word;
  250. padding: 5px 5px;
  251. margin: -30px 0px 10px 20px;}
  252.  
  253. body {
  254. margin: 0;
  255. background-color: {color:background};
  256. background-image: url({image:Background});
  257. background-attachment: fixed;
  258. {block:IfNotTileBackground}
  259. -webkit-background-size: cover;
  260. -moz-background-size: cover;
  261. -o-background-size: cover;
  262. background-size: cover;
  263. {/block:IfNotTileBackground}
  264. word-wrap: break-word;
  265. overflow-x:hidden;
  266. font-family: '{text:font family}';
  267. font-size: {text:post font size}px;
  268. color: {color:font};
  269. {block:IfGlowText}
  270. text-shadow: 0 0 2px {color:font glow outline};
  271. {/block:IfGlowText}
  272. {block:IfOutlineText}
  273. text-shadow: -1px 0 {color:font glow outline}, 0 1px {color:font glow outline}, 1px 0 {color:font glow outline}, 0 -1px {color:font glow outline};
  274. {/block:IfOutlineText}}
  275.  
  276. {block:IfCustomCursor}
  277. body, *, a, a:hover { cursor:url({image:cursor}), auto;}{/block:IfCustomCursor}
  278. p {margin: 0px;}
  279. ul {list-style: square;}
  280. img {max-width: 100%;}
  281. h1, h2, h3, h4, h5, h6 {line-height: 100%;}
  282.  
  283. a:link, a:active, a:visited {
  284. color: {color:links};
  285. {block:IfGlowText}
  286. text-shadow: 0 0 3px {color:links glow outline}, 0 0 2px {color:links glow outline};
  287. {/block:IfGlowText}
  288. {block:IfOutlineText}
  289. text-shadow: -1px 0 {color:links glow outline}, 0 1px {color:links glow outline}, 1px 0 {color:links glow outline}, 0 -1px {color:links glow outline};
  290. {/block:IfOutlineText}
  291. {block:IfNotLinksUnderline}
  292. text-decoration: none;{/block:IfNotLinksUnderline}
  293. {block:IfLinksUnderline}
  294. text-decoration: underline;{/block:IfLinksUnderline}
  295. {block:IfBoldLinks}font-weight: bold;{/block:IfBoldLinks}
  296. {block:IfItalicLinks}font-style: italic;{/block:IfItalicLinks}
  297. -webkit-transition: all 0.2s ease-in-out;
  298. -moz-transition: all 0.2s ease-in-out;
  299. -o-transition: all 0.2s ease-in-out;
  300. -ms-transition: all 0.2s ease-in-out;
  301. transition: all 0.2s ease-in-out;}
  302.  
  303. #content a:hover, a:hover {
  304. color: {color:Links Hover};
  305. text-decoration: {select:links hover};
  306. -webkit-transition: all 0.2s ease-in-out;
  307. -moz-transition: all 0.2s ease-in-out;
  308. -o-transition: all 0.2s ease-in-out;
  309. -ms-transition: all 0.2s ease-in-out;
  310. transition: all 0.2s ease-in-out;}
  311.  
  312. {block:IfNotXPScrollbar}{block:IfNotDarkScrollbar}
  313. ::-webkit-scrollbar {
  314. width:15px; height:15px;} /* made by @ps1 */
  315. ::-webkit-scrollbar-track {
  316. background-image: url(https://i.imgur.com/n1kAWKU.png);}
  317. ::-webkit-scrollbar-thumb {
  318. background-image: url(https://i.imgur.com/KePIOiE.png);
  319. border-top: 1px solid #D4D0C8; border-bottom: 1px solid #808080;}
  320. ::-webkit-scrollbar-button:vertical:decrement {
  321. background-image: url(https://i.imgur.com/ZF6PC55.png);
  322. width: 15px; height: 15px;}
  323. ::-webkit-scrollbar-button:vertical:increment {
  324. background-image: url(https://i.imgur.com/sMOMkQ7.png);
  325. width: 15px; height: 15px;}
  326. {/block:IfNotDarkScrollbar}{/block:IfNotXPScrollbar}
  327.  
  328. {block:IfDarkScrollbar}
  329. ::-webkit-scrollbar {
  330. width:15px; height:15px;} /* made by @ps1 */
  331. ::-webkit-scrollbar-track {
  332. background-image: url(https://i.imgur.com/1wwyNgR.png);}
  333. ::-webkit-scrollbar-thumb {
  334. background-image: url(https://i.imgur.com/3twDfJb.png);
  335. border-top: 1px solid #111; border-bottom: 1px solid #000;}
  336. ::-webkit-scrollbar-button:vertical:decrement {
  337. background-image: url(https://i.imgur.com/pSpgQbq.png);
  338. width: 15px; height: 15px;}
  339. ::-webkit-scrollbar-button:vertical:increment {
  340. background-image: url(https://i.imgur.com/IzbYg9x.png);
  341. width: 15px; height: 15px;}
  342. {/block:IfDarkScrollbar}
  343.  
  344. {block:IfXPScrollbar}
  345. ::-webkit-scrollbar {
  346. width:16px; height:16px;} /* made by @ps1 */
  347. ::-webkit-scrollbar-track {
  348. background-color: #F7F5EE;}
  349. ::-webkit-scrollbar-thumb {
  350. background-image: url(https://i.imgur.com/CKou08s.png);
  351. border-top: 1px solid #BBCDF5; border-bottom: 1px solid #7C9FD3;
  352. border-radius: 3px;
  353. }
  354. ::-webkit-scrollbar-button:vertical:decrement {
  355. background-image: url(https://i.imgur.com/ObVjKL6.png);
  356. width: 16px; height: 17px;}
  357. ::-webkit-scrollbar-button:vertical:increment {
  358. background-image: url(https://i.imgur.com/1879VtO.png);
  359. width: 16px; height: 17px;}
  360. {/block:IfXPScrollbar}
  361.  
  362. #content {
  363. margin: 50px auto;
  364. width: 600px;
  365. overflow: hidden;
  366. overflow-x: none;
  367.  
  368. }
  369.  
  370. /* sidebar style obvi */
  371.  
  372. #sidebar {
  373. color: {color:font};
  374. padding: 10px;
  375. width: 500px;
  376. text-align: {select:header txt align};
  377. background-color: {color:header};
  378. background-image: url({image:header bg});
  379. background-attachment: fixed;
  380. {block:IfNotTileHeaderBackground}
  381. background-size: 520px 350px;
  382. background-position: top;
  383. {/block:IfNotTileHeaderBackground}
  384. border: {select:container border size}px {select:container border} {color:container border};
  385. border-top: 0;
  386. {block:IfRoundBorder}
  387. border-radius: 0 0 4px 4px;
  388. {/block:IfRoundBorder}
  389.  
  390. }
  391.  
  392.  
  393.  
  394. .sb img {
  395. display: block;
  396. object-position: {select:icon position};
  397. object-fit: cover;
  398. width: 200px; height: 200px;
  399. border: {select:icon border size}px {select:icon border} {color:icon border};
  400. {block:IfRoundBorder}
  401. border-radius: 4px;
  402. {/block:IfRoundBorder}
  403. {block:IfCircleIcon}
  404. border-radius: 50%;
  405. {/block:IfCircleIcon}
  406. }
  407.  
  408. .posts img:hover, [photoset-layout] img:hover, .sb img:hover {
  409.  
  410. transition: all 0.3s ease-out;
  411. -o-transition: all 0.3s ease-out;
  412. -webkit-transition: all 0.3s ease-out;
  413. -moz-transition: all 0.3s ease-out;
  414. animation: shake 0.6s;
  415. animation-iteration-count: infinite;
  416. }
  417.  
  418. @keyframes shake {
  419. 0% { transform: translate(1px, 1px) rotate(0deg); }
  420. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  421. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  422. 30% { transform: translate(3px, 2px) rotate(0deg); }
  423. 40% { transform: translate(1px, -1px) rotate(1deg); }
  424. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  425. 60% { transform: translate(-3px, 1px) rotate(0deg); }
  426. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  427. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  428. 90% { transform: translate(1px, 2px) rotate(0deg); }
  429. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  430. }
  431.  
  432. .linkz {
  433. margin-bottom: 10px;
  434.  
  435. }
  436.  
  437.  
  438. .text6 {
  439. color: {color:txtbox font};
  440. font-size: {text:txtbox size}px;
  441. {block:IfGlowText}
  442. text-shadow: 0 0 2px {color:txtbox glow outline};
  443. {/block:IfGlowText}
  444. {block:IfOutlineText}
  445. text-shadow: -1px 0 {color:txtbox glow outline}, 0 1px {color:txtbox glow outline}, 1px 0 {color:txtbox glow outline}, 0 -1px {color:txtbox glow outline};
  446. {/block:IfOutlineText}
  447. padding: 3px;
  448. position: absolute;
  449. width: 125px;
  450. max-height: 200px;
  451. overflow: auto;
  452. overflow-x: hidden;
  453. margin-top:0px;
  454. margin-left: 365px;
  455. opacity:0;
  456. transition: all 0.5s ease;
  457.  
  458. }
  459.  
  460. .e6:hover .text6{
  461. position: absolute;
  462. margin-top:0px;
  463. width: 125px;
  464. max-height: 200px;
  465. overflow: auto;
  466. overflow-x: hidden;
  467. opacity:1;
  468.  
  469. }
  470.  
  471. .e6:hover .tit {
  472. position: absolute;
  473. margin-top:0px;
  474. width: 125px;
  475. max-height: 200px;
  476. overflow: auto;
  477. overflow-x: hidden;
  478. opacity:1;
  479. }
  480.  
  481. .tit {
  482. color: {color:txtbox font};
  483. padding: 3px;
  484. font-size: {text:txtbox size}px;
  485. {block:IfGlowText}
  486. text-shadow: 0 0 2px {color:txtbox glow outline};
  487. {/block:IfGlowText}
  488. {block:IfOutlineText}
  489. text-shadow: -1px 0 {color:txtbox glow outline}, 0 1px {color:txtbox glow outline}, 1px 0 {color:txtbox glow outline}, 0 -1px {color:txtbox glow outline};
  490. {/block:IfOutlineText}
  491. position: absolute;
  492. width: 125px;
  493. max-height: 200px;
  494. overflow: auto;
  495. overflow-x: hidden;
  496. margin-top:0px;
  497. opacity:0;
  498. transition: all 0.5s ease;
  499. }
  500.  
  501. .e6:hover .title{
  502. position: absolute;
  503. margin-top: 15px;
  504. width: 500px;
  505. opacity:1;
  506.  
  507. }
  508.  
  509. .title {
  510. margin-top:15px;
  511. position: absolute;
  512. width: 500px;
  513. opacity:0;
  514. transition: all 0.5s ease;
  515. font-size: {text:title size}px;
  516. text-align: {select:title txt align};
  517. }
  518.  
  519. .title a {color: {color:title};
  520. {block:IfGlowText}
  521. text-shadow: 0 0 2px {color:title glow outline};
  522. {/block:IfGlowText}
  523. {block:IfOutlineText}
  524. text-shadow: -1px 0 {color:title glow outline}, 0 1px {color:title glow outline}, 1px 0 {color:title glow outline}, 0 -1px {color:title glow outline};
  525. {/block:IfOutlineText}
  526. }
  527. .title a:hover {color: {color:links hover};}
  528.  
  529. .container {
  530. {block:IfRoundBorder}
  531. border-radius: 4px 4px 0px 0px;
  532. {/block:IfRoundBorder}
  533. width: 500px;
  534. padding: 10px;
  535. height: 400px;
  536. overflow: scroll;
  537. overflow-x: hidden;
  538. border: {select:container border size}px {select:container border} {color:container border};
  539. background-color: {color:container};
  540. background-image: url({image:container bg});
  541. background-attachment: fixed;
  542. {block:IfNotTileContainerBackground}
  543. -webkit-background-size: cover;
  544. -moz-background-size: cover;
  545. -o-background-size: cover;
  546. background-size: cover;
  547. {/block:IfNotTileContainerBackground}
  548. }
  549.  
  550. .posts a {
  551. color: {color:post links};
  552. }
  553. .posts {
  554. text-align: left;
  555. padding: 10px;
  556. background-color: {color:posts};
  557. border: {select:post border size}px {select:post border} {color:post border};
  558. {block:IfRoundBorder}
  559. border-radius: 4px;
  560. {/block:IfRoundBorder}
  561. margin-bottom: 30px;
  562. width: 400px;
  563. position: relative;}
  564.  
  565. .posts blockquote {
  566. border-left: 1px {select:post border} {color:post border};
  567. word-wrap: break-word;
  568. word-break: break-word;
  569. margin-left: 5px;
  570. margin-top: 0;
  571. padding-left: 5px;
  572. }
  573.  
  574.  
  575. .pic img {
  576.  
  577. display: block;
  578. }
  579.  
  580.  
  581.  
  582. .cap {
  583. margin-top: 10px;
  584. font-size: {text:post font size}px;
  585. color: {color:font};
  586. {block:IfGlowText}
  587. text-shadow: 0 0 2px {color:font glow outline};
  588. {/block:IfGlowText}
  589. {block:IfOutlineText}
  590. text-shadow: -1px 0 {color:font glow outline}, 0 1px {color:font glow outline}, 1px 0 {color:font glow outline}, 0 -1px {color:font glow outline};
  591. {/block:IfOutlineText}
  592. }
  593.  
  594.  
  595.  
  596.  
  597. #notes {
  598. text-align: center;
  599. margin-top: 10px;
  600. }
  601.  
  602. #notes img {
  603. height: {select:notes pxl height}px;
  604.  
  605. image-rendering: pixelated;
  606. }
  607.  
  608. .tags {
  609. max-height:0px;
  610. text-align: center;
  611. opacity:0;
  612. -webkit-transition: all 0.7s ease;
  613. transition: all 0.7s ease;
  614. -moz-transition: all 0.7s ease;
  615. -o-transition: all 0.7s ease;
  616. }
  617.  
  618. .posts:hover .tags{
  619.  
  620. max-height: 200px;
  621. opacity:1;
  622. -webkit-transition: all 0.7s ease;
  623. transition: all 0.7s ease;
  624. -moz-transition: all 0.7s ease;
  625. -o-transition: all 0.7s ease;
  626. }
  627.  
  628.  
  629. /* stylize your asks */
  630.  
  631. .q {
  632. margin: 0;
  633. padding: 10px;
  634. border: 1px {select:post border} {color:post border};
  635. max-height: 150px;
  636. min-height: 44px;
  637. overflow: auto;
  638. overflow-x: hidden;
  639. {block:IfRoundBorder}
  640. border-radius: 4px;
  641. {/block:IfRoundBorder}
  642. }
  643.  
  644.  
  645. .a {
  646.  
  647. margin: 10px 0px 10px 0px;
  648. padding: 10px;
  649. border: 1px {select:post border} {color:post border};
  650. max-height: 150px;
  651. min-height: 44px;
  652. overflow: auto;
  653. overflow-x: hidden;
  654. {block:IfRoundBorder}
  655. border-radius: 4px;
  656. {/block:IfRoundBorder}
  657. }
  658.  
  659.  
  660. .omg img {
  661. border: 1px {select:post border} {color:post border};
  662. {block:IfRoundBorder}
  663. border-radius: 4px;
  664. {/block:IfRoundBorder}
  665.  
  666. }
  667. /* where the notes show on the permalink page */
  668.  
  669. #permanotes {
  670. margin-top: 20px;
  671. margin-bottom: 10px;
  672. }
  673.  
  674. #permanotes ol.notes {
  675. list-style-type: none;
  676. margin: 0;
  677. padding: 0;}
  678.  
  679. #permanotes img.avatar {
  680. margin-right: 10px;
  681. border: 1px solid {color:font};
  682. display: inline;
  683. width: 16px;
  684. height: 16px;}
  685.  
  686. /* next page/previous page */
  687.  
  688. .pagination {
  689. text-align: right;
  690. margin-top: 5px;
  691. margin-bottom: 5px;
  692. width: 400px;
  693.  
  694. }
  695.  
  696. .pagination a {
  697. color: {color:links};
  698.  
  699. }
  700.  
  701.  
  702.  
  703. /* quote stylization */
  704.  
  705. .quote {
  706. text-align: justify;
  707. font-style: italic;
  708. font-weight: bold;
  709. font-size: 140%;
  710. line-height: 130%;}
  711.  
  712. .source {
  713. text-align: right;}
  714.  
  715. /* audio stuff */
  716.  
  717. .spotify_audio_player {
  718. height:80px!important;
  719. width:100%!important;}
  720.  
  721. .soundcloud_audio_player {
  722. height:150px!important;
  723. width:100%!important;}
  724.  
  725. /* playbutton background */
  726.  
  727. .trackback {
  728. position: absolute;
  729. left: 20px;
  730. top: 20px;
  731. width: 19px;
  732. height: 19px;
  733. background-color: #fff;
  734. padding: 10px;
  735. opacity: .4;}
  736.  
  737. /* playbutton */
  738.  
  739. .pressplay{
  740. position: relative;
  741. width: 25px;
  742. height: 25px;
  743. overflow: hidden;
  744. left: -6px;
  745. top: -3px;}
  746.  
  747. /* album img container */
  748.  
  749. .albumpic {
  750. position: absolute;
  751. left: 0px;
  752. top: 0px;
  753. width: 79px;
  754. height: 79px;}
  755.  
  756. /* album img */
  757.  
  758. .albumpic img {
  759. width: 100%;
  760. height: auto;
  761. border: 1px solid {color:font};}
  762.  
  763. /* track info ye */
  764.  
  765. .trackinfo {
  766. width: auto;
  767. display:inline-block;
  768. margin-left: 90px;
  769. min-height: 85px;}
  770.  
  771. /* makes both audio player & track info inline */
  772.  
  773. .audiowrapper {
  774. position: relative; display:inline-block;}
  775.  
  776. /* obvi the credit link at the bottom corner */
  777.  
  778. #credit { position: fixed; bottom: 15px; left: 15px; font-size: 26px;}
  779.  
  780.  
  781. </style>
  782.  
  783. {block:IfRedirect}
  784. <script>
  785. if(window.location.pathname == '/') location.replace('{text:Redirect Link}');
  786. </script>
  787. {block:IfRedirect}
  788.  
  789.  
  790.  
  791. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  792.  
  793. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  794.  
  795. <script>
  796. (function($){
  797. $(document).ready(function(){
  798. $("[title]").style_my_tooltips();
  799. });
  800. })(jQuery);
  801. </script>
  802.  
  803. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  804.  
  805.  
  806.  
  807. </head>
  808.  
  809.  
  810. <div id="content">
  811.  
  812. <center>
  813.  
  814.  
  815. <div class="container">
  816.  
  817. {block:IfNotHideLinks}
  818. <div class="linkz">
  819. {block:IfPxlLinkz}
  820. <a href="{text:link 1 URL}"><img src="{image:link1}" style="display: inline-block; margin: 0 5px 0 5px;"></a>
  821. <a href="{text:link 2 URL}"><img src="{image:link2}" style="display: inline-block; margin: 0 5px 0 5px;"></a>
  822. <a href="{text:link 3 URL}"><img src="{image:link3}" style="display: inline-block; margin: 0 5px 0 5px;"></a>
  823. <a href="{text:link 4 URL}"><img src="{image:link4}" style="display: inline-block; margin: 0 5px 0 5px;"></a>
  824. {/block:IfPxlLinkz}
  825.  
  826. {block:IfNotPxlLinkz}
  827. <a href="{text:link 1 URL}">{text:link 1}</a> <img src="{image:link box pixel}" style="display: inline-block; margin: 0 5px 0 5px;"> <a href="{text:link 2 URL}">{text:link 2}</a> <img src="{image:link box pixel}" style="display: inline-block; margin: 0 5px 0 5px;"> <a href="{text:link 3 URL}">{text:link 3}</a> <img src="{image:link box pixel}" style="display: inline-block; margin: 0 5px 0 5px;"> <a href="{text:link 4 URL}">{text:link 4}</a>
  828. {/block:IfNotPxlLinkz}
  829. </div>
  830. {/block:IfNotHideLinks}
  831.  
  832. {block:Posts}
  833.  
  834. <div class="posts">
  835.  
  836.  
  837. {block:Text}
  838. {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
  839. {Body}
  840. {/block:Text}
  841.  
  842. {block:Quote}
  843. <div class="quote">"{Quote}"</div>
  844. {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
  845. {/block:Quote}
  846.  
  847. {block:Link}
  848. <big><a href="{URL}">{Name}</a></big>
  849. {block:Description}{Description}{/block:Description}
  850. {/block:Link}
  851.  
  852. {block:Chat}
  853. {block:Title}{Title}{/block:Title}
  854. {block:Lines}
  855. <div class="{Alt} user_{UserNumber}">
  856. {block:Label}{Label}{/block:Label} {Line}
  857. </div>
  858. {/block:Lines}
  859. {/block:Chat}
  860.  
  861.  
  862. {block:Answer}
  863. <div class="omg">
  864. <img src="{AskerPortraitURL-64}" style=" border: 1px {select:post border} {color:post border}; margin-right: 10px; float: left; display: block;"></div>
  865.  
  866. <div class="q">{Asker} said: {Question}</div>
  867.  
  868.  
  869. {block:Answerer}
  870. <div class="omg">
  871. <img src="{AnswererPortraitURL-64}" style="float: right; margin-top: 10px; margin-left: 10px; vertical-align: top; display: block; "></div>
  872. {/block:Answerer}
  873.  
  874. <div class="a">{Answer}</div>
  875.  
  876. {/block:Answer}
  877.  
  878.  
  879. {block:Photo}
  880. {LinkOpenTag}<div class="pic"><img src="{PhotoURL-400}" alt="{Permalink}"/></div>{LinkCloseTag}
  881.  
  882.  
  883.  
  884.  
  885. {/block:Photo}
  886.  
  887. {block:Photoset}
  888. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  889. {/block:Photoset}
  890.  
  891. {block:Video}
  892. {Video-400}
  893. {/block:Video}
  894.  
  895. {block:AudioPlayer}
  896. <div class="audiowrapper">
  897. {block:AlbumArt}
  898. <div class="albumpic"><img src="{AlbumArtURL}"></div>
  899. {/block:AlbumArt}
  900. <div class="trackback">
  901. <div class="pressplay">
  902. {AudioPlayer}
  903. </div></div>
  904. <div class="trackinfo">
  905. {block:TrackName}{TrackName}{/block:TrackName}<br>
  906. {block:Artist}<b>{Artist}</b>{/block:Artist}<br>
  907. {block:Album}<i>{Album}</i>{/block:Album}<br>
  908. </div></div>
  909. {/block:AudioPlayer}
  910.  
  911. {block:ifNotHideCaption}
  912. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  913. {/block:ifNotHideCaption}
  914.  
  915.  
  916. {block:IndexPage}<div id="notes">
  917. <a href="{Permalink}" style="float: left;" data-toggle="tooltip" title="{TimeAgo}"><span class="material-icons">
  918. schedule
  919. </span></a>
  920.  
  921.  
  922. <a href="{Permalink}" data-toggle="tooltip" title="{NoteCount}%">
  923. {block:ifNotNotesPxl}<span class="material-icons">
  924. star_outline
  925. </span>{/block:ifNotNotesPxl}
  926. {block:ifNotesPxl}<img src="{image:notes pxl}">{/block:ifNotesPxl}
  927. </a>
  928.  
  929.  
  930. <a href="{ReblogURL}" style="float: right;" data-toggle="tooltip" title="Reblog?"><span class="material-icons">
  931. refresh
  932. </span></a>
  933. </div>{/block:IndexPage}
  934.  
  935. {block:IndexPage}{block:ifNotHideTags}
  936. <div class="tags">
  937. {block:RebloggedFrom}
  938. <a href="{ReblogParentURL}" data-toggle="tooltip" title="via {ReblogParentName}"><span class="material-icons">
  939. launch
  940. </span></a>{/block:RebloggedFrom}{block:ContentSource}
  941. <a href="{SourceURL}" data-toggle="tooltip" title="source {SourceTitle}"><span class="material-icons">
  942. copyright
  943. </span></a>
  944. {/block:ContentSource}
  945.  
  946. <p>{block:HasTags}{block:Tags}
  947. <a href="{TagURL}">#{Tag}</a>
  948. {/block:Tags}{/block:HasTags}</p></div>
  949. {/block:ifNotHideTags}{/block:IndexPage}
  950.  
  951.  
  952. {block:PermalinkPage}
  953. {block:ifHideCaption}
  954. {block:Caption}{Caption}{/block:Caption}
  955. {/block:ifHideCaption}
  956.  
  957. <p>
  958. {block:RebloggedFrom}
  959. <a href="{ReblogParentURL}" data-toggle="tooltip" title="via {ReblogParentName}"><span class="material-icons">
  960. launch
  961. </span></a><br>{/block:RebloggedFrom}{block:ContentSource}
  962. <a href="{SourceURL}" data-toggle="tooltip" title="source {SourceTitle}"><span class="material-icons">
  963. copyright
  964. </span></a><br>
  965. {/block:ContentSource}
  966. {block:NoteCount}<span class="material-icons">
  967. favorite_border
  968. </span> <a href="{Permalink}">{NoteCount}%</a><br>{/block:NoteCount}
  969. {block:HasTags}<span class="material-icons">
  970. tag
  971. </span> {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}<br>{/block:HasTags}
  972. </p>
  973.  
  974. {block:NoteCount}<div id="permanotes">
  975. {block:PostNotes}{PostNotes}{/block:PostNotes}
  976. </div>{/block:NoteCount}
  977. {/block:PermalinkPage}
  978. </div>
  979. {/block:Posts}
  980.  
  981. {block:IndexPage}<div class="pagination">
  982. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}" style="float:left;"><span class="material-icons">
  983. arrow_back
  984. </span></a>{/block:PreviousPage}{block:NextPage}
  985. <a href="{NextPage}"><span class="material-icons">
  986. arrow_forward
  987. </span></a></p>{/block:NextPage}{/block:Pagination}
  988. </div>{/block:IndexPage}
  989.  
  990.  
  991. </div>
  992.  
  993. <div id="sidebar">
  994.  
  995. <div class="item e6">
  996. <div class="tit">{text:txtbox1}</div>
  997. <div class="text6">
  998. <div class="desc">{text:txtbox2}</div>
  999. </div>
  1000. <div class="sb">
  1001. <center><a href="/">
  1002.  
  1003. <img src="{image:icon}">
  1004.  
  1005. </a></center>
  1006. </div>
  1007.  
  1008. {block:IfNotHideTitle}<div class="title"><a href="/">{text:title}</a></div>
  1009. {/block:IfNotHideTitle}
  1010. </div>
  1011.  
  1012.  
  1013.  
  1014.  
  1015. </div>
  1016. </center>
  1017. </div>
  1018. </div>
  1019.  
  1020. <div id="credit">
  1021. <a href="https://ps1.tumblr.com/" data-toggle="tooltip" title="@ps1"><span class="material-icons" style="font-size: 24px;">
  1022. games
  1023. </span></a>
  1024. </div>
  1025. </body>
  1026. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement