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 ♔♘♗♖




♖♗♘♕ MOBILE PREVIEW ♔♘♗♖




CREDITS WHERE THEY ARE DUE (clickable links)
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!

(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
- Press your profile picture on the top right and press 'Settings'
- In the 'Account' section (default), scroll down past your pfp and username to your 'About Me' section.
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | <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:
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:
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:
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