THE WHITE QUEEN: alice in wonderland (pt. 2) inspired css template by Mauve07

Hello darlings! Here is the guide to my white queen css template, which is a sequel to my Queen of Hearts CSS Template!

Gentle reminder: Please remember that I put a lot of hard work into this and please don't remove the credit. It's very rude and I'm pretty sure it's against the janitor ai rules 😔.

♖♗♘♕ DESKTOP PREVIEW ♔♘♗♖ screenshot
screenshot
screenshot
screenshot

♖♗♘♕ MOBILE PREVIEW ♔♘♗♖ screenshotscreenshotscreenshotscreenshot

NOTIFICATIONS DROPDOWN MENU: Thank you so much @Tigerdropped! the template was a lifesaver. Here is the link
BACKGROUND IMAGE: I found it from pinterest (I'm pretty sure it's a game screenshot)
ROSE WITH LEAVES (from creators section): this svg was massive
HALF-ROSE (from bot cards section): edited to suit our needs
LEAF BANNER (from bot cards section): I had so much trouble choosing one

Everything else (code, svg images) were written and drawn by me!

Table of Contents:

LINK TO BOT ANNOUNCEMENT
LINK TO CSS ONLY FILE (THIS IS STEP 5!)

Alright, now onto the template:
You are very welcome to modify this code however you like! Feel free to leave a comment under my janitor announcement bot so I can check it out (I'm super curious to see what you do! Just don't remove the credit box.) This is my second template so it's a lot cleaner than my first (a bit more familiar with janitor's layout now)

STEP 1: Background Image

Go to your profile and change the background image (for some reason you can't change anything again after the css is enabled, probably some overlay issue with the z-index that I'm too lazy to go figure out). So change it first, before you add your custom css!
screenshot
(click the image/open it in a new tab! Then right click and save!)
The stats I used is Opacity: 100% and Blur: 6%, but feel free to do whatever you want!

STEP 2: Set up

  1. Press your profile picture on the top right and press 'Settings'
  2. In the 'Account' section (default), scroll down past your pfp and username to your 'About Me' section.
  3. Press the 'show editor' button. Make sure it is empty.

STEP 3: Copy the HTML

Next, choose your preferred template between:
QUEEN VER
KING VER
MONARCH VER
Copy and paste all of the code into the janitor editor you just opened.

QUEEN VER:
⎗
✓
<div class="title">
  <div class="decoration-left decoration"></div>
  <h1>WELCOME TO THE DOMAIN OF THE WHITE QUEEN</h1>
  <div class="decoration-right decoration"></div>
</div>
<div class="board-wrap">
  <div class="board"></div>
</div>

<div class="grid-top">
  <div class="grid-top-l1">
    <div class="rook"></div>
  </div>
  <div class="grid-top-l2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-l3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-center"></div>
  <div class="grid-top-r3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-r2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-r1">
    <div class="rook"></div>
  </div>
</div>
<div class="grid-bottom">
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
</div>

<div class="quote">
  <p>"the king is dead. long live the queen"</p>
</div>
<div class="separator"></div>

<!-- ABOUT YOU -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding the white queen</h1>
  </summary>
  <p>your about me section here!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
  <!-- add more <p></p> tags here for more paragraphs! -->
</details>

<!-- ABOUT YOUR BOTS -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding her knights</h1>
  </summary>
  <p>About your bots...</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
</details>

