milo's placeholders !
a rentry of codes for changing the placeholder text (e.g. followers text) and some svgs / icons in Janitor AI since alot of people are interested in doing so. Made by yours truly, @miloelio on discord and @zyxy in Janitorai
Please be mindful when using pseudo-elements. They’re fine for decoration, but don’t put essential text in them. Screen readers can’t read ::before or ::after, so any important info placed there won’t exist for users relying on assistive tech.
table of content
desktop header
janitor and beta text
search bar text
by beloved @okytocin discord / @procrastination on JanitorAI ( ◜‿◝ )♡
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 235 236 237 238 239 | /* ==========================================
🌱 MAIN SEARCH BAR — Placeholder 🌱
========================================== */
/* ==== DEFAULT PLACEHOLDER ==== */
/* apply consistent text styling for search bar */
/* → NOTE: inline styling requires !important overrides */
#search-input {
position: absolute;
width: calc(100% - 2.5rem) !important;
padding-right: 2.5rem !important;
/* replace these values with your own */
font-family: 'Lato', sans-serif;
font-size: 1rem !important;
font-weight: normal !important;
/* TYPED text color */
color: hsl(0 0% 100%) !important;
caret-color: hsl(0 0% 100%);
}
/* hide the default placeholder text */
#search-input::placeholder {
opacity: 0;
}
/* ==== NEW PLACEHOLDER ==== */
/* create new placeholder text */
.pp-top-bar-search::after {
content: 'your placeholder text should go here. you can make it as long as you want, but it will be truncated if it exceeds the width of the search bar.';
position: absolute;
max-width: calc(100% - (2.5rem * 2));
top: 50%;
transform: translateY(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
/* replace these values with your own */
font-family: 'Lato', sans-serif;
font-size: 1rem;
font-weight: normal;
color: hsl(0 0% 100% / 0.8);
/* remove the opacity transition if you don't want a fading effect on focus */
transition: opacity 200ms ease-in-out,
color 200ms ease-in-out;
}
/* ==== NEW PLACEHOLDER ANIMATIONS ==== */
/* change color of new placeholder text when hovered / focused on search bar */
.pp-top-bar-search-box:is(:hover, :focus-within):not(
:has(.pp-top-bar-search-history:is(:hover, :focus))
)
.pp-top-bar-search::after {
color: hsl(0 0% 100%);
}
/* hide new placeholder when search bar is focused or contains text */
.pp-top-bar-search:focus-within::after,
.pp-top-bar-search:has(#search-input:not(:placeholder-shown))::after {
opacity: 0;
}
/* show search input when focused or contains text */
.pp-top-bar-search:focus-within #search-input,
#search-input:not(:placeholder-shown) {
opacity: 1;
}
/* 🪴 MAIN SEARCH BAR — General Appearance 🪴
================================================= */
/* → NOTE: unless stated otherwise, please replace any values listed here with your own. the ones currently being used are to set an example, not out of necessity. */
/* ==== SEARCH BAR BACKGROUND ==== */
/* customize the primary container for the search bar */
/* → NOTE: using this container versus .pp-top-bar-search so that icons don't clip */
.pp-top-bar-search-box {
background-color: hsl(240 7% 6%);
border: 1px solid hsl(227 9% 30%);
border-radius: 0.625rem;
outline: 1px solid transparent;
/* if transitioning properties other than background-color and outline, include those here with commas between each declaration */
transition: background-color 200ms ease-in-out,
outline 200ms ease-in-out;
}
/* remove the original background of the search bar */
/* → NOTE: border does not play nicely with icons if you use this class */
.pp-top-bar-search {
background-color: unset;
border-radius: unset;
}
/* prevent the user from focusing on close icon when inactive */
/* → NOTE: also prevents the search history from randomly appearing */
.pp-top-bar-search-box:has(#search-input:placeholder-shown)
.pp-top-bar-search-right:empty,
body:has(
.pp-top-bar-search-right:not(:empty),
#search-input:not(:placeholder-shown)
)
.pp-top-bar-search-history {
display: none;
}
/* ==== SEARCH BAR BACKGROUND ANIMATIONS ==== */
/* change the appearance of search bar on hover and focus */
.pp-top-bar-search-box:is(:hover, :focus-within):not(
:has(.pp-top-bar-search-history:is(:hover, :focus))
) {
background-color: hsl(240 4.5% 3%);
}
/* change the appearance of search bar on :focus-visible for accessibility */
.pp-top-bar-search-box:has(#search-input:focus-visible):not(
:has(.pp-top-bar-search-history)
) {
outline: 1px solid hsl(227 9% 38%);
}
/* ==== SEARCH BAR ICONS ==== */
/* change the appearance of the search bar and close icons */
.profile-top-bar-search-box div:has(> svg) {
color: hsl(0 0% 100%);
opacity: 1;
transition: color 200ms ease;
}
/* ==== SEARCH BAR ICONS' ANIMATIONS ==== */
/* change the appearance of the icons on hover */
.profile-top-bar-search-box div:has(> svg):is(:hover, :focus) {
color: hsl(0 0% 100% / 0.8);
}
/* 🪴 SEARCH BAR HISTORY — General Appearance 🪴
==================================================== */
/* → NOTE: appears beneath the search bar if you have searched something recently */
/* change the background of the search history panel */
.pp-top-bar-search-history {
background-color: hsl(240 7% 6%);
border: 1px solid hsl(227 9% 30%);
border-radius: 0.625rem;
box-shadow: none;
}
/* change the background of search history items */
.pp-top-bar-search-history [role='button'] {
background-color: unset;
transition: background-color 200ms ease-in-out;
}
/* change the typography of search history items */
.pp-top-bar-search-history [role='button'] span {
font-family: 'Lato', sans-serif;
font-size: 1rem;
font-weight: normal;
color: hsl(0 0% 100%);
}
/* prevent the search history text from overflowing on smaller screens */
.pp-top-bar-search-history [role='button'] div:has(> span) {
overflow: hidden;
}
/* change the dimensions and color of divider */
/* → NOTE: you can also remove this using display: none with no consequences */
.pp-top-bar-search-history [role='button']::after {
/* make the divider full width */
left: 0;
right: 0;
background-color: hsl(227 9% 30%);
}
/* remove the last divider to prevent from appearing at bottom */
.pp-top-bar-search-history [role='button']:last-of-type::after {
display: none;
}
/* ==== SEARCH BAR SUGGESTIONS / HISTORY — ANIMATIONS ==== */
/* make search history appear with a transition */
body:has(.pp-top-bar-search-history) .pp-top-bar-search-history {
opacity: 0;
animation: appear 200ms forwards;
}
/* the animation to make search history appear */
/* → NOTE: only covers the transition when it appears and not when it closes, as the element disappears from the DOM when inactive */
@keyframes appear {
to {
opacity: 1;
}
}
/* change the search history items when hovered over */
.pp-top-bar-search-history [role='button']:is(:hover, :focus) {
background-color: hsl(240 4.5% 3%);
}
/* ==== SEARCH BAR SUGGESTIONS / HISTORY — Icons ==== */
/* change the icons inside search history */
.pp-top-bar-search-history
[role='button']
:is(button svg, span[class*='icon'] path) {
color: hsl(0 0% 100%);
fill: hsl(0 0% 100%);
opacity: 1;
transition: color 200ms ease-in-out,
fill 200ms ease-in-out;
}
/* ==== SEARCH BAR SUGGESTIONS / HISTORY — Icons ANIMATIONS ==== */
/* change the icons when hovered over */
.pp-top-bar-search-history [role='button'] button:hover svg,
.pp-top-bar-search-history [role='button'] span[class*='icon']:hover path {
color: hsl(0 0% 100% / 0.8);
fill: hsl(0 0% 100% / 0.8);
}
|
announcement and bell icon
profile / user card
"followers" text
heads up! this does not affect the follower count number. so if you want to change the color, font and positioning of the whole text use
.pp-uc-followers-countinstead as it's the container ദ്ദി´ ˘ `)
optional stuff:
join date
follow button
options button
optional stuff | changing the options button svg (the three dots):
bots / characters page section
characters tab (the one with blue line)
character count
use
.Btn2-purple>.css-wd8houif you want to change the color and font of the whole text including the number.
character search bar
once again, by beloved @okytocin on discord / @procrastination on JanitorAI!!
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 | /* ============================================= */
/* 🪴 CHARACTER SEARCH BAR PLACEHOLDER 🪴 */
/* ============================================= */
/*
⚠️ NOTE: TEMPLATE FOR CUSTOM PLACEHOLDER — ✅ SUPPORTED IN MODERN BROWSERS
for further customization (hover effects, color changes, etc.) you should have a basic understanding of css selectors, properties, and transitions.
*/
/* ==== 🪴 DEFAULT PLACEHOLDER 🪴 ==== */
/* hides the default placeholder text */
.pp-fl-search-input::placeholder {
opacity: 0;
}
/* applies consistent text styling for search bar */
.pp-fl-search-input {
height: unset;
/* replace these values with your own */
font-family: 'Lato', sans-serif;
font-size: 1rem !important;
font-weight: normal;
/* TYPED text color */
color: white;
caret-color: white;
}
/* ==== 🪴 NEW PLACEHOLDER 🪴 ==== */
/* creates new placeholder text */
.css-1jy826p .css-1y0e7gb::after {
content: 'your placeholder text should go here. you can make it as long as you want, but it will be truncated if it exceeds the width of the search bar.';
display: block;
left: var(--input-padding);
position: absolute;
max-width: calc(100% - var(--input-padding) * 2);
top: 50%;
transform: translateY(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
/* replace these values with your own */
font-family: 'Lato', sans-serif;
font-size: 1rem;
font-weight: normal;
color: white;
/* if you don't want the placeholder to ease in out when focused, remove the opacity transition. */
transition: opacity 200ms ease-in-out;
}
/* hides the new placeholder when search bar is focused */
.css-1jy826p:focus-within .css-1y0e7gb::after,
.css-1jy826p:has(.pp-fl-search-input:not(:placeholder-shown)) .css-1y0e7gb::after {
opacity: 0;
}
/* makes the search input visible when search bar is focused */
.css-1jy826p:focus-within .pp-fl-search-input,
.css-1jy826p:has(.pp-fl-search-input:not(:placeholder-shown)) .pp-fl-search-input {
opacity: 1;
}
/* adjusts the width of the placeholder text when placeholder is gone */
.css-1jy826p:has(.pp-fl-search-input:not(:placeholder-shown)) .css-1y0e7gb::after {
max-width: calc(100% - var(--input-padding) * 3.5);
}
/* ==== 🪴 OPTIONAL STYLING 🪴 ==== */
/* replace these values with your own and add new properties */
/* customizes the search bar's appearance */
.pp-fl-search-input {
/* add your own styles here */
background-color: rgb(105, 105, 105, 0.3);
}
/* customizes the svg */
.pp-fl-search-input ~ div svg {
fill: white;
opacity: 1;
/* makes it easier to see */
transform: scale(1.5);
}
/* removes the outlines and borders. if you want to add new ones, then remove this */
.pp-fl-search-input,
.pp-fl-search-input:is(:hover, :focus) {
outline: none;
box-shadow: none;
border: none;
}
/* 💻 code snippet created by @procrastination — feel free to tweak and share */
|
tags filter icon
tags filter popup ("Filters" text)
the "x" icon of the popup
the "tags" text/header
latest filtering text (main container)
latest filtering menu texts