milo's placeholders ! pixel

2


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.

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

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

1
2
3
4
5
6
7
8
[aria-label="Notifications"] svg { /*hiding the icon*/
  display: none;
}
[aria-label="Notifications"]::before { /*new bell icon*/
  content: "🔔"; 
  font-size: 16px;
  color: [COLOR]; /*if you use symbols*/
}

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
8
.pp-uc-followers-count span:nth-of-type(2){
font-size:0;
}

.pp-uc-followers-count span:nth-of-type(2)::before{
font-size:16px;
content:"followers";
}

optional stuff:

1
2
3
4
5
6
7
8
9
.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:"text before, ";
}

.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:", text after.";
}

join date

1
2
3
4
5
6
7
8
.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";
font-family:"[FONT]";
}

options button

1
2
3
4
5
6
7
8
9
.css-xl71ch{
font-size:0;
}

.css-xl71ch::before{ /* new Options button text*/
font-size:17px;
content:"options";

}

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

.pp-uc-options-menu svg {

display: none;

}

.pp-uc-options-menu::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 {
font-size:0;/* hides original text */
}


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

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
8
9
.pp-pg-total-text{ 
font-size:0;
font-family:"font", sans-serif;
}

.pp-pg-total-text::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

.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)

.css-dcyl1x{
  font-size:0;

}

.css-dcyl1x::before{
  content:"Filters";
  font-size:30px;
  color:[COLOR];

}

the "x" icon of the popup

.css-lyo4r5 svg{
  display:none;

}

.css-lyo4r5::before{
  content:"❌";
  font-size:10px;
  color:[COLOR];

}

the "tags" text/header

1
2
3
4
5
6
7
8
9
.css-178jenf{
  font-size:0;
}

.css-178jenf::before{
  content:"placeholder";
  font-size:17px;
  color:[COLOR];
}

latest filtering text (main container)

.transparent .react-select__value-container>div{
  font-size:0;
}

.transparent .react-select__value-container>div::after{
  content:"latest";
  font-size:15px;
  font-family:"font", sans-serif;

}

latest filtering menu texts

.css-qr46ko>div:nth-child(-n+4) {
  font-size: 0;
}

/* shared text styling */

.css-qr46ko>div:nth-child(-n+4)::before {
  font-size: 14px;
  color: [COLOR];
  font:"font", sans-serif;
}


/* unique labels */
.css-qr46ko>div:nth-child(1)::before { content: "popular"; }
.css-qr46ko>div:nth-child(2)::before { content: "latest"; }
.css-qr46ko>div:nth-child(3)::before { content: "trending"; }
.css-qr46ko>div:nth-child(4)::before { content: "trending 24h"; }

page arrows

.pp-pg-prev-button svg,
.pp-pg-next-button svg{
  display: none;
}


/* shared styling for both arrows */
.pp-pg-prev-button::before,
.pp-pg-next-button::before {
  font-size: 14px;
  color: [COLOR];
}


/* unique symbols */
.pp-pg-prev-button::before { content: "⬅️"; }
.pp-pg-next-button::before { content: "➡️"; }

misc (maybe)

empty 

Back to the top!

Edit

Pub: 19 May 2025 14:01 UTC

Edit: 12 Nov 2025 07:47 UTC

Views: 4819