<!-- FRIENDS SECTION -->
<details class="abt-me-section">
  <summary>
    <h1>Her majesty's allies</h1>
  </summary>
  <div class="friends-wrapper">
    <!-- FRIEND 1 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/t21mp2.jpg">
        <h2>friend 1</h2>
      </div>
    </a>
    <!-- FRIEND 2 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/90jpzc.jpg">
        <h2>friend 2</h2>
      </div>
    </a>
    <!-- FRIEND 3 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/gf0nbk.jpg">
        <h2>friend 3</h2>
      </div>
    </a>
    <!-- FRIEND 4 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/dhl4s0.jpg">
        <h2>friend 4</h2>
      </div>
    </a>
    <!-- FRIEND 5 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/is1ogb.jpg">
        <h2>friend 5</h2>
      </div>
    </a>
    <!-- FRIEND 6 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/x37105.jpg">
        <h2>friend 6</h2>
      </div>
    </a>
    <!-- FRIEND 7 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/1hr53w.jpg">
        <h2>friend 7</h2>
      </div>
    </a>
    <!-- ADD MORE FRIENDS HERE -->
  </div>
</details>

<!-- FAVS CONTAINER -->
<details class="abt-me-section">
  <summary>
    <h1>Rulers of other domains to follow</h1>
  </summary>
  <div class="all-favs-wrapper">
    <!-- FAV CREATOR 1 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 1</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 2 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 2</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 3 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 3</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 4 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 4</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 5 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 5</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 6 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 6</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- ADD MORE FAVS HERE! -->
  </div>
</details>

<!-- ADD MORE DETAILS HERE! -->

<div class="credit-box">
  <p>css by <a
      href="https://janitorai.com/profiles/82cedff5-aced-42bc-bd83-f2b73e380d74_profile-of-mauve-07">Mauve07</a></p>
</div>
KING VER:
⎗
✓
<div class="title">
  <div class="decoration-left decoration"></div>
  <h1>WELCOME TO THE DOMAIN OF THE WHITE KING</h1>
  <div class="decoration-right decoration"></div>
</div>
<div class="board-wrap">
  <div class="board"></div>
</div>

<div class="grid-top">
  <div class="grid-top-l1">
    <div class="rook"></div>
  </div>
  <div class="grid-top-l2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-l3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-center"></div>
  <div class="grid-top-r3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-r2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-r1">
    <div class="rook"></div>
  </div>
</div>
<div class="grid-bottom">
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
</div>

<div class="quote">
  <p>"long live the king."</p>
</div>
<div class="separator"></div>

<!-- ABOUT YOU -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding the white king</h1>
  </summary>
  <p>your about me section here!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
  <!-- add more <p></p> tags here for more paragraphs! -->
</details>

<!-- ABOUT YOUR BOTS -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding his knights</h1>
  </summary>
  <p>About your bots...</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
</details>

<!-- FRIENDS SECTION -->
<details class="abt-me-section">
  <summary>
    <h1>His majesty's allies</h1>
  </summary>
  <div class="friends-wrapper">
    <!-- FRIEND 1 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/t21mp2.jpg">
        <h2>friend 1</h2>
      </div>
    </a>
    <!-- FRIEND 2 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/90jpzc.jpg">
        <h2>friend 2</h2>
      </div>
    </a>
    <!-- FRIEND 3 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/gf0nbk.jpg">
        <h2>friend 3</h2>
      </div>
    </a>
    <!-- FRIEND 4 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/dhl4s0.jpg">
        <h2>friend 4</h2>
      </div>
    </a>
    <!-- FRIEND 5 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/is1ogb.jpg">
        <h2>friend 5</h2>
      </div>
    </a>
    <!-- FRIEND 6 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/x37105.jpg">
        <h2>friend 6</h2>
      </div>
    </a>
    <!-- FRIEND 7 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/1hr53w.jpg">
        <h2>friend 7</h2>
      </div>
    </a>
    <!-- ADD MORE FRIENDS HERE -->
  </div>
</details>

<!-- FAVS CONTAINER -->
<details class="abt-me-section">
  <summary>
    <h1>Rulers of other domains to follow</h1>
  </summary>
  <div class="all-favs-wrapper">
    <!-- FAV CREATOR 1 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 1</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 2 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 2</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 3 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 3</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 4 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 4</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 5 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 5</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 6 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 6</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- ADD MORE FAVS HERE! -->
  </div>
</details>

<!-- ADD MORE DETAILS HERE! -->

