milo's placeholders ! pixel

timmy idek

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

div

pixel table of content pixel

div

desktop header


janitor and beta text

.glow-logo h2{
font-size:0;
}
.glow-logo h2::before{ /*new 'janitor' text*/
font-size:34px;
content:"Janitor";
}

.glow-logo p{
font-size:0;
}
.glow-logo p::before{ /*new 'beta' text*/
font-size:19px;
content:"beta";
}

search bar text

by beloved @okytocin discord / @procrastination on JanitorAI (⁠ ⁠◜⁠‿⁠◝⁠ ⁠)⁠♡

/* ======================================== */
/*    🌿 MAIN 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 */
#search-input::placeholder {
    opacity: 0;
}

/* applies consistent text styling for search bar */
#search-input {
    /* 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;
}

/* centers the text inside the search bar */
.pp-top-bar-search > div:first-of-type,
#search-input {
    margin: 0;
    top: 50% !important;
    transform: translateY(-50%);
}

/* ==== 🌿 NEW PLACEHOLDER 🌿 ==== */

/* creates 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% - var(--input-height) * 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 */
.pp-top-bar-search:focus-within::after,
.pp-top-bar-search:has(#search-input:not(:placeholder-shown))::after {
    opacity: 0;
}

/* makes the search input visible when search bar is focused */
.pp-top-bar-search:focus-within #search-input,
#search-input:not(:placeholder-shown) {
    opacity: 1;
}

/* ==== 🌿 OPTIONAL STYLING 🌿 ==== */
    /* replace these values with your own and add new properties */

/* customizes the search bar's appearance */
.pp-top-bar-search {
    position: relative;
    overflow: hidden;
    background-color: rgb(105, 105, 105, 0.5);
}

/* customizes the svgs */
.css-bar9lc div:has(svg) {
    color: white;
    opacity: 1;
}

/* removes box shadow, as it can cause performance issues in excess */
.pp-top-bar-search:hover {
    box-shadow: none;
}

/* 💻 code snippet created by @procrastination  feel free to tweak and share */

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 the font-size between 15–17px—larger values will also scale the entire button

.css-wd8hou div:first-child:has(a)::before{
    content: 'new text';
    position: absolute;
    margin: auto;
    inset: 0;
    color: #000;
    width: fit-content;
    height: fit-content;
    background: #fff;
}
.css-wd8hou div:first-child:has(a) {
    position: relative;
}
.css-1yhasuw {
    opacity: 0;
}

announcement and bell icon

.css-11o5hw8 svg,
.css-xl71ch svg { /*hiding the icons*/
  display: none;
}
.css-11o5hw8::before { /*new announcement icon*/
  content: "📢"; 
  font-size: 18px;
  color: [COLOR]; /*this is for when you decide to use symbols instead of an emoji*/
}
.css-xl71ch::before { /*new bell icon*/
  content: "🔔"; 
  font-size: 18px;
  color: [COLOR]; /*same as the announcement 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 ദ്ദി´ ˘ `)

1
2
3
4
5
6
7
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2){
font-size:0;
}
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2)::before{
font-size:16px;
content:"followers";
}

optional stuff:

1
2
3
4
5
6
7
8
.pp-uc-followers-count::before{ /*optional, this adds a text before the followers count. remove this if you don't want it*/
font-size:16px;
content:"woah, ";
}
.pp-uc-followers-count::after{ /*optional, this adds a text after the followers count. Remove this if you don't want it. */
  font-size:16px;
  content:", cool.";
}

join date

1
2
3
4
5
6
7
.pp-uc-member-since{
  font-size:0;
}
.pp-uc-member-since::before{ /*new join date placeholder. this replace the whole text*/
  font-size:16px;
  content:"cool placeholder";
}

follow button

.Btn span {
font-size: 0;
width: auto;
}
.Btn span::after {
font-size: 18px;
color:[COLOR];
content: "follow";
font-family: "[FONT]";
}
.Btn[data-following=true] span::after {
font-size: 18px;
color:[COLOR];
content: "following";
ront-family:"[FONT]";
}

options button

1
2
3
4
5
6
7
.css-15w88gn>span:nth-child(1){
font-size:0;
}
.css-15w88gn>span:nth-child(1)::before{ /* new Options button text*/
font-size:17px;
content:"options";
}

"block this creator" popup text

.css-hab1hf {
font-size:0; 
background: inherit; 
}
.css-hab1hf::before{/*new "block the creator" text. the one that appears after clicking on the options button*/
font-size: 17px;
content:"block this creator?";
background: inherit;
font-family: "[FONT]";
}

optional stuff | changing the options button svg (the three dots):

.css-15w88gn svg {
display: none;
}

.css-15w88gn::after { /*new Options button 3 dots placeholder*/
content: " ☰";
font-size: 1.2em; 
display: inline-block;
vertical-align: middle;
}

bots / characters page section

characters tab (the one with blue line)

1
2
3
4
5
6
7
8
9
.css-1jj3srb {
width:100%;
font-size: 0px; /*  hides original text */
}

.css-1jj3srb::after {
content:"character"; /* new 'character' text  */  
font-size: 18px;
}

