API tools faq
paste
Advertisement
scftlcves

#56 / that's okay

scftlcves
Jul 3rd, 2019
3,254
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7.  
  8. that's okay (theme 56) by ali (@scftlcves)
  9.  
  10. ---- ♡ ♡ ♡ ----
  11.  
  12.  
  13. < TIME FOR THE CREDITS !!! >
  14.  
  15. - BODY FONTS > GOOGLE
  16. https://fonts.google.com/
  17.  
  18. - BOLD/TITLE FONTS > ADOBE
  19.  
  20.  
  21. - TIMESTAMP > BYCHLOETHEMES
  22. https://bychloethemes.tumblr.com/plugins/timeago
  23.  
  24. - TUMBLR CONTROLS > CYANTISTS
  25. https://cyantists.tumblr.com/post/163728517915/fix-tumblrs-new-controls-i-have-come-up-with-3
  26.  
  27. - READ MORE STYLING > THEMESBYTOMMY
  28. https://themesbytommy.tumblr.com/post/153377255664/style-keep-reading-button
  29.  
  30. - POP-UP > STR-WRS / ACUITE
  31. URL not found
  32.  
  33. - PXU PHOTOSET FIX > SHYTHEMES
  34. http://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets
  35.  
  36. - VIDEO RESIZING > SHYTHEMES
  37. https://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  38.  
  39. -->
  40.  
  41. <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  42. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  43. <link rel="shortcut icon" href="{Favicon}"/>
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  45.  
  46. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  47.  
  48. <link rel="stylesheet" href="https://use.typekit.net/ykd2fhn.css">
  49.  
  50. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Biryani|Comfortaa|Karla|Quicksand|Ubuntu|Varela+Round" rel="stylesheet">
  51.  
  52. <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Nanum+Gothic" rel="stylesheet">
  53.  
  54. <meta name="image:Background" content="" />
  55. <meta name="image:Container" content="">
  56. <meta name="image:Sidebar" content="https://via.placeholder.com/200x100" />
  57. <meta name="image:Header" content="https://via.placeholder.com/610x130" />
  58.  
  59. <meta name="color:Accent one" content="#b8c480" />
  60. <meta name="color:Accent two" content="#f1bb87" />
  61. <meta name="color:Accent text" content="#f3f3f3" />
  62. <meta name="color:Background" content="#f8f8f8" />
  63. <meta name="color:Blockquote" content="#e7e7e7" />
  64. <meta name="color:Bold" content="#b8c480" />
  65. <meta name="color:Border" content="#e7e7e7" />
  66. <meta name="color:Container" content="#f3f3f3" />
  67. <meta name="color:Gradient one" content="#b8c480" />
  68. <meta name="color:Gradient two" content="#f1bb87" />
  69. <meta name="color:Gradient text" content="#f8f8f8" />
  70. <meta name="color:Icons" content="#cccccc" />
  71. <meta name="color:Italic" content="#f1bb87" />
  72. <meta name="color:Link" content="#313131" />
  73. <meta name="color:Link hover" content="#313131" />
  74. <meta name="color:Navigation BG" content="#f3f3f3" />
  75. <meta name="color:Posts" content="#f8f8f8" />
  76. <meta name="color:Post shadow" content="#ececec" />
  77. <meta name="color:Text" content="#5a5a5a" />
  78. <meta name="color:Title" content="#5a5a5a"/>
  79. <meta name="color:Title Text" content="#f3f3f3" />
  80. <meta name="color:Title Background" content="#f1bb87" />
  81.  
  82. <meta name="select:Post size" content="540" title="540px" />
  83. <meta name="select:Post size" content="500" title="500px" />
  84. <meta name="select:Post size" content="450" title="450px" />
  85. <meta name="select:Post size" content="400" title="400px" />
  86. <meta name="select:Post size" content="350" title="350px" />
  87. <meta name="select:Post size" content="300" title="300px" />
  88. <meta name="select:Post size" content="250" title="250px" />
  89.  
  90. <meta name="select:Body font" content="ABeeZee" title="ABeeZee" />
  91. <meta name="select:Body font" content="Biryani" title="Biryani" />
  92. <meta name="select:Body font" content="Comfortaa" title="Comfortaa" />
  93. <meta name="select:Body font" content="Karla" title="Karla" />
  94. <meta name="select:Body font" content="Lato" title="Lato" />
  95. <meta name="select:Body font" content="Montserrat" title="Montserrat" />
  96. <meta name="select:Body font" content="Nanum Gothic" title="Nanum Gothic" />
  97. <meta name="select:Body font" content="Quicksand" title="Quicksand" />
  98. <meta name="select:Body font" content="Ubuntu" title="Ubuntu" />
  99. <meta name="select:Body font" content="Varela Round" title="Varela Round" />
  100.  
  101. <meta name="select:Accent font" content="cooper-black-std" title="Cooper Black" />
  102. <meta name="select:Accent font" content="kepler-std-semicondensed-dis" title="Kepler" />
  103. <meta name="select:Accent font" content="poppins" title="Poppins" />
  104. <meta name="select:Accent font" content="raleway" title="Raleway" />
  105. <meta name="select:Accent font" content="utopia-std-headline" title="Utopia" />
  106.  
  107. <meta name="select:Body letter spacing" content="0px" title="None" />
  108. <meta name="select:Body letter spacing" content=".25px" title=".25" />
  109. <meta name="select:Body letter spacing" content=".50px" title=".5" />
  110. <meta name="select:Body letter spacing" content=".75px" title=".75" />
  111. <meta name="select:Body letter spacing" content="1px" title="1px" />
  112.  
  113. <meta name="select:Body size" content="9px" title="9px" />
  114. <meta name="select:Body size" content="10px" title="10px" />
  115. <meta name="select:Body size" content="11px" title="11px" />
  116.  
  117. <meta name="select:Title size" content="16px" title="16px" />
  118. <meta name="select:Title size" content="20px" title="20px" />
  119. <meta name="select:Title size" content="24px" title="24px" />
  120.  
  121. <meta name="select:Header title size" content="20px" title="20px" />
  122. <meta name="select:Header title size" content="22px" title="22px" />
  123. <meta name="select:Header title size" content="24px" title="24px" />
  124. <meta name="select:Header title size" content="26px" title="26px" />
  125. <meta name="select:Header title size" content="28px" title="28px" />
  126.  
  127. <meta name="select:Styled bold size" content="12px" title="12px" />
  128. <meta name="select:Styled bold size" content="14px" title="14px" />
  129. <meta name="select:Styled bold size" content="16px" title="16px" />
  130. <meta name="select:Styled bold size" content="18px" title="18px" />
  131. <meta name="select:Styled bold size" content="20px" title="20px" />
  132.  
  133. <meta name="select:Bold option" content="300" title="Normal"/>
  134. <meta name="select:Bold option" content="900" title="Bold"/>
  135.  
  136. <meta name="select:Title transform" content="Uppercase" title="Uppercase" />
  137. <meta name="select:Title transform" content="Lowercase" title="Lowercase" />
  138. <meta name="select:Title transform" content="Capitalize" title="Capitalize" />
  139.  
  140. <meta name="select:Bullet symbol" content="\ebc6" title="Arrow" />
  141. <meta name="select:Bullet symbol" content="\ec56" title="Circle" />
  142. <meta name="select:Bullet symbol" content="\ea55" title="Heart" />
  143. <meta name="select:Bullet symbol" content="\eabe" title="Minus" />
  144. <meta name="select:Bullet symbol" content="\eb21" title="Plus" />
  145. <meta name="select:Bullet symbol" content="\eb2f" title="Push pin" />
  146. <meta name="select:Bullet symbol" content="\eb68" title="Star" />
  147. <meta name="select:Bullet symbol" content="\eca9" title="Quote 1" />
  148. <meta name="select:Bullet symbol" content="\eca8" title="Quote 2" />
  149. <meta name="select:Bullet symbol" content="\eacc" title="X 1" />
  150. <meta name="select:Bullet symbol" content="\ec8e" title="X 2" />
  151.  
  152. <meta name="select:Border radius" content="0px" title="0px" />
  153. <meta name="select:Border radius" content="3px" title="3px" />
  154. <meta name="select:Border radius" content="5px" title="5px" />
  155. <meta name="select:Border radius" content="8px" title="8px" />
  156. <meta name="select:Border radius" content="10px" title="10px" />
  157.  
  158. <meta name="select:Blockquote width" content="2px" title="2px" />
  159. <meta name="select:Blockquote width" content="3px" title="3px" />
  160. <meta name="select:Blockquote width" content="4px" title="4px" />
  161. <meta name="select:Blockquote width" content="5px" title="5px" />
  162. <meta name="select:Blockquote width" content="6px" title="6px" />
  163.  
  164. <meta name="select:Photoset gutters" content="0px" title="0px" />
  165. <meta name="select:Photoset gutters" content="1px" title="1px" />
  166. <meta name="select:Photoset gutters" content="2px" title="2px" />
  167. <meta name="select:Photoset gutters" content="3px" title="3px" />
  168.  
  169. <meta name="if:Admin Popup" content="1"/>
  170. <meta name="if:Navigation Popup" content="1"/>
  171. <meta name="if:Update Popup" content="1"/>
  172. <meta name="if:Archive Link" content="1"/>
  173. <meta name="if:Extra Link" content="1"/>
  174. <meta name="if:Ask Style One" content="0"/>
  175. <meta name="if:Ask Style Two" content="0"/>
  176. <meta name="if:Ask Style Three" content="1"/>
  177. <meta name="if:Gradient Accent" content="1"/>
  178. <meta name="if:Grayscale Posts" content="0"/>
  179. <meta name="if:Post Shadow" content="1"/>
  180. <meta name="if:Borders" content="1"/>
  181. <meta name="if:Online FHS" content="1"/>
  182. <meta name="if:Uppercase Description" content="0"/>
  183. <meta name="if:Small Caps Description" content="0"/>
  184. <meta name="if:Styled Bold" content="0"/>
  185.  
  186. <meta name="text:Header Title" content="this is your header title!"/>
  187.  
  188. <meta name="text:Link URL" content="/link"/>
  189. <meta name="text:Link Label" content="link label"/>
  190.  
  191. <meta name="text:Online FHS" content="10"/>
  192.  
  193. <meta name="text:Description Input" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.">
  194.  
  195. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  196.  
  197. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  198.  
  199. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  200.  
  201. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  202.  
  203. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  204.  
  205. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  206.  
  207. <script type="text/javascript">
  208. $(document).ready(function() {
  209. $(".time_ago").timeAgo({
  210. time: "short",
  211. spaces: false,
  212. words: false,
  213. prefix: "",
  214. suffix: "",
  215. });
  216. });
  217. </script>
  218.  
  219. <script>
  220. $(document).ready(function() {
  221. //
  222. $('a.poplight[href^=#]').click(function() {
  223. var popID = $(this).attr('rel');
  224. var popURL = $(this).attr('href');
  225. var query= popURL.split('?');
  226. var dim= query[1].split('&');
  227. var popWidth = dim[0].split('=')[1];
  228. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  229. var popMargTop = ($('#' + popID).height() + 0) / 2;
  230. var popMargLeft = ($('#' + popID).width() + 0) / 2;
  231. $('#' + popID).css({
  232. 'margin-top' : -popMargTop,
  233. 'margin-left' : -popMargLeft
  234. });
  235. $('body').append('<div id="fade"></div>');
  236. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  237. return false;
  238. });
  239. $('a.close, #fade').live('click', function() {
  240. $('#fade , .popup_block').fadeOut(function() {
  241. $('#fade, a.close').remove();
  242. });
  243. return false;
  244. });
  245. });
  246. </script>
  247.  
  248. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  249.  
  250. <script>
  251. (function($){
  252. $(document).ready(function(){
  253. $("[title]").style_my_tooltips({
  254. tip_follows_cursor:true,
  255. tip_delay_time:90,
  256. tip_fade_speed:600,
  257. attribute:"title"
  258. });
  259. });
  260. })(jQuery);
  261. </script>
  262.  
  263. <style type="text/css">
  264.  
  265. /* scroll bar, controls, tooltips */
  266.  
  267. ::-webkit-scrollbar {
  268. width: 5px;
  269. background: {color:Background};
  270. }
  271.  
  272. ::-webkit-scrollbar-track {
  273. background:{color:posts};
  274. }
  275.  
  276. ::-webkit-scrollbar-thumb {
  277. background-color:{color:bold};
  278. }
  279.  
  280. iframe.tmblr-iframe {
  281. z-index:99999999999999!important;
  282. top:10px!important;
  283. right:25px!important;
  284. opacity:0.4;
  285. /* delete invert(1) from here */
  286. filter:invert(1) contrast(150%);
  287. -webkit-filter:invert(1) contrast(150%);
  288. -o-filter:invert(1) contrast(150%);
  289. -moz-filter:invert(1) contrast(150%);
  290. -ms-filter:invert(1) contrast(150%);
  291. /* to here if your blog has a dark background */
  292. transform:scale(0.65);
  293. transform-origin:100% 0;
  294. -webkit-transform:scale(0.65);
  295. -webkit-transform-origin:100% 0;
  296. -o-transform:scale(0.65);
  297. -o-transform-origin:100% 0;
  298. -moz-transform:scale(0.65);
  299. -moz-transform-origin:100% 0;
  300. -ms-transform:scale(0.65);
  301. -ms-transform-origin:100% 0;}
  302.  
  303. iframe.tmblr-iframe:hover {
  304. opacity:0.6!important;}
  305.  
  306. #s-m-t-tooltip {
  307. background-color:{color:posts};
  308. color:{color:text};
  309. font-family:varela round;
  310. font-size:7px;
  311. letter-spacing:1.5px;
  312. text-transform:uppercase;
  313. padding:10px 20px 10px 20px;
  314. margin:20px 0px 0px 20px;
  315. z-index:9999999999999999999999;
  316. {block:ifBorders}
  317. border:1px solid {color:border};
  318. {/block:ifBorders}
  319. }
  320.  
  321. /* body styling */
  322.  
  323. body {
  324. background-color:{color:background};
  325. color:{color:text};
  326. font-family:{select:body font};
  327. font-size:{select:body size};
  328. line-height:calc({select:body size} + 6px);
  329. letter-spacing:{select:body letter spacing};
  330. background-image:url('{image:Background}');
  331. background-attachment:fixed;
  332. }
  333.  
  334. blockquote {
  335. text-align:justify;
  336. margin: 10px;
  337. padding-left: 10px;
  338. border-left: {select:blockquote width} solid {color:blockquote};
  339. }
  340.  
  341. b,strong {
  342. color:{color:bold};
  343. font-weight:{select:bold option};
  344. {block:ifStyledBold}
  345. text-transform:lowercase;
  346. font-family:{select:Accent font};
  347. font-size:{select:Styled Bold Size}
  348. {/block:ifStyledBold}
  349. }
  350.  
  351. i,em {
  352. color:{color:italic};
  353. }
  354.  
  355. h2 {
  356. text-align:center;
  357. font-family:varela round;
  358. font-size:10px;
  359. letter-spacing:1.5px;
  360. text-transform:uppercase;
  361. font-weight:bold;
  362. color:{color:bold};
  363. }
  364.  
  365. h2 b,strong {
  366. color:{color:bold};
  367. }
  368.  
  369. h2 i,em {
  370. color:{color:italic};
  371. }
  372.  
  373. small,sub {
  374. font-size:{select:body size};
  375. }
  376.  
  377. a {
  378. text-decoration: none;
  379. color:{color:link};
  380. -webkit-transition: -webkit-transform .8s ease-in-out;
  381. transition: .8s ease-in-out;
  382. }
  383.  
  384. a:hover {
  385. color:{color:link hover};
  386. -webkit-transition: -webkit-transform .8s ease-in-out;
  387. transition: .8s ease-in-out;
  388. }
  389.  
  390. hr {
  391. border-top:1px solid {color:border};
  392. }
  393.  
  394. pre {
  395. display:block;
  396. background-color:{color:accent one};
  397. color:{color:accent text};
  398. padding:8px;
  399. border-left:5px solid {color:accent two};
  400. text-align:right;
  401. font-family:inherit;
  402. font-size:inherit;
  403. }
  404.  
  405. u {
  406. display:inline-block;
  407. text-decoration:none;
  408. border-bottom:2px solid {color:border};
  409. }
  410.  
  411. ul {
  412. list-style-type: circle;
  413. padding-left:24px;
  414. line-height:180%;
  415. }
  416.  
  417. li {
  418. padding-left: 0px;
  419. margin-bottom: 0px;
  420. list-style: none;
  421. }
  422.  
  423. li:before {
  424. color: {color:bold};
  425. content: "{select:bullet symbol}";
  426. font-family: 'honeybee';
  427. font-size:7px;
  428. display: inline-block;
  429. margin-left: -2.2em;
  430. width: 2.2em;
  431. }
  432.  
  433. /* titles, quotes and links */
  434.  
  435. .post_titles, h1 {
  436. font-size:{select:title size};
  437. text-transform:{select:title transform};
  438. color:{color:title text};
  439. text-align:right;
  440. line-height:130%;
  441. padding:15px;
  442. background-color:{color:title background};
  443. border-bottom:1px solid {color:border};
  444. }
  445.  
  446.  
  447. .link_main {
  448. font-size:{select:title size};
  449. text-transform:{select:title transform};
  450. color:{color:title text};
  451. text-align:right;
  452. line-height:110%;
  453. padding:15px;
  454. background-color:{color:title background};
  455. border-bottom:1px solid {color:border};
  456. }
  457.  
  458. .link_host {
  459. text-align:right;
  460. font-family:varela round;
  461. font-size:7px;
  462. letter-spacing:1.5px;
  463. text-transform:uppercase;
  464. font-weight:bold;
  465. color:{color:title text};
  466. }
  467.  
  468. .link_main a {
  469. color:{color:title text};
  470. }
  471.  
  472. .link_desc {
  473. display:block;
  474. padding:10px 20px 10px 20px;
  475. text-align:justify;
  476. }
  477.  
  478. .quote_full {
  479. display:block;
  480. padding:10px 20px 10px 20px;
  481. }
  482.  
  483. .quote_q {
  484. display:block;
  485. border-bottom:1px solid {color:border};
  486. padding-bottom:10px;
  487. font-size:{select:title size};
  488. text-transform:{select:title transform};
  489. color:{color:accent one};
  490. text-align:left;
  491. line-height:130%;
  492. }
  493.  
  494. .quote_source {
  495. display:block;
  496. text-align:right;
  497. }
  498.  
  499. .quote_source a {
  500. font-size:12px;
  501. font-weight:bold;
  502. font-family:varela round;
  503. text-transform:uppercase;
  504. }
  505.  
  506. /* sidebars */
  507.  
  508. #sidebar_info {
  509. margin-top:130px;
  510. width:202px;
  511. position:fixed;
  512. display:block;
  513. }
  514.  
  515. #sidebar_info a {
  516. color:{color:accent two};
  517. }
  518.  
  519. #sidebar_info pagset {
  520. margin-top:10px;
  521. text-align:right;
  522. display:block;
  523. font-family:karla;
  524. font-size:7px;
  525. letter-spacing:1.5px;
  526. text-transform:uppercase;
  527. }
  528.  
  529. #sidebar_info pagset a {
  530. color:{color:accent one};
  531. }
  532.  
  533. .sidebar_desc {
  534. text-align:justify;
  535. padding:20px;
  536. border-radius:{select:border radius} {select:border radius} 0px 0px;
  537. background-color:{color:posts};
  538. height:165px;
  539. {block:ifBorders}
  540. border:1px solid {color:border};
  541. {/block:ifBorders}
  542. {block:ifPostShadow}
  543. box-shadow: 2px 2px 9px {color:post shadow};
  544. {/block:ifPostShadow}
  545. {block:ifUppercaseDescription}
  546. font-family:karla;
  547. font-size:7.5px;
  548. letter-spacing:1px;
  549. line-height:16px;
  550. text-transform:uppercase;
  551. {/block:ifUppercaseDescription}
  552. {block:ifSmallCapsDescription}
  553. font-family:Biryani;
  554. font-variant:small-caps;
  555. font-size:8.5px;
  556. letter-spacing:1px;
  557. line-height:16px;
  558. {/block:ifSmallCapsDescription}
  559. }
  560.  
  561. .sidebar_image {
  562. margin-top:-1px;
  563. display:block;
  564. text-align:center;
  565. }
  566.  
  567. .sidebar_image img {
  568. width:200px;
  569. height:100px;
  570. border-radius:0px 0px {select:border radius} {select:border radius};
  571. {block:ifBorders}
  572. border:1px solid {color:border};
  573. {/block:ifBorders}
  574. {block:ifPostShadow}
  575. box-shadow: 2px 2px 9px {color:post shadow};
  576. {/block:ifPostShadow}
  577. -webkit-filter: grayscale(0%);
  578. -webkit-transition: all 0.6s ease-in-out;
  579. -moz-transition: all 0.6s ease-in-out;
  580. -o-transition: all 0.6s ease-in-out;
  581. -ms-transition: all 0.6s ease-in-out;
  582. transition: all 0.6s ease-in-out;
  583. }
  584.  
  585. .op2_sidebar {
  586. margin-top:0px;
  587. text-align:justify;
  588. padding:20px;
  589. border-radius:0px 0px {select:border radius} {select:border radius};
  590. background-color:{color:posts};
  591. height:268px;
  592. {block:ifBorders}
  593. border:1px solid {color:border};
  594. {/block:ifBorders}
  595. {block:ifPostShadow}
  596. box-shadow: 2px 2px 9px {color:post shadow};
  597. {/block:ifPostShadow}
  598. {block:ifUppercaseDescription}
  599. font-family:varela round;
  600. font-size:7px;
  601. letter-spacing:1px;
  602. word-spacing:2px;
  603. line-height:16px;
  604. text-transform:uppercase;
  605. {/block:ifUppercaseDescription}
  606. {block:ifSmallCapsDescription}
  607. font-family:Biryani;
  608. font-variant:small-caps;
  609. font-size:8.5px;
  610. letter-spacing:1px;
  611. word-spacing:2px;
  612. line-height:16px;
  613. {/block:ifSmallCapsDescription}
  614. }
  615.  
  616. /* navigation */
  617.  
  618. .navigation {
  619. display:block;
  620. text-align:center;
  621. position:fixed;
  622. margin-left:calc({select:post size}px + 300px);
  623. margin-top:50px;
  624. }
  625.  
  626. .navigation a {
  627. display:inline-block;
  628. font-size:12px;
  629. width:30px;
  630. height:30px;
  631. line-height:30px;
  632. margin-bottom:10px;
  633. border-radius:{select:border radius};
  634. color:{color:accent one};
  635. background-color:{color:navigation BG};
  636. {block:ifBorders}
  637. border:1px solid {color:border};
  638. {/block:ifBorders}
  639. -webkit-transition: 2s ease-out;
  640. -moz-transition: 2s ease-out;
  641. -o-transition: 2s ease-out;
  642. transition: 2s ease-out;
  643. }
  644.  
  645. .navigation a:hover {
  646. color:{color:accent two};
  647. -webkit-transition: 2s ease-out;
  648. -moz-transition: 2s ease-out;
  649. -o-transition: 2s ease-out;
  650. transition: 2s ease-out;
  651. }
  652.  
  653. /* header */
  654.  
  655. .header {
  656. position:fixed;
  657. margin-top:-35px;
  658. margin-left:120px;
  659. width:calc({select:post size}px + 155px);
  660. }
  661.  
  662. .header img {
  663. border-radius:0px {select:border radius} 0px 0px;
  664. width:calc({select:post size}px + 155px);
  665. height:130px;
  666. {block:ifBorders}
  667. border-bottom:1px solid {color:border};
  668. {/block:ifBorders}
  669. -webkit-filter: grayscale(0%);
  670. -webkit-transition: all 0.6s ease-in-out;
  671. -moz-transition: all 0.6s ease-in-out;
  672. -o-transition: all 0.6s ease-in-out;
  673. -ms-transition: all 0.6s ease-in-out;
  674. transition: all 0.6s ease-in-out;
  675. }
  676.  
  677. .header_fhs {
  678. position:fixed;
  679. margin-left:-45px;
  680. margin-top:-45px;
  681. font-family:karla;
  682. font-size:10px;
  683. width:20px;
  684. height:20px;
  685. line-height:20px;
  686. text-align:center;
  687. padding:5px;
  688. color:{color:accent text};
  689. background-color:{color:accent one};
  690. border-radius:50%;
  691. {block:IfGradientAccent}
  692. color:{color:gradient text};
  693. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  694. {/block:IfGradientAccent}
  695. z-index:99999999999999;
  696. -webkit-transition: -webkit-transform .8s ease-in-out;
  697. transition: .8s ease-in-out;
  698. }
  699.  
  700. .header_fhs a {
  701. color:{color:accent text};
  702. {block:ifGradientAccent}
  703. color:{color:gradient text};
  704. {/block:ifGradientAccent}
  705. }
  706.  
  707. .header_fhs:hover {
  708. -webkit-transform: rotate(360deg);
  709. transform: rotate(360deg);
  710. }
  711.  
  712. .header_left {
  713. position:fixed;
  714. margin-left:-35px;
  715. margin-top:-35px;
  716. width:185px;
  717. height:130px;
  718. background-color:{color:posts};
  719. border-radius:{select:border radius} 0px 0px 0px;
  720. clip-path: polygon(0 0, 100% 0%, 87% 100%, 0% 100%);
  721. z-index:999999;
  722. {block:ifBorders}
  723. border-bottom:1px solid {color:border};
  724. {/block:ifBorders}
  725. }
  726.  
  727. .header_title {
  728. font-family:{select:accent font};
  729. font-size:{select:header title size};
  730. line-height:calc({select:header title size} + 4px);
  731. color:{color:accent two};
  732. height:70px;
  733. overflow:hidden;
  734. margin-top:30px;
  735. padding-left:20px;
  736. padding-right:20px;
  737. }
  738.  
  739. .header_search {
  740. padding-left:10px;
  741. padding-right:10px;
  742. margin-top:5px;
  743. }
  744.  
  745. .typing, .typing::placeholder, #searchentries, #searchentries a, .enter {
  746. background-color:{color:posts};
  747. padding:5px;
  748. color:{color:text};
  749. text-transform:uppercase;
  750. font-family:karla;
  751. font-size:8px;
  752. letter-spacing:2px;
  753. }
  754.  
  755. .typing, #searchentries {
  756. width:100px;
  757. }
  758.  
  759. .typing {
  760. margin-bottom:0px;
  761. outline:none;
  762. border:0px solid transparent;
  763. }
  764.  
  765. .typing::placeholder {
  766. padding:0px;!important;
  767. }
  768.  
  769. .enter {
  770. margin-left:4px;
  771. margin-bottom:0px;
  772. outline:none;
  773. border:0px solid transparent;
  774. cursor:pointer;
  775. color:{color:bold};
  776. font-weight:bold;
  777. text-transform:uppercase;
  778. }
  779.  
  780. /* container and posts */
  781.  
  782. #container {
  783. margin:50px auto;
  784. width:calc({select:post size}px + 240px);
  785. height:440px;
  786. padding:35px;
  787. overflow:none;
  788. border-radius:{select:border radius};
  789. background-color:{color:container};
  790. background-image:url('{image:Container}');
  791. {block:ifBorders}
  792. border:1px solid {color:border};
  793. {/block:ifBorders}
  794. {block:ifPostShadow}
  795. box-shadow: 2px 2px 9px {color:post shadow};
  796. {/block:ifPostShadow}
  797. -webkit-filter: grayscale(0%);
  798. -webkit-transition: all 0.6s ease-in-out;
  799. -moz-transition: all 0.6s ease-in-out;
  800. -o-transition: all 0.6s ease-in-out;
  801. -ms-transition: all 0.6s ease-in-out;
  802. transition: all 0.6s ease-in-out;
  803. }
  804.  
  805. picons {
  806. margin-left:15px;
  807. font-size:8px;
  808. color:{color:icons};
  809. }
  810.  
  811. #postcontain {
  812. margin-top:130px;
  813. margin-left:240px;
  814. width:{select:post size}px;
  815. padding-right:20px;
  816. height:305px;
  817. overflow:auto;
  818. }
  819.  
  820. .posts {
  821. position:relative;
  822. width:{select:post size}px;
  823. display:block;
  824. margin-bottom:30px;
  825. border-radius:{select:border radius} {select:border radius} {select:border radius} {select:border radius};
  826. background-color:{color:posts};
  827. {block:ifBorders}
  828. border:1px solid {color:border};
  829. {/block:ifBorders}
  830. {block:ifPostShadow}
  831. box-shadow: 2px 2px 9px {color:post shadow};
  832. {/block:ifPostShadow}
  833. }
  834.  
  835. img {
  836. max-width: 100%;
  837. {block:IfGrayscalePosts}
  838. -webkit-filter: grayscale(100%);
  839. -webkit-transition: all 0.6s ease-in-out;
  840. -moz-transition: all 0.6s ease-in-out;
  841. -o-transition: all 0.6s ease-in-out;
  842. -ms-transition: all 0.6s ease-in-out;
  843. transition: all 0.6s ease-in-out;
  844. {/block:IfGrayscalePosts}
  845. }
  846.  
  847. .caption {
  848. padding:15px;
  849. font-family:inherit;
  850. font-size:inherit;
  851. }
  852.  
  853. .time_ago {
  854. float:left;
  855. display:inline-block;
  856. }
  857.  
  858. .info {
  859. height:15px;
  860. font-family:abeezee;
  861. font-size:9px;
  862. display:block;
  863. text-align:left;
  864. text-transform:uppercase;
  865. background-color:{color:posts};
  866. color:{color:text};
  867. border-radius:{select:border radius} {select:border radius} 0px 0px;
  868. padding:10px 15px 10px 15px;
  869. border-bottom:1px solid {color:border};
  870. width:calc({select:post size}px - 30px);
  871. }
  872.  
  873. .info a {
  874. letter-spacing:.5px;
  875. margin-left:15px;
  876. color:{color:text};
  877. }
  878.  
  879. .tags {
  880. margin-left:-1px;
  881. font-family:abeezee;
  882. font-size:7px;
  883. display:block;
  884. text-align:left;
  885. text-transform:uppercase;
  886. background-color:{color:posts};
  887. color:{color:text};
  888. border-top:1px solid {color:border};
  889. border-radius:0px 0px {select:border radius} {select:border radius};
  890. padding:10px 15px 10px 15px;
  891. width:calc({select:post size}px - 30px);
  892. {block:ifBorders}
  893. border-left:1px solid {color:border};
  894. {/block:ifBorders}
  895. }
  896.  
  897. .tags a {
  898. letter-spacing:1px;
  899. color:{color:text};
  900. }
  901.  
  902. #post_info {
  903. padding:30px;
  904. margin-top:-15px;
  905. }
  906.  
  907. #post_info ol.notes {
  908. list-style-type: none;
  909. margin: 0;
  910. padding: 0;
  911. }
  912.  
  913. #post_info li {
  914. list-style-type:none;
  915. padding:5px;
  916. }
  917.  
  918. #post_info li.note.like:before {
  919. text-align:center;
  920. font-size:8px;
  921. width:8px;
  922. height:8px;
  923. line-height:8px;
  924. padding:8px;
  925. color:{color:posts};
  926. background-color:{color:accent one};
  927. content:'\ea55';
  928. border-radius:50%;
  929. text-shadow:0px 1px 2px #6c6c6c;
  930. }
  931.  
  932. #post_info li.note.reblog:before {
  933. text-align:center;
  934. font-size:8px;
  935. width:8px;
  936. height:8px;
  937. line-height:8px;
  938. padding:8px;
  939. color:{color:posts};
  940. background-color:{color:accent two};
  941. content:'\ebc2';
  942. border-radius:50%;
  943. text-shadow:0px 1px 2px #6c6c6c;
  944. }
  945.  
  946. #post_info li.note.reply:before {
  947. text-align:center;
  948. font-size:8px;
  949. width:8px;
  950. height:8px;
  951. line-height:8px;
  952. padding:8px;
  953. color:{color:posts};
  954. background-color:{color:icons};
  955. content:'\eca8';
  956. border-radius:50%;
  957. text-shadow:0px 1px 2px #6c6c6c;
  958. }
  959.  
  960. #post_info img.avatar {
  961. margin-right: 5px;
  962. border-radius:{select:border radius};
  963. width: 0px;
  964. height: 0px;
  965. }
  966.  
  967. /* asks */
  968.  
  969. .ask {
  970. float:right;
  971. z-index:10;
  972. text-align:center;
  973. font-size:10px;
  974. font-weight:bold;
  975. text-transform:uppercase;
  976. font-family:karla;
  977. {block:ifPostShadow}
  978. box-shadow: 2px 2px 10px {color:post shadow};
  979. {/block:ifPostShadow}
  980. border-bottom:2px solid {color:accent two};
  981. color:{color:accent text};
  982. background-color:{color:accent one};
  983. margin-top:-15px;
  984. margin-right:0px;
  985. margin-left:0px;
  986. border-radius:20px;
  987. padding:8px 15px 8px 15px;
  988. {block:IfGradientAccent}
  989. color:{color:gradient text};
  990. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  991. {/block:IfGradientAccent}
  992. }
  993.  
  994. .ask a {
  995. color:{color:accent text};
  996. font-size:10px;
  997. font-weight:bold;
  998. text-transform:uppercase;
  999. font-family:karla;
  1000. {block:IfGradientAccent}
  1001. color:{color:gradient text};
  1002. {/block:IfGradientAccent}
  1003. }
  1004.  
  1005. .ask_line {
  1006. height:1px;
  1007. margin-top:5px;
  1008. margin-left:0px;
  1009. background-color:{color:border};
  1010. z-index:-1;
  1011. word-wrap:break-word;
  1012. }
  1013.  
  1014. .question {
  1015. color:{color:text};
  1016. padding:15px;
  1017. display:block;
  1018. text-align:justify;
  1019. margin-left:5px;
  1020. word-wrap:break-word;
  1021. }
  1022.  
  1023. #question_box {
  1024. word-wrap:break-word;
  1025. padding:10px;
  1026. }
  1027.  
  1028. .q2_question {
  1029. margin:10px 10px 0px 10px;
  1030. display:block;
  1031. background-color:{color:container};
  1032. padding:15px;
  1033. text-align:justify;
  1034. border-radius:{select:border radius} {select:border radius} 0px 0px;
  1035. {block:ifBorders}
  1036. border-top:1px solid {color:border};
  1037. border-right:1px solid {color:border};
  1038. border-left:1px solid {color:border};
  1039. {/block:ifBorders}
  1040. }
  1041.  
  1042. .q2_asker {
  1043. margin:0px 10px 0px 10px;
  1044. display:block;
  1045. padding:8px;
  1046. text-align:right;
  1047. border-radius:0px 0px {select:border radius} {select:border radius};
  1048. text-transform:lowercase;
  1049. {block:IfGradientAccent}
  1050. color:{color:gradient text};
  1051. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1052. {/block:IfGradientAccent}
  1053. }
  1054.  
  1055. .q2_asker a {
  1056. color:{color:accent text};
  1057. }
  1058.  
  1059. #q3 {
  1060. word-wrap:break-word;
  1061. padding:20px;
  1062. }
  1063.  
  1064. .q3_asker {
  1065. text-transform:lowercase;
  1066. font-size:calc({select:body size} + 3px);
  1067. font-weight:bold;
  1068. margin-top:15px;
  1069. display:block;
  1070. text-align:right;
  1071. color:{color:bold};
  1072. }
  1073.  
  1074. .q3_asker a {
  1075. color:{color:bold};
  1076. }
  1077.  
  1078. .q3_icon1 {
  1079. display:inline-block;
  1080. float:left;
  1081. width:50px;
  1082. height:50px;
  1083. line-height:50px;
  1084. font-family:arial;
  1085. font-weight:900;
  1086. font-size:20px;
  1087. z-index:10;
  1088. text-align:center;
  1089. text-transform:uppercase;
  1090. color:{color:accent text};
  1091. background-color:{color:accent one};
  1092. border-radius:50%;
  1093. {block:IfGradientAccent}
  1094. color:{color:gradient text};
  1095. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1096. {/block:IfGradientAccent}
  1097. }
  1098.  
  1099. .q3_icon1 a {
  1100. color:{color:accent text};
  1101. {block:IfGradientAccent}
  1102. color:{color:gradient text};
  1103. {/block:IfGradientAccent}
  1104. }
  1105.  
  1106. .q3_icon2:before {
  1107. content: "";
  1108. margin-left:-36px;
  1109. position: absolute;
  1110. background-color:{color:border};
  1111. height:1px;
  1112. width:21px;
  1113. margin-top:27px;
  1114. }
  1115.  
  1116. .q3_icon2 {
  1117. display:inline-block;
  1118. float:right;
  1119. width:50px;
  1120. height:50px;
  1121. line-height:50px;
  1122. font-family:arial;
  1123. font-weight:900;
  1124. font-size:20px;
  1125. z-index:10;
  1126. text-align:center;
  1127. text-transform:uppercase;
  1128. color:{color:accent text};
  1129. background-color:{color:accent two};
  1130. border-radius:50%;
  1131. {block:IfGradientAccent}
  1132. color:{color:gradient text};
  1133. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1134. {/block:IfGradientAccent}
  1135. }
  1136.  
  1137. .q3_icon2 a {
  1138. color:{color:accent text};
  1139. {block:IfGradientAccent}
  1140. color:{color:gradient text};
  1141. {/block:IfGradientAccent}
  1142. }
  1143.  
  1144. .q3_question:before {
  1145. content: "";
  1146. margin-left:-36px;
  1147. position: absolute;
  1148. background-color:{color:border};
  1149. height:1px;
  1150. width:21px;
  1151. margin-top:9px;
  1152. }
  1153.  
  1154. .q3_question {
  1155. color:{color:text};
  1156. margin-left:70px;
  1157. padding:15px;
  1158. display:block;
  1159. text-align:justify;
  1160. word-wrap:break-word;
  1161. background-color:{color:container};
  1162. border-radius:{select:border radius};
  1163. {block:ifBorders}
  1164. border:1px solid {color:border};
  1165. {/block:ifBorders}
  1166. }
  1167.  
  1168. .q3_answer {
  1169. margin-right:70px;
  1170. color:{color:text};
  1171. margin-left:0px;
  1172. padding:15px;
  1173. display:block;
  1174. text-align:justify;
  1175. word-wrap:break-word;
  1176. background-color:{color:container};
  1177. border-radius:{select:border radius};
  1178. {block:ifBorders}
  1179. border:1px solid {color:border};
  1180. {/block:ifBorders}
  1181. }
  1182.  
  1183. /* read more */
  1184.  
  1185. .more-btn-wrap{
  1186. position: relative;
  1187. padding-bottom:25px;
  1188. width: 100%;
  1189. }
  1190.  
  1191. .more-btn-wrap a:link{
  1192. position: relative;
  1193. left: calc(50% - 55px);
  1194. width:85px;
  1195. display:inline-block;
  1196. font-size:10px;
  1197. font-weight:bold;
  1198. font-family:karla;
  1199. font-family:{select:body font};
  1200. text-align:center;
  1201. text-transform:uppercase;
  1202. line-height:18px;
  1203. {block:ifPostShadow}
  1204. box-shadow: 2px 2px 9px {color:post shadow};
  1205. {/block:ifPostShadow}
  1206. border-bottom:2px solid {color:accent one};
  1207. color:{color:accent text};
  1208. background-color:{color:accent two};
  1209. border-radius:30px;
  1210. padding:8px 15px 8px 15px;
  1211. {block:IfGradientAccent}
  1212. color:{color:gradient text};
  1213. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1214. {/block:IfGradientAccent}
  1215. }
  1216.  
  1217. .more-btn-wrap a {
  1218. position: relative;
  1219. left: calc(50% - 37px);
  1220. display:inline-block;
  1221. font-size:10px;
  1222. font-family:{select:body font};
  1223. text-align:center;
  1224. text-transform:lowercase;
  1225. line-height:18px;
  1226. letter-spacing:.25px;
  1227. {block:ifPostShadow}
  1228. box-shadow: 2px 2px 9px {color:post shadow};
  1229. {/block:ifPostShadow}
  1230. border-bottom:2px solid {color:accent one};
  1231. color:{color:accent text};
  1232. background-color:{color:accent two};
  1233. border-radius:20px;
  1234. padding:8px 15px 8px 15px;
  1235. {block:IfGradientAccent}
  1236. color:{color:gradient text};
  1237. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1238. {/block:IfGradientAccent}
  1239. }
  1240.  
  1241. /* credit */
  1242.  
  1243. #credit {
  1244. float:center;
  1245. position:fixed;
  1246. bottom:-1px;
  1247. right:-1px;
  1248. border-radius:{select:border radius} 0px 0px 0px;
  1249. color:{color:accent one};
  1250. font-size:10px;
  1251. text-transform:uppercase;
  1252. width:30px;
  1253. text-align:center;
  1254. height:30px;
  1255. line-height:30px;
  1256. background-color:{color:posts};
  1257. {block:ifBorders}
  1258. border-left:8px solid {color:accent one};
  1259. border-top:8px solid {color:accent two};
  1260. {/block:ifBorders}
  1261. }
  1262.  
  1263. #credit a {
  1264. color:{color:accent one};
  1265. font-weight:bold;
  1266. }
  1267.  
  1268. /* main popup coding */
  1269.  
  1270. .popup_block{
  1271. display:none;
  1272. background:{color:container};
  1273. position:fixed;
  1274. top:50%;
  1275. left:50%;
  1276. z-index: 99999;
  1277. }
  1278.  
  1279. *html #fade {position: absolute;}
  1280. *html .popup_block {position: absolute;}
  1281. #fade {
  1282. display:none;
  1283. position:fixed;
  1284. left:0px;
  1285. top:0px;
  1286. width:100%;
  1287. height:100%;
  1288. z-index:9999;
  1289. background:{color:container};
  1290. opacity:1;
  1291. }
  1292.  
  1293. /* nav popup */
  1294.  
  1295. #nav_popup {
  1296. width:480px;
  1297. text-align:center;
  1298. }
  1299.  
  1300. .nav_main {
  1301. width:160px;
  1302. padding:30px 30px 0px 30px;
  1303. {block:ifBorders}
  1304. border:1px solid {color:border};
  1305. {/block:ifBorders}
  1306. border-radius:{select:border radius};
  1307. background-color:{color:posts};
  1308. {block:ifPostShadow}
  1309. box-shadow: 2px 2px 5px {color:post shadow};
  1310. {/block:ifPostShadow}
  1311. text-align:center;
  1312. display:inline-block;
  1313. margin-right:15px;
  1314. margin-bottom:15px;
  1315. }
  1316.  
  1317. .nav_headers {
  1318. border-radius:{select:border radius} {select:border radius} 0px 0px;
  1319. padding:20px;
  1320. margin-left:-30px;
  1321. margin-right:-30px;
  1322. margin-top:-30px;
  1323. text-align:center;
  1324. display:block;
  1325. text-transform:uppercase;
  1326. font-size:calc({select:body size} + 6px);
  1327. letter-spacing:2px;
  1328. font-weight:bold;
  1329. background-color:{color:accent one};
  1330. color:{color:accent text};
  1331. {block:IfGradientAccent}
  1332. color:{color:gradient text};
  1333. background-image: linear-gradient(to bottom right, {color:gradient one}, {color:gradient two});
  1334. {/block:IfGradientAccent}
  1335. }
  1336.  
  1337. .nav_links {
  1338. margin-bottom:20px;
  1339. text-align:center;
  1340. margin-top:20px;
  1341. margin-left:-5px;
  1342. display:block;
  1343. }
  1344.  
  1345. .nav_links a {
  1346. width:140px;
  1347. margin-bottom:5px;
  1348. text-align:left;
  1349. display:inline-block;
  1350. padding:8px 15px 8px 15px;
  1351. text-transform:lowercase;
  1352. font-size:calc({select:body size} + 2px);
  1353. color:{color:text};
  1354. -webkit-transition: 2s ease-out;
  1355. -moz-transition: 2s ease-out;
  1356. -o-transition: 2s ease-out;
  1357. transition: 2s ease-out;
  1358. background-color:{color:accent one};
  1359. color:{color:accent text};
  1360. border-bottom:3px solid {color:accent two};
  1361. }
  1362.  
  1363. .nav_links a:hover {
  1364. background-color:{color:accent two};
  1365. color:{color:accent text};
  1366. border-bottom:3px solid {color:accent one};
  1367. -webkit-transition: 2s ease-out;
  1368. -moz-transition: 2s ease-out;
  1369. -o-transition: 2s ease-out;
  1370. transition: 2s ease-out;
  1371. }
  1372.  
  1373. /* update popup */
  1374.  
  1375. #update_popup {
  1376. width:240px;
  1377. text-align:center;
  1378. padding:30px;
  1379. {block:ifBorders}
  1380. border:1px solid {color:border};
  1381. {/block:ifBorders}
  1382. border-radius:{select:border radius};
  1383. background-color:{color:posts};
  1384. {block:ifPostShadow}
  1385. box-shadow: 2px 2px 5px {color:post shadow};
  1386. {/block:ifPostShadow}
  1387. text-align:center;
  1388. }
  1389.  
  1390. .update_notif {
  1391. text-align:right;
  1392. display:block;
  1393. text-transform:uppercase;
  1394. font-size:calc({select:body size} + 3px);
  1395. font-weight:bold;
  1396. color:{color:accent one};
  1397. }
  1398.  
  1399. .update_notif:before {
  1400. color: {color:accent two};
  1401. content: "\e910";
  1402. font-family: 'honeybee';
  1403. font-size:calc({select:body size} + 6px);
  1404. display: inline-block;
  1405. margin-left: -25px;
  1406. width: 15px;
  1407. padding-right:15px;
  1408. }
  1409.  
  1410. .update_more {
  1411. text-align:justify;
  1412. display:block;
  1413. padding:15px;
  1414. -webkit-transition: -webkit-transform .8s ease-in-out;
  1415. transition: .8s ease-in-out;
  1416. }
  1417.  
  1418. .update_more:before {
  1419. content: "";
  1420. margin-left:-15px;
  1421. position: absolute;
  1422. background-color:{color:border};
  1423. height:1px;
  1424. width:10px;
  1425. margin-top:6px;
  1426. -webkit-transition: -webkit-transform .8s ease-in-out;
  1427. transition: .8s ease-in-out;
  1428. }
  1429.  
  1430. .update_more:hover {
  1431. -webkit-transition: -webkit-transform .8s ease-in-out;
  1432. transition: .8s ease-in-out;
  1433. }
  1434.  
  1435. .update_more:hover:before {
  1436. content: "";
  1437. margin-left:-25px;
  1438. position: absolute;
  1439. background-color:{color:border};
  1440. height:1px;
  1441. width:20px;
  1442. margin-top:6px;
  1443. -webkit-transition: -webkit-transform .8s ease-in-out;
  1444. transition: .8s ease-in-out;
  1445. }
  1446.  
  1447. /* admin popup */
  1448.  
  1449. #admin_popup {
  1450. width:310px;
  1451. text-align:center;
  1452. }
  1453.  
  1454. .admin_main {
  1455. margin-bottom:15px;
  1456. width:310px;
  1457. height:80px;
  1458. text-align:center;
  1459. }
  1460.  
  1461. .admin_photo {
  1462. width:80px;
  1463. height:80px;
  1464. }
  1465.  
  1466. .admin_photo img {
  1467. border-radius:{select:border radius} 0px 0px {select:border radius};
  1468. width:80px;
  1469. height:80px;
  1470. {block:ifBorders}
  1471. border:1px solid {color:border};
  1472. {/block:ifBorders}
  1473. }
  1474.  
  1475. .admin_name {
  1476. margin-top:-80px;
  1477. margin-left:70px;
  1478. width:200px;
  1479. height:42px;
  1480. padding:20px;
  1481. line-height:20px;
  1482. color:{color:accent one};
  1483. font-family:{select:accent font};
  1484. font-size:{select:header title size};
  1485. clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);
  1486. {block:ifBorders}
  1487. border:1px solid {color:border};
  1488. height:40px;
  1489. {/block:ifBorders}
  1490. border-radius:0px {select:border radius} {select:border radius} 0px;
  1491. background-color:{color:posts};
  1492. {block:ifPostShadow}
  1493. box-shadow: 2px 2px 5px {color:post shadow};
  1494. {/block:ifPostShadow}
  1495. }
  1496.  
  1497. .admin_subtitle {
  1498. display:block;
  1499. font-style:italic;
  1500. font-family:{select:body font};
  1501. font-size:{select:body size};
  1502. color:{color:text};
  1503. }
  1504.  
  1505. /* audio */
  1506.  
  1507. .audio {
  1508. display:block;
  1509. border-radius:{select:border radius};
  1510. margin:10px 10px 10px 10px;
  1511. background-color:{color:container};
  1512. padding:25px;
  1513. height:30px;
  1514. {block:ifBorders}
  1515. border:1px solid {color:border};
  1516. {/block:ifBorders}
  1517. }
  1518.  
  1519. .playbutton {
  1520. width:26px;
  1521. height:26px;
  1522. overflow:hidden;
  1523. position:relative;
  1524. z-index:9;
  1525. border-radius:50%;
  1526. opacity:.7;
  1527. float:left;
  1528. }
  1529.  
  1530. .albumart img {
  1531. margin-top:-5px;
  1532. height:30px;
  1533. width:30px;
  1534. position:relative;
  1535. float:right;
  1536. border-radius:50%;
  1537. border:3px solid {color:border};
  1538. padding:3px;
  1539. }
  1540.  
  1541. .details {
  1542. margin-top:0px;
  1543. margin-left:15px;
  1544. text-align:left;
  1545. float:left;
  1546. padding-left:10px;
  1547. text-transform:lowercase;
  1548. border-left:5px solid {color:border};
  1549. }
  1550.  
  1551. /* chats */
  1552.  
  1553. .chats {
  1554. display:block;
  1555. padding:15px;
  1556. }
  1557.  
  1558. .user_1, .user_3, .user_5 {
  1559. text-align:left;
  1560. display:block;
  1561. padding:10px;
  1562. }
  1563.  
  1564. .user_2, .user_4, .user_6 {
  1565. text-align:right;
  1566. display:block;
  1567. padding:10px;
  1568. }
  1569.  
  1570. </style>
  1571.  
  1572. </head>
  1573.  
  1574. <body>
  1575.  
  1576. <div id="container">
  1577.  
  1578. {block:ifOnlineFHS}
  1579. <div class="header_fhs">
  1580. {text:online fhs}
  1581. </div>
  1582. {/block:ifOnlineFHS}
  1583.  
  1584. <div class="header_left">
  1585. <div class="header_title">{text:header title}</div>
  1586.  
  1587. <div class="header_search">
  1588. <form class="find" action="/search" method="get">
  1589. <a class="expand"><input class="typing" type="text" name="q" value="{SearchQuery}" placeholder="search..." autocomplete="off"/></a>
  1590. <input class="enter" type="submit" value="go"/>
  1591. </form>
  1592. </div>
  1593. </div>
  1594. <div class="header"><img src="{image:header}"></div>
  1595.  
  1596. <div id="sidebar_info">
  1597.  
  1598. <div class="sidebar_desc">
  1599. <div style="overflow:auto; padding-right:8px; margin-right:-12px; height: 152px;">
  1600. {text:Description Input}
  1601. </div>
  1602. {block:Pagination}
  1603. <pagset>
  1604. {block:PreviousPage}
  1605. <div style="text-align:left;">
  1606. <a href="{PreviousPage}">back</a>
  1607. </div>
  1608. {/block:PreviousPage}
  1609. {block:NextPage}
  1610. <a href="{NextPage}">next</a>
  1611. {/block:NextPage}
  1612. {/block:Pagination}
  1613. </pagset>
  1614. </div>
  1615.  
  1616. <div class="sidebar_image"><img src="{image:sidebar}"></div>
  1617.  
  1618. </div>
  1619.  
  1620. <div class="navigation">
  1621. <a href="/" title="index"><span class="th th-home-o"></span></a><br>
  1622.  
  1623. <a href="/ask" title="message"><span class="th th-chat-bubbles"></span></a><br>
  1624.  
  1625. {block:ifArchiveLink}
  1626. <a href="/archive" title="archive"><span class="th th-box-2-o"></span></a><br>
  1627. {/block:ifArchiveLink}
  1628.  
  1629. {block:ifUpdatePopup}
  1630. <a href="#?w=300" rel="update" class="poplight" title="updates"><span class="th th-bell-o"></span></a><br>
  1631. {/block:ifUpdatePopup}
  1632.  
  1633. {block:ifNavigationPopup}
  1634. <a href="#?w=480" rel="nav" class="poplight" title="navigation"><span class="th th-earth-o"></span></a><br>
  1635. {/block:ifNavigationPopup}
  1636.  
  1637. {block:ifAdminPopup}
  1638. <a href="#?w=310" rel="admin" class="poplight" title="admins"><span class="th th-users-o"></span></a><br>
  1639. {/block:ifAdminPopup}
  1640.  
  1641. {block:ifExtraLink}
  1642. <a href="{text:link url}" title="{text:link label}"><span class="th th-star-o"></span></a>
  1643. {block:ifExtraLink}
  1644.  
  1645. </div>
  1646.  
  1647. <div id="postcontain">
  1648.  
  1649. {block:ContentSource}
  1650. <!– {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1651. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1652. {/block:SourceLogo}
  1653. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} –>
  1654. {/block:ContentSource}
  1655.  
  1656. {block:Posts}
  1657.  
  1658. <article class="posts">
  1659.  
  1660.  
  1661. {block:Date}
  1662. <div class="info">
  1663. <div class="time_ago"><a href="{Permalink}">{TimeStamp}</a></div> {block:RebloggedFrom} <picons><span class="th th-reblog"></span></picons><a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  1664. <span style="float:right">
  1665. <a href="{Permalink}">{NoteCount}</a><picons><span class="th th-heart-1-o"></span></picons>
  1666. </span>
  1667. </div>
  1668. {/block:Date}
  1669.  
  1670. {block:Text}
  1671. {block:Title}<div class="post_titles">{Title}</div>{/block:Title}
  1672. <div class="caption">
  1673. {Body}
  1674. </div>
  1675. {block:More}
  1676. <div class="more-btn-wrap">
  1677. <a href="{Permalink}" class="more-btn">Read More</a>
  1678. </div>
  1679. {/block:More}
  1680. {/block:Text}
  1681.  
  1682. {block:Photo}
  1683. <img src="{PhotoURL-500}" width="100%">
  1684. {block:Caption}<div class="caption">{Caption} {block:More}
  1685. <div class="more-btn-wrap">
  1686. <a href="{Permalink}" class="more-btn">
  1687. Read More
  1688. </a>
  1689. </div>
  1690. {/block:More}</div>{/block:Caption}
  1691. {/block:Photo}
  1692.  
  1693. {block:Photoset}
  1694. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1695. {block:Caption}<div class="caption">{Caption} {block:More}
  1696. <div class="more-btn-wrap">
  1697. <a href="{Permalink}" class="more-btn">
  1698. Read More
  1699. </a>
  1700. </div>
  1701. {/block:More}</div>{/block:Caption}
  1702. {/block:Photoset}
  1703.  
  1704. {block:Video}
  1705. <div class="video">{Video-500}</div>
  1706. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1707. {/block:Video}
  1708.  
  1709. {block:Link}
  1710. <div class="link_main">
  1711. <a href="{URL}">{Name}</a>
  1712. {block:Host}
  1713. <div class="link_host">
  1714. {Host}
  1715. </div>
  1716. {/block:Host}
  1717. </div>
  1718. {block:Description}<div class="link_desc">{Description}</div>{/block:Description}
  1719. {/block:Link}
  1720.  
  1721. {block:Chat}
  1722. {block:Title}<div id="post_titles">{Title}</div>{/block:Title}
  1723. <div class="chats">
  1724. {block:Lines}
  1725. <span class="line_{Alt} user_{UserNumber}">
  1726. {block:Label}<b>{Label}</b>{/block:Label} {Line}
  1727. </span>
  1728. {/block:Lines}
  1729. </div>
  1730. {/block:Chat}
  1731.  
  1732. {block:Quote}
  1733. <div class="caption">
  1734. <div class="quote_full">
  1735. <div class="quote_q">{Quote}</div>
  1736. {block:Source}<br><div class="quote_source">{Source}</div>{/block:Source}
  1737. </div></div>
  1738. {/block:Quote}
  1739.  
  1740. {block:Audio}
  1741. {block:AudioPlayer}
  1742. <div class="audio">
  1743. <div class="playbutton">{AudioPlayerGrey}</div>
  1744. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1745. <div class="details">
  1746. {block:TrackName}{TrackName}{/block:TrackName}<br>
  1747. {block:Artist}{Artist}{/block:Artist}
  1748. </div></div>
  1749. <div class="caption">
  1750. {block:Caption}{Caption}{/block:Caption}
  1751. </div>
  1752. {/block:AudioPlayer}
  1753. {/block:Audio}
  1754.  
  1755.  
  1756. {block:Answer}
  1757.  
  1758. {block:ifAskStyleOne}
  1759. <div id="question_box">
  1760. <div class="question">{Question}</div>
  1761. <div class="ask_line"></div>
  1762. <div class="ask">{Asker}</div></div>
  1763. <div class="caption">
  1764. {Answer}
  1765. {block:More}
  1766. <div class="more-btn-wrap">
  1767. <a href="{Permalink}" class="more-btn">
  1768. Read More
  1769. </a>
  1770. </div>
  1771. {/block:More}
  1772. </div>
  1773. {/block:ifAskStyleOne}
  1774.  
  1775. {block:ifAskStyleTwo}
  1776. <div class="q2_question">{Question}</div>
  1777. <div class="q2_asker">{Asker}</div>
  1778. <div class="caption">
  1779. {Answer}
  1780. {block:More}
  1781. <div class="more-btn-wrap">
  1782. <a href="{Permalink}" class="more-btn">
  1783. Read More
  1784. </a>
  1785. </div>
  1786. {/block:More}
  1787. </div>
  1788. {/block:ifAskStyleTwo}
  1789.  
  1790. {block:ifAskStyleThree}
  1791. <div id="q3">
  1792. <div class="q3_icon1"><span class="th th-quote-up-o"></span></div>
  1793. <div class="q3_question">{Question} <br><div class="q3_asker">&mdash; {Asker}</div>
  1794. </div>
  1795. </div>
  1796.  
  1797. <div class="caption">
  1798. <div class="q3_icon2"><span class="th th-push-pin-o"></span></div>
  1799. <div class="q3_answer">
  1800. {Answer}
  1801. {block:More}
  1802. <div class="more-btn-wrap">
  1803. <a href="{Permalink}" class="more-btn">
  1804. Read More
  1805. </a>
  1806. </div>
  1807. {/block:More}
  1808. </div>
  1809. </div>
  1810. {/block:ifAskStyleThree}
  1811.  
  1812. {/block:Answer}
  1813.  
  1814. {block:HasTags} <div class="tags">{block:Tags} <a href="{TagURL}"># &nbsp;&nbsp;{Tag}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  1815.  
  1816. </article>
  1817.  
  1818. {/block:Posts}
  1819.  
  1820. {block:PostNotes}
  1821. <div id="post_info">{PostNotes}</div>
  1822. {/block:PostNotes}
  1823.  
  1824. </div>
  1825. </div>
  1826.  
  1827.  
  1828. <div id="credit"><a href="https://scftlcves.tumblr.com/" title="theme by ali">sl</a></div>
  1829.  
  1830. <script>
  1831. $(document).ready(function(){
  1832. $('.photo-slideshow').pxuPhotoset({
  1833. lightbox: true,
  1834. rounded: false,
  1835. gutter: '{select:photoset gutters}',
  1836. borderRadius: '0px',
  1837. photoset: '.photo-slideshow',
  1838. photoWrap: '.photo-data',
  1839. photo: '.pxu-photo',
  1840. });
  1841. });
  1842. </script>
  1843.  
  1844. </body>
  1845.  
  1846. <!------
  1847.  
  1848. START OF UPDATE POP-UP
  1849.  
  1850. ------->
  1851.  
  1852. <div id="update" class="popup_block">
  1853.  
  1854. <div id="update_popup">
  1855.  
  1856. <!--- UPDATE ONE --->
  1857.  
  1858. <div class="update_notif">june 7th</div> <!-- update date // bell will show before this -->
  1859. <div class="update_more">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna.</div> <!-- uodate explaination // whats happening, etc -->
  1860.  
  1861. <!--- UPDATE TWO --->
  1862.  
  1863. <div class="update_notif">june 7th</div> <!-- update date // bell will show before this -->
  1864. <div class="update_more">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi.</div> <!-- uodate explaination // whats happening, etc -->
  1865.  
  1866. <!--- UPDATE THREE --->
  1867.  
  1868. <div class="update_notif">june 7th</div> <!-- update date // bell will show before this -->
  1869. <div class="update_more">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat.</div> <!-- uodate explaination // whats happening, etc -->
  1870.  
  1871. </div></div>
  1872.  
  1873. <!------
  1874.  
  1875. END OF UPDATE POP-UP
  1876.  
  1877. //////
  1878.  
  1879. START OF NAVIGATION POP-UP
  1880.  
  1881. ------->
  1882.  
  1883. <div id="nav" class="popup_block">
  1884. <div id="nav_popup">
  1885.  
  1886. <div class="nav_main">
  1887.  
  1888. <!--- FIRST SET --->
  1889.  
  1890. <div class="nav_headers">header</div> <!-- navigation headers...obviously. use these to separate navigation categories or remove to just have one block of navigation! -->
  1891.  
  1892. <div class="nav_links">
  1893. <a href="/">navigation link</a><br>
  1894. <a href="/">navigation link</a><br>
  1895. <a href="/">navigation link</a><br>
  1896. <a href="/">navigation link</a><br>
  1897. <a href="/">navigation link</a>
  1898. </div> <!-- navigation links. i suggest keeping them at one line and having only two boxes. adding additional boxes with an uneven amount of links will throw the theme off since there is no masonry. -->
  1899.  
  1900. </div>
  1901.  
  1902. <!--- SECOND SET --->
  1903.  
  1904. <div class="nav_main">
  1905.  
  1906. <div class="nav_headers">header</div> <!-- navigation headers...obviously. use these to separate navigation categories or remove to just have one block of navigation! -->
  1907.  
  1908. <div class="nav_links">
  1909. <a href="/">navigation link</a><br>
  1910. <a href="/">navigation link</a><br>
  1911. <a href="/">navigation link</a><br>
  1912. <a href="/">navigation link</a><br>
  1913. <a href="/">navigation link</a>
  1914. </div> <!-- navigation links. i suggest keeping them at one line and having only two boxes. adding additional boxes with an uneven amount of links will throw the theme off since there is no masonry. -->
  1915.  
  1916. </div>
  1917.  
  1918. </div></div>
  1919. <!------
  1920.  
  1921. END OF NAVIGATION POP-UP
  1922.  
  1923. //////
  1924.  
  1925. START OF ADMIN POP-UP
  1926.  
  1927. ------->
  1928.  
  1929.  
  1930. <div id="admin" class="popup_block">
  1931. <div id="admin_popup">
  1932.  
  1933. <!------ START OF EDITING ------>
  1934.  
  1935. <!--- ADMIN ONE --->
  1936.  
  1937. <div class="admin_main"> <!-- backing for content -->
  1938. <div class="admin_photo"><img src="https://via.placeholder.com/80x80"></div> <!-- admin photo -->
  1939. <div class="admin_name">admin ali <!-- admin name -->
  1940. <div class="admin_subtitle">position, age, fc they're using, etc <!-- admin / additional details -->
  1941. </div></div>
  1942. </div>
  1943.  
  1944. <!--- ADMIN TWO --->
  1945.  
  1946. <div class="admin_main"> <!-- backing for content -->
  1947. <div class="admin_photo"><img src="https://via.placeholder.com/80x80"></div> <!-- admin photo -->
  1948. <div class="admin_name">admin ali <!-- admin name -->
  1949. <div class="admin_subtitle">position, age, fc they're using, etc <!-- admin / additional details -->
  1950. </div></div>
  1951. </div>
  1952.  
  1953. <!--- ADMIN THREE --->
  1954.  
  1955. <div class="admin_main"> <!-- backing for content -->
  1956. <div class="admin_photo"><img src="https://via.placeholder.com/80x80"></div> <!-- admin photo -->
  1957. <div class="admin_name">admin ali <!-- admin name -->
  1958. <div class="admin_subtitle">position, age, fc they're using, etc <!-- admin / additional details -->
  1959. </div></div>
  1960. </div>
  1961.  
  1962. <!------ END OF EDITING ------>
  1963.  
  1964. </div></div>
  1965.  
  1966. <!--- END OF ADMIN POP-UP --->
  1967.  
  1968.  
  1969. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!