API tools faq
paste
crimsonxthemes

Page 01: Luminescence

crimsonxthemes
Jul 15th, 2016
281
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.89 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Page 01. by CrimsonxThemes
  3. Luminescence
  4. /ˌlo͞oməˈnesəns/
  5.  
  6. OKAY HOLD UP
  7. I know this code might look a little intimidating but I've included a h*ck ton of notes to help you along the way if you might need it. I'll also put a little tutorial in this note section on how to use the filters if you're not sure how. If you still need additional help my askbox is almost always open!! Okay ily bye.
  8.  
  9. --------------------------------------------------------------------------
  10.  
  11. HOW TO USE FILTERS:
  12. You see this:
  13. <a href="#" rel="tag" class="filters"><span>Tag</span></a>
  14.  
  15. All that matters is the 'rel="tag"' and '<span>Tag</span>'. You change 'rel="tag"' to whatever your little heart pleases, it could be 'rel="one"', 'rel="two"', 'rel="three"', just as a few examples.
  16.  
  17. The <span>Tag</span> is going to be the option that is shown to your viewers in the sidebar. Again, change "Tag" to whatever you please.
  18.  
  19. Then you see this at the beginning of the box div:
  20. <div class="box">
  21.  
  22. You HAVE to keep 'box' in there, otherwise it won't filter. But then you take whatever you replaced "tag" with in 'rel="tag"' and put it next to 'box'. You can add as many as you'd like.
  23.  
  24. So,
  25. <div class="box one two three">
  26. paired with
  27. <a href="#" rel="one" class="filters"><span>One</span></a>
  28. <a href="#" rel="two" class="filters"><span>Two</span></a>
  29. <a href="#" rel="three" class="filters"><span>Three</span></a>
  30.  
  31. Will filter into the One, Two, and Three filters.
  32.  
  33. That's all there is to it!
  34.  
  35. --------------------------------------------------------------------------
  36.  
  37. And, as always
  38. Please don't steal this, I actually worked really hard on it
  39. And theives are ugly butts ^u^
  40. (●´ω｀●)
  41. -->
  42. <html>
  43. <head>
  44. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic|Lato:300,300i' rel='stylesheet' type='text/css'>
  45.  
  46. <title>{Title}</title>
  47. <link rel="shortcut icon" href="{Favicon}">
  48. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  49. <meta name="description" content="" />
  50. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  51.  
  52. <!--Slick Carousel @kenwheeler (http://kenwheeler.github.io/slick/)-->
  53. <!--Back to top tutorial @html-tuts-->
  54. <!--Tooltips tutorial @acuite-->
  55.  
  56. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  57. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/4fjyb6u/Vdgo7srut/slick.css"/>
  58. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  59. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">
  60.  
  61. <script>
  62. (function($){
  63. $(document).ready(function(){
  64. $("[title]").style_my_tooltips({
  65. tip_follows_cursor:true,
  66. tip_delay_time:200,
  67. tip_fade_speed:300
  68. }
  69. );
  70. });
  71. })(jQuery);
  72. </script>
  73.  
  74.  
  75. <style type="text/css">
  76.  
  77.  
  78. /*Tumblr controls*/
  79. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  80. position:fixed!important;
  81. opacity:0;
  82. }
  83. /*Selection color*/
  84. ::selection {
  85. background:transparent!important;
  86. color:#B7CEEC;/*Change selection Color*/
  87. }
  88. ::-moz-selection {
  89. background:transparent!important;
  90. color:#B7CEEC;/*Change selection Color*/
  91. }
  92. ::-webkit-selection {
  93. background:transparent!important;
  94. color:#B7CEEC;/*Change selection Color*/
  95. }
  96. /*Scrollbar*/
  97. ::-webkit-scrollbar-thumb:vertical {
  98. background-color: #ddd; /*color of scrollbar*/
  99. }
  100. ::-webkit-scrollbar {
  101. height:0;
  102. width: 1px;
  103. background-color: transparent!important;
  104. }
  105.  
  106. /*Tooltips tutorial @ acuite*/
  107. #s-m-t-tooltip{
  108. border:1px solid #DDD; /*change tooltip border color*/
  109. background:#FFF; /*change tooltip background color*/
  110. color:#AAA; /*change tooltip font color*/
  111. max-width:300px;
  112. margin:15px;
  113. padding:0 5px 2px 5px;
  114. border-radius:1px;
  115. z-index:999999;
  116. font-size:9px;
  117. font-style:italic;
  118. text-transform:lowercase;
  119. }
  120. /*Music Player*/
  121. .mp {
  122. position:absolute;
  123. width:20px;
  124. height:20px;
  125. left:0;
  126. top:0;
  127. }
  128. /*Basics*/
  129. body {
  130. background-color:#fff; /*change background color*/
  131. color:#888; /*Change default font color*/
  132. font-family:open sans;
  133. font-weight:100;
  134. font-size:9px;
  135. }
  136. a {
  137. color:#999; /*Change link color*/
  138. text-decoration:none;
  139. font-family:karla;
  140. font-size:9px;
  141. -moz-transition-duration: 0.5s;
  142. -o-transition-duration: 0.5s;
  143. -webkit-transition-duration: 0.5s;
  144. transition-duration: 0.5s;
  145. }
  146. a:hover {
  147. color:#B7CEEC; /*Change link hover color*/
  148. -moz-transition-duration: 0.5s;
  149. -o-transition-duration: 0.5s;
  150. -webkit-transition-duration: 0.5s;
  151. transition-duration: 0.5s;
  152. }
  153. /*Sidebar*/
  154. #sidebar {
  155. position:fixed;
  156. background-color:#fff; /*Change sidebar background color (for best result, keep the same as the background color)*/
  157. left:100px;
  158. top:100px;
  159. width:100px;
  160. height:auto;
  161. border-top:1px solid #ddd; /*Change sidebar border color*/
  162. border-left:1px solid #ddd; /*Change sidebar border color*/
  163. padding:5px 5px 0 5px;
  164. }
  165. /*Sidebar Icon*/
  166. .image {
  167. position:absolute;
  168. left:calc(79px / 2 - 90px);
  169. top:calc(79px / 2 - 90px);
  170. }
  171. .image img {
  172. width:75px;
  173. height:75px;
  174. padding:2px;
  175. border-radius:50%;
  176. border:1px solid #ddd; /*Change image border color*/
  177. background-color:#fff;
  178. }
  179. /*Page Title*/
  180. .title {
  181. color:#999; /*Change title color*/
  182. position:absolute;
  183. background-color:transparent!important;
  184. top:-17px;
  185. width:100px;
  186. margin-left:5px;
  187. text-align:right;
  188. font-size:11px;
  189. height:15px;
  190. }
  191. /*Filter Box*/
  192. .finfo {
  193. margin-top:0px;
  194. padding:2px;
  195. }
  196. /*Filter Heading*/
  197. .ftitle {
  198. border-bottom:1px dotted #ddd; /*Change filter border color*/
  199. width:100px;
  200. font-family:Lato;
  201. text-align:right;
  202. font-size:12px;
  203. }
  204. /*Filters*/
  205. #filters {
  206. margin-top:2px;
  207. height:auto;
  208. width:100px;
  209. }
  210. #filters a {
  211. color:#999; /*Change filter color*/
  212. font-family:Lato;
  213. font-style:italic;
  214. display:block;
  215. font-size:10px;
  216. line-height:15px;
  217. }
  218.  
  219. #filters a:hover{
  220. color:#B7CEEC; /*Change filter hover color*/
  221. }
  222.  
  223. #filters a::before {
  224. background-color:#ddd; /*Change filter line color*/
  225. content:'';
  226. height:1px;
  227. width:100px;
  228. position:absolute;
  229. margin-top:calc(15px / 2);
  230. z-index:-1;
  231. }
  232.  
  233. #filters span{
  234. background-color:#fff; /*Change filter background color (for best result, keep the same as background color)*/
  235. padding:0 5px 0 5px;
  236. }
  237.  
  238. /*Links*/
  239. .bar {
  240. background-color:#fff;/*Change bar background color (for best result, keep the same as background color)*/
  241. width:500px;
  242. height:30px;
  243. position:fixed;
  244. right:0;
  245. top:0;
  246. z-index:999;
  247. text-align:right;
  248. padding:5px;
  249. }
  250. .home {
  251. position:absolute;
  252. opacity:0;
  253. background-color:transparent!important;
  254. width:75px;
  255. height:15px;
  256. left:35px;
  257. top:-13px;
  258. line-height:10px;
  259. text-align:center;
  260. }
  261. .home a {
  262. font-family:Lato;
  263. font-size:11px;
  264. }
  265. /*Carousel @kenwheeler*/
  266. .carousel {
  267. width:100px;
  268. padding-top:5px;
  269. }
  270.  
  271. .carousel img {
  272. border:1px solid #ddd; /*Change carousel image border color*/
  273. width:94px;
  274. padding:2px;
  275. height:auto;
  276. }
  277.  
  278. .slick-dots {
  279. position: absolute;
  280. bottom: -25px;
  281. display: block;
  282. width: 100%;
  283. padding: 0;
  284. margin: 0;
  285. list-style: none;
  286. text-align: center;
  287. }
  288. .slick-dots li {
  289. position: relative;
  290. display: inline-block;
  291. width: 20px;
  292. height: 20px;
  293. cursor: pointer;
  294. }
  295. .slick-dots li button {
  296. font-size: 0;
  297. line-height: 0;
  298. display: block;
  299. width: 20px;
  300. height: 20px;
  301. padding: 5px;
  302. cursor: pointer;
  303. color:transparent;
  304. border: 0;
  305. outline: none;
  306. background: transparent;
  307. }
  308. .slick-dots li button:hover, .slick-dots li button:focus {
  309. outline: none;
  310. }
  311. .slick-dots li button:hover:before, .slick-dots li button:focus:before {
  312. opacity: 1;
  313. }
  314. .slick-dots li button:before {
  315. color: #555; /*Change carousel dot color*/
  316. font-size: 10px;
  317. line-height: 10px;
  318. position: absolute;
  319. top: 0;
  320. left: 0;
  321. width: 20px;
  322. height: 20px;
  323. content: '◉';
  324. text-align: center;
  325. opacity: .50;
  326. -webkit-font-smoothing: antialiased;
  327. -moz-osx-font-smoothing: grayscale;
  328. }
  329. .slick-dots li.slick-active button:before {
  330. color: #555; /*Change carousel dot color hover*/
  331. opacity: 1;
  332. }
  333. /*Fontawesome Icons*/
  334. .fa {
  335. color:#bbb; /*Change Fontawesome Icon color*/
  336. font-size:13px;
  337. margin:0 3px 0 3px;
  338. -moz-transition-duration: 0.5s;
  339. -o-transition-duration: 0.5s;
  340. -webkit-transition-duration: 0.5s;
  341. transition-duration: 0.5s;
  342. }
  343. .fa:hover {
  344. color:#B7CEEC; /*Change Fontawesome Icon hover color*/
  345. -moz-transition-duration: 0.5s;
  346. -o-transition-duration: 0.5s;
  347. -webkit-transition-duration: 0.5s;
  348. transition-duration: 0.5s;
  349. }
  350.  
  351. #container {
  352. border-top:1px dotted #ddd; /*Change container border color*/
  353. border-bottom:1px dotted #ddd; /*Change container border color*/
  354. position:absolute;
  355. width:486px;
  356. height:486px;
  357. left:50%;
  358. margin-left:-243px;
  359. top:100px;
  360. float:left;
  361. overflow:scroll;
  362. }
  363. /*Movie/Show/Fic Content Box*/
  364. .box {
  365. background-color:#fff; /*Change info box background color*/
  366. border:1px solid #ddd; /*Change info box border color*/
  367. width:180px;
  368. overflow:scroll;
  369. height:170px;
  370. float:left;
  371. padding:0 10px 10px 10px;
  372. margin:20px;
  373. border-radius:3px;
  374. }
  375. /*Box Picture*/
  376. .picture {
  377. float:left;
  378. padding-top:10px;
  379. }
  380.  
  381. .picture img {
  382. border:1px solid #ddd; /*Change info box picture border color*/
  383. background-color:#fff; /*Change info box picture background color (for best results, keep the same as info box background color )*/
  384. border-radius:4px;
  385. height:49px;
  386. width:49px;
  387. padding:2px;
  388. }
  389. /*Box Info*/
  390. .infobox {
  391. background-color:#fff; /*Change info box background color*/
  392. border-bottom:1px dotted #ddd; /*Change info box border color*/
  393. width:auto;
  394. margin-top:12px;
  395. text-align:center;
  396. padding-bottom:2px;
  397. }
  398.  
  399. .infobox a {
  400. font-family:Lato;
  401. }
  402.  
  403. .summary {
  404. padding-top:5px;
  405. text-align:justify;
  406. }
  407.  
  408. .cred {
  409. position:fixed;
  410. bottom:10px;
  411. right:10px;
  412. -moz-transition-duration: 0.5s;
  413. -o-transition-duration: 0.5s;
  414. -webkit-transition-duration: 0.5s;
  415. transition-duration: 0.5s;
  416. }
  417.  
  418. .cred:hover {
  419. color:#B7CEEC;
  420. -moz-transition-duration: 0.5s;
  421. -o-transition-duration: 0.5s;
  422. -webkit-transition-duration: 0.5s;
  423. transition-duration: 0.5s;
  424. }
  425.  
  426. </style>
  427.  
  428. </head>
  429.  
  430. <body>
  431.  
  432. <!--Change Music delete this section if you don't want music)-->
  433. <div class="mp">
  434. <!--Insert music code from flashMP3 here-->
  435. </div>
  436. <!---->
  437.  
  438. <div class="bar">
  439. <a href="/" title="Index"><i class="fa fa-home" aria-hidden="true"></i></a>
  440. <a href="/ask" title="Contact"><i class="fa fa-question" aria-hidden="true"></i></a>
  441. <a href="/submit" title="Gifts"><i class="fa fa-inbox" aria-hidden="true"></i></a>
  442. <a href="/archive" title="Past"><i class="fa fa-history" aria-hidden="true"></i></a>
  443. <!--Extra Link, if you want it
  444. <a href="/" title="Extra Link"><i class="fa fa-star-o" aria-hidden="true"></i></a>
  445. -->
  446. <a href="http://tumblr.com/dashboard?conversation={Name}" title="Instant Message"><i class="fa fa-comments-o" aria-hidden="true"></i></a>
  447. <a href="http://tumblr.com/follow/{Name}" title="follow me"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
  448. <a href="http://tumblr.com/" title="Thank for stopping!"><i class="fa fa-refresh" aria-hidden="true"></i></a>
  449. </div>
  450.  
  451. <div id="sidebar">
  452. <!--Change Sidebar Image-->
  453. <div class="image">
  454. <img src="" />
  455. </div>
  456. <!---->
  457.  
  458.  
  459.  
  460.  
  461.  
  462. <!--Change Page Title (just erase title if you don't want it)-->
  463. <div class="title">
  464. Luminescence
  465. </div>
  466. <!---->
  467. <div class="finfo">
  468. <div id="filters">
  469. <div class="ftitle">Refresh</div>
  470. <a href="#" rel="box" class="filters"><span>Show all</span></a>
  471.  
  472.  
  473.  
  474.  
  475.  
  476. <!--Filter Secion (add as many sections/filters as you please)-->
  477. <div class="ftitle">Title One</div>
  478. <a href="#" rel="tag-one" class="filters"><span>Filter One</span></a>
  479. <a href="#" rel="tag-two" class="filters"><span>Filter Two</span></a>
  480. <!---->
  481.  
  482.  
  483.  
  484.  
  485.  
  486. <!--Leave these here!--></div></div><!---->
  487.  
  488.  
  489.  
  490.  
  491.  
  492. <!--Carousel Images (if you don't want a carousel, delete from here..)-->
  493. <div class="ftitle">
  494. Favorites
  495. </div>
  496. <div class="carousel"> <!--Suggested not to go more than 5 pictures)-->
  497. <img src="" />
  498. </div>
  499. <!--(to here)-->
  500.  
  501.  
  502.  
  503.  
  504.  
  505. <!--Leave this here!--></div><!---->
  506.  
  507. <!--Container-->
  508. <div id="container">
  509.  
  510.  
  511.  
  512.  
  513.  
  514. <!--Box (to add another, copy from here...)-->
  515. <div class="box tag-one tag-two">
  516. <!--Box Picture (if you don't want this, delete from here..)-->
  517. <div class="picture">
  518. <img src="" />
  519. </div>
  520. <!--(to here (delete picture) )-->
  521. <div class="infobox"><a href="">Movie/Show/Fic Name</a></div>
  522. <div class="infobox">Rating: ✦✧</div>
  523. <div class="infobox">Summary:</div>
  524. <div class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet laoreet augue et volutpat. Quisque posuere ex et elit consequat euismod. In facilisis vestibulum scelerisque. Mauris vel justo luctus, aliquet lorem sed, faucibus ipsum. Vivamus.</div>
  525. </div>
  526. <!--(to here (copy box) )-->
  527.  
  528.  
  529.  
  530.  
  531.  
  532. <!--Leave this here!--></div><!---->
  533. <!---->
  534. <!-----No need to edit anywhere below this line!!!----->
  535. <div class="cred"><a href="http://crimsonxthemes.tumblr.com" title="Crimson Themes"><i style="font-size:10px" class="fa fa-anchor" aria-hidden="true"></i></a></div>
  536. <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  537. <script src="http://static.tumblr.com/4fjyb6u/DiNo7srsg/slick.min.js"></script>
  538.  
  539.  
  540. <script>
  541.  
  542. //slick carousel
  543. $(document).ready(function(){
  544. $('.carousel').slick({
  545. adaptiveHeight: true,
  546. arrows: false,
  547. dots: true,
  548. });
  549. });
  550.  
  551. //filter results
  552. $(document).ready(function(){
  553. $(".filters").click(function(e) {
  554. e.preventDefault();
  555. $(".box").not("." + $(this).attr("rel")).hide(500);
  556. $("." + $(this).attr("rel")).show(500);
  557. });
  558. });
  559.  
  560. </script>
  561. </body>
  562. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!