character count

use .Btn2-purple>.css-wd8hou if you want to change the color and font of the whole text including the number.

1
2
3
4
5
6
7
.Btn2-purple>.css-wd8hou p{ 
font-size:0;
}
.Btn2-purple>.css-wd8hou p::before{ /*new character count text.*/
font-size: 15px;
content:"placeholder";
}

once again, by beloved @okytocin on discord / @procrastination on JanitorAI!!

/* ============================================= */
/*    🪴 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

1
2
3
4
5
6
7
8
.css-1n2in4t svg {
  display: none;
}
.css-1n2in4t::before {
  content: "🏷️";
  font-size: 18px;
  color: [COLOR]; /*for when you decide to use symbols instead of emojis*/
}

tags filter popup ("Filters" text)

1
2
3
4
5
6
7
8
.css-dcyl1x{
  font-size:0;
}
.css-dcyl1x::before{
  content:"Filters";
  font-size:30px;
  color:[COLOR];
}

the "x" icon of the popup

1
2
3
4
5
6
7
8
.css-irb94a>button:nth-of-type(1) svg{
  display:none;
}
.css-irb94a>button:nth-of-type(1)::before{
  content:"❌";
  font-size:10px;
  color:[COLOR];
}

the "tags" text/header

1
2
3
4
5
6
7
8
.css-178jenf{
  font-size:0;
}
.css-178jenf::before{
  content:"placeholder";
  font-size:17px;
  color:[COLOR];
}

the "show all tags/hide all tags" button text

div:has(> div[style*="display: none;"]) .css-11dtrcq{
  font-size:0 !important;
}
div:has(> div[style*="display: none;"]) .css-11dtrcq::before{ /*show all tags button*/
  content:"placeholder";
  font-size:17px;
  color:[color];
}
div:has(> div[style*="display: block;"]) .css-11dtrcq{
  font-size:0 !important;
}
div:has(> div[style*="display: block;"]) .css-11dtrcq::before{ /*hide all tags button*/
  content:"placeholder";
  font-size:17px;
  color:[color];
}

latest filtering text (main container)

1
2
3
4
5
6
7
.transparent .react-select__value-container>div{
  font-size:0;
}
.transparent .react-select__value-container>div::after{
  content:"latest";
  font-size:17px;
}

latest filtering menu texts

.css-qr46ko>div:nth-child(1),.css-qr46ko>div:nth-child(2),.css-qr46ko>div:nth-child(3),.css-qr46ko>div:nth-child(4){
  font-size:0;
}
.css-qr46ko>div:nth-child(1)::before{
  content:"popular"; /*new 'popular' text*/
  font-size:14px;
  color:[COLOR];
}
.css-qr46ko>div:nth-child(2)::before{
  content:"latest"; /*new 'latest' text*/
  font-size:14px;
  color:[COLOR];
}
.css-qr46ko>div:nth-child(3)::before{
  content:"trending"; /*new 'trending' text*/
  font-size:14px;
  color:[COLOR];
}
.css-qr46ko>div:nth-child(4)::before{
  content:"trending 24h";  /*new 'trending 24h' text*/
  font-size:14px;
  color:[COLOR];
}

page arrows

.css-1gpctw1:nth-of-type(1) svg,.css-1gpctw1:nth-of-type(2) svg{
  display:none;
}
.css-1gpctw1:nth-of-type(1)::before{
  content:"⬅️";
  font-size:14px;
  color:[COLOR];
}
.css-1gpctw1:nth-of-type(2)::before{
  content:"➡️";
  font-size:14px;
  color:[COLOR];
}

misc (maybe)

user menu

/* personal user menu ദ്ദി ˉ͈̀꒳ˉ͈́ )*/
<style>
.css-19h42zx a{ /*styling for all the menu texts*/
  font-family:"font";
  color:color;
}
.css-19h42zx a:nth-of-type(-n+9) {
  font-size: 0;
}
.css-19h42zx a:nth-of-type(1)::after{
  content:"placeholder"; /*profile*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(2)::after{
  content:"placeholder"; /*create char*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(3)::after{
  content:"placeholder"; /*my chars*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(4)::after{
  content:"placeholder"; /*my chats*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(5)::after{
  content:"placeholder"; /*my persona*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(6)::after{
  content:"placeholder"; /*followings*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(7)::after{
  content:"placeholder"; /*blocks*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(8)::after{
  content:"placeholder"; /*settings*/
  font-size:15px;
}
.css-19h42zx a:nth-of-type(9)::after{
  content:"placeholder"; /*logout*/
  font-size:15px;
}
.css-19h42zx a svg {
  display: none;
}
.css-19h42zx a:nth-of-type(1)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(2)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(3)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(4)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(5)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(6)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(7)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(8)::before {
  content: "symb";
}
.css-19h42zx a:nth-of-type(9)::before {
  content: "symb"; 
}
.css-19h42zx a::before { /*for the icons*/
  font-size: 18px;
  color: color;
  display: inline-block;
}
</style>

Back to the top!

Edit
Pub: 19 May 2025 14:01 UTC
Edit: 04 Jul 2025 06:58 UTC
Views: 1422