API tools faq
paste
Advertisement
Petra1999

TAG PAGE 02 | cloudythms.tumblr.com

Petra1999
Jul 17th, 2018
5,818
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
  3. <!-----------------------------------------------------------------------
  4.  
  5.  
  6.        {   cloudythms
  7.                     TAG PAGE 02    }
  8.          
  9.        
  10.  https://cloudythms.tumblr.com/
  11.       contact me if you have questions!
  12.  
  13.  
  14.  
  15. .....................  RULES  .....................
  16.  
  17. - You may move, but not remove the credit
  18. - Leave this comment
  19. - Edit the rest as much as you want
  20. - Do not redistribute without permission / use as base
  21. - Do not claim as your own
  22.  
  23.  
  24.  
  25.  
  26. .....................  GUIDE  .....................
  27.  
  28. To search for something:
  29.    1. Make sure you have already clicked somewhere in the code
  30.    2. Press Ctrl and F
  31.    3. A little "search for" window should open
  32.  
  33.  
  34. CHANGING HEADER TITLE/LINKS:
  35.    
  36.    Search for "edit header here" and change it however you want.
  37.    
  38.  
  39. ADDING CONTENT:
  40.  
  41.    Find 'edit from here'.
  42.    You will see a block of code lines that you can edit.
  43.    If you want more categories, just copy the block
  44.    and paste another one below.
  45.    I've also added a template at the very bottom which you can copy
  46.    in case something went wrong when you edited.
  47.    
  48.    
  49. CHANGE DEFAULT STATE:
  50.  
  51.    By default, all categories are opened until closed.
  52.    If you want all categories to be closed at the start,
  53.    search for "default state" and follow the instructions.
  54.  
  55.  
  56. CHANGING THE COLORS:
  57.  
  58.    Just find every instance of a default color (list below)
  59.    and replace them with a color you want.
  60.    
  61.    Get color codes here: https://htmlcolorcodes.com/color-picker/
  62.    Use the one that starts with #
  63.    Example: #ffffff for white.
  64.    
  65.    DEFAULTS:
  66.    text        dark gray   #383838
  67.    accent 1    pink        #ffc1f6
  68.    accent 2    orange      #ffddc1
  69.    accent 3    yellow      #fcfcab
  70.    accent 4    dark pink   #b280ab
  71.    
  72.    accent 2 should have a hue between accent 1 and 3.
  73.    accent 4 should be a darker version of any other accent.
  74.    
  75.    if you don't want multiple colors,
  76.    just use the same color code for accent 1-3,
  77.    and make accent 4 a darker version of that.
  78.    
  79.    
  80. CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  81.  
  82.    Search for <title> and change the text between
  83.    <title> and </title> to anything you want.
  84.    If you want your blog title to appear, write {Title}
  85.    
  86.    
  87. SHOWING TUMBLR CONTROLS:
  88.  
  89.    (Tumblr controls are the buttons on the top right corner of blogs,
  90.    like the follow, block, dashboard button etc.)
  91.    By default, my page themes have the tumblr controls hidden.
  92.    If you want them to show, search for 'hide tumblr controls'
  93.    and delete the line below it.
  94.  
  95.    
  96. questions?
  97.    Ask me.
  98.    https://cloudythms.tumblr.com/
  99.    
  100.  
  101.  
  102.  
  103.  
  104.  
  105. ..................... CREDITS .....................
  106.  
  107. - icon font:        https://fontawesome.io/
  108. - fonts:            https://fonts.google.com/
  109. - smoothscroll:     https://zacharyfury.tumblr.com/post/138066236021/
  110. - tooltips:         https://tutorial-baby.tumblr.com/post/74581118284/
  111. - no redirects:     https://magnusthemes.tumblr.com/post/162657076440/
  112. - other resources:  https://cloudythms.tumblr.com/res
  113.  
  114. ---------------------------------------------------------------------->
  115.  
  116.  
  117. <!-- Text that appears on the tab / browser window -->
  118. <title>navigation</title>
  119.  
  120.  
  121. <link rel="shortcut icon" href="{Favicon}"/>
  122.  
  123.  
  124. <!-- ------------------------------------------------------------- -->
  125.        
  126. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://static.tumblr.com/tpbx7ye/OYupblc9f/cloudythms.css" rel="stylesheet">
  127.  
  128. <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Lora|Open+Sans|Roboto|Roboto+Mono|Roboto+Slab|Karla&amp;subset=latin-ext" rel="stylesheet">
  129.  
  130. <!-- FontAwesome --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  131.  
  132. <!-- Smooth Scroll --> <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  133.  
  134. <!-- no tumblr redirect links -->
  135. <script>
  136. $(document).ready(function(){
  137. //remove tumblr redirects script by magnusthemes@tumblr
  138.   $('a[href*="t.umblr.com/redirect"]').each(function(){
  139.       var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  140.       var replaceURL = decodeURIComponent(originalURL);
  141.       $(this).attr("href", replaceURL);
  142.   });
  143. });
  144. </script>
  145.    
  146. <!-- tooltips -->
  147. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  148. <script>
  149.     (function($){
  150.     $(document).ready(function(){
  151.     $("a[title]").style_my_tooltips({
  152.     tip_follows_cursor:true,
  153.      
  154.     /* Change your tooltip times here. */
  155.     tip_delay_time:30, /* put a higher number for more delay */
  156.     tip_fade_speed:400, /* put a higher number for a slower fade */
  157.     /* recommended: delay:10-100 fade:200-600 */
  158.      
  159.     attribute:"title"
  160.     });
  161.     });
  162.     })(jQuery);
  163. </script>
  164. <style>
  165. .tooltip{
  166.     display: inline;
  167.     position: relative;
  168. }
  169. #s-m-t-tooltip {
  170.     max-width:300px;
  171.     border-radius: 0px;
  172.     padding:3px 4px 5px 4px;
  173.     margin:20px 7px -2px 20px;
  174.     background-color:#ffffff;
  175.     border:1px solid #E0E0E0;
  176.     border-radius: 5px;
  177.     font-family:calibri;
  178.     font-size:10px;
  179.     letter-spacing:1px;
  180.     text-transform:uppercase;
  181.     color:#000;
  182.     z-index:9999999999999999;
  183. }
  184. </style>
  185.  
  186.  
  187. <!-- ---------------------------------------------------------------- -->
  188. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  189. <!-- ---------------------------------------------------------------- -->
  190. <style type="text/css">
  191.  
  192. /* hide tumblr controls (delete this line if you want them to show) */
  193. body > iframe:first-child { display: none !important; }
  194.  
  195.        
  196. /* ****************************** BASICS ****************************** */
  197.  
  198. body {
  199.     padding:3%;
  200.     font-family:'Karla', sans-serif;
  201.     font-size:12px; /* font size */
  202.     color:#383838; /* normal text color */
  203. }
  204.  
  205. #wrapper {
  206.     display:block;
  207.     width:600px; /* width of everything */
  208. }
  209.  
  210. .center {
  211.     position: absolute;
  212.     top:25vh;
  213.     left:50%;
  214.     -ms-transform: translateX(-50%) translateY(0%);
  215.     -webkit-transform: translate(-50%,0%);
  216.     transform: translate(-50%,0%);
  217. }
  218.  
  219.  
  220. a, a:hover{
  221.     color:#b2b2b2;
  222. }
  223.  
  224. a, a:focus {
  225.     outline: 0;
  226.     text-decoration:none;
  227. }
  228.  
  229. ::selection {
  230.   background: rgba(0,0,0,0.3);
  231.   color: #ffffff;
  232. }
  233. ::-moz-selection {
  234.   background: rgba(0,0,0,0.3);
  235.   color: #ffffff;
  236. }
  237.  
  238. ::-webkit-scrollbar-thumb:vertical {
  239. background-color:rgba(0,0,0,0.2);
  240. height:100px;
  241. border-radius:15px;
  242. }
  243. ::-webkit-scrollbar-thumb:horizontal {
  244. background-color:rgba(0,0,0,0.2);
  245. height:100px !important;
  246. }
  247. ::-webkit-scrollbar {
  248. height:10px;
  249. width:10px;
  250. background-color:transparent;
  251. }
  252.  
  253.            
  254. /* ************************** HEADER ************************** */
  255.  
  256. .header {
  257.     text-align:center;
  258.     margin-bottom:50px;
  259.     padding-bottom:10px;
  260.     position:relative;
  261. }
  262.  
  263. .header:after {
  264.    content:'';
  265.    width:100%;
  266.    position: absolute;
  267.    left:0;
  268.    bottom:-1px;
  269.    height: 3px;
  270.    background: #ffddc1; /* accent 2 */
  271.    background: -webkit-linear-gradient(to right, #ffc1f6, #fcfcab);
  272.    background: linear-gradient(to right, #ffc1f6, #fcfcab);
  273.    /* accent 1 + accent 3 */
  274. }
  275.  
  276. .header h1 {
  277.     display:inline-block;
  278.     margin:0 5px;
  279. }
  280.  
  281. .header a {
  282.     color:#b280ab; /* accent 4 */
  283.     border-bottom:2px solid #ffc1f6; /* accent 1 */
  284.     margin-left:3px;
  285.     margin-right:3px;
  286. }
  287. .header a:first-child {
  288.     margin-left:0;
  289. }
  290. .header a:last-child {
  291.     margin-right:0;
  292. }
  293. .header a:hover {
  294.     padding-bottom:2px;
  295. }
  296.  
  297. a#openall, a#closeall {
  298.     cursor:help;
  299.     border-bottom:2px solid #ffddc1; /* accent 2 */
  300. }
  301.  
  302.  
  303.  
  304. /* ************************** CONTENT ************************** */
  305.  
  306. .content {
  307.     max-height:575px;
  308. }
  309.  
  310. .category {
  311.     margin-bottom:40px;
  312.     padding:15px;
  313.     border-radius:6px;
  314. }
  315.  
  316. .category:nth-child(4n+1){
  317.     border:2px solid #ffc1f6; /* accent 1 */
  318. }
  319. .category:nth-child(2n+2){
  320.     border:2px solid #ffddc1; /* accent 2 */
  321. }
  322. .category:nth-child(4n+3){
  323.     border:2px solid #fcfcab; /* accent 3 */
  324. }
  325.  
  326. .q {
  327.     background:white;
  328.     letter-spacing:0.5px;
  329.     font-size:14px;
  330.     padding:5px;
  331.     padding-left:25px;
  332.     position:relative;
  333.     cursor:help;
  334. }
  335. .q:before {
  336.     position:absolute;
  337.     content:'\f107';
  338.     font-family: FontAwesome;
  339.     left:-5px;
  340.     line-height:130%;
  341.     padding-left:15px;
  342. }
  343. .q.open:before {
  344.     position:absolute;
  345.     content:'\f106';
  346.     font-family: FontAwesome;
  347.     left:-5px;
  348.     line-height:150%;
  349.     padding-left:15px;
  350. }
  351. .a {
  352.     margin-top:10px;
  353. }
  354.  
  355.  
  356. /* links */
  357. .a a {
  358.     color:#b280ab; /* accent 4 */
  359.     background:white;
  360.     display:inline-block;
  361.     width:150px;
  362.     padding:5px 11px;
  363.     margin-bottom:10px;
  364.     margin-right:20px;
  365.     position:relative;
  366.     overflow: hidden;
  367.     white-space: nowrap;
  368. }
  369. .a a:nth-child(3n){
  370.     margin-right:0;
  371. }
  372. .a a:before{
  373.   content: "";
  374.   position: absolute;
  375.   width: 100%;
  376.   height: 2px;
  377.   bottom: 0;
  378.   left:0;
  379.   background-color: #ffddc1; /* accent 2 */
  380.   transition: all 0.7s ease, background-color 0.5s ease 0.2s;
  381.  
  382.   -webkit-transform: scaleX(0);
  383.       -ms-transform: scaleX(0);
  384.           transform: scaleX(0);
  385.  
  386.  
  387. }
  388. .a a:hover:before{
  389.     background-color: #ffc1f6; /* accent 1 */
  390.   -webkit-transform: scaleX(1);
  391.       -ms-transform: scaleX(1);
  392.           transform: scaleX(1);
  393. }
  394.  
  395.  
  396. /* faq */
  397. .a p {
  398.     padding:10px;
  399. }
  400. .a p a {
  401.     color:#b280ab; /* accent 4 */
  402.     cursor:pointer;
  403.     display:inline;
  404.     padding:0;
  405.     margin:0;
  406.     background:none;
  407.     border-bottom:2px solid #b280ab; /* accent 4 */
  408.     transition:0.3s;
  409. }
  410. .a p a:hover {
  411.     border-bottom:2px solid #ffddc1; /* accent 2 */
  412. }
  413. .a p i, .a p em {
  414.     opacity:0.5;
  415. }
  416. .a p a:before {
  417.     display:none;
  418. }
  419.  
  420.  
  421.  
  422. </style>
  423.  
  424.  
  425.  
  426. </head>
  427. <!-- ---------------------------------------------------------------- -->
  428. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  429. <!-- ---------------------------------------------------------------- -->
  430. <body>
  431. <div class="center" id="wrapper">
  432.  
  433. <!--- edit header here ---->
  434. <div class="header">
  435.     <a href="/">home</a>
  436.     <a href="/ask">contact</a>
  437.     <h1>navigation</h1> <!-- title -->
  438.     <a id="openall">open all</a>
  439.     <a id="closeall">close all</a>
  440. </div>
  441.  
  442. <!--- MAIN CONTENT ---->
  443. <div class="content">
  444.  
  445.  
  446.  
  447. <!--- **** EDIT FROM HERE **** ---->
  448.  
  449.  
  450.  
  451. <!------------- start of category ------------->
  452. <div class="category">
  453.     <div class="q">CATEGORY</div>
  454.     <div class="a">
  455.         <a href="LINK URL">LINK TEXT</a>
  456.         <a href="https://www.google.com/">Google</a>
  457.         <a href="/tagged/selfie">Selfies</a>
  458.         <a href="LINK">LINK</a>
  459.         <a href="LINK">LINK</a>
  460.     </div>
  461. </div>
  462. <!------------- end of category ------------->
  463.  
  464.  
  465. <!------------- start of category ------------->
  466. <div class="category">
  467.     <div class="q">CATEGORY</div>
  468.     <div class="a">
  469.         <a href="LINK URL">LINK TEXT</a>
  470.         <a href="https://www.google.com/">Google</a>
  471.         <a href="/tagged/selfie">Selfies</a>
  472.         <a href="LINK">LINK</a>
  473.         <a href="LINK">LINK</a>
  474.     </div>
  475. </div>
  476. <!------------- end of category ------------->
  477.  
  478.  
  479. <!------------- start of category ------------->
  480. <div class="category">
  481.     <div class="q">CATEGORY</div>
  482.     <div class="a">
  483.         <a href="LINK URL">LINK TEXT</a>
  484.         <a href="https://www.google.com/">Google</a>
  485.         <a href="/tagged/selfie">Selfies</a>
  486.         <a href="LINK">LINK</a>
  487.         <a href="LINK">LINK</a>
  488.     </div>
  489. </div>
  490. <!------------- end of category ------------->
  491.  
  492.  
  493.  
  494.  
  495. <!--- **** TO HERE **** ---->
  496.  
  497.  
  498.  
  499.  
  500.  
  501. <!-- **** TEMPLATE ****
  502. (copy this and paste it between "edit from here" and "to here")
  503.  
  504.  
  505. <div class="category">
  506.    <div class="q">CATEGORY</div>
  507.    <div class="a">
  508.        <a href="LINK URL">LINK TEXT</a>
  509.        <a href="https://www.google.com/">Google</a>
  510.        <a href="/tagged/selfie">Selfies</a>
  511.        <a href="LINK">LINK</a>
  512.        <a href="LINK">LINK</a>
  513.    </div>
  514. </div>
  515.  
  516. -->
  517.  
  518.  
  519.  
  520. <!-- ---------------------------------------------------------------- -->
  521. <!-- ---------------------- SCRIPT - S T A R T ---------------------- -->
  522. <!-- ---------------------------------------------------------------- -->
  523. <script type="text/javascript">
  524. $(document).ready(function(){
  525.    
  526.     /* DEFAULT STATE */
  527.     // default open: use "slideDown" and "addClass"
  528.     // default closed: use "slideUp" and "removeClass"
  529.     $(".a").slideDown();
  530.     $(".q").addClass("open");
  531.    
  532.     $("#openall").click(function(){
  533.         $(".a").slideDown();
  534.         $(".q").addClass("open");
  535.     });
  536.    
  537.     $("#closeall").click(function(){
  538.         $(".a").slideUp();
  539.         $(".q").removeClass("open");
  540.     });
  541.    
  542.     $(".q").click(function(){
  543.         $(this).siblings(".a").slideToggle();
  544.         $(this).toggleClass("open");
  545.     });
  546.  
  547. });
  548. </script>
  549.  
  550.  
  551. <div style="height: 100px;"></div>
  552. </div> <!-- /content -->
  553. </div> <!-- /wrapper -->
  554.  
  555. <!-- credit link. you may move but not remove. -->
  556. <div id="credit"><a href="https://cloudythms.tumblr.com/">☁</a></div>
  557. <!-- theme by cloudythms.tumblr.com -->
  558.        
  559. </body>
  560. </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!