API tools faq
paste
Advertisement
alydae

media ii - tabbed version

alydae
Feb 22nd, 2020 (edited)
3,239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. MEDIA II - TABBED VERSION
  7. by alydae
  8.  
  9. released: february 23, 2020
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. this version does not have filters or the option to have multiple images in one. do NOT ask me to add them. I will update the code if those features become available.
  17.  
  18. thank you for using!!!
  19.  
  20. -->
  21.  
  22. <title>headers</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <!-- scripts - DO NOT TOUCH -->
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  28.  
  29. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:200,
  36. tip_fade_speed:300
  37. }
  38. );
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <!-- custom font -->
  44.  
  45. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  46.  
  47. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  48. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  49.  
  50. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
  51. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
  52.  
  53.  
  54. <style type="text/css">
  55.  
  56. @keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-moz-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-webkit-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-ms-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. @-o-keyframes fadein {
  77. from { opacity:0; }
  78. to { opacity:1; }
  79. }
  80.  
  81. /*-- selection --*/
  82.  
  83. ::-moz-selection { background:var(--accent); color:var(--title); }
  84. ::selection { background:var(--accent); color:var(--title); }
  85.  
  86. /*-- scrollbar --*/
  87.  
  88. ::-webkit-scrollbar {
  89. width:1px;
  90. height:2px;
  91. }
  92.  
  93. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  94.  
  95. /*-- tooltips --*/
  96.  
  97. #s-m-t-tooltip {
  98. color:var(--text);
  99. background-color:var(--accent);
  100. font-size:calc(var(--font-size) - 2px);
  101. font-family:'Open Sans', helvetica, sans-serif;
  102. letter-spacing:1px;
  103. text-transform:uppercase;
  104. text-align:center;
  105. position:absolute;
  106. padding:0px 5px 0px 5px;
  107. margin-top:30px;
  108. border:1px solid var(--borders);
  109. z-index:9999;
  110. }
  111.  
  112. /*-- tumblr controls --*/
  113.  
  114. .tmblr-iframe, .iframe-controls–desktop {
  115. display:none!important;
  116. }
  117.  
  118. /*-- common --*/
  119.  
  120. a, a:hover, .more, .media:hover .more {
  121. transition-duration: 0.6s;
  122. -moz-transition-duration: 0.6s;
  123. -webkit-transition-duration: 0.6s;
  124. -o-transition-duration: 0.6s;
  125. }
  126.  
  127. /*-- change all variables here --*/
  128.  
  129. :root {
  130. --background:#fff;
  131. --accent:#fafafa;
  132. --text:#666;
  133. --links:#444;
  134. --links-hover:#bad1e7;
  135. --title:#222;
  136. --borders:#eee;
  137. --tab:186, 209, 231; /* put the colour from links hover into google for this value */
  138. --tab-label:#fff; /* tab text colour on hover */
  139. --font-size:10px;
  140. }
  141.  
  142. /*-- general customisation --*/
  143.  
  144. body {
  145. color:var(--text);
  146. background:var(--background);
  147. font-style:normal;
  148. font-family:'Open Sans', helvetica, sans-serif;
  149. font-size:var(--font-size);
  150. font-weight:400;
  151. text-decoration:none;
  152. line-height:180%;
  153. -moz-osx-font-smoothing: grayscale;
  154. -webkit-font-smoothing: antialiased;
  155. font-smoothing: antialiased;
  156. -webkit-animation: fadein 1.5s;
  157. -moz-animation: fadein 1.5s;
  158. -o-animation: fadein 1.5s;
  159. animation: fadein 1.5s;
  160. }
  161.  
  162. a { text-decoration:none; color:var(--links); }
  163. a:hover, li.active a { color:var(--links-hover); cursor:pointer; }
  164.  
  165. b, strong { font-weight:600; color:var(--title); }
  166. i, em { font-style:italic; }
  167.  
  168. /*-- container --*/
  169.  
  170. #all {
  171. margin:230px auto 50px;
  172. width:calc(325px * 3 + 50px * 2);
  173. /* ((image width * how many + margin-left+margin-right * how many-1)*/
  174. }
  175.  
  176. /*-- header --*/
  177.  
  178. header {
  179. top:0;
  180. left:50%;
  181. transform:translateX(-50%);
  182. padding:100px 30px 30px 30px;
  183. position:fixed;
  184. width:calc(325px * 3 + 50px * 2);
  185. height:auto;
  186. background:var(--background);
  187. z-index:99;
  188. }
  189.  
  190. .icon { float:left; margin-right:15px; }
  191.  
  192. .icon img {
  193. width:30px;
  194. height:30px;
  195. border-radius:100%;
  196. padding:3px;
  197. border:1px solid var(--borders);
  198. }
  199.  
  200. .title {
  201. font-size:calc(var(--font-size) + 4px);
  202. font-weight:bold;
  203. letter-spacing:2px;
  204. line-height:38px;
  205. text-transform:uppercase;
  206. color:var(--title);
  207. width:calc(325px * 3 + 50px * 2);
  208. }
  209.  
  210. .desc {
  211. margin-left:220px;
  212. margin-top:20px;
  213. height:36px;
  214. overflow-y:scroll;
  215. /* add display:none if you don't want the description */
  216. }
  217.  
  218. .requests {
  219. float:right;
  220. font-size:12px;
  221. font-weight:700;
  222. text-transform:uppercase;
  223. padding:5px 12px;
  224. color:var(--links-hover);
  225. border:1px solid var(--links-hover);
  226. border-radius:5px;
  227. }
  228.  
  229. .links {
  230. margin-top:20px;
  231. margin-left:-45px;
  232. width:180px; /* increase this value to widen */
  233. column-count:2; /* increase this if you want more columns */
  234. font-style:italic;
  235. float:left;
  236. /* delete column-count:2; and width:180px; if you don't have the description */
  237. }
  238.  
  239. .links a {
  240. display:block; /* change to display:inline; if you don't have the description */
  241. margin-right:10px;
  242. }
  243.  
  244. .links i { margin-right:7px; }
  245.  
  246. /*-- media --*/
  247.  
  248. #main {
  249. width:calc(325px * 3 + 50px * 3);
  250. /* (image width * how many + margin-left+margin-right * how many) */
  251. height:auto;
  252. margin-left:-25px;
  253. margin-top:30px;
  254. }
  255.  
  256. .media {
  257. float:left;
  258. margin-left:25px;
  259. margin-right:25px;
  260. margin-bottom:50px;
  261. height:auto;
  262. width:325px; /* image width */
  263. }
  264.  
  265. .media img {
  266. height:auto;
  267. width:325px; /* image width */
  268. }
  269.  
  270. .more {
  271. float:left;
  272. position:absolute;
  273. margin:10px;
  274. text-align:center;
  275. font-style:italic;
  276. font-weight:600;
  277. text-transform:uppercase;
  278. letter-spacing:0.5px;
  279. padding:2px 5px;
  280. background:var(--background);
  281. border:1px solid var(--borders);
  282. opacity:0;
  283. border-radius:5px;
  284. z-index:9;
  285. }
  286.  
  287. .media:hover .more { opacity:0.9; }
  288.  
  289. .subtitle {
  290. letter-spacing:1px;
  291. font-weight:bold;
  292. font-size:11px;
  293. line-height:180%;
  294. text-align:center;
  295. text-transform:uppercase;
  296. }
  297.  
  298.  
  299. /*----- tabs -----*/
  300.  
  301. .tabs { width:100%; display:inline-block; }
  302.  
  303. .tab-links {
  304. margin:-6px 0px 0px -40px;
  305. width:calc(325px * 3 + 50px * 2 + 1px);
  306. position:fixed;
  307. z-index:999;
  308. }
  309.  
  310. .tab-links:after { display:block; clear:both; content:''; }
  311. .tab-links li { display:inline; list-style:none; }
  312.  
  313. .tab-links a {
  314. width:33.3%; /* change this value to 100% divided by the number of tabs you want in a row */
  315. box-sizing:border-box;
  316. margin:0!important;
  317. padding:7px 15px;
  318. display:inline-block;
  319. letter-spacing:1.5px;
  320. font-weight:bold;
  321. font-size:calc(var(--font-size) + 2px);
  322. line-height:180%;
  323. text-align:center;
  324. text-transform:uppercase;
  325. font-family:'Open Sans', helvetica, sans-serif;
  326. color:var(--title);
  327. background:var(--accent);
  328. border:1px solid var(--borders);
  329. }
  330.  
  331. .tab-links a:hover, li.active a:hover {
  332. background:rgba(var(--tab), 0.4);
  333. color:var(--tab-label);
  334. text-decoration:none;
  335. }
  336.  
  337. .tab { display:none; }
  338. .tab.active { display:block; }
  339. .tab-content { margin-top:75px; }
  340.  
  341.  
  342. /*-- credit - DO NOT TOUCH --*/
  343.  
  344. .credit a {
  345. font-size:10px;
  346. bottom:15px;
  347. right:20px;
  348. position:fixed;
  349. text-transform:uppercase;
  350. z-index:99999;
  351. }
  352.  
  353. </style>
  354. </head>
  355.  
  356.  
  357.  
  358. <body>
  359.  
  360.  
  361. <header>
  362.  
  363. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  364. <div class="icon"><img src="{PortraitURL-128}"/></div>
  365. <!-- optional requests status box! if you don't want it just delete it. -->
  366. <div class="requests">requests status</div>
  367. <div class="title">headers</div><!-- title -->
  368. <div class="links">
  369. <!-- these are your header links. the maximum is two rows. to change the icon, go to https://fontawesome.com/icons. -->
  370. <a href="/"><i class="fas fa-home fa-fw"></i>home</a>
  371. <a href="/ask"><i class="fas fa-envelope fa-fw"></i>ask</a></a>
  372. <a href="/"><i class="fas fa-bars fa-fw"></i>link</a>
  373. <a href="/"><i class="fas fa-tag fa-fw"></i>link</a>
  374. </div>
  375.  
  376. <!-- it will automatically scroll -->
  377. <div class="desc">
  378. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ligula lorem. Donec non purus mi. Sed iaculis ex at odio vehicula, ac hendrerit augue semper. Proin mi massa, egestas in consectetur sed, malesuada nec dolor. Pellentesque viverra mollis libero, accumsan facilisis orci. Cras porttitor feugiat libero quis elementum.
  379. </div>
  380.  
  381. </header>
  382.  
  383.  
  384.  
  385. <div id="all">
  386.  
  387. <!-- HOW TO ADD NEW TABS
  388.  
  389. 1. add this template under the last <li> in <ul class="tab-links">
  390. <li><a href="#tab4">title</a></li>
  391. change #tab4 to whatever tab number it is.
  392.  
  393. 2. copy this template. make sure the tab number matches.
  394.  
  395. <div id="tab4" class="tab">
  396. <div id="main">
  397. <div class="media">
  398. <div class="more">optional text on hover</div>
  399. <img src="">
  400. </div>
  401. </div>
  402. </div>
  403.  
  404. -->
  405.  
  406. <div class="tabs">
  407. <ul class="tab-links">
  408. <li class="active"><a href="#tab1">tab one</a></li>
  409. <li><a href="#tab2">tab two</a></li>
  410. <li><a href="#tab3">tab three</a></li>
  411. </ul>
  412.  
  413.  
  414. <!-- TEMPLATES FOR MORE BOXES
  415.  
  416. <div class="media">
  417. <div class="more">optional text on hover</div>
  418. <img src="">
  419. </div>
  420.  
  421. to add a link to each picture:
  422. <a href=""><img src=""></a>
  423.  
  424. if you do not want the text on hover, just delete this line.
  425. <div class="more">optional text on hover</div>
  426.  
  427. if you want text under the headers (keep it short!), add this line under the last <img src="">
  428. <div class="subtitle">subtitle</div>
  429.  
  430. -->
  431.  
  432. <div class="tab-content">
  433.  
  434. <div id="tab1" class="tab active">
  435. <div id="main">
  436. <div class="media">
  437. <div class="more">optional text on hover</div>
  438. <img src="">
  439. </div>
  440. </div>
  441. </div><!-- end tab 1 -->
  442.  
  443.  
  444. <div id="tab2" class="tab">
  445. <div id="main">
  446. <div class="media">
  447. <div class="more">optional text on hover</div>
  448. <img src="">
  449. </div>
  450. <div class="media">
  451. <div class="more">optional text on hover</div>
  452. <a href=""><img src=""></a>
  453. </div>
  454. </div>
  455. </div><!-- end tab 2 -->
  456.  
  457.  
  458. <div id="tab3" class="tab">
  459. <div id="main">
  460. <div class="media">
  461. <div class="more">optional text on hover</div>
  462. <img src="">
  463. </div>
  464. <div class="media">
  465. <div class="more">optional text on hover</div>
  466. <a href=""><img src=""></a>
  467. </div>
  468. <div class="media">
  469. <div class="more">optional text on hover</div>
  470. <img src="">
  471. </div>
  472. </div>
  473. </div><!-- end tab 3 -->
  474.  
  475.  
  476. </div><!-- end tabs-content -->
  477. </div><!-- end tabs -->
  478.  
  479.  
  480. </div><!-- end all -->
  481.  
  482.  
  483. <!-- credit - DO NOT TOUCH -->
  484.  
  485. <div class="credit">
  486. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  487. </div>
  488.  
  489.  
  490. </body>
  491.  
  492.  
  493. <!-- scripts - DO NOT TOUCH -->
  494.  
  495. <script>
  496. jQuery(document).ready(function() {
  497. jQuery('.tabs .tab-links a').on('click', function(e) {
  498. var currentAttrValue = jQuery(this).attr('href');
  499. jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  500. jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  501. e.preventDefault();
  502. });
  503. });
  504. </script>
  505.  
  506.  
  507. </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!