API tools faq
paste
Advertisement
CrispinAsheYA

Tag Directory (Custom Colours)

CrispinAsheYA
Jan 1st, 2023 (edited)
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.48 KB | Source Code | 0 0
raw download clone embed print report
  1. <!---------------- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules ----------------
  2.  
  3. Version 2.1
  4.  
  5. Default Colours
  6. -Box-Fill: #7544C7
  7. -Text White: #FFFFFF
  8. -Text Black: #000000
  9.  
  10. -Tag Gradient Darkest (Top): (21,11,73,1)
  11. -Tag Gradient Neutral (Middle): (95,21,96,1)
  12. -Tag Gradient Lightest (Bottom): (180,51,108,1)
  13.  
  14. https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif : The default background gif used in headers
  15.  
  16. Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)
  17.  
  18. Thank you for reading!
  19. Crispin
  20.  
  21. -->
  22.  
  23. <div style="background-image:url(https://media.discordapp.net/attachments/917542533930823690/1000389329828458566/unknown.png?width=916&height=577); background-size:cover; background-position:top-center;" class="card-block">
  24.  
  25.   <div class="pb-3">
  26.     <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35570961">
  27.       <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35570961_WTGpuF7NJy3WvE4.png">
  28.     </a>
  29.   </div>
  30.  
  31.   <!------------------------------- START ACTUAL CODE -------------------------------->
  32.   <div class="col-12 p-0" style="font-size:1rem; font-family:'comic sans ms'; border:#000000 4px solid;">
  33.    
  34.     <!------------------------------- START HEADING -------------------------------->
  35.     <div class="col-12 p-0">
  36.       <div class="card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border:#000000 4px solid;"><p class="justify-content-between display-4 m-1 p-3" style="background:rgba(0,0,0,0.7);"><span class="mx-auto">TAG DIRECTORY</span></p></div>
  37.      
  38.       <div class="p-3" style="text-align:center; color:#000000; font-family:'comic sans ms'; background-color:#7544C7; border:#000000 4px solid;"> <!-- Start Card Interior -->
  39.         <p>[TEXT]</p>
  40.       </div>
  41.     </div>
  42.     <!------------------------------- END HEADING -------------------------------->
  43.    
  44.     <!------------------------------- START TAGS -------------------------------->
  45.     <div class="col-12 p-0"><!-- Start Tags Exterior -->
  46.       <div class="nav nav-tabs card-header-tabs row p-0 m-0" style="text-align:center; background:#7544C7;"><!-- End Tags Interior -->
  47.      
  48.         <!----- START TAG COLLECTION 1 ----->
  49.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  50.          
  51.           <!--- Start Header --->
  52.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  53.           <!--- End Header --->
  54.          
  55.           <!--- Start Un-Collapse --->
  56.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  57.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags1" aria-expanded="true">View Tags</a></span>
  58.            
  59.             <!--- Start Collapse --->
  60.             <div class="collapse" id="tags1" style="">
  61.              
  62.               <!--- Start Item --->
  63.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  64.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  65.               </span></p>
  66.               <!--- End Item --->
  67.              
  68.             </div>
  69.             <!--- End Collapse --->
  70.            
  71.           </div>
  72.           <!--- End Un-Collapse --->
  73.          
  74.         </div>
  75.         <!----- END TAG COLLECTION 1 ----->
  76.        
  77.         <!----- START TAG COLLECTION 2 ----->
  78.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  79.          
  80.           <!--- Start Header --->
  81.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  82.           <!--- End Header --->
  83.          
  84.           <!--- Start Un-Collapse --->
  85.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  86.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags2" aria-expanded="true">View Tags</a></span>
  87.            
  88.             <!--- Start Collapse --->
  89.             <div class="collapse" id="tags2" style="">
  90.              
  91.               <!--- Start Item --->
  92.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  93.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  94.               </span></p>
  95.               <!--- End Item --->
  96.              
  97.             </div>
  98.             <!--- End Collapse --->
  99.            
  100.           </div>
  101.           <!--- End Un-Collapse --->
  102.          
  103.         </div>
  104.         <!----- END TAG COLLECTION 2 ----->
  105.        
  106.         <!----- START TAG COLLECTION 3 ----->
  107.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  108.          
  109.           <!--- Start Header --->
  110.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  111.           <!--- End Header --->
  112.          
  113.           <!--- Start Un-Collapse --->
  114.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  115.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags3" aria-expanded="true">View Tags</a></span>
  116.            
  117.             <!--- Start Collapse --->
  118.             <div class="collapse" id="tags3" style="">
  119.              
  120.               <!--- Start Item --->
  121.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  122.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  123.               </span></p>
  124.               <!--- End Item --->
  125.              
  126.             </div>
  127.             <!--- End Collapse --->
  128.            
  129.           </div>
  130.           <!--- End Un-Collapse --->
  131.          
  132.         </div>
  133.         <!----- END TAG COLLECTION 3 ----->
  134.        
  135.         <!----- START TAG COLLECTION 4 ----->
  136.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  137.          
  138.           <!--- Start Header --->
  139.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  140.           <!--- End Header --->
  141.          
  142.           <!--- Start Un-Collapse --->
  143.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  144.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags4" aria-expanded="true">View Tags</a></span>
  145.            
  146.             <!--- Start Collapse --->
  147.             <div class="collapse" id="tags4" style="">
  148.              
  149.               <!--- Start Item --->
  150.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  151.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  152.               </span></p>
  153.               <!--- End Item --->
  154.              
  155.             </div>
  156.             <!--- End Collapse --->
  157.            
  158.           </div>
  159.           <!--- End Un-Collapse --->
  160.          
  161.         </div>
  162.         <!----- END TAG COLLECTION 4 ----->
  163.        
  164.         <!----- START TAG COLLECTION 5 ----->
  165.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  166.          
  167.           <!--- Start Header --->
  168.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  169.           <!--- End Header --->
  170.          
  171.           <!--- Start Un-Collapse --->
  172.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  173.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags5" aria-expanded="true">View Tags</a></span>
  174.            
  175.             <!--- Start Collapse --->
  176.             <div class="collapse" id="tags5" style="">
  177.              
  178.               <!--- Start Item --->
  179.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  180.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  181.               </span></p>
  182.               <!--- End Item --->
  183.              
  184.             </div>
  185.             <!--- End Collapse --->
  186.            
  187.           </div>
  188.           <!--- End Un-Collapse --->
  189.          
  190.         </div>
  191.         <!----- END TAG COLLECTION 5 ----->
  192.        
  193.         <!----- START TAG COLLECTION 6 ----->
  194.         <div class="col-6 col-lg-4 p-0 m-0" style="border:#000000 4px solid;">
  195.          
  196.           <!--- Start Header --->
  197.           <div class="px-0 card rounded-0" style="background:url('https://media.giphy.com/media/39lJ5rGSMmXbINhurn/giphy.gif'); background-position:center; background-size:cover; border-bottom:#000000 8px solid;"><p class="justify-content-between display-4 m-1 p-3" style="font-size:1.2rem; background:rgba(0,0,0,0.7);"><span class="mx-auto">[TITLE]</span></p></div>
  198.           <!--- End Header --->
  199.          
  200.           <!--- Start Un-Collapse --->
  201.           <div class="p-3" style="color:#C95203; font-family:'comic sans ms'; background-color:#7544C7;">
  202.             <span class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));"><a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" data-toggle="collapse" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="#tags6" aria-expanded="true">View Tags</a></span>
  203.            
  204.             <!--- Start Collapse --->
  205.             <div class="collapse" id="tags6" style="">
  206.              
  207.               <!--- Start Item --->
  208.               <p class="mt-2 mb-0"><span class="badge p-0 rounded-0" style="background:linear-gradient(0deg,rgba(180,51,108,1) 5%,rgba(95,21,96,1),rgba(21,11,73,1));">
  209.                 <a class="btn btn-outline-warning border-0 rounded-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; font-size:1rem;" href="[TAGLINK]">[TAGNAME]</a>
  210.               </span></p>
  211.               <!--- End Item --->
  212.              
  213.             </div>
  214.             <!--- End Collapse --->
  215.            
  216.           </div>
  217.           <!--- End Un-Collapse --->
  218.          
  219.         </div>
  220.         <!----- END TAG COLLECTION 6 ----->
  221.        
  222.         <!--- ADD MORE SECTIONS BY COPYING AND PASTING THE ENTIRETY OF COLLECTION 6 --->
  223.         <!--- REMMEBER TO CHANGE href="#tags6" AND id="tags6" TO NEW VALUES --->
  224.        
  225.       </div><!-- End Tags Interior -->
  226.      
  227.     </div><!-- End Tags Exterior -->
  228.     <!------------------------------- END TAGS -------------------------------->
  229.    
  230.   </div>
  231.   <!------------------------------- END ACTUAL CODE -------------------------------->
  232.  
  233. </div>
  234. <!------------------------------- END BACKGROUND -------------------------------->
  235.  
  236. <!--
  237. How To Use Changeable Variables:
  238. 1. Press [CTRL]+F on your keyboard
  239. 2. Press the "+" button at the bottom left of the window
  240. 3. Highlight one of the variables written similar to: [VARIABLE]
  241. 4. Write the new variable in the section in the Find&Replace that says "replace with"
  242. 5. Press the "all" on the right of the "Replace with" input bar.
  243.  
  244. [TEXT] | [TITLE] | [TAGLINK] | [TAGNAME] |
  245.  
  246. -->
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!