chezshay

theme 35 "ashley"

Nov 22nd, 2014
1,564
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.81 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <script src="http://static.tumblr.com/zkwuipe/mxnnfgnbn/modernizr.custom.js"></script>
  5. <head>
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13. <!---@shayofrp
  14. i'm watching u :))--->
  15.  
  16. <meta name="color:Background" content="#ffffff"/>
  17. <meta name="color:Text" content="#a8a8a8"/>
  18. <meta name="color:Hover" content="#f2f2f2"/>
  19. <meta name="color:Scrollbar" content="#000000"/>
  20. <meta name="color:ScrollbarBg" content="#ffffff"/>
  21. <meta name="color:Answer Backg" content="#000000"/>
  22. <meta name="color:Links" content="#000000"/>
  23. <meta name="color:Links Background" content="#000000"/>
  24. <meta name="color:Description Background" content="#000000"/>
  25. <meta name="color:postbg" content="#ffffff"/>
  26. <meta name="color:Left Sidebar Background" content="#ffffff"/>
  27. <meta name="color:Info Background" content="#ffffff"/>
  28.  
  29. <meta name="image:background" content=""/>
  30. <meta name="image:header" content=""/>
  31. <meta name="image:sidebar" content=""/>
  32. <meta name="image:admin1" content=""/>
  33. <meta name="image:admin2" content=""/>
  34. <meta name="image:admin3" content=""/>
  35. <meta name="text:admin1" content=""/>
  36. <meta name="text:admin2" content=""/>
  37. <meta name="text:admin3" content=""/>
  38. <meta name="text:Link 1 URL" content="/">
  39. <meta name="text:Link 2 URL" content="/">
  40. <meta name="text:Link 3 URL" content="/">
  41. <meta name="text:Link 4 URL" content="/">
  42. <meta name="text:Link 1 name" content="/">
  43. <meta name="text:Link 2 name" content="/">
  44. <meta name="text:Link 3 name" content="/">
  45. <meta name="text:Link 4 name" content="/">
  46.  
  47. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200' rel='stylesheet' type='text/css'>
  48.  
  49.  
  50. <style type="text/css">
  51.  
  52.  
  53. ::-webkit-scrollbar-thumb {
  54. height:auto;
  55. background-color:{color:Scrollbar};
  56. }
  57.  
  58. ::-webkit-scrollbar {
  59. height:9px;
  60. width:4px;
  61. background-color:{color:ScrollbarBg};
  62. }
  63.  
  64.  
  65. body {
  66. background:{color:background};
  67. margin:0px;
  68. color:{color:text};
  69. font-family:arial, sans-serif;
  70. font-size:9px;
  71. letter-spacing:0px;
  72. text-align:justify;
  73. background-image:url('{image:background}');
  74. }
  75.  
  76. a {
  77. text-decoration:none;
  78. outline:none;
  79. -moz-outline-style:none;
  80. color:{color:links};
  81. font-weight:bold;
  82. font-family:arial;
  83. }
  84.  
  85. pre{color:{color:postbg};
  86. padding:5px;
  87. font-size:110%;
  88. font-weight:bold;
  89. font-family:arial;
  90. text-align:center;
  91. text-transform:uppercase;
  92. background-color:{color:text};}
  93.  
  94. break{color:{color:postbg};
  95. padding:5px;
  96. width:490px;
  97. margin-top:-5px;
  98. display:inline-block;
  99. font-size:110%;
  100. font-weight:bold;
  101. font-family:arial;
  102. text-align:center;
  103. text-transform:uppercase;
  104. background-color:{color:text};}
  105.  
  106. update{color:{color:text};
  107. background-color:{color:background};
  108. padding:10px;
  109. font-size:9px;
  110. text-transform:lowercase;
  111. width:478px;
  112. margin-top:-5px;
  113. display:inline-block;
  114. font-family:arial;
  115. text-align:center;
  116. border:solid 1px {color:text};}
  117.  
  118. img {
  119. border:none;
  120. }
  121.  
  122. h1 {
  123. font-size:20px;
  124. color:{color:text};
  125. text-transform:uppercase;
  126. font-family:'times';
  127. font-style:bold, italic;
  128. text-align:center;
  129. }
  130.  
  131. blockquote {
  132. background-color:{color:background};
  133. padding-left:5px;
  134. padding:5px;
  135. margin-left:10px;
  136. margin-right:10px;
  137. margin-top:5px;
  138. }
  139.  
  140. a:hover {
  141. color:{color:postbg};
  142. -moz-transition-duration:0.3s;
  143. -webkit-transition-duration:0.3s;
  144. -o-transition-duration:0.3s;
  145. }
  146.  
  147. /*ENTRIES*/
  148.  
  149. #entries {
  150. padding:10px;
  151. width:500px;
  152. margin-left:650px;
  153. margin-top:-30px;
  154. letter-spacing:0px;
  155. line-height:140%;
  156. z-index:-99;
  157. font-size:9px;
  158. position:absolute;
  159. }
  160.  
  161. #post {
  162. width:500px;
  163. line-height:150%;
  164. padding:10px;
  165. margin-top:30px;
  166. background-color:{color:postbg};
  167. }
  168.  
  169.  
  170. /*SIDEBAR*/
  171. #png{position:fixed;
  172. margin-top:0px;
  173. z-index:-9;
  174. margin-left:250px;
  175. }
  176.  
  177. #sidebar {
  178. margin-left:85px;
  179. margin-top:100px;
  180. padding:5px;
  181. z-index:-99;
  182. position:fixed;
  183. }
  184.  
  185. #sidebar img{border:solid 10px {color:postbg};
  186. }
  187.  
  188. .description{
  189. margin-top:-10px;
  190. padding:20px;
  191. font-size:10px;
  192. line-height:150%;
  193. text-align:center;
  194. letter-spacing:2px;
  195. position:relative;
  196. margin-left:0px;
  197. left:-0px;
  198. color:{color:text};
  199. font-family:helvetica;
  200. }
  201.  
  202. #desc{width:520px;
  203. position:fixed;
  204. z-index:999999;
  205. margin-left:90px;
  206. margin-top:530px;
  207. }
  208.  
  209. /*POST INFO*/
  210.  
  211. #info {
  212. width:510px;
  213. text-align:left;
  214. font-family:arial;
  215. text-transform:lowercase;
  216. margin-left:-10px;
  217. font-size:9px;
  218. margin-top:20px;
  219. margin-bottom:-30px;
  220. font-style:none;
  221. padding:5px;
  222. line-height:10px;
  223. background-color:{color:Info Background};
  224. color:{color:Text};
  225. }
  226.  
  227. #info a {
  228. text-align:center;
  229. font-family:arial;
  230. color:{color:Text};
  231. }
  232.  
  233. .right{float:right}
  234.  
  235. /*BANNER HOVER*/
  236.  
  237. #admins{width:300px;
  238. -webkit-transition: all 0.4s ease-in-out;
  239. -moz-transition: all 0.4s ease-in-out;
  240. -o-transition: all 0.4s ease-in-out;
  241. -ms-transition: all 0.4s ease-in-out;
  242. transition: all 0.4s ease-in-out;
  243. font-family:'arial';
  244. text-align:center;
  245. }
  246.  
  247. #admins img{
  248. width:320px;
  249. margin-left:10px;
  250. margin-bottom:5px;
  251. }
  252.  
  253. adminabout{width:300px;
  254. padding:10px;
  255. margin-left:10px;
  256. display:inline-block;
  257. background-color:{color:background};}
  258.  
  259. /*SIDELINKS*/
  260. .links {
  261. padding:5px;
  262. padding-bottom:6px;
  263. line-height:150%;
  264. z-index:10000000000000000;
  265. text-align:center;
  266. font-size:8px;
  267. letter-spacing:4px;
  268. opacity:1;
  269. position:fixed;
  270. font-family:'arial';
  271. position:absolute;
  272. text-transform:uppercase;
  273. text-align:center;}
  274.  
  275. .links a{
  276. z-index:10000000000000000;
  277. margin-left:10px;
  278. padding:5px;
  279. display:inline-block;
  280. }
  281.  
  282. .links a:hover{
  283. color:{color:postbg};
  284. -moz-transition-duration:.2s;
  285. -webkit-transition-duration:.2s;
  286. -o-transition-duration:.2s;
  287. background-color:{color:Links Background};
  288. }
  289.  
  290. #links{
  291. text-transform:uppercase;
  292. padding:10px;
  293. text-align:center;
  294. margin-top:-155px;
  295. background:{color:description background};
  296. font-size:10px;
  297. opacity:0;
  298. height:400px;
  299. margin-left:80px;
  300. font-family:times;
  301. width:500px;
  302. color:black;
  303. font-family:arial;
  304. -moz-transition-duration:0.5s;
  305. -webkit-transition-duration:0.5s;
  306. -o-transition-duration:0.5s;
  307. }
  308.  
  309. #links:hover {opacity:1;
  310. -moz-transition-duration:0.5s;
  311. -webkit-transition-duration:0.5s;
  312. -o-transition-duration:0.5s;
  313. }
  314.  
  315. #links a:hover{background:{color:text}}
  316.  
  317. #links a{
  318. z-index:10000000000000000;
  319. background:{color:background};
  320. padding:8px;
  321. margin-top:5px;
  322. border-left:5px solid {color:text};
  323. color:{color:text};
  324. width:227px;
  325. display:inline-block;
  326. }
  327.  
  328. /* Morph Button: Default Styles */
  329.  
  330. .morph-button {
  331. position: fixed;
  332. display: block;
  333. }
  334.  
  335. .morph-button > button {
  336. position: relative;
  337. border: none;
  338. margin-left:75px;
  339. background-color: {color:description background};
  340. color: {color:text};
  341. text-transform: uppercase;
  342. letter-spacing: 1px;
  343. font-weight: 700;
  344. margin-top:60px;
  345. line-height: 30px;
  346. overflow: hidden;
  347. }
  348.  
  349. /* Common styles for overlay and modal type (fixed morph) */
  350. .morph-button-fixed,
  351. .morph-button-fixed .morph-content {
  352. width: 520px;
  353. height: 30px;
  354.  
  355. }
  356.  
  357. .morph-button-fixed > button {
  358. z-index: 1000;
  359. width: 100%;
  360. height: 100%;
  361. -webkit-transition: opacity 0.1s 0.5s;
  362. transition: opacity 0.1s 0.5s;
  363. }
  364.  
  365. .morph-button-fixed.open > button {
  366. opacity: 0;
  367. -webkit-transition: opacity 0.1s;
  368. transition: opacity 0.1s;
  369. }
  370.  
  371. .morph-button-fixed .morph-content {
  372. position: fixed;
  373. z-index: 900;
  374. opacity: 0;
  375. -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  376. transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  377. }
  378.  
  379. .morph-button-fixed.open .morph-content {
  380. opacity: 1;
  381. }
  382.  
  383. .morph-button-fixed .morph-content > div {
  384. visibility: hidden;
  385. height: 0;
  386. opacity: 0;
  387. -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
  388. transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
  389. }
  390.  
  391. .morph-button-fixed.open .morph-content > div {
  392. visibility: visible;
  393. height: auto;
  394. opacity: 1;
  395. -webkit-transition: opacity 0.3s 0.5s;
  396. transition: opacity 0.3s 0.5s;
  397. }
  398.  
  399. .morph-button-fixed.active > button {
  400. z-index: 2000;
  401. }
  402.  
  403. .morph-button-fixed.active .morph-content {
  404. z-index: 1900;
  405. }
  406.  
  407. /* Transitions for overlay button and sidebar button */
  408. .morph-button-overlay .morph-content,
  409. .morph-button-sidebar .morph-content {
  410. -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  411. transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  412. }
  413.  
  414. .morph-button-overlay.open .morph-content,
  415. .morph-button-sidebar.open .morph-content {
  416. -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  417. transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  418. }
  419.  
  420. /* Morph Button Style: Overlay */
  421. .morph-button.morph-button-overlay {
  422. margin: 50px auto;
  423. }
  424.  
  425. .morph-button-overlay .morph-content {
  426. overflow: hidden;
  427. background: #e85657;
  428. }
  429.  
  430. .morph-button-overlay.open .morph-content {
  431. top: 0 !important;
  432. left: 0 !important;
  433. width: 100%;
  434. height: 100%;
  435. }
  436.  
  437. /* Morph Button Style: Modal */
  438. .morph-button-modal::before {
  439. position: fixed;
  440. top: 0;
  441. left: 0;
  442. z-index: 800;
  443. width: 100%;
  444. height: 100%;
  445. background: rgba(0,0,0,0.5);
  446. content: '';
  447. opacity: 0;
  448. -webkit-transition: opacity 0.5s;
  449. transition: opacity 0.5s;
  450. pointer-events: none;
  451. }
  452.  
  453. .morph-button-modal.open::before {
  454. opacity: 1;
  455. pointer-events: auto;
  456. }
  457.  
  458. .morph-button-modal.active::before {
  459. z-index: 1800;
  460. }
  461.  
  462. .morph-button-modal .morph-content {
  463. overflow: hidden;
  464. -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  465. transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  466. }
  467.  
  468. .morph-button-modal.open .morph-content {
  469. top: 50% !important;
  470. left: 50% !important;
  471. margin: -210px 0 0 -300px;
  472. width: 600px;
  473. height: 420px;
  474. -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  475. transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  476. }
  477.  
  478. /* Colors and sizes for individual modals */
  479. .morph-button.morph-button-modal-1 {
  480. float: left;
  481. }
  482.  
  483. .morph-button.morph-button-modal-2,
  484. .morph-button.morph-button-modal-3 {
  485. display: inline-block;
  486. margin: 10px 15px;
  487. }
  488.  
  489. .morph-button-modal-1 > button,
  490. .morph-button-modal-1 .morph-content {
  491. background-color: {color:description background};
  492. color: {color:text};
  493. }
  494.  
  495. .morph-button-modal-2 > button,
  496. .morph-button-modal-2 .morph-content,
  497. .morph-button-modal-3 > button,
  498. .morph-button-modal-3 .morph-content {
  499. background-color: {color:description background};
  500. color: {color:text};
  501. font-size:10px;
  502. }
  503.  
  504. .morph-button-modal-4 {
  505. display: inline-block;
  506. }
  507.  
  508. .morph-button-modal-4 > button,
  509. .morph-button-modal-4 .morph-content {
  510. background-color: #faf1e0;
  511. color: #553445;
  512. }
  513.  
  514. .morph-button-modal-4 > button span,
  515. .morph-button-modal-4 .morph-clone {
  516. padding-left: 10px;
  517. color: #286f81;
  518. }
  519.  
  520. .morph-button-modal-4 .morph-clone {
  521. position: absolute;
  522. right: 34px;
  523. bottom: 30px;
  524. z-index: 100;
  525. letter-spacing: 1px;
  526. font-weight: 700;
  527. -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
  528. transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
  529. }
  530.  
  531. .morph-button-modal-4.open .morph-clone,
  532. .no-js .morph-button-modal-4 .morph-clone {
  533. right: 10px;
  534. bottom: 10px;
  535. }
  536.  
  537. .morph-button-modal-1::before {
  538. background: rgba(240,221,204,0.7);
  539. }
  540.  
  541. .morph-button-modal-2.open .morph-content {
  542. margin: -210px 0 0 -170px;
  543. width: 340px;
  544. height: 320px;
  545. }
  546.  
  547. .morph-button-modal-3.open .morph-content {
  548. margin: -255px 0 0 -210px;
  549. width: 420px;
  550. height: 510px;
  551. }
  552.  
  553. .morph-button-modal-3.open .morph-content > div {
  554. height: 420px;
  555. }
  556.  
  557. .morph-button-modal-2.open .morph-content > div,
  558. .morph-button-modal-3.open .morph-content > div {
  559. -webkit-transition: opacity 0.3s 0.3s;
  560. transition: opacity 0.3s 0.3s;
  561. }
  562.  
  563. .morph-button-modal-4.open .morph-content {
  564. margin: -200px 0 0 -320px;
  565. width: 640px;
  566. height: 400px;
  567. }
  568.  
  569. /* Morph Button Style: In the content flow */
  570. .morph-button-inflow {
  571. overflow: hidden;
  572. max-width: 100%;
  573. height: 70px;
  574. }
  575.  
  576. .morph-button-inflow > button {
  577. width: 100%;
  578. line-height: 70px;
  579. }
  580.  
  581. .morph-button-inflow .morph-content {
  582. position: absolute;
  583. top: 0;
  584. left: 0;
  585. width: 100%;
  586. }
  587.  
  588. .morph-button-inflow .morph-content .morph-clone {
  589. padding: 0;
  590. font-weight: 700;
  591. line-height: 70px;
  592. }
  593.  
  594. /* Colors and sizes for individual in flow buttons */
  595. .morph-button-inflow-1 {
  596. width: 600px;
  597. margin: 2em auto;
  598. -webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
  599. transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
  600. }
  601.  
  602. .morph-button-inflow-1 > button span {
  603. visibility: hidden;
  604. }
  605.  
  606. .morph-button-inflow-1 .morph-content .morph-clone {
  607. color: #f9f6e5;
  608. background: #e85657;
  609. }
  610.  
  611. .morph-button-inflow-2 {
  612. position: absolute;
  613. top: 50%;
  614. left: 50%;
  615. width: 220px;
  616. background-color: #fef0e3;
  617. -webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
  618. transition: height 0.3s, width 0.3s, transform 0.3s;
  619. -webkit-transform: translateX(-50%) translateY(-50%);
  620. transform: translateX(-50%) translateY(-50%);
  621. }
  622.  
  623. .morph-button-inflow-2 > button {
  624. position: absolute;
  625. top: 0;
  626. left: 0;
  627. width: 100%;
  628. height: 100%;
  629. background-color: transparent;
  630. color: #e75854;
  631. -webkit-transition: -webkit-transform 0.3s;
  632. transition: transform 0.3s;
  633. }
  634.  
  635. .morph-button-inflow-2.open > button {
  636. -webkit-transform: translateX(-100%);
  637. transform: translateX(-100%);
  638. }
  639.  
  640. .morph-button-inflow-2 .morph-content {
  641. width: 260px;
  642. height: 200px;
  643. }
  644.  
  645. .morph-button-inflow-2.open {
  646. width: 260px;
  647. }
  648.  
  649. /* Morph Button Style: Sidebar */
  650. .morph-button-sidebar,
  651. .morph-button-sidebar .morph-content {
  652. width: 60px;
  653. height: 60px;
  654. }
  655.  
  656. .morph-button-sidebar {
  657. position: fixed;
  658. bottom: 50px;
  659. left: 50px;
  660. }
  661.  
  662. .morph-button-sidebar > button {
  663. line-height: 60px;
  664. font-size:12px;
  665. padding: 0;
  666. }
  667.  
  668. .morph-button-sidebar .morph-content {
  669. background: #e85657;
  670. }
  671.  
  672. .morph-button-sidebar.open .morph-content {
  673. top: 0 !important;
  674. left: 0 !important;
  675. width: 300px;
  676. height: 100%;
  677. overflow: hidden;
  678. -webkit-backface-visibility: hidden;
  679. }
  680.  
  681. /* Let's add some nice easing for all cases */
  682. .morph-button .morph-content,
  683. .morph-button.open .morph-content,
  684. .morph-button-modal-4 .morph-clone {
  685. -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  686. transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  687. }
  688.  
  689. /* Helper classes */
  690. .noscroll {
  691. overflow: hidden;
  692. }
  693.  
  694. .morph-button-overlay.scroll .morph-content {
  695. overflow-y: scroll;
  696. }
  697.  
  698. .morph-button-sidebar.scroll .morph-content {
  699. overflow: auto;
  700. }
  701.  
  702. /* No JS fallback: let's hide the button and show the content */
  703. .no-js .morph-button > button {
  704. display: none;
  705. }
  706.  
  707. .no-js .morph-button {
  708. margin: 10px 0;
  709. float: none;
  710. }
  711.  
  712. .no-js .morph-button,
  713. .no-js .morph-button .morph-content,
  714. .no-js .morph-button .morph-content > div {
  715. position: relative;
  716. width: auto;
  717. height: auto;
  718. opacity: 1;
  719. visibility: visible;
  720. top: auto;
  721. left: auto;
  722. -webkit-transform: none;
  723. transform: none;
  724. pointer-events: auto;
  725. }
  726.  
  727. .no-js .morph-button .morph-content .icon-close {
  728. display: none;
  729. }
  730.  
  731. .no-js .morph-button-sidebar {
  732. width: 300px;
  733. position: fixed;
  734. top: 0;
  735. left: 0;
  736. margin: 0;
  737. height: 100%;
  738. background: #e85657;
  739. overflow: auto;
  740. }
  741.  
  742. .no-transition {
  743. -webkit-transition: none !important;
  744. transition: none !important;
  745. }
  746. /*QUESTION*/
  747.  
  748. #asker {
  749. color:{color:text};
  750. padding:10px;
  751. font-family:'arial';
  752. font-size:10px;
  753. letter-spacing:0px;
  754. text-align:left;
  755. margin-top:0px;
  756. text-transform:lowercase;
  757. line-height:100%;
  758. background-color:{color:Answer backg};
  759. }
  760.  
  761. #asker a{color:{color:postbg};}
  762.  
  763. #url{color:{color:postbg};
  764. padding:4px;
  765. font-family:'arial';
  766. font-size:9px;
  767. letter-spacing:0px;
  768. text-align:center;
  769. margin-top:0px;
  770. font-weight:bold;
  771. text-transform:uppercase;
  772. line-height:100%;
  773. background-color:{color:Text};
  774. }
  775.  
  776. #url a{color:{color:postbg};text-transform:uppercase;}
  777.  
  778. #pagination {
  779. font-size:9px;
  780. width:510px;
  781. display:inline-block;
  782. text-transform:uppercase;
  783. font-family:arial;
  784. text-align:right;
  785. padding:5px;
  786. background-color:{color:description background};
  787. color:{color:text};
  788. }
  789.  
  790. #pagination a{color:{color:text};
  791. z-index:99999;
  792. }
  793.  
  794.  
  795. #leftsidebar{background-color:transparent;
  796. padding:10px;
  797. z-index:-9;
  798. margin-left:0px;
  799. width:300px;
  800. margin-top:240px;
  801. padding-top:20px;
  802. position:fixed;
  803. }
  804.  
  805.  
  806. banner{font-size:9px;
  807. background-color:{color:Text};
  808. font-weight:bold;
  809. margin-top:5px;
  810. width:89%;
  811. text-transform:uppercase;
  812. display:inline-block;
  813. color:{color:background};
  814. margin-left:0px;
  815. padding:10px;
  816. }
  817.  
  818.  
  819. /*CREDIT*/
  820.  
  821. #cred {
  822. position:fixed;
  823. font-family:'courier';
  824. text-transform:uppercase;
  825. font-size:8px;
  826. right:9px;
  827. bottom:9px;
  828. padding:4px;
  829. background-color:{color:postbg};
  830. letter-spacing:1px;
  831. }
  832.  
  833.  
  834. {CustomCSS}</style></head><body>
  835. <div id="sidebar"><img src="{image:sidebar}">
  836. </div>
  837. <div id="leftsidebar">
  838. <div id="links">
  839. <break>{title}</break>
  840. <img src="{image:header}">
  841. <a href="/">home</a>
  842. <a href="/ask">message</a>
  843. <a href="/archive">past</a>
  844. <a href="{text:link 1 url}">{text:link 1 name}</a>
  845. <a href="{text:link 2 url}">{text:link 2 name}</a>
  846. <a href="{text:link 3 url}">{text:link 3 name}</a>&nbsp;
  847. <break>UPDATES</break><br>
  848. <update><b>00/00/00</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </update>
  849. <update><b>00/00/00</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </update>
  850. </div>
  851. </div>
  852.  
  853. <section>
  854. <div class="mockup-content">
  855.  
  856. <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
  857. <button type="button">ADMINS</button>
  858. <div class="morph-content">
  859. <div>
  860. <div class="content-style-form content-style-form-1">
  861. <span class="icon icon-close"><pre>Close the dialog</span></pre>
  862. <div id="admins">
  863. <img src="{image:admin1}"><adminabout>{text:admin1}</adminabout><br>
  864. <img src="{image:admin2}"><adminabout>{text:admin2}</adminabout><br>
  865. <img src="{image:admin3}"><adminabout>{text:admin3}</adminabout>
  866. </div>
  867. </form>
  868. </div>
  869. </div>
  870. </div>
  871. </div><!-- morph-button -->
  872.  
  873. </div><!-- morph-button -->
  874. </div><!-- /form-mockup -->
  875. </section>
  876.  
  877. <div id="entries">
  878. {block:Posts}
  879. <div id="post">
  880.  
  881. {block:Text}
  882. <h1>{block:Title}{Title}{/block:Title}</h1>
  883. {Body}{/block:Text}
  884.  
  885. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  886. {block:Caption}{Caption}{/block:Caption}{/block:Photo}
  887.  
  888. {block:Photoset}{Photoset-500}{block:Caption}{Caption}
  889. {/block:Caption}{/block:Photoset}
  890.  
  891. {block:Quote}<h2>"{Quote}"</h2>
  892. {block:Source}<div class="qsource"> —{Source}</div>
  893. {/block:Source}{/block:Quote}
  894.  
  895. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  896.  
  897. {block:Chat}{block:Title}{Title}{/block:Title}{block:Lines}{block:Label}<b><u>{Label}</u></b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  898.  
  899. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px" />{/block:AlbumArt}<span class="audio">{AudioPlayerBlack}</left></span>
  900. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  901. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  902. {/block:ExternalAudio}<b>Played:</b> {PlayCount} arial <br>
  903. {/block:Audio}<br>
  904.  
  905. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  906.  
  907. {block:Answer}<div id="asker">{Question}</div> <div id="url">{Asker}</div>{Answer}{/block:Answer}
  908.  
  909. <div id="info">
  910. <div id="permalink">
  911. <a href="{Permalink}">{TimeAgo}</a> <div class=right>{NoteCount}</div></a></div>
  912.  
  913. {block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}</div>
  914. </div>
  915.  
  916. {/block:Posts}{/block:Posts}</div></div></div>
  917.  
  918. <div id="desc"> <div id="pagination"> {block:Pagination}
  919. {block:PreviousPage}
  920. <a href="{PreviousPage}">back</a>
  921. {/block:PreviousPage}
  922.  
  923. {block:NextPage}
  924. <a href="{NextPage}">forward</a>
  925. {/block:NextPage}
  926. {/block:Pagination}
  927. </div><div class="description">{description}</div>
  928.  
  929. </div>
  930.  
  931. </ul>
  932. </div>
  933.  
  934.  
  935. <div id="cred">
  936. <a href="http://shayofrp.tumblr.com/">SHAYOFRP</a>
  937. </div>
  938.  
  939. <script src="http://static.tumblr.com/zkwuipe/m32nfgn9t/classie.js"></script>
  940. <script src="http://static.tumblr.com/zkwuipe/XG5nfgn3j/uimorphingbutton_fixed.js"></script>
  941. <script>
  942. (function() {
  943. var docElem = window.document.documentElement, didScroll, scrollPosition;
  944.  
  945. // trick to prevent scrolling when opening/closing button
  946. function noScrollFn() {
  947. window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
  948. }
  949.  
  950. function noScroll() {
  951. window.removeEventListener( 'scroll', scrollHandler );
  952. window.addEventListener( 'scroll', noScrollFn );
  953. }
  954.  
  955. function scrollFn() {
  956. window.addEventListener( 'scroll', scrollHandler );
  957. }
  958.  
  959. function canScroll() {
  960. window.removeEventListener( 'scroll', noScrollFn );
  961. scrollFn();
  962. }
  963.  
  964. function scrollHandler() {
  965. if( !didScroll ) {
  966. didScroll = true;
  967. setTimeout( function() { scrollPage(); }, 60 );
  968. }
  969. };
  970.  
  971. function scrollPage() {
  972. scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
  973. didScroll = false;
  974. };
  975.  
  976. scrollFn();
  977.  
  978. [].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
  979. new UIMorphingButton( bttn, {
  980. closeEl : '.icon-close',
  981. onBeforeOpen : function() {
  982. // don't allow to scroll
  983. noScroll();
  984. },
  985. onAfterOpen : function() {
  986. // can scroll again
  987. canScroll();
  988. },
  989. onBeforeClose : function() {
  990. // don't allow to scroll
  991. noScroll();
  992. },
  993. onAfterClose : function() {
  994. // can scroll again
  995. canScroll();
  996. }
  997. } );
  998. } );
  999.  
  1000. // for demo purposes only
  1001. [].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) {
  1002. bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
  1003. } );
  1004. })();
  1005. </script>
  1006. </html>
Add Comment
Please, Sign In to add comment