<div class="credit-box">
  <p>css by <a
      href="https://janitorai.com/profiles/82cedff5-aced-42bc-bd83-f2b73e380d74_profile-of-mauve-07">Mauve07</a></p>
</div>
MONARCH VER:
⎗
✓
<div class="title">
  <div class="decoration-left decoration"></div>
  <h1>WELCOME TO THE DOMAIN OF THE WHITE MONARCH</h1>
  <div class="decoration-right decoration"></div>
</div>
<div class="board-wrap">
  <div class="board"></div>
</div>

<div class="grid-top">
  <div class="grid-top-l1">
    <div class="rook"></div>
  </div>
  <div class="grid-top-l2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-l3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-center"></div>
  <div class="grid-top-r3">
    <div class="bishop"></div>
  </div>
  <div class="grid-top-r2">
    <div class="knight"></div>
  </div>
  <div class="grid-top-r1">
    <div class="rook"></div>
  </div>
</div>
<div class="grid-bottom">
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
  <div class="grid-bottom-item">
    <div class="pawn"></div>
  </div>
</div>

<div class="quote">
  <p>"long live the monarch."</p>
</div>
<div class="separator"></div>

<!-- ABOUT YOU -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding the white monarch</h1>
  </summary>
  <p>your about me section here!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
  <!-- add more <p></p> tags here for more paragraphs! -->
</details>

<!-- ABOUT YOUR BOTS -->
<details class="abt-me-section">
  <summary>
    <h1>Regarding their knights</h1>
  </summary>
  <p>About your bots...</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id porta metus. Vestibulum quam eros, sodales a
    ultrices vitae, porta et velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Cras vel mi orci. Vestibulum luctus tristique eros, vitae ultrices sem ultricies vel. Pellentesque a est eu sem
    porttitor porta accumsan sed nibh. </p>
</details>

<!-- FRIENDS SECTION -->
<details class="abt-me-section">
  <summary>
    <h1>Their majesty's allies</h1>
  </summary>
  <div class="friends-wrapper">
    <!-- FRIEND 1 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/t21mp2.jpg">
        <h2>friend 1</h2>
      </div>
    </a>
    <!-- FRIEND 2 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/90jpzc.jpg">
        <h2>friend 2</h2>
      </div>
    </a>
    <!-- FRIEND 3 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/gf0nbk.jpg">
        <h2>friend 3</h2>
      </div>
    </a>
    <!-- FRIEND 4 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/dhl4s0.jpg">
        <h2>friend 4</h2>
      </div>
    </a>
    <!-- FRIEND 5 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/is1ogb.jpg">
        <h2>friend 5</h2>
      </div>
    </a>
    <!-- FRIEND 6 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/x37105.jpg">
        <h2>friend 6</h2>
      </div>
    </a>
    <!-- FRIEND 7 -->
    <a href="yourfriendlink.com">
      <div class="friend">
        <img src="https://files.catbox.moe/1hr53w.jpg">
        <h2>friend 7</h2>
      </div>
    </a>
    <!-- ADD MORE FRIENDS HERE -->
  </div>
</details>

<!-- FAVS CONTAINER -->
<details class="abt-me-section">
  <summary>
    <h1>Rulers of other domains to follow</h1>
  </summary>
  <div class="all-favs-wrapper">
    <!-- FAV CREATOR 1 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 1</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 2 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 2</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 3 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 3</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 4 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 4</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 5 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 5</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- FAV CREATOR 6 -->
    <a href="yourfav.com">
      <div class="fav-container">
        <div class="flower-wrapper left">
          <div class="flower"></div>
        </div>
        <h2>Creator 6</h2>
        <div class="flower-wrapper right">
          <div class="flower"></div>
        </div>
      </div>
    </a>
    <!-- ADD MORE FAVS HERE! -->
  </div>
</details>

<!-- ADD MORE DETAILS HERE! -->

