API tools faq
paste
Advertisement
luscifers

THEME #3: FLUX (SOLID)

luscifers
Jul 22nd, 2014
2,401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.79 KB | None | 0 0
raw download clone embed print report
  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. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
  4. <head>
  5.  
  6. <!--THEME #3 "FLUX" © NOIR @ LUSCIFERS.TUMBLR.COM
  7. - don't steal bits of code.
  8. - don't reproduce.
  9. - don't remove the credit.
  10. - don't you dare use it as a base code.-->
  11.  
  12. <html>
  13.  
  14. <head>
  15.  
  16. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  17.  
  18. <title>{title}</title>
  19. <link rel="shortcut icon" href="{Favicon}"/>
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  22.  
  23. <!--custom fonts-->
  24. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
  25.  
  26. <!--script para hover links-->
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("a[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:100,
  35. tip_fade_speed:300,
  36. attribute:"title"
  37. });
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <!--script para search box-->
  43. <meta name="text:Search Label" content="" />
  44. <script type="text/javascript" src="http://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>
  45.  
  46. <!--default variables-->
  47. <meta name="color:BG" content="#FFF"/>
  48. <meta name="color:Scrollbar" content="#FFF"/>
  49. <meta name="image:BG" content="https://31.media.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/tumblr_inline_n95amyYteF1rc2rwl.png"/>
  50. <meta name="image:Arrow Right" content="https://31.media.tumblr.com/bfd349b3342f837105b7f331e3f13ee9/tumblr_inline_n95am4tLdk1rc2rwl.png"/>
  51. <meta name="image:Arrow Left" content="https://31.media.tumblr.com/b71c3fca55b6139c503437a7775ac727/tumblr_inline_n95at0g7CK1rc2rwl.png"/>
  52. <meta name="color:Text" content="#000"/>
  53. <meta name="color:Description Text" content="#FFF"/>
  54. <meta name="color:Section Text" content="#000"/>
  55. <meta name="color:Shadow" content="#c9b4cc"/>
  56. <meta name="color:Title" content="#f8cece"/>
  57. <meta name="color:Accent" content="#000"/>
  58. <meta name="color:Link" content="#f8cece"/>
  59. <meta name="color:Link Hover" content="#c9b4cc"/>
  60. <meta name="color:Date Link" content="#FFF"/>
  61. <meta name="color:Date Link Hover" content="#c9b4cc"/>
  62. <meta name="color:Date Shadow" content="#000"/>
  63. <meta name="color:Icons" content="#f8cece"/>
  64. <meta name="color:Blocks" content="#000"/>
  65. <meta name="color:Borders" content="#FFF"/>
  66. <meta name="color:Container BG" content="#000"/>
  67.  
  68. <meta name="if:Full BG" content="0"/>
  69. <meta name="if:Caption" content="1"/>
  70. <meta name="if:Rounded Corners" content="1"/>
  71. <meta name="if:Shadow" content="1"/>
  72.  
  73. <meta name="text:Ask Title" content="Ask page title goes here."/>
  74. <meta name="text:Your URL" content="Your URL goes here."/>
  75. <meta name="text:Section 1 Title" content="NAVIGATION"/>
  76. <meta name="text:Section 2 Title" content="ABOUT"/>
  77.  
  78. <meta name="text:Nav Link 1 Title" content="Link 1"/>
  79. <meta name="text:Nav Link 1 URL" content="Link 1 URL"/>
  80. <meta name="text:Nav Link 2 Title" content="Link 2"/>
  81. <meta name="text:Nav Link 2 URL" content="Link 2 URL"/>
  82. <meta name="text:Nav Link 3 Title" content="Link 3"/>
  83. <meta name="text:Nav Link 3 URL" content="Link 3 URL"/>
  84. <meta name="text:Nav Link 4 Title" content="Link 4"/>
  85. <meta name="text:Nav Link 4 URL" content="Link 4 URL"/>
  86. <meta name="text:Nav Link 5 Title" content="Link 5"/>
  87. <meta name="text:Nav Link 5 URL" content="Link 5 URL"/>
  88. <meta name="text:Nav Link 6 Title" content="Link 6"/>
  89. <meta name="text:Nav Link 6 URL" content="Link 6 URL"/>
  90. <meta name="text:Nav Link 7 Title" content="Link 7"/>
  91. <meta name="text:Nav Link 7 URL" content="Link 7 URL"/>
  92. <meta name="text:Nav Link 8 Title" content="Link 8"/>
  93. <meta name="text:Nav Link 8 URL" content="Link 8 URL"/>
  94.  
  95. <meta name="text:Update Title 1" content="UPDATE 1"/>
  96. <meta name="text:Update Title 2" content="UPDATE 2"/>
  97. <meta name="text:Update Title 3" content="UPDATE 3"/>
  98. <meta name="text:Update Title 4" content="UPDATE 4"/>
  99.  
  100.  
  101. <style type="text/css">
  102.  
  103. @font-face {
  104. font-family: 'FontAwesome';
  105. src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  106. src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  107. font-weight: normal;
  108. font-style: normal;
  109. }
  110.  
  111. /*scrollbar*/
  112. ::-webkit-scrollbar-thumb {background-color: {color:Scrollbar}; height: auto; border: 4px solid {color:Scrollbar}; }
  113. ::-webkit-scrollbar {background-color: {color:Link}; height:10px; width:5px; border: 4px solid {color:Link};}
  114.  
  115. #s-m-t-tooltip{
  116. max-width:200px;
  117. z-index:999999;
  118. margin-top:3px;
  119. margin-left:12px;
  120. padding:5px;
  121. text-transform:uppercase;
  122. font-size:8px;
  123. letter-spacing:0.5px;
  124. background:{color:Blocks};
  125. color:{color:Link};
  126. font-family:'lato';
  127. {block:ifRoundedCorners} -moz-border-radius: 5px;
  128. -o-border-radius: 5px;
  129. -webkit-border-radius: 5px;
  130. border-radius: 5px; {/block:ifRoundedCorners} }
  131.  
  132. *, body, a, a:hover {cursor: url(https://31.media.tumblr.com/51aa4b0cb73356472f4336df13b2fc6b/tumblr_inline_n50qb2j2gV1rc2rwl.png), auto;}
  133.  
  134. body {
  135. background: {color:BG} url({image:BG});
  136. {block:ifFullBG} -webkit-background-size: cover;
  137. -moz-background-size: cover;
  138. -o-background-size: cover;
  139. background-size: cover; {/block:ifFullBG}
  140. color:{color:Text};
  141. font-family:'lato', arial;
  142. font-size:11px;
  143. font-weight:400;
  144. text-align:justify;
  145. margin:0;
  146. overflow-x:hidden;}
  147.  
  148. a {
  149. color:{color:Link};
  150. text-decoration: none;
  151. cursor:url('http://i.imgur.com/IepP2.jpg'), progress !important;
  152. -webkit-transition-duration: 0.8s;
  153. -moz-transition-duration: 0.8s;
  154. -o-transition-duration: 0.8s;
  155. transition-duration: 0.8s;}
  156.  
  157. a:hover {
  158. color:{color:Link Hover};
  159. text-decoration:none;
  160. -webkit-transition: all .4s ease-in-out;
  161. -moz-transition-duration: all .4s ease-in-out;
  162. -o-transition-duration: all .4s ease-in-out;
  163. transition-duration: all .4s ease-in-out;
  164. cursor:url('http://i.imgur.com/IepP2.jpg'), progress !important;}
  165.  
  166. img {
  167. opacity:1;
  168. border:none;
  169. text-decoration:none
  170. cursor: url('http://i.imgur.com/IepP2.jpg'), progress !important;}
  171.  
  172. blockquote {
  173. color:{color:Text};
  174. border-left:4px solid {color:Accent};
  175. width:auto;
  176. margin-left:25px;
  177. line-height:11px;
  178. padding-left:5px;}
  179.  
  180. blockquote img {max-width: 100%; !important}
  181.  
  182. small {
  183. font-size:9px;}
  184.  
  185. big {
  186. font-size:12px;}
  187.  
  188. /*icons*/
  189. #icons {
  190. width:35px;
  191. position:absolute;
  192. left:10px;
  193. top:50px;
  194. display:block;
  195. text-align:center;
  196. padding-bottom:40px;
  197. font-size:34px;
  198. font-family:'FontAwesome';
  199. line-height:15px;
  200. text-transform:none;}
  201.  
  202. #icons a {
  203. color:{color:Icons};
  204. {block:ifShadow}text-shadow:2px 2px {color:Shadow};{/block:ifShadow}}
  205.  
  206. /*tabs*/
  207. #statitle {
  208. background:{color:BG};
  209. text-align:center;
  210. line-height:20px;
  211. {block:ifRoundedCorners} -moz-border-radius: 10px;
  212. -o-border-radius: 10px;
  213. -webkit-border-radius: 10px;
  214. border-radius: 10px; {/block:ifRoundedCorners}
  215. height:20px;
  216. padding:1px;
  217. text-transform:uppercase;
  218. color:{color:Title};}
  219.  
  220. #statbox1 {
  221. font-family:'lato';
  222. font-size:11px;
  223. background:{color:Blocks};
  224. color:{color:Description Text};
  225. line-height:12px;
  226. font-weight:400;
  227. position:fixed;
  228. padding:10px;
  229. text-align:justify;
  230. overflow:auto;
  231. margin-left:40px;
  232. margin-top:-35px;
  233. width:150px;
  234. height:180px;
  235. {block:ifShadow}box-shadow:2px 2px 5px {color:Shadow};{/block:ifShadow}
  236. {block:ifRoundedCorners} -moz-border-radius: 15px;
  237. -o-border-radius: 15px;
  238. -webkit-border-radius: 15px;
  239. border-radius: 15px; {/block:ifRoundedCorners}
  240. border:1px solid {color:Borders};
  241. display:none;}
  242.  
  243. #statbox1 a{
  244. color:{color:Link};
  245. text-decoration:none;
  246. text-shadow:none;
  247. }
  248.  
  249.  
  250. #statbox2 {font-family:'lato';
  251. font-size:11px;
  252. background:{color:Blocks};
  253. color:{color:Description Text};
  254. line-height:12px;
  255. font-weight:400;
  256. position:fixed;
  257. padding:10px;
  258. text-align:justify;
  259. overflow:auto;
  260. margin-left:40px;
  261. margin-top:-85px;
  262. width:150px;
  263. height:180px;
  264. {block:ifShadow}box-shadow:2px 2px 5px {color:Shadow};{/block:ifShadow}
  265. {block:ifRoundedCorners} -moz-border-radius: 15px;
  266. -o-border-radius: 15px;
  267. -webkit-border-radius: 15px;
  268. border-radius: 15px; {/block:ifRoundedCorners}
  269. border:1px solid {color:Borders};
  270. display:none;}
  271.  
  272. #statbox2 a{
  273. color:{color:Link};
  274. text-decoration:none;
  275. text-shadow:none;
  276. }
  277.  
  278. #statbox3 {font-family:'lato';
  279. font-size:11px;
  280. background:{color:Blocks};
  281. color:{color:Description Text};
  282. line-height:12px;
  283. font-weight:400;
  284. position:fixed;
  285. padding:10px;
  286. text-align:justify;
  287. overflow:auto;
  288. margin-left:40px;
  289. margin-top:-135px;
  290. width:150px;
  291. height:180px;
  292. {block:ifShadow}box-shadow:2px 2px 5px {color:Shadow};{/block:ifShadow}
  293. {block:ifRoundedCorners} -moz-border-radius: 15px;
  294. -o-border-radius: 15px;
  295. -webkit-border-radius: 15px;
  296. border-radius: 15px; {/block:ifRoundedCorners}
  297. border:1px solid {color:Borders};
  298. display:none;}
  299.  
  300. #statbox3 a{
  301. color:{color:Link};
  302. text-decoration:none;
  303. text-shadow:none;
  304. }
  305.  
  306. #statbox4 {font-family:'lato';
  307. font-size:11px;
  308. background:{color:Blocks};
  309. color:{color:Description Text};
  310. line-height:12px;
  311. font-weight:400;
  312. position:fixed;
  313. padding:10px;
  314. text-align:justify;
  315. overflow:auto;
  316. margin-left:40px;
  317. margin-top:-180px;
  318. width:150px;
  319. height:180px;
  320. {block:ifShadow}box-shadow:2px 2px 5px {color:Shadow};{/block:ifShadow}
  321. {block:ifRoundedCorners} -moz-border-radius: 15px;
  322. -o-border-radius: 15px;
  323. -webkit-border-radius: 15px;
  324. border-radius: 15px; {/block:ifRoundedCorners}
  325. border:1px solid {color:Borders};
  326. display:none;}
  327.  
  328. #statbox4 a{
  329. color:{color:Link};
  330. text-decoration:none;
  331. text-shadow:none;
  332. }
  333.  
  334. /*sidebar*/
  335. #box {
  336. position:absolute;
  337. margin-top:350px;
  338. margin-left:190px;
  339. width:200px;
  340. height:80px;
  341. color:{color:Description Text};
  342. text-align:justify;
  343. background-color:{color:Blocks};
  344. overflow:auto;
  345. font-family:'lato';
  346. padding:20px;
  347. font-size:11px;
  348. text-transform:none;
  349. {block:ifRoundedCorners} -moz-border-radius: 15px;
  350. -o-border-radius: 15px;
  351. -webkit-border-radius: 15px;
  352. border-radius: 15px; {/block:ifRoundedCorners}}
  353.  
  354. .sfm input {
  355. position:absolute;
  356. font-size: 9px;
  357. border: 1px;
  358. text-transform: uppercase;
  359. margin-top: 485px;
  360. margin-left:190px;
  361. color:{color:Text};
  362. letter-spacing: 1px;
  363. font-family: 'lato';}
  364.  
  365. #sf {
  366. margin-left:192px;
  367. width:195px;
  368. border:1px solid {color:Link};
  369. color:{color:Description Text};
  370. background:rgba(0, 0, 0, 0.3);
  371. height:20px;
  372. {block:ifRoundedCorners} -moz-border-radius: 10px;
  373. -o-border-radius: 10px;
  374. -webkit-border-radius: 10px;
  375. border-radius: 10px; {/block:ifRoundedCorners}
  376. padding:4px 8px;}
  377.  
  378. #sb {
  379. margin-left:390px;
  380. color:{color:Link};
  381. font-family:'FontAwesome';
  382. text-transform: lowercase;
  383. font-size:15px;
  384. padding: 2px 5px;
  385. height:30px;
  386. width:40px;
  387. {block:ifRoundedCorners}-moz-border-bottom-right-radius: 10px;
  388. -o-border-bottom-right-radius: 10px;
  389. -webkit-border-bottom-right-radius: 10px;
  390. border-bottom-right-radius: 10px;
  391. -moz-border-top-right-radius: 10px;
  392. -o-border-top-right-radius: 10px;
  393. -webkit-border-top-right-radius: 10px;
  394. border-top-right-radius: 10px;{/block:ifRoundedCorners}
  395. background:{color:Blocks};}
  396.  
  397. #linkus {
  398. height:30px;
  399. width:100%;
  400. position:fixed;
  401. line-height:30px;
  402. display:block;
  403. text-align:center;
  404. font-weight:400;
  405. border-bottom:1px solid {color:Borders};
  406. background:{color:Blocks};
  407. z-index:9999;}
  408.  
  409. #linkus a {
  410. color:{color:Description Text};
  411. font-weight:400;
  412. font-size:11px;
  413. padding:5px 15px;
  414. margin:8px;
  415. text-align:center;
  416. font-family:'lato', arial;
  417. text-transform:uppercase;
  418. -webkit-transition-duration: 0.8s;
  419. -moz-transition-duration: 0.8s;
  420. -o-transition-duration: 0.8s;
  421. transition-duration: 0.8s;}
  422.  
  423. #linkus a:hover {
  424. color:{color:Link};
  425. -webkit-transition: all .4s ease-in-out;
  426. -moz-transition-duration: all .4s ease-in-out;
  427. -o-transition-duration: all .4s ease-in-out;
  428. transition-duration: all .4s ease-in-out;
  429. letter-spacing:3px;}
  430.  
  431. #maint {
  432. font-size:53px;
  433. font-family: 'lato';
  434. font-weight:300;
  435. font-style:italic;
  436. line-height:48px;
  437. letter-spacing:-4px;
  438. text-transform:uppercase;
  439. text-align:right;
  440. width:200px;
  441. position:absolute;
  442. color:{color:Title};
  443. {block:ifShadow}text-shadow:2px 2px {color:Shadow};{/block:ifShadow}
  444. margin-top:240px;
  445. margin-left:220px;
  446. transform:rotate(-6deg);
  447. -ms-transform:rotate(-6deg);
  448. -webkit-transform:rotate(-6deg);
  449. -moz-transform:rotate(-6deg);
  450. }
  451.  
  452. /*containers*/
  453. #container {
  454. position:fixed;
  455. overflow-x:hidden;
  456. margin-top:0px;
  457. margin-left:530px;
  458. overflow:auto;
  459. height:100%;
  460. width:575px;
  461. background-color:{color:Container BG};
  462. border:1px solid {color:Container BG};}
  463.  
  464. /*posts*/
  465. #posts {
  466. width:400px;
  467. margin-top:80px;
  468. margin-left:90px;
  469. padding:20px;
  470. background: {color:BG} url({image:BG});
  471. {block:ifFullBG} -webkit-background-size: cover;
  472. -moz-background-size: cover;
  473. -o-background-size: cover;
  474. background-size: cover; {/block:ifFullBG}
  475. margin-bottom:110px;
  476. {block:ifRoundedCorners} -moz-border-radius: 15px;
  477. -o-border-radius: 15px;
  478. -webkit-border-radius: 15px;
  479. border-radius: 15px; {/block:ifRoundedCorners}}
  480.  
  481. #postitle {
  482. letter-spacing:0px;
  483. margin-bottom:10px;
  484. margin-left:-10px;
  485. padding:0 0px 0 10px;
  486. text-transform:normal;
  487. text-align:center;
  488. font-family: 'lato', sans-serif;
  489. font-size:20px;
  490. font-weight:400;
  491. text-transform:uppercase;
  492. color:{color:Link};}
  493.  
  494. /*los text posts*/
  495. #text {
  496. padding:0px;}
  497.  
  498. #text img {max-width:100%; !important;}
  499.  
  500. /*las quotes*/
  501. #titlequote {
  502. text-align:justify;
  503. line-height:14px;
  504. padding:20px;
  505. font-size:15px;
  506. color:{color:Title};
  507. background:{color:Container BG};
  508. {block:ifRoundedCorners} -moz-border-radius: 15px;
  509. -o-border-radius: 15px;
  510. -webkit-border-radius: 15px;
  511. border-radius: 15px; {/block:ifRoundedCorners}
  512. text-transform:none;}
  513.  
  514. #source {
  515. font-size:9px;
  516. letter-spacing:1px;
  517. text-align:center;
  518. margin-top:10px;
  519. text-transform:uppercase;}
  520.  
  521. /*las preguntas*/
  522. #question {
  523. background-color:{color:Container BG};
  524. {block:ifRoundedCorners} -moz-border-radius: 15px;
  525. -o-border-radius: 15px;
  526. -webkit-border-radius: 15px;
  527. border-radius: 15px; {/block:ifRoundedCorners}
  528. color:{color:Title};
  529. padding:10px;}
  530.  
  531. #q {
  532. margin-top:10px;
  533. text-align:center;}
  534.  
  535. #asker {
  536. text-align:center;
  537. font-weight:300;
  538. font-size:20px;
  539. text-transform:uppercase;
  540. color:{color:Title};}
  541.  
  542. #asker a {
  543. color:{color:Title};
  544. font-weight:bold;
  545. }
  546.  
  547. #askerimg {
  548. float:center;}
  549.  
  550. #answer {
  551. padding:0px}
  552.  
  553. #answer img {max-width:100% !important;}
  554.  
  555. /*el chat*/
  556. .chat ol {
  557. padding:0;
  558. list-style:none;}
  559.  
  560. .line.odd {
  561. background:{color:Container BG};
  562. color:{color:Title};
  563. border:1px solid {color:Container BG};
  564. padding:10px;}
  565.  
  566. .line.even {
  567. border:1px solid {color:Container BG};
  568. padding:10px;}
  569.  
  570. .label {
  571. margin-right:3px
  572. letter-spacing:0px;
  573. text-transform:uppercase;
  574. font-weight:bold;}
  575.  
  576. /*el audio player*/
  577. #button {
  578. width:20px;
  579. height:30px;
  580. overflow:hidden;
  581. position:absolute;
  582. opacity:1;
  583. margin-top:12px;
  584. margin-left:12px;
  585. z-index:999;}
  586.  
  587. .box {
  588. width:50px;
  589. height:50px;
  590. margin-top:12px;
  591. margin-left:12px;
  592. opacity:0.5;
  593. background-color:white;
  594. position:absolute;
  595. z-index:100;}
  596.  
  597. .audio{
  598. position:absolute;
  599. width:20px;
  600. height:20px;}
  601.  
  602. .audioimg {
  603. width:75px;
  604. height:75px;
  605. position:absolute;}
  606.  
  607. .audioimg img {
  608. margin-left:0px;
  609. float:left;
  610. width:75px;
  611. {block:ifRoundedCorners} -moz-border-radius: 15px;
  612. -o-border-radius: 15px;
  613. -webkit-border-radius: 15px;
  614. border-radius: 15px; {/block:ifRoundedCorners}
  615. border:1px solid {color:Container BG};}
  616.  
  617. .audiodatos {
  618. font-family: 'lato', arial;
  619. text-transform: uppercase;
  620. font-size:9px;
  621. color:{color:Title};
  622. padding:15px 15px 5px 80px;
  623. text-align:CENTER;
  624. line-height:11px;
  625. letter-spacing:1px;
  626. height:57px;
  627. width:310px;
  628. margin-top:-13px;
  629. margin-left:0px;
  630. background:{color:Container BG};
  631. {block:ifRoundedCorners} -moz-border-radius: 15px;
  632. -o-border-radius: 15px;
  633. -webkit-border-radius: 15px;
  634. border-radius: 15px; {/block:ifRoundedCorners}
  635. }
  636.  
  637. /*post info*/
  638. #date {
  639. position:absolute;
  640. font-weight:300;
  641. text-transform:uppercase;
  642. width:60px;
  643. height:60px;
  644. margin-top:-14px;
  645. line-height:20px;
  646. margin-left:-85px;}
  647.  
  648. #date a {
  649. color:{color:Date Link};
  650. {block:ifShadow}text-shadow:2px 2px {color:Date Shadow};{/block:ifShadow}
  651. -webkit-transition-duration: 0.8s;
  652. -moz-transition-duration: 0.8s;
  653. -o-transition-duration: 0.8s;
  654. transition-duration: 0.8s;}
  655.  
  656. #date a:hover {
  657. -webkit-transition: all .4s ease-in-out;
  658. -moz-transition-duration: all .4s ease-in-out;
  659. -o-transition-duration: all .4s ease-in-out;
  660. transition-duration: all .4s ease-in-out;
  661. color:{color:Date Link Hover};}
  662.  
  663. #date2 {
  664. line-height:30px;
  665. font-size:25px;}
  666.  
  667. #date2 a {
  668. color:{color:Link};
  669. {block:ifShadow}text-shadow:1px 1px 5px {color:Date Shadow};{/block:ifShadow}
  670. -webkit-transition-duration: 0.8s;
  671. -moz-transition-duration: 0.8s;
  672. -o-transition-duration: 0.8s;
  673. transition-duration: 0.8s;}
  674.  
  675. #date2 a:hover {
  676. -webkit-transition: all .4s ease-in-out;
  677. -moz-transition-duration: all .4s ease-in-out;
  678. -o-transition-duration: all .4s ease-in-out;
  679. transition-duration: all .4s ease-in-out;
  680. color:{color:Date Link Hover};}
  681.  
  682. #tags {
  683. position:absolute;
  684. margin-left:-22.5px;
  685. margin-top:20px;
  686. width:432px;
  687. padding:5px;
  688. opacity:0;
  689. -webkit-transition-duration: 0.8s;
  690. -moz-transition-duration: 0.8s;
  691. -o-transition-duration: 0.8s;
  692. transition-duration: 0.8s;}
  693.  
  694. #tags a {
  695. color:{color:Date Link};
  696. {block:ifShadow}text-shadow:1px 1px 5px {color:Date Shadow};{/block:ifShadow}
  697. }
  698.  
  699. #tags a:hover {
  700. -webkit-transition: all .4s ease-in-out;
  701. -moz-transition-duration: all .4s ease-in-out;
  702. -o-transition-duration: all .4s ease-in-out;
  703. transition-duration: all .4s ease-in-out;
  704. color:{color:Date Link Hover};}
  705.  
  706. #posts:hover #tags {
  707. margin-top:25px;
  708. opacity:1;
  709. -webkit-transition: all .4s ease-in-out;
  710. -moz-transition-duration: all .4s ease-in-out;
  711. -o-transition-duration: all .4s ease-in-out;
  712. transition-duration: all .4s ease-in-out;}
  713.  
  714. /*permalink*/
  715.  
  716. #permalink {
  717. position:absolute;
  718. color:white;
  719. padding:10px;
  720. text-align:center;
  721. text-transform: uppercase;
  722. width:420px;
  723. top:40px;
  724. left:90px;
  725. }
  726.  
  727. #permalink a {
  728. color:{color:Link};}
  729. #permalink a:hover {
  730. -webkit-transition: all .4s ease-in-out;
  731. -moz-transition-duration: all .4s ease-in-out;
  732. -o-transition-duration: all .4s ease-in-out;
  733. transition-duration: all .4s ease-in-out;}
  734.  
  735. #postnotes {
  736. padding:10px;
  737. list-style:none;
  738. position:absolute;
  739. margin-top:110px;
  740. margin-bottom:30px;
  741. font-size:9px;
  742. font-weight:400;
  743. margin-left:-17px;
  744. background:white;
  745. {block:ifRoundedCorners} -moz-border-radius: 15px;
  746. -o-border-radius: 15px;
  747. -webkit-border-radius: 15px;
  748. border-radius: 15px; {/block:ifRoundedCorners}
  749. width:420px;}
  750.  
  751. #postnotes img {
  752. width:10px
  753. display:inline-block;
  754. position:left;
  755. margin-right:5px;
  756. margin-top:3px;
  757. margin-bottom:-5px;
  758. -webkit-border-radius:10px;
  759. -moz-border-radius:10px;
  760. -o-border-radius: 10px;
  761. border-radius:10px;}
  762.  
  763. /*la pagination*/
  764. #pagination {
  765. width:100px;
  766. text-align:center;
  767. font-size:30px;
  768. position:absolute;
  769. margin-top:50px;
  770. color:{color:Icons};
  771. margin-left:1095px;
  772. font-weight:300;}
  773.  
  774. #pagination a {
  775. color:{color:Icons};}
  776.  
  777. #pagination a:hover{
  778. color:{color:Icons};}
  779.  
  780. /*credit logo*/
  781. #credit{
  782. position:fixed;
  783. bottom:2px;
  784. left:5px;
  785. opacity:1;
  786. padding:5px;
  787. line-height:8px;
  788. height:20px;
  789. width:10px;
  790. text-align:center;
  791. z-index:1;
  792. -webkit-border-radius:20px;
  793. -moz-border-radius:20px;
  794. -o-border-radius: 20px;
  795. border-radius:20px;}
  796.  
  797. #credit a
  798. {color:{color:Title};
  799. text-shadow:1px 1px {color:Shadow};
  800. font-size:9px;
  801. text-transform:uppercase;
  802. text-align:center;
  803. -webkit-transition-duration: 0.8s;
  804. -moz-transition-duration: 0.8s;
  805. -o-transition-duration: 0.8s;
  806. transition-duration: 0.8s;
  807. }
  808.  
  809. #credit a:hover {
  810. color:{color:Link};
  811. -webkit-transition: all .4s ease-in-out;
  812. -moz-transition-duration: all .4s ease-in-out;
  813. -o-transition-duration: all .4s ease-in-out;
  814. transition-duration: all .4s ease-in-out;}
  815.  
  816. {CustomCSS}
  817.  
  818. #fondo1 {
  819. position:absolute;
  820. width:100%;
  821. height:800px;
  822. background: {color:BG} url({image:BG});
  823. {block:ifFullBG} -webkit-background-size: cover;
  824. -moz-background-size: cover;
  825. -o-background-size: cover;
  826. background-size: cover; {/block:ifFullBG}
  827. display:none;
  828. z-index:999999;
  829. }
  830.  
  831. #ask {
  832. width:500px;
  833. height:500px;
  834. color:{color:Section Text};
  835. font-size:20px;
  836. margin:0 auto;
  837. left: 0;
  838. right: 0;
  839. top:60px;
  840. text-transform:uppercase;
  841. z-index:9999999;
  842. padding:20px;
  843. position:absolute;
  844. text-align:center;}
  845.  
  846.  
  847. #fondo2 {
  848. position:absolute;
  849. width:100%;
  850. height:800px;
  851. background: {color:BG} url({image:BG});
  852. {block:ifFullBG} -webkit-background-size: cover;
  853. -moz-background-size: cover;
  854. -o-background-size: cover;
  855. background-size: cover; {/block:ifFullBG}
  856. display:none;
  857. z-index:999999;}
  858.  
  859. #works {
  860. width:300px;
  861. height:auto;
  862. color:{color:Section Text};
  863. margin:0 auto;
  864. left: 0;
  865. right: 0;
  866. top:60px;
  867. text-transform:uppercase;
  868. font-size:18px;
  869. position:absolute;
  870. padding:20px;
  871. z-index: 9999999;}
  872.  
  873.  
  874. #works a {
  875. display:inline-block;
  876. text-transform:uppercase;
  877. font-size:10px;
  878. border:1px solid {color:Blocks};
  879. width:100px;
  880. text-align:right;
  881. bottom:5px;
  882. margin: 0 auto;
  883. left: 0;
  884. right: 0;
  885. padding:10px;
  886. margin-left:10px;
  887. margin-bottom:5px;
  888. background:rgba(255, 255, 255, 0.1);
  889. color:{color:Section Text};
  890. {block:ifRoundedCorners} -moz-border-radius: 15px;
  891. -o-border-radius: 15px;
  892. -webkit-border-radius: 15px;
  893. border-radius: 15px; {/block:ifRoundedCorners}
  894. line-height:11px;
  895. -webkit-transition-duration: 0.8s;
  896. -moz-transition-duration: 0.8s;
  897. -o-transition-duration: 0.8s;
  898. transition-duration: 0.8s;}
  899.  
  900. #works a:hover {
  901. color:{color:Section Text};
  902. background:{color:Link};
  903. border:1px solid {color:Blocks};
  904. -webkit-transition: all .4s ease-in-out;
  905. -moz-transition-duration: all .4s ease-in-out;
  906. -o-transition-duration: all .4s ease-in-out;
  907. transition-duration: all .4s ease-in-out;
  908. letter-spacing:3px;}
  909.  
  910. #fondo3 {
  911. position:absolute;
  912. width:100%;
  913. height:800px;
  914. background: {color:BG} url({image:BG});
  915. {block:ifFullBG} -webkit-background-size: cover;
  916. -moz-background-size: cover;
  917. -o-background-size: cover;
  918. background-size: cover; {/block:ifFullBG}
  919. display:none;
  920. z-index:999999;
  921. }
  922.  
  923. #navi {
  924. width:400px;
  925. height:auto;
  926. color:{color:Section Text};
  927. margin:0 auto;
  928. left: 0;
  929. right: 0;
  930. top:70px;
  931. text-transform:none;
  932. line-height:12px;
  933. font-size:11px;
  934. position:absolute;
  935. text-align:justify;
  936. z-index: 9999999;
  937. padding:20px;}
  938.  
  939. #navi a {
  940. color:{color:Link};
  941. -webkit-transition-duration: 0.8s;
  942. -moz-transition-duration: 0.8s;
  943. -o-transition-duration: 0.8s;
  944. transition-duration: 0.8s;
  945. }
  946.  
  947. #navi a:hover {
  948. color:{color:Link Hover};
  949. -webkit-transition: all .4s ease-in-out;
  950. -moz-transition-duration: all .4s ease-in-out;
  951. -o-transition-duration: all .4s ease-in-out;
  952. transition-duration: all .4s ease-in-out;
  953. letter-spacing:1px;}
  954.  
  955. #sectiont {
  956. color:{color:Title};
  957. {block:ifShadow}text-shadow:1px 1px {color:Shadow};{/block:ifShadow}
  958. text-align:center;
  959. font-size:18px;
  960. margin-top:40px;
  961. margin-bottom:20px;
  962. font-style:italic;
  963. text-transform:uppercase;}
  964.  
  965. </style>
  966.  
  967. </head>
  968.  
  969. <body>
  970.  
  971. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  972.  
  973. <div id="linkus">
  974. <a href="/">INDEX</a>
  975. <font color="{color:BG}" size="1">✕</font>
  976.  
  977. <script>
  978. $(document).ready(function(){
  979. $(".nav").click(function(){
  980. $("#fondo1").fadeToggle("slow");
  981. });
  982. });
  983. </script>
  984. <a href="#" class="nav">MESSAGE</a>
  985. <div id="fondo1"><div id="ask">
  986. <div class="nav"><center><font size="6">✕</font></center></div>
  987. <div id="sectiont">{text:Ask Title}</div>
  988. <iframe frameborder="0"
  989. height="200"
  990. id="ask_form"
  991. scrolling="no"
  992. src="http://www.tumblr.com/ask_form/{text:Your URL}.tumblr.com"
  993. width="100%">
  994. </iframe></div></div>
  995.  
  996. <font color="{color:BG}" size="1">✕</font>
  997.  
  998. <script>
  999. $(document).ready(function(){
  1000. $(".nav2").click(function(){
  1001. $("#fondo2").fadeToggle("slow");
  1002. });
  1003. });
  1004. </script>
  1005. <a href="#" class="nav2">{text:Section 1 Title}</a>
  1006. <div id="fondo2"><div id="works">
  1007. <div class="nav2"><center><font size="6">✕</font></center></div>
  1008. <div id="sectiont">{text:Section 1 Title}</div>
  1009. <a href="{text:Nav Link 1 URL}">{text:Nav Link 1 Title}</a>
  1010. <a href="{text:Nav Link 2 URL}">{text:Nav Link 2 Title}</a>
  1011. <a href="{text:Nav Link 3 URL}">{text:Nav Link 3 Title}</a>
  1012. <a href="{text:Nav Link 4 URL}">{text:Nav Link 4 Title}</a>
  1013. <a href="{text:Nav Link 5 URL}">{text:Nav Link 5 Title}</a>
  1014. <a href="{text:Nav Link 6 URL}">{text:Nav Link 6 Title}</a>
  1015. <a href="{text:Nav Link 7 URL}">{text:Nav Link 7 Title}</a>
  1016. <a href="{text:Nav Link 8 URL}">{text:Nav Link 8 Title}</a>
  1017. </div></div>
  1018.  
  1019. <font color="{color:BG}" size="1">✕</font>
  1020.  
  1021. <script>
  1022. $(document).ready(function(){
  1023. $(".nav3").click(function(){
  1024. $("#fondo3").fadeToggle("slow");
  1025. });
  1026. });
  1027. </script>
  1028. <a href="#" class="nav3">{text:Section 2 Title}</a>
  1029. <div id="fondo3"><div id="navi">
  1030. <div class="nav3"><center><font size="6">✕</font></center></div><br>
  1031. <!---HERE GOES YOUR ABOUT SECTION. EDIT ONLY THIS PART.-->
  1032. <div id="sectiont">Your title goes here.</div>
  1033. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1034.  
  1035. <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
  1036.  
  1037. <p>Here goes your about section or whatever, fill it up as much as you want. Basic HTML knowledge is required to personalize it.
  1038. </div></div>
  1039. </div>
  1040.  
  1041.  
  1042. <div id="icons">
  1043. <script>
  1044. $(document).ready(function(){
  1045. $(".clickme1").click(function(){
  1046. $(".revealed1").toggle(500);
  1047. });
  1048. });
  1049. </script>
  1050. <a href="#" title="{text:Update Title 1}" class="clickme1"><i class="fa fa-paperclip"></i></a>
  1051. <div id="statbox1" class="revealed1">
  1052. <div id="statitle">{text:Update Title 1}</div>
  1053. <!---UPDATE BOX NUMBER 1. EDIT ONLY THIS PART.--><br>
  1054. Here is your update box number one. Feel free to write whatever you want in here, try to keep it short. If it overflows, a scrollbar will appear.
  1055. </div>
  1056. <br><br>
  1057.  
  1058. <script>
  1059. $(document).ready(function(){
  1060. $(".clickme2").click(function(){
  1061. $(".revealed2").toggle(500);
  1062. });
  1063. });
  1064. </script>
  1065. <a href="#" title="{text:Update Title 2}" class="clickme2"><i class="fa fa-link"></i></a>
  1066. <div id="statbox2" class="revealed2">
  1067. <div id="statitle">{text:Update Title 2}</div>
  1068. <!---UPDATE BOX NUMBER 2. EDIT ONLY THIS PART.--><br>
  1069. Here is your update box number two. Feel free to write whatever you want in here, try to keep it short. If it overflows, a scrollbar will appear.
  1070. </div>
  1071. <br><br>
  1072.  
  1073. <script>
  1074. $(document).ready(function(){
  1075. $(".clickme3").click(function(){
  1076. $(".revealed3").toggle(500);
  1077. });
  1078. });
  1079. </script>
  1080. <a href="#" title="{text:Update Title 3}" class="clickme3"><i class="fa fa-star-o"></i></a>
  1081. <div id="statbox3" class="revealed3">
  1082. <div id="statitle">{text:Update Title 3}</div>
  1083. <!---UPDATE BOX NUMBER 3. EDIT ONLY THIS PART.--><br>
  1084. Here is your update box number three. Feel free to write whatever you want in here, try to keep it short. If it overflows, a scrollbar will appear.
  1085. </div>
  1086. <br><br>
  1087.  
  1088. <script>
  1089. $(document).ready(function(){
  1090. $(".clickme4").click(function(){
  1091. $(".revealed4").toggle(500);
  1092. });
  1093. });
  1094. </script>
  1095. <a href="#" title="{text:Update Title 4}" class="clickme4"><i class="fa fa-cog"></i></a>
  1096. <div id="statbox4" class="revealed4">
  1097. <div id="statitle">{text:Update Title 4}</div>
  1098. <!---UPDATE BOX NUMBER 4. EDIT ONLY THIS PART.--><br>
  1099. Here is your update box number four. Feel free to write whatever you want in here, try to keep it short. If it overflows, a scrollbar will appear.</div>
  1100.  
  1101. </div>
  1102.  
  1103.  
  1104. <div id="topbar"><div id="box">{Description}</div>
  1105.  
  1106. <form onsubmit="return tagSearch(this)" class="sfm">
  1107. <input type="text" name="tag" value="{text:Search Label}" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '{text:Search Label}') {this.value=''}" id="sf" />
  1108. <input type="submit" value="✎" id="sb" />
  1109. </form>
  1110.  
  1111. <div id="maint">{Title}</div>
  1112.  
  1113. <div id="pagination">
  1114. {block:Pagination}
  1115. {block:NextPage}
  1116. <a href="{NextPage}" title="next"><img src="{image:Arrow Right}"></a>
  1117. {/block:NextPage}
  1118. <P>
  1119. {block:PreviousPage}
  1120. <a href="{PreviousPage}" title="previous"><div id="arrowleft"><img src="{image:Arrow Left}"></div></a>
  1121. {/block:PreviousPage}<br>
  1122. {/block:Pagination}
  1123. </div>
  1124.  
  1125. <div id="container">
  1126.  
  1127. {block:Posts}
  1128.  
  1129. <!-- {block:NoRebloggedFrom}
  1130. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1131. {/block:NoRebloggedFrom} -->
  1132.  
  1133. {block:ContentSource}<!-- {SourceURL}
  1134. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1135. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1136. {/block:ContentSource}
  1137.  
  1138. <div id="posts">
  1139.  
  1140. <!-- post info -->
  1141.  
  1142. {block:Date}<div id="date"><a href="{Permalink}"><font size="20px">{DayOfMonthWithZero}</font>
  1143. <center><font size="2px">{ShortMonth}/<b>{ShortYear}</font></b></center></a>
  1144. <div id="date2"><center><a href="{Permalink}" title="{NoteCountWithLabel}"><font face="FontAwesome"><i class="fa fa-paper-plane"></i></font></a></center></div></div>{/block:Date}
  1145.  
  1146.  
  1147. {block:Title}<div id="postitle">{Title}</div>{/block:Title}
  1148.  
  1149. {block:Text}
  1150. <div id="text">{Body}</div>
  1151. {/block:Text}
  1152.  
  1153. {block:Photo}
  1154. <a href="{permalink}"><img src="{PhotoURL-400}" width="400"/></a>
  1155. {/block:Photo}
  1156.  
  1157. {block:Photoset}
  1158. {Photoset-400}
  1159. {/block:Photoset}
  1160.  
  1161. {block:Quote}
  1162. <div id="titlequote">"{Quote}"</div>
  1163. {block:Source}<div id="source">{Source}</div>{/block:Source}
  1164. {/block:Quote}
  1165.  
  1166. {block:Video}
  1167. {Video-400}
  1168. {/block:Video}
  1169.  
  1170. {block:Link}
  1171. <div id="postitle"><a href="{URL}" class="link" {Target}>{Name}</a></div>
  1172. {block:Description}{Description}{/block:Description}
  1173. {/block:Link}
  1174.  
  1175. {block:Chat}
  1176. <div class="chat">
  1177. <ol>{block:Lines}
  1178. <li class="line {Alt}">
  1179. {block:Label}
  1180. <span class="label">{Label} </span>{/block:Label}{Line}</li>{/block:Lines}
  1181. </ol></div>
  1182. {/block:Chat}
  1183.  
  1184. {block:Audio}
  1185. <div class="audio">
  1186. <div class="box"><div id="button">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  1187. <div class="audioimg"><img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg"></div>{block:AlbumArt}<div class="audioimg"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}</div>
  1188. <br><div class="audiodatos">{block:TrackName}{TrackName}{/block:TrackName}
  1189. <br>{block:Artist}Artist: {Artist}{/block:Artist}
  1190. {block:Album}<br>Album: {Album}{/block:Album}
  1191. <br>{PlayCountWithLabel}</div>{/block:Audio}
  1192.  
  1193. {block:Answer}
  1194. <div id="question">
  1195. <div id="asker">{Asker} asked:</div>
  1196. <div id="q">{Question}</div></div><br>
  1197. <div id="answer">{Answer}</div>
  1198. {/block:Answer}
  1199.  
  1200. <!-- tags -->
  1201. {block:ifCaption}
  1202. {Caption}
  1203. {/block:ifCaption}
  1204. <div id="tags"><a href="{reblogurl}">REBLOG?</a>&nbsp;&nbsp;<font color="{color:Link}" face="FontAwesome"><i class="fa fa-tags"></i></font>&nbsp;&nbsp;{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} &nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  1205.  
  1206. <!-- permalink page -->
  1207. {block:PermalinkPage}
  1208. <div id="permalink">{block:RebloggedFrom}source: <a href="{ReblogRootURL}">{ReblogRootName}</a> &nbsp;·&nbsp; via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</div>
  1209. {block:PostNotes}<div id="postnotes">{PostNotes-16}</div>{/block:PostNotes}
  1210. {/block:PermalinkPage}
  1211.  
  1212. </div>
  1213.  
  1214. {/block:Posts}
  1215.  
  1216. <!-- credit (DO NOT REMOVE UNDER ANY CIRCUMSTANCES) -->
  1217. <div id="credit"><a href="http://luscifers.tumblr.com/" title="theme © luscifers">DEVIL'S<br>THEMES</a></div>
  1218.  
  1219. </div></div>
  1220.  
  1221. </body>
  1222.  
  1223. </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!