milo's placeholders !
tralalala wip wip wip cus i need to uodate some stuff and add new stuff tralalala ദ്ദി
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
to be added
- mobile header and footer
- stuff on botcards
et cetera
table of content
desktop header
janitor and beta text
search bar text
by beloved @okytocin discord / @procrastination on JanitorAI ( ◜‿◝ )♡
create a character button
by beloved @jazushii on discord (´ε` ) thanks for saving me from having a bigger crash out !!
Just a quick note: This element is currently unstyled. If you choose to apply styles to
.css-wd8hou div:first-child:has(a)::before
, we recommend keeping thefont-size
between 15–17px—larger values will also scale the entire button
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-count
instead as it's the container ദ്ദി´ ˘ `)
optional stuff:
join date
follow button
options button
"block this creator" popup text
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-wd8hou
if 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 | /* ============================================= */
/* 🪴 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
the "show all tags/hide all tags" button text
latest filtering text (main container)
latest filtering menu texts