Customize your interface for ChatGPT web -> custom CSS inside

ChatGPT
,
7

Thanks for all of the recommendations above. This was really helpful. It was a huge time sink for me today, but fun to play with.

The bottom section (outside scroll) was moving up and down for me due to what I think was the location of the regenerate. I moved it to above the message changing to bottom: +70px; from the original -45 and that seemed to fix it.

also changed to grey space to 0rem as there was still too much grey

/* remove grey space */
.md\:h-48 {
    height: 0rem;
}

the spacing on the word “regenerate” and “response” seemed to big so I changed the text-indent to -.5ch from the original -1. Also, the font still looks off to me but I added the original font to the CSS just to make sure. It still looks off but at least the extra space is gone :slight_smile:

/* Add "response" to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border .flex.w-full.gap-2.items-center.justify-center:after {
    content: "response";
    text-size-adjust: 100%;
    font-feature-settings: normal;
    font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-variation-settings: normal;
    line-height: 1.5;
    tab-size: 4;
    text-indent: -.5ch; /* Move "response" one character space to the left */
}

The red on the regenerate was too hard on my eyes, it was yelling at me every time I looked at the message box so I changed to my preferred color palette. I did the same thing on the copy box

And since I was changing the regenerate color I decided to change the delete / cancel colors as well. Since it was not included as an option above here it is:

[class^="btn relative btn-danger"]
{
    border-radius: 10px;
    background: #BF5700;
    border: 3px solid #BF5700;
    color: #fff
}

[class^="btn relative btn-neutral"]
{
    border-radius: 10px;
    background: #9cadb7;
    border: 3px solid #fff;
    color: #fff
}

I also tried to figure out how to change my profile pic. It is tied to Gravatar, there ar a few articles videos out there if you do not know what I am referring to.

good luck and thanks!!