<div class="credit-box">
  <p>css by <a
      href="https://janitorai.com/profiles/82cedff5-aced-42bc-bd83-f2b73e380d74_profile-of-mauve-07">Mauve07</a></p>
</div>

STEP 4: CUSTOMISE YOUR PROFILE

This is slightly less annoying than the red queen version. There are 4 main parts you might want to edit (feel free to customise other parts too ofc).

ABOUT YOU SECTION

Scroll down a bit to the section commented <!-- ABOUT YOU -->. Inside, there are some <p></p> tags with placeholder text. Edit within the <p></p> tags like <p>this!! heellaurr write stuff hereee</p>! Be careful not to delete the triangular bracket things. Add more <p></p> tags if you need more paragraphs!

ABOUT YOUR BOTS SECTION

Scroll down a bit more to the section commented <!-- ABOUT YOUR BOTS -->. It's basically the same process as the previous one.

FRIENDS SECTION

Scroll down a bit moree to the section commented <!-- FRIENDS SECTION -->. There are little groups within the <div class="friends-wrapper"></div> div, one for each friend. Replace the placeholder values with links to the profiles of your friends, and delete any extra ones! If you need more, copy this code:

⎗
✓
1
2
3
4
5
6
7
<!-- FRIEND n -->
<a href="yourfriendlink.com"><!-- edit here -->
  <div class="friend">
    <img src="https://your-friend-image.png"><!-- edit here -->
    <h2>friend n</h2><!-- edit here -->
  </div>
</a>

and paste it directly under the <!-- ADD MORE FRIENDS HERE --> comment.

FAVOURITE CREATORS SECTION

Finally, scroll down a bit moreee until you find the <!-- FAVS CONTAINER --> section! There are little groups within the <div class="all-favs-wrapper"></div> div, one for each friend. Like before, edit the placeholder values and delete any extra groups you don't need. If you need more groups, copy this code:

⎗
✓
<!-- FAV CREATOR n -->
<a href="yourfav.com"><!-- edit here -->
  <div class="fav-container">
    <div class="flower-wrapper left">
      <div class="flower"></div>
    </div>
    <h2>Creator n</h2><!-- edit here -->
    <div class="flower-wrapper right">
      <div class="flower"></div>
    </div>
  </div>
</a>

and paste it directly beneath the <!-- ADD MORE FAVS HERE! --> comment!

MORE CONTAINERS

If you need more containers/dropdowns, do not fear! It is easy to add more. Copy this code:

⎗
✓
1
2
3
4
5
6
7
<details class="abt-me-section">
  <summary>
    <h1>Tile heading</h1> <!-- edit here -->
  </summary>
  <p>lipsum lipsum lipsum</p> <!-- edit here -->
  <!-- add more <p></p> tags here for more paragraphs! -->
</details>

And paste it at the <!-- ADD MORE DETAILS HERE! --> section! Then edit the tile heading and the paragraph text and make it whatever you want! Small warning: don't make the tile heading too long because it might not look good on mobile.

STEP 5: REMOVE THE COMMENTS AND LINE BREAKS

I dunno why but if there are gaps in the code, sometimes the css won't work. Delete all the comments (they are in <!--comment--> tags) and all of the line breaks, so it is one giant block of code with no double line spacing.

STEP 6: Paste the CSS

The css can be found here:
Paste it directly below your last </div>
(BTW it's okay to leave the comments in the css.

STEP 7: PRESS SAVE!!!!!

Scroll to the very bottom of the page, then scroll up a little bit. There should be a purple 'save changes' button above the 'enable NSFW on Mobile' toggle. HIT THAT BUTTON! MAKE SURE IT SAVES! If it worked, there should be a green popup saying 'profile updated'.

That's it, lovelies! I hope you like this css template. If you have any questions, feel free to ask directly in the janitor announcement bot right here.
Love,
Mo

Edit

Pub: 30 Dec 2025 21:25 UTC

Edit: 02 Jan 2026 05:11 UTC

Views: 1341