Cool black profile info with dairy (picture in description)

2 weeks ago - by Corpse-princess2.0 - Misc - used 6 times

Credits to herokitty4lifers on napo !! I edited it slightly pic 👇👇

https://files.catbox.moe/505xpi.png

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>
  /*gets rid of existing bio thing  */
  body.profile-page .table-section tr,
  body.profile-page .profileInfo tr:not(:first-child),
  body.profile-page .details-table {
    display: none !important;
  }
  
  
  body.profile-page td.label, 
  body.profile-page td.data {
    display: none !important;
  }
  
  
  body.profile-page .profile-pic,
  body.profile-page .profile-pic img,
  body.profile-page .profileInfo tr:first-child,
  body.profile-page [class*="profile-pic"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
  }
</style>


<style>
  /*JUST INFO BOX 👇👇👇*/
</style>

<div class="info-outer-box">

  
  <div class="info-inner-box">
    
    
    <h2 class="info-title">PROFILE INFO</h2>
    
    
    <details class="info-tab" open>
      <summary class="tab-btn">General</summary>
      <div class="info-scrollbox section-scroll-box">
        <h3>About Me</h3>
        <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
        <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
      </div>
    </details>
    
    
    <details class="info-tab">
      <summary class="tab-btn">Interests</summary>
      <div class="info-scrollbox section-scroll-box">
        <h3>Interests</h3>
        <p>put any thing you like here.. well it isn't named interest for a reason! anime, tv show, movie, comics, characters probably, whatever is your interest buddy</p>
        <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
        <p>put the music section here every one loves music cmon</p>
        <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
      </div>
    </details>
    
    
    <details class="info-tab">
      <summary class="tab-btn">Diary</summary>
      <div class="info-scrollbox section-scroll-box">
        <h3>Diary Entries</h3>
        <p>i just wanted to add this because i haven't been seeing a lot of daries being written okay... anyways the extra text is just to test the uh scroll box text text text text text text text text text text text text text text text text text text text text</p>
        <p><b>date here and time</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
      </div>
    </details>

  </div>
</div>


<style>
  .info-outer-box {
    background: linear-gradient(135deg, #111111, #2a2a2a);
    border: 3px solid #333333;       
    border-radius: 20px;            
    padding: 14px;
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #ffffff;
  }

  .info-inner-box {
    border: 2px solid #444445;
    border-radius: 12px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.4); 
    display: flex;
    flex-direction: column;
  }

  .info-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 
                 0 0 20px rgba(255, 255, 255, 0.4);
  }

  .info-tab {
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
  }
  
  .info-tab:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
  }

  .tab-btn {
    list-style: none; 
    cursor: pointer;
    font-size: 14px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.2s ease;
    outline: none;
    text-align: center; 
    display: block;
  }
  
  .tab-btn::-webkit-details-marker {
    display: none;
  }

  .tab-btn:hover {
    color: #ffffff;
  }

  .info-tab[open] .tab-btn {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }

  .info-scrollbox {
    max-height: 150px;    
    overflow-y: auto;     
    padding: 10px 5px 0 0;
    line-height: 1.5;
    font-size: 14px;
    box-sizing: border-box;
  }

  .section-scroll-box {
    border: 1px solid #444445;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    margin: 8px auto 0 auto; 
    width: 95%; 
    max-width: 380px; 
    text-align: left; 
  }

  .info-scrollbox::-webkit-scrollbar {
    width: 6px;
  }
  .info-scrollbox::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }
  .info-scrollbox::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 3px;
  }
  
  .info-scrollbox h3 {
    margin-top: 0;
    color: #dddddd;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    text-align: left; 
  }
</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements