API tools faq
paste
spirkism

Theme #22: Professor X

spirkism
Feb 18th, 2015
572
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.39 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME #22: Professor X
  3. by Phil (spirkism/spirkthemes)
  4.  
  5. Rules:
  6. - please do not steal/redistribute, I spent quite a bit of time coding this
  7. - also don't remove the credit please, that would make me very sad :(
  8. - don't use as a base code, there are plenty of those out there
  9. - don't just take snippets and reuse them either
  10. - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
  11. - tell me if there are any bugs or if you have any questions, need help with the theme or want a detail differently - I'll see what I can do for you ;)
  12. And now: enjoy! :)
  13. -->
  14.  
  15.  
  16. <!DOCTYPE html>
  17.  
  18. <head>
  19.  
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}" />
  24.  
  25. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  26.  
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  28.  
  29. {block:ifInfiniteScroll}
  30. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  31. {/block:ifInfiniteScroll}
  32.  
  33.  
  34. <link href='http://fonts.googleapis.com/css?family=Codystar|Kelly+Slab|Iceland|Megrim|Cinzel+Decorative|Wallpoet' rel='stylesheet' type='text/css'>
  35.  
  36.  
  37. <meta name="color:Background" content="#fff" />
  38. <meta name="color:Text" content="#2e2e2e" />
  39. <meta name="color:Links" content="#DF8209" />
  40. <meta name="color:Links hover" content="#FFA52E" />
  41. <meta name="color:X" content="#B0B0B0" />
  42. <meta name="color:Sidebar link background" content="#FFA52E" />
  43. <meta name="color:Sidebar link background hover" content="#DF8209" />
  44. <meta name="color:Sidebar link text" content="#3E3E3E" />
  45. <meta name="color:Sidebar link text hover" content="#fff" />
  46. <meta name="color:Block background" content="#FFE8A1" />
  47. <meta name="color:Posts" content="#ffffff" />
  48. <meta name="color:Border" content="#CBCBCB" />
  49. <meta name="color:Post insides" content="#FFE8A1" />
  50. <meta name="color:Header" content="#FFA52E" />
  51. <meta name="color:Title" content="#fff" />
  52. <meta name="color:Title hover" content="#2e2e2e" />
  53. <meta name="color:Subtitle" content="#2e2e2e" />
  54. <meta name="color:Header link background" content="#fff" />
  55. <meta name="color:Header link background hover" content="#2e2e2e" />
  56. <meta name="color:Header link text" content="#2e2e2e" />
  57. <meta name="color:Header link text hover" content="#fff" />
  58.  
  59.  
  60. <meta name="image:Sidebar 1" content="http://i.imgur.com/k3XhJXS.png" />
  61. <meta name="image:Sidebar 2" content="http://i.imgur.com/k3XhJXS.png" />
  62. <meta name="image:Sidebar 3" content="http://i.imgur.com/k3XhJXS.png" />
  63. <meta name="image:Sidebar 4" content="http://i.imgur.com/k3XhJXS.png" />
  64.  
  65.  
  66. <meta name="text:Body font size" content="12px" />
  67. <meta name="text:Subtitle" content="We were supposed to protect them!" />
  68. <meta name="text:Header link 1 url" content="/" />
  69. <meta name="text:Header link 1 text" content="home" />
  70. <meta name="text:Header link 2 url" content="/" />
  71. <meta name="text:Header link 2 text" content="ask" />
  72. <meta name="text:Description button text" content="desc" />
  73. <meta name="text:Link 1 url" content="/" />
  74. <meta name="text:Link 1 text" content="link" />
  75. <meta name="text:Link 2 url" content="/" />
  76. <meta name="text:Link 2 text" content="link" />
  77. <meta name="text:Link 3 url" content="/" />
  78. <meta name="text:Link 3 text" content="link" />
  79. <meta name="text:Link 4 url" content="/" />
  80. <meta name="text:Link 4 text" content="link" />
  81. <meta name="text:Link 5 url" content="/" />
  82. <meta name="text:Link 5 text" content="link" />
  83. <meta name="text:Link 6 url" content="/" />
  84. <meta name="text:Link 6 text" content="link" />
  85. <meta name="text:Link 7 url" content="/" />
  86. <meta name="text:Link 7 text" content="link" />
  87. <meta name="text:Link 8 url" content="/" />
  88. <meta name="text:Link 8 text" content="link" />
  89.  
  90.  
  91. <meta name="if:Right sidebar" content="1" />
  92. <meta name="if:Infinite scroll" content="0" />
  93. <meta name="if:500px posts" content="1" />
  94.  
  95. <meta name="select:Special font" content="iceland" title="Iceland" />
  96. <meta name="select:Special font" content="codystar" title="Codystar" />
  97. <meta name="select:Special font" content="kellyslab" title="Kelly Slab" />
  98. <meta name="select:Special font" content="cinzel" title="Cinzel Decorative" />
  99. <meta name="select:Special font" content="wallpoet" title="Wallpoet" />
  100.  
  101. <meta name="select:Title font" content="megrim" title="Megrim" />
  102. <meta name="select:Title font" content="iceland" title="Iceland" />
  103. <meta name="select:Title font" content="codystar" title="Codystar" />
  104. <meta name="select:Title font" content="kellyslab" title="Kelly Slab" />
  105. <meta name="select:Title font" content="cinzel" title="Cinzel Decorative" />
  106. <meta name="select:Title font" content="wallpoet" title="Wallpoet" />
  107.  
  108. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  109. <meta name="select:Index tags" content="no-tags" title="no tags" />
  110. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  111. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  112. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  113. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  114.  
  115.  
  116.  
  117.  
  118. <meta name="font:Body font" content="Arial, Helvetica, sans-serif"/>
  119.  
  120. <script>
  121.  
  122. $(document).ready(function(){
  123. $('#descbutton').click(function(){
  124. $('#desc').slideToggle(1000);
  125. });
  126.  
  127. $('#desc').click(function(){
  128. $(this).slideToggle(1000);
  129. });
  130.  
  131. });
  132.  
  133. </script>
  134.  
  135.  
  136. <style type="text/css">
  137.  
  138. ::-webkit-scrollbar {
  139. width:5px;height: 5px;background: {color:Header};
  140. }
  141.  
  142. ::-webkit-scrollbar-thumb {
  143. background: {color:X};
  144. }
  145.  
  146. iframe#tumblr_controls {
  147. position:fixed;-webkit-filter:invert(100%);opacity:0.5;
  148. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  149. -o-transition: 0.7s ease;-moz-transition: 0.7s ease;}
  150.  
  151.  
  152. div#qTip {
  153. margin-left: 5px;
  154. margin-top: -5px;
  155. text-transform: lowercase;
  156. font-size: 0.85em;
  157. line-height: 12px;
  158. display: none;
  159. text-align: center;
  160. position: absolute;
  161. z-index: 9999999999999999;
  162. background: #fff;
  163. padding: 2px 3px;
  164. color: {color:Text};
  165. max-width: 100px;
  166. height: auto;
  167. border: 1.3px double {color:Border};
  168. -webkit-transition: all 0.1s ease-out;
  169. -moz-transition: all 0.1s ease-out;
  170. -o-transition: all 0.1s ease-out;
  171. }
  172.  
  173.  
  174. body {
  175. background-color: {color:Background};
  176. margin: 0 auto;
  177. font: {text:Body font size} {font:Body font};
  178. word-wrap:break-word;
  179. }
  180.  
  181. a:link, a:active, a:visited {
  182. text-decoration: none;
  183. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  184. -o-transition: 0.5s ease;
  185. -moz-transition: 0.5s ease;
  186. color:{color:Links};
  187. }
  188.  
  189. a:hover {
  190. color:{color:Links hover};
  191. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  192. -o-transition: 0.5s ease;
  193. -moz-transition: 0.5s ease;
  194. }
  195.  
  196. /* FONTS */
  197.  
  198. .iceland {
  199. font-family: 'Iceland', Arial, sans-serif;
  200. }
  201.  
  202. .wallpoet {
  203. font-family: 'Wallpoet', Arial, sans-serif;
  204. }
  205.  
  206. .cinzel {
  207. font-family: 'Cinzel Decorative', Arial, sans-serif;
  208. }
  209.  
  210. .kellyslab {
  211. font-family: 'Kelly Slab', Arial, sans-serif;
  212. }
  213.  
  214. .codystar {
  215. font-family: 'Codystar', Arial, sans-serif;
  216. }
  217.  
  218. .megrim {
  219. font-family: 'Megrim', Arial, sans-serif;
  220. }
  221.  
  222.  
  223.  
  224.  
  225. #header {
  226. {block:If500pxPosts}
  227. width: 600px;
  228. {/block:If500pxPosts}
  229. {block:IfNot500pxPosts}
  230. width: 500px;
  231. {/block:IfNot500pxPosts}
  232. margin-left: 290px;
  233. top: 0;
  234. background-color: {color:Header};
  235. height: 100px;
  236. position: fixed;
  237. z-index: 999;
  238. opacity: 0.7;
  239.  
  240. }
  241.  
  242. #titlebox {
  243. {block:If500pxPosts}
  244. width: 380px;
  245. {/block:If500pxPosts}
  246. {block:IfNot500pxPosts}
  247. width: 280px;
  248. {/block:IfNot500pxPosts}
  249. position: absolute;
  250. margin-left: 110px;
  251. }
  252.  
  253. #title {
  254. font-size: 2.3em;
  255. font-weight: bold;
  256. text-align: center;
  257. margin-top: 15px;
  258. text-shadow: 2px 2px 2px black;
  259. }
  260.  
  261. #subtitle {
  262. text-align: center;
  263. font-size: 1.4em;
  264. margin-top: 5px;
  265. color: {color:Subtitle};
  266. }
  267.  
  268. #title a {
  269. color: {color:Title};
  270. -webkit-transition:all 0.5s ease-out;
  271. -moz-transition:all 0.5s ease-out;
  272. -ms-transition:all 0.5s ease-out;
  273. -o-transition:all 0.5s ease-out;
  274. transition:all 0.5s ease-out;
  275. }
  276.  
  277. #title a:hover {
  278. color: {color:Title hover};
  279. -webkit-transition:all 0.5s ease-out;
  280. -moz-transition:all 0.5s ease-out;
  281. -ms-transition:all 0.5s ease-out;
  282. -o-transition:all 0.5s ease-out;
  283. transition:all 0.5s ease-out;
  284. }
  285.  
  286.  
  287.  
  288. #headerlinks {
  289. position: absolute;
  290. margin-left: 30px;
  291. width: 100px;
  292. margin-top: 15px;
  293. }
  294.  
  295.  
  296. .headerlink {
  297. background-color: {color:Header link background};
  298. color: {color:Header link text};
  299. width: 70px;
  300. height: 20px;
  301. line-height: 20px;
  302. text-align: center;
  303. margin-bottom: 3px;
  304. float: left;
  305. font-size: 1.1em;
  306. border-radius: 10px;
  307. -webkit-transition:all 0.5s ease-out;
  308. -moz-transition:all 0.5s ease-out;
  309. -ms-transition:all 0.5s ease-out;
  310. -o-transition:all 0.5s ease-out;
  311. transition:all 0.5s ease-out;
  312. }
  313.  
  314. .headerlink:hover {
  315. background-color: {color:Header link background hover};
  316. color: {color:Header link text hover};
  317. -webkit-transition:all 0.5s ease-out;
  318. -moz-transition:all 0.5s ease-out;
  319. -ms-transition:all 0.5s ease-out;
  320. -o-transition:all 0.5s ease-out;
  321. transition:all 0.5s ease-out;
  322. }
  323.  
  324.  
  325. #x:hover #xcircle{
  326. -webkit-transform:rotate(360deg);
  327. -moz-transform:rotate(360deg);
  328. -ms-transform:rotate(360deg);
  329. -o-transform:rotate(360deg);
  330. transform:rotate(360deg);
  331. }
  332.  
  333.  
  334. #x:hover #x1{
  335. -webkit-transform:rotate(360deg);
  336. -moz-transform:rotate(360deg);
  337. -ms-transform:rotate(360deg);
  338. -o-transform:rotate(360deg);
  339. transform:rotate(360deg);
  340. transform:rotate(45deg);
  341. -ms-transform:rotate(45deg);
  342. -webkit-transform:rotate(45deg);
  343. z-index: -5;
  344. }
  345.  
  346.  
  347. #x:hover #x2{
  348. -webkit-transform:rotate(360deg);
  349. -moz-transform:rotate(360deg);
  350. -ms-transform:rotate(360deg);
  351. -o-transform:rotate(360deg);
  352. transform:rotate(360deg);
  353. transform:rotate(-45deg);
  354. -ms-transform:rotate(-45deg);
  355. -webkit-transform:rotate(-45deg);
  356. z-index: -5;
  357. }
  358.  
  359. #x:hover #sblinks {
  360. opacity: 1;
  361. z-index: 5;
  362. margin-left:62px;
  363. -webkit-transition:all 1.0s ease-out;
  364. -moz-transition:all 1.0s ease-out;
  365. -ms-transition:all 1.0s ease-out;
  366. -o-transition:all 1.0s ease-out;
  367. transition:all 1.0s ease-out;
  368. }
  369.  
  370. #xcircle {
  371. position: fixed;
  372. border: 20px solid {color:X};
  373. border-radius: 200px;
  374. width: 150px;
  375. height: 150px;
  376. margin-left: 50px;
  377. top: 50%;
  378. margin-top: -100px;
  379. background-color: transparent;
  380. z-index: 2;
  381. -webkit-transition:all 0.7s ease-out;
  382. -moz-transition:all 0.7s ease-out;
  383. -ms-transition:all 0.7s ease-out;
  384. -o-transition:all 0.7s ease-out;
  385. transition:all 0.7s ease-out;
  386.  
  387. }
  388.  
  389.  
  390.  
  391. #x1 {
  392. position: absolute;
  393. margin-left: 65px;
  394. width: 20px;
  395. height: 160px;
  396. margin-top: -5px;
  397. background-color: {color:X};
  398. transform:rotate(45deg);
  399. -ms-transform:rotate(45deg);
  400. -webkit-transform:rotate(45deg);
  401. z-index: 1;
  402. -webkit-transition:all 0.7s ease-out;
  403. -moz-transition:all 0.7s ease-out;
  404. -ms-transition:all 0.7s ease-out;
  405. -o-transition:all 0.7s ease-out;
  406. transition:all 0.7s ease-out;
  407. }
  408.  
  409.  
  410.  
  411.  
  412. #x2 {
  413. position: absolute;
  414. width: 20px;
  415. height: 160px;
  416. margin-left: 65px;
  417. margin-top: -5px;
  418. background-color: {color:X};
  419. transform:rotate(-45deg);
  420. -ms-transform:rotate(-45deg);
  421. -webkit-transform:rotate(-45deg);
  422. z-index:1;
  423. -webkit-transition:all 0.7s ease-out;
  424. -moz-transition:all 0.7s ease-out;
  425. -ms-transition:all 0.7s ease-out;
  426. -o-transition:all 0.7s ease-out;
  427. transition:all 0.7s ease-out;
  428. }
  429.  
  430. #hovernotice {
  431. font-size: 0.85em;
  432. color: {color:Text};
  433. font-family: 'Iceland', sans-serif;
  434. top: 50%;
  435. margin-top: 90px;
  436. margin-left: 175px;
  437. position: fixed;
  438. opacity: 0.5;
  439. -webkit-transition:all 0.5s ease-out;
  440. -moz-transition:all 0.5s ease-out;
  441. -ms-transition:all 0.5s ease-out;
  442. -o-transition:all 0.5s ease-out;
  443. transition:all 0.5s ease-out;
  444. }
  445.  
  446. #x:hover #hovernotice {
  447. opacity: 0;
  448. -webkit-transition:all 0.5s ease-out;
  449. -moz-transition:all 0.5s ease-out;
  450. -ms-transition:all 0.5s ease-out;
  451. -o-transition:all 0.5s ease-out;
  452. transition:all 0.5s ease-out;
  453. }
  454.  
  455.  
  456. #sblinks {
  457. width: 200px;
  458. height: 150px;
  459. float: left;
  460. position: fixed;
  461. top: 50%;
  462. margin-top: -58px;
  463. margin-left: -153px;
  464. z-index: 1;
  465. opacity: 0;
  466. -webkit-transition:all 0.5s ease-out;
  467. -moz-transition:all 0.5s ease-out;
  468. -ms-transition:all 0.5s ease-out;
  469. -o-transition:all 0.5s ease-out;
  470. transition:all 0.5s ease-out;
  471.  
  472. }
  473.  
  474. .sblink {
  475. background-color: {color:Sidebar link background};
  476. color: {color:Sidebar link text};
  477. width: 70px;
  478. height: 20px;
  479. line-height: 20px;
  480. text-align: center;
  481. font-size: 1.1em;
  482. padding: 2px;
  483. margin-bottom: 3px;
  484. margin-left: 5px;
  485. float: left;
  486. position: relative;
  487. border-radius: 10px;
  488. box-shadow: 3px 3px 3px #555555;
  489. -webkit-transition:all 0.5s ease-out;
  490. -moz-transition:all 0.5s ease-out;
  491. -ms-transition:all 0.5s ease-out;
  492. -o-transition:all 0.5s ease-out;
  493. transition:all 0.5s ease-out;
  494. }
  495.  
  496. .sblink:hover {
  497. background-color: {color:Sidebar link background hover};
  498. color: {color:Sidebar link text hover};
  499. -webkit-transition:all 0.5s ease-out;
  500. -moz-transition:all 0.5s ease-out;
  501. -ms-transition:all 0.5s ease-out;
  502. -o-transition:all 0.5s ease-out;
  503. transition:all 0.5s ease-out;
  504. }
  505.  
  506.  
  507. #block {
  508. background-color: {color:Block background};
  509. {block:If500pxPosts}
  510. width: 600px;
  511. {/block:If500pxPosts}
  512. {block:IfNot500pxPosts}
  513. width: 500px;
  514. {/block:IfNot500pxPosts}
  515. margin-left: 290px;
  516. height: 100%;
  517. z-index: -1;
  518. margin-top: -100px;
  519. position: fixed;
  520. }
  521.  
  522.  
  523.  
  524. #prevpage {
  525. width: 25px;
  526. height: 25px;
  527. line-height: 25px;
  528. {block:IfRightSidebar}
  529. top: 50%;
  530. margin-top: 185px;
  531. margin-left: 928px;
  532. {/block:IfRightSidebar}
  533. {block:IfNotRightSidebar}
  534. top: 50%;
  535. margin-left: 60px;
  536. margin-top: 100px;
  537. {/block:IfNotRightSidebar}
  538. background-color: {color:Block background};
  539. border: none;
  540. border-radius: 100px;
  541. text-align: center;
  542. position: fixed;
  543.  
  544. }
  545.  
  546. #nextpage {
  547. text-align: center;
  548. line-height: 25px;
  549. width: 25px;
  550. height: 25px;
  551. position: fixed;
  552. {block:IfRightSidebar}
  553. margin-left: 1045px;
  554. top: 50%;
  555. margin-top: 185px;
  556. {/block:IfRightSidebar}
  557. {block:IfNotRightSidebar}
  558. top: 50%;
  559. margin-left: 200px;
  560. margin-top: 100px;
  561. {/block:IfNotRightSidebar}
  562. background-color: {color:Block background};
  563. border: none;
  564. border-radius: 100px;
  565.  
  566. }
  567.  
  568. #prevpage a {
  569. font-size: 22px;
  570. line-height: 25px;
  571. text-align: center;
  572. }
  573.  
  574. #nextpage a {
  575. font-size: 22px;
  576. line-height: 25px;
  577. text-align: center;
  578. }
  579.  
  580. #prevpage:hover {
  581. opacity: 1;
  582.  
  583. }
  584.  
  585. #nextpage:hover {
  586. opacity: 1;
  587. }
  588.  
  589.  
  590.  
  591. #sb2imgs {
  592. position: fixed;
  593. {block:If500pxPosts}
  594. margin-left: 990px;
  595. {/block:If500pxPosts}
  596. {block:IfNot500pxPosts}
  597. margin-left: 890px;
  598. {/block:IfNot500pxPosts}
  599. top: 50%;
  600. margin-top: -220px;
  601. -webkit-transition: 0.2s ease;transition: 0.2s ease;
  602. -o-transition: 0.2s ease;
  603. -moz-transition: 0.2s ease;
  604. }
  605.  
  606. #sidebar2:hover #sb2imgs {
  607. -webkit-filter: blur(1px) grayscale(100%);
  608. -moz-filter: blur(1px) grayscale(100%);
  609. -o-filter: blur(1px) grayscale(100%);
  610. -ms-filter: blur(1px) grayscale(100%);
  611. filter: blur(1px) grayscale(100%);
  612. -webkit-transition: 0.2s ease;transition: 0.2s ease;
  613. -o-transition: 0.2s ease;
  614. -moz-transition: 0.2s ease;
  615. }
  616.  
  617. #sidebar2:hover #sb2texts {
  618. opacity: 0.8;
  619. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  620. -o-transition: 0.5s ease;
  621. -moz-transition: 0.5s ease;
  622. }
  623.  
  624. #sbimg2 {
  625. position: absolute;
  626. margin-left: -50px;
  627. margin-top: -25px;
  628. }
  629.  
  630.  
  631. #sbimg3 {
  632. position: absolute;
  633. margin-left: 20px;
  634. margin-top: 75px;
  635. }
  636.  
  637.  
  638. #sbimg4 {
  639. position: absolute;
  640. margin-left: -50px;
  641. margin-top: 175px;
  642. }
  643.  
  644. #sidebar2 img {
  645. width: 100px;
  646. height: 100px;
  647. padding: 10px;
  648. border: 1 solid {color:Border};
  649. background-color: {color:X};
  650. }
  651.  
  652.  
  653.  
  654.  
  655. #desc {
  656. {block:If500pxPosts}
  657. width: 580px;
  658. {/block:If500pxPosts}
  659. {block:IfNot500pxPosts}
  660. width: 480px;
  661. {/block:IfNot500pxPosts}
  662. height: 80px;
  663. margin-left: 290px;
  664. margin-top: -100px;
  665. position: fixed;
  666. background-color: {color:Block background};
  667. color: {color:Text};
  668. overflow:hidden;
  669. padding: 15px 10px 15px 10px;
  670. text-align:center;
  671. display: none;
  672. font-size: 0.9em;
  673. z-index: 99999999999999999999999999999999999;
  674. }
  675.  
  676.  
  677.  
  678.  
  679. #descbutton {
  680. cursor: help;
  681. }
  682.  
  683.  
  684. /*CONTENT THINGS */
  685.  
  686. #content {
  687. {block:If500pxPosts}
  688. width: 560px;
  689. {/block:If500pxPosts}
  690. {block:IfNot500pxPosts}
  691. width: 460px;
  692. {/block:IfNot500pxPosts}
  693. background-color: none;
  694. padding: 20px 0;
  695. color: {color:Text};
  696. overflow: hidden;
  697. margin-left: 330px;
  698. margin-top: 100px;
  699. position: relative;
  700. }
  701.  
  702. #content a {
  703. color: {color:Links};
  704. text-decoration: none;
  705. }
  706.  
  707. #content a:hover {
  708. color: {color:Links hover};
  709. }
  710.  
  711. #content blockquote {
  712. border-left: solid 2px #505050;
  713. margin: 0;
  714. padding-left: 10px;
  715. }
  716.  
  717. img {
  718. border: 0;
  719. max-width: 100%;
  720. }
  721.  
  722.  
  723. #content #posts {
  724. background-color: {color:Posts};
  725. {block:If500pxPosts}
  726. width: 500px;
  727. {/block:If500pxPosts}
  728. {block:IfNot500pxPosts}
  729. width: 400px;
  730. {/block:IfNot500pxPosts}
  731. height: auto;
  732. margin: 0 0 80px 0;
  733. padding: 10px 10px 10px 10px;
  734. position: relative;
  735. border-radius: 10px;
  736. }
  737.  
  738.  
  739. #content #posts .title {
  740. font-size: 1.5em;
  741. }
  742.  
  743.  
  744.  
  745. /* PERMALINK STUFF */
  746.  
  747. #permalink {
  748. font-size: 0.85em;
  749. margin-top: 2px;
  750. }
  751.  
  752. .no-tags {
  753. display: none;
  754. font-size: 0.85em;
  755. {block:If500pxPosts}
  756. width: 500px;
  757. {/block:If500pxPosts}
  758. {block:IfNot500pxPosts}
  759. width: 400px;
  760. {/block:IfNot500pxPosts}
  761. text-align: center;
  762. margin-top: 10px;
  763. position: absolute;
  764. }
  765.  
  766. .no-tags .comma:last-child {
  767. display: none;
  768. }
  769.  
  770. .hover-tags {
  771. opacity: 0;
  772. font-size: 0.85em;
  773. {block:If500pxPosts}
  774. width: 500px;
  775. {block:If500pxPosts}
  776. {block:IfNot500pxPosts}
  777. width: 400px;
  778. {/block:IfNot500pxPosts}
  779. text-align: center;
  780. margin-top: 15px;
  781. position: absolute;
  782. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  783. -o-transition: 0.5s ease;
  784. -moz-transition: 0.5s ease;
  785. }
  786.  
  787. .hover-tags .comma:last-child {
  788. display: none;
  789. }
  790.  
  791. #content #posts:hover .hover-tags {
  792. opacity: 1;
  793. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  794. -o-transition: 0.5s ease;
  795. -moz-transition: 0.5s ease;
  796. }
  797.  
  798. .fixed-tags {
  799. font-size: 0.85em;
  800. {block:If500pxPosts}
  801. width: 500px;
  802. {/block:If500pxPosts}
  803. {block:IfNot500pxPosts}
  804. width: 400px;
  805. {/block:IfNot500pxPosts}
  806. text-align: center;
  807. margin-top: 15px;
  808. position: absolute;
  809. }
  810.  
  811. .fixed-tags .comma:last-child {
  812. display: none;
  813. }
  814.  
  815.  
  816. #reblogged {
  817. position: relative;
  818. font-size: 0.85em;
  819. overflow: hidden;
  820. }
  821.  
  822.  
  823. /* PERMALINK PAGE THINGS */
  824.  
  825. #content #notecontainer {
  826. margin: 20px auto;
  827. {block:If500pxPosts}
  828. width: 460px;
  829. {/block:If500pxPosts}
  830. {block:IfNot500pxPosts}
  831. width: 360px;
  832. {/block:IfNot500pxPosts}
  833. font-size: 11px;
  834. }
  835.  
  836.  
  837. #content #notecontainer ol.notes {
  838. list-style-type: none;
  839. margin: 1;
  840. padding: 2;
  841. }
  842.  
  843. #content #notecontainer img.avatar {
  844. margin-right: 10px;
  845. width: 16px;
  846. height: 16px;
  847. margin: 1;
  848. padding: 2;
  849. }
  850.  
  851. #content #posts #tagsbox {
  852.  
  853. padding: 1px 4px 3px 4px;
  854. margin-top: 15px;
  855. background-color: {color:Post insides};
  856. border-radius: 5px;
  857. box-shadow: inset 1px 1px 3px gray;
  858. text-align: center;
  859. }
  860.  
  861. /* POST STUFF */
  862.  
  863. .linkpost {
  864. }
  865.  
  866. .linktitle {
  867. padding: 5px;
  868. background-color: {color:Post insides};
  869. font-size: 1.5em;
  870. margin-bottom: 5px;
  871. text-align:center;
  872. border-radius: 5px;
  873. border: 1px solid {color:Border};
  874. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  875. -o-transition: 0.5s ease;
  876. -moz-transition: 0.5s ease;
  877. }
  878.  
  879. .linktitle:hover {
  880. background-color:{color:Border};
  881. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  882. -o-transition: 0.5s ease;
  883. -moz-transition: 0.5s ease;
  884. }
  885.  
  886.  
  887.  
  888. .askericon {
  889. width: auto;
  890. {block:If500pxPosts}
  891. margin-left: 228px;
  892. {/block:If500pxPosts}
  893. {block:IfNot500pxPosts}
  894. margin-left: 178px;
  895. {/block:IfNot500pxPosts}
  896. margin-top: -20px;
  897. overflow: visible;
  898. border-radius: 100px;
  899.  
  900. }
  901.  
  902. .askericon img {
  903. border-radius: 100px;
  904. border: 1px solid {color:Border};
  905. }
  906.  
  907.  
  908.  
  909. .askicon img {
  910. z-index: 9;
  911. height: 40px;
  912. width: 40px;
  913. position: relative;
  914. }
  915.  
  916.  
  917.  
  918. .askicon img{
  919. z-index: 9;
  920. width: 40px;
  921. -webkit-transition:all 0.6s ease-out;
  922. -moz-transition:all 0.6s ease-out;
  923. -ms-transition:all 0.6s ease-out;
  924. -o-transition:all 0.6s ease-out;
  925. transition:all 0.6s ease-out;
  926. }
  927.  
  928. .askicon img:hover {
  929. -webkit-transform:rotate(360deg);
  930. -moz-transform:rotate(360deg);
  931. -ms-transform:rotate(360deg);
  932. -o-transform:rotate(360deg);
  933. transform:rotate(360deg);
  934. }
  935.  
  936.  
  937.  
  938. .question {
  939. overflow: hidden;
  940. {block:If500pxPosts}
  941. width: 477px;
  942. {/block:If500pxPosts}
  943. {block:IfNot500pxPosts}
  944. width: 377px;
  945. {/block:IfNot500pxPosts}
  946. height: auto;
  947. margin-top: -14px;
  948. padding: 2px 10px 5px 10px;
  949. color: {color:Text};
  950. background-color: {color:Post insides};
  951. text-decoration: italic;
  952. z-index:-9;
  953. border-radius: 10px;
  954. box-shadow: inset 1px 1px 3px gray;
  955. text-align: center;
  956.  
  957. }
  958.  
  959. .asker {
  960. font-size: 14px;
  961. text-transform:uppercase;
  962. color: {color:Links};
  963. text-align: center;
  964. margin-top: 10px;
  965. margin-bottom: 3px;
  966. }
  967.  
  968. .answer {
  969. padding: 5px 10px 0 10px;
  970. {block:If500pxPosts}
  971. width: 477px;
  972. {/block:If500pxPosts}
  973. {block:IfNot500pxPosts}
  974. width: 377px;
  975. {/block:IfNot500pxPosts}
  976. margin-top:-12px;
  977. overflow: hidden;
  978. background-color: {color:Post insides};
  979. border-radius: 10px;
  980. box-shadow: inset 1px 1px 3px gray;
  981. text-align: center;
  982. }
  983.  
  984. .textpost {
  985. margin-top: -12px;
  986. }
  987.  
  988. .title {
  989. padding: 5px 5px 5px 25px;
  990. background-color: {color:Post insides};
  991. font-size: 1.5em;
  992. text-align:left;
  993. border-radius: 5px;
  994. }
  995.  
  996.  
  997. .quote {
  998. font-size: 20px;
  999. margin-bottom: 10px;
  1000. padding: 10px;
  1001. }
  1002.  
  1003. .quotesource {
  1004. font-size: 0.85em;
  1005. text-align: right;
  1006. }
  1007.  
  1008. .audiopost {
  1009. padding: 0 10px;
  1010. {block:If500pxPosts}
  1011. width: 477px;
  1012. {/block:If500pxPosts}
  1013. {block:IfNot500pxPosts}
  1014. width: 377px;
  1015. {/block:IfNot500pxPosts}
  1016. margin-top: -20px;
  1017. }
  1018.  
  1019. .audio {
  1020. border: 2px solid {color:Border};
  1021. padding: 5px 10px;
  1022. {block:If500pxPosts}
  1023. width: 477px;
  1024. {/block:If500pxPosts}
  1025. {block:IfNot500pxPosts}
  1026. width: 377px;
  1027. {/block:IfNot500pxPosts}
  1028. font-size: 1.5em;
  1029. margin-bottom: 7px;
  1030. border-radius: 5px;
  1031. background-color: {color:Post insides};
  1032. }
  1033.  
  1034. .chattitle {
  1035. padding: 5px 5px 5px 25px;
  1036. background-color: {color:Post insides};
  1037. font-size: 1.5em;
  1038. margin-bottom: 5px;
  1039. text-align:left;
  1040. border-radius: 5px;
  1041. }
  1042.  
  1043.  
  1044. .chatpost ul {
  1045. list-style-type: none;
  1046. margin-left: -40px;
  1047. margin-top: 0px;
  1048. margin-bottom: 0px;
  1049. }
  1050.  
  1051. .chatpost ul .odd {
  1052. background-color: RGBA({RGBcolor:X},1);
  1053. color: {color:Text};
  1054. margin-left: 10px;
  1055. {block:If500pxPosts}
  1056. width: 400px;
  1057. {/block:If500pxPosts}
  1058. {block:IfNot500pxPosts}
  1059. width: 300px;
  1060. {/block:IfNot500pxPosts}
  1061. padding: 5px;
  1062. margin-bottom: 3px;
  1063. border-radius: 5px;
  1064. }
  1065.  
  1066. .chatpost ul .even {
  1067. background-color: RGBA({RGBcolor:X},0.5);
  1068. color: {color:Text};
  1069. margin-left: 80px;
  1070. {block:If500pxPosts}
  1071. width: 400px;
  1072. {/block:If500pxPosts}
  1073. {block:IfNot500pxPosts}
  1074. width: 300px;
  1075. {/block:IfNot500pxPosts}
  1076. padding: 5px;
  1077. margin-bottom: 3px;
  1078. border-radius: 5px;
  1079. }
  1080.  
  1081.  
  1082. /* PLEASE DO NOT REMOVE THE CREDIT OR MOVE IT */
  1083.  
  1084. #credit {
  1085. bottom: 8px;
  1086. right: 8px;
  1087. border: 1px solid #BABABA;
  1088. font-size: 12px;
  1089. color: #5A5A5A;
  1090. height: 15px;
  1091. width: 15px;
  1092. line-height: 15px;
  1093. position: fixed;
  1094. text-align: center;
  1095. background-color: white;
  1096. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  1097. -o-transition: 0.5s ease;
  1098. -moz-transition: 0.5s ease;
  1099. }
  1100.  
  1101. #credit:hover {
  1102. background-color: #2E2E2E;
  1103. color: #fff;
  1104. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  1105. -o-transition: 0.5s ease;
  1106. -moz-transition: 0.5s ease;
  1107. }
  1108.  
  1109.  
  1110.  
  1111. </style>
  1112.  
  1113.  
  1114. </head>
  1115.  
  1116.  
  1117. <body>
  1118.  
  1119.  
  1120. <div id="desc">{Description}</div>
  1121.  
  1122.  
  1123. <div id="header">
  1124.  
  1125.  
  1126.  
  1127. <div id="titlebox">
  1128. <div id="title" class="{select:Title font}"><a href="/">{Title}</a></div>
  1129. <div id="subtitle" class="{select:Special font}">{text:Subtitle}</div>
  1130. </div>
  1131.  
  1132. <div id="headerlinks">
  1133. <a href="{text:Header link 1 url}"><div class="headerlink {select:Special font}">{text:Header link 1 text}</div></a>
  1134. <a href="{text:Header link 2 url}"><div class="headerlink {select:Special font}">{text:Header link 2 text}</div></a>
  1135. <div class="headerlink {select:Special font}"><div id="descbutton">{text:Description button text}</div></div>
  1136. </div>
  1137.  
  1138.  
  1139.  
  1140.  
  1141. </div>
  1142.  
  1143.  
  1144. <div id="sidebar">
  1145. <div id="x">
  1146.  
  1147. <div id="xcircle">
  1148. <div id="x1"></div>
  1149. <div id="x2"></div>
  1150. </div>
  1151.  
  1152. <div id="hovernotice">hover!</div>
  1153.  
  1154. <div id="sblinks">
  1155.  
  1156. {block:IfLink1Text}
  1157. <a href="{text:Link 1 url}"><div class="sblink">{text:Link 1 text}</div></a>
  1158. {/block:IfLink1Text}
  1159. {block:IfLink2Text}
  1160. <a href="{text:Link 2 url}"><div class="sblink">{text:Link 2 text}</div></a>
  1161. {/block:IfLink2Text}
  1162. {block:IfLink3Text}
  1163. <a href="{text:Link 3 url}"><div class="sblink">{text:Link 3 text}</div></a>
  1164. {/block:IfLink3Text}
  1165. {block:IfLink4Text}
  1166. <a href="{text:Link 4 url}"><div class="sblink">{text:Link 4 text}</div></a>
  1167. {/block:IfLink4Text}
  1168. {block:IfLink5Text}
  1169. <a href="{text:Link 5 url}"><div class="sblink">{text:Link 5 text}</div></a>
  1170. {/block:IfLink5Text}
  1171. {block:IfLink6Text}
  1172. <a href="{text:Link 6 url}"><div class="sblink">{text:Link 6 text}</div></a>
  1173. {/block:IfLink6Text}
  1174. {block:IfLink7Text}
  1175. <a href="{text:Link 7 url}"><div class="sblink">{text:Link 7 text}</div></a>
  1176. {/block:IfLink7Text}
  1177. {block:IfLink8Text}
  1178. <a href="{text:Link 8 url}"><div class="sblink">{text:Link 8 text}</div></a>
  1179. {/block:IfLink8Text}
  1180.  
  1181.  
  1182.  
  1183. </div>
  1184.  
  1185. </div>
  1186.  
  1187. {block:IfNotRightSidebar}
  1188. {block:IfNotInfiniteScroll}
  1189.  
  1190. {block:Pagination}
  1191. {block:PreviousPage}
  1192. <a href="{PreviousPage}"><div id="prevpage">&laquo;</div></a>
  1193. {/block:PreviousPage}
  1194. {block:NextPage}
  1195. <a href="{NextPage}"> <div id="nextpage"> &raquo;</div></a>
  1196. {/block:NextPage}
  1197. {/block:Pagination}
  1198.  
  1199. {/block:IfNotInfiniteScroll}
  1200. {/block:IfNotRightSidebar}
  1201.  
  1202. </div>
  1203.  
  1204.  
  1205. <div id="block"></div>
  1206.  
  1207.  
  1208. {block:IfRightSidebar}
  1209.  
  1210. <div id="sidebar2">
  1211.  
  1212.  
  1213. <div id="sb2imgs">
  1214. <div id="sbimg1"><img src="{image:Sidebar 1}"></div>
  1215. <div id="sbimg2"><img src="{image:Sidebar 2}"></div>
  1216. <div id="sbimg3"><img src="{image:Sidebar 3}"></div>
  1217. <div id="sbimg4"><img src="{image:Sidebar 4}"></div>
  1218. </div>
  1219.  
  1220.  
  1221.  
  1222. {block:IfNotInfiniteScroll}
  1223. {block:Pagination}
  1224. {block:PreviousPage}
  1225. <a href="{PreviousPage}"><div id="prevpage">&laquo;</div></a>
  1226. {/block:PreviousPage}
  1227. {block:NextPage}
  1228. <a href="{NextPage}"> <div id="nextpage"> &raquo;</div></a>
  1229. {/block:NextPage}
  1230. {/block:Pagination}
  1231. {/block:IfNotInfiniteScroll}
  1232.  
  1233.  
  1234. </div>
  1235.  
  1236. {/block:IfRightSidebar}
  1237.  
  1238. <!-- boring post stuff - you don't really need to edit there I'd say -->
  1239. <div id="content">
  1240. <div class = "autopagerize_page_element" >
  1241. {block:Posts}
  1242.  
  1243.  
  1244. <div id="posts">
  1245.  
  1246. {block:ContentSource}
  1247. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1248. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1249. {/block:SourceLogo}
  1250. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1251. {/block:ContentSource}
  1252.  
  1253.  
  1254. {block:If500pxPosts}
  1255. {block:Photo}
  1256. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  1257. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1258. {/block:Photo}
  1259.  
  1260. {block:Photoset}
  1261. {Photoset-500}
  1262. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1263. {/block:Photoset}
  1264.  
  1265. {block:Video}
  1266. {Video-500}
  1267. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1268. {/block:Video}
  1269. {/block:If500pxPosts}
  1270.  
  1271. {block:IfNot500pxPosts}
  1272. {block:Photo}
  1273. {LinkOpenTag}<img src="{PhotoURL-400}" />{LinkCloseTag}
  1274. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1275. {/block:Photo}
  1276.  
  1277. {block:Photoset}
  1278. {Photoset-400}
  1279. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1280. {/block:Photoset}
  1281.  
  1282. {block:Video}
  1283. {Video-400}
  1284. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1285. {/block:Video}
  1286. {/block:IfNot500pxPosts}
  1287.  
  1288. {block:Audio}
  1289. <div class="audio {select:Special font}">
  1290. {block:TrackName}
  1291. ' {TrackName} '
  1292. {/block:TrackName}
  1293. {block:Artist}
  1294. by
  1295. ' {Artist} '
  1296. {/block:Artist}
  1297. </div>
  1298. {AudioPlayerWhite}
  1299. {block:Caption}<br /><div class="audiopost">{Caption}</div>{/block:Caption}
  1300. {/block:Audio}
  1301.  
  1302. {block:Quote}
  1303. <div class="quote {select:Special font}">“{Quote}”</div>
  1304. {block:Source}<div class="quotesource">~ {Source}</div>{/block:Source}
  1305. {/block:Quote}
  1306.  
  1307. {block:Text}
  1308. {block:Title}<div class="title {select:Special font}">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
  1309. {/block:Text}
  1310.  
  1311. {block:Answer}
  1312. <div class="askericon"><div class="askicon"><img src="{AskerPortraitURL-64}" /></div></div>
  1313. <div class="question"><div class="asker {select:Special font}">{Asker}:</div><em>{Question}</em></div><br />
  1314. <div class="answer">{block:Answerer}<div class="answerer {select:Special font}">{Answerer}:</div>{/block:Answerer}<div class="answerer-answer">{Answer}</div></div>
  1315. {block:Reblog}<div class="caption">{Replies}</div>{/block:Reblog}
  1316. {/block:Answer}
  1317.  
  1318.  
  1319. {block:Chat}<div class="chatpost">
  1320. {block:Title}<div class="chattitle {select:Special font}">{Title}</div>{/block:Title}
  1321. <ul>
  1322. {block:Lines}
  1323. <li class="{Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
  1324. {/block:Lines}
  1325. </ul>
  1326. </div>
  1327. {/block:Chat}
  1328.  
  1329. {block:Link}
  1330. <div class="linkpost"><a href="{URL}" ><div class="linktitle {select:Special font}">{Name}</div></a>
  1331. {block:Description}<div class="caption">{Description}</div>{/block:Description}</div>
  1332. {/block:Link}
  1333.  
  1334.  
  1335.  
  1336. <div id="tagsbox">
  1337. <div id="permalink">
  1338. <a href="{Permalink}">
  1339. {block:Date}{TimeAgo}{/block:Date}
  1340. {block:NoteCount}&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;{NoteCount} notes{/block:NoteCount}</a>
  1341. {block:RebloggedFrom}&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;<a href="{ReblogParentURL}">via</a> &nbsp;&middot;&nbsp;&nbsp;&nbsp;
  1342. <a href="{ReblogRootURL}">&copy;</a>
  1343. {/block:RebloggedFrom}
  1344. &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;
  1345. <a href="{ReblogURL}" target="_blank">reblog</a>
  1346.  
  1347. </div>
  1348.  
  1349. </div>
  1350.  
  1351. {block:IndexPage}
  1352. {block:HasTags}<div id="tags" class="{select:Index tags}">
  1353. {block:Tags}
  1354. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1355. {/block:Tags}
  1356. </div>
  1357. {/block:HasTags}
  1358. {/block:IndexPage}
  1359.  
  1360. {block:PermalinkPage}
  1361. {block:HasTags}<div id="tags" class="{select:Perma tags}">
  1362. {block:Tags}
  1363. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1364. {/block:Tags}
  1365. </div>
  1366. {/block:HasTags}
  1367. {/block:PermalinkPage}
  1368.  
  1369. </div> <!-- posts div -->
  1370.  
  1371.  
  1372.  
  1373.  
  1374. {block:PostNotes}
  1375. <div id="notecontainer">{PostNotes}</div>
  1376. {/block:PostNotes}
  1377.  
  1378. {/block:Posts}
  1379. </div>
  1380. </div> <!-- content div-->
  1381.  
  1382.  
  1383. <!-- credit, please do not remove! -->
  1384. <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
  1385.  
  1386. </body>
  1387.  
  1388.  
  1389. </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!