Customize your interface for ChatGPT web -> custom CSS inside

I’ve put together some custom CSS to modify the looks of ChatGPT. I personally found the user interface unfriendly so if you’d like to modify the look of your ChatGPT then you can use the custom stylesheet I’ve created via a browser plugin. Keep in mind that these changes are just local to your machine and may stop functioning when OpenAI releases an update. This is what the changes look like - The explanation for all changes is under the image:

I’ve made the following changes:

  1. Full width chat window so (almost) the entire width of the window is used. This is great for coding as you can read the code more easily without the need for sideway scrolling. The chat also doesn’t get long as quickly as more horizontal space is used.

  2. Thicker scroll bars: The original scroll bars are very thin and I found it a nuisance to click on them. I’ve changed this for the vertical and horizontal scroll bars

  3. Moved the scrollable area up and removed the empty space. The scroll bar now doesn’t sit at the bottom of the screen, so the new bottom starts right above the prompt input area.

  4. Bigger scroll thumb. When the chat gets longer, the scroll bar thumb gets smaller and smaller. I’ve set a minimum height so it doesn’t get too small. A larger thumb also makes the scrolling faster.

  5. Moved the regenerate button under the prompt input and added text, so it now reads: Regenerate last response. I’ve also given it a red background color.

  6. Moved the “copy code” icon and text to the left top of the code window, increased the size and added a blue background color.

  7. Removed the prompt suggestions that were added recently. I find them useless and distracting so got rid of them.

  8. Alternating chat background colors.

  9. Some other minor changes which are all described properly in the code comments.

If you want to use this, you need to install a browser plugin to allow to you add custom CSS to a website/domain. I’ve used Custom CSS by Denis which is a chrome browser plugin you can also use for Edge. There are various extensions which can do the same and it doesn’t really matter which one you pick. You simply install the plugin, make it visible in the browser top bar by clicking the little puzzle icon, followed by the “eye” next to it:

image



Next, you open the chatgpt window and click on the little CSS icon in the browser top bar:
image



Grant permission for the plugin and paste the following code block in the editor of the custom css tool. You can easily remove or edit the changes to your own liking. The comments are between:
/* comment*/ which is followed by the CSS for the commented change:
/* Wider chat window */
.gizmo .gizmo\:xl\:max-w-\[48rem\] {
    max-width: 100%;
}

/*Wider prompt entry*/
.xl\:max-w-3xl {
    max-width: 96%;
}

/*Alternating chat background color*/
.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
    background: #1b1818;
    margin: 10px;
}

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

/* Move scrollable area up*/
[class^="react-scroll-to-bottom--"] {
    height: 87%;
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden;
}

/* Increase side scroll bar width*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar {
    width: 20px;
}

/* Increase side scroll bar thumb and scroll speed*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar-thumb {
min-height: 40px;
}

/* Remove prompt suggestions */
button.btn.relative.btn-neutral.group.w-full.whitespace-nowrap.rounded-xl.text-left.text-gray-700.dark\:text-gray-300.md\:whitespace-normal {
    display: none;
}

/* Move regenerate button under the prompt input */
.md\:items-end {
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: -45px;
}

/* Add red bg color to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border {
    border-radius: 10px;
    background: #ee0008;
    border: 1px solid #ee0008;
    color: #fff
}

/* Regenerate button hover*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border:hover {
    background: #9c1519;
    border: 1px solid #9c1519;
    transition: 0.25s;
}

/* 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: "last response";
}

/* Increase horizontal code scroll bar height */
.p-4.overflow-y-auto::-webkit-scrollbar {
    height: 20px;
}


/* Move copy code to the left side */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Change the copy code into a button */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2 {
    margin: 0 10px 0 0;
    align-items: center;
    background: #3f51b5;
    padding: 5px 10px;
    border-radius: 5px;
    min-width: 60px;
}

/* Hover state for copy button*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2:hover {
    background: #2196F3;
    transition: 0.25s;
}

/* Increase size of copy code clipboard*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md svg.h-4.w-4 {
    width: 25px;
    height: 25px;
}

/* Increase the size of the main copy to clipboard*/
button.flex.ml-auto.gap-2.rounded-md.p-1.hover\:bg-gray-100.hover\:text-gray-700.dark\:text-gray-400.dark\:hover\:bg-gray-700.dark\:hover\:text-gray-200.disabled\:dark\:hover\:text-gray-400 svg.h-4.w-4 {
    width: 50px;
    height: 50px;

}

/* Move clipboard icon below the response rating*/
.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible {
   display: flex;
   flex-direction: column-reverse;
}


The changes should be instantly visible

5 Likes

Two points,

  1. I (and I am guessing some others as well) might prefer Stylebot to Custom CSS by Denis as it is more widely used.
  2. I toyed around with it a bit but CSS isn’t my jam and I know nothing of Tailwind so I wasn’t able to do it, but one of my interface bugaboos is that the rating/copy (and for that matter edit) buttons are fised to the top of each message. It would be great if they floated at the top of the visible portion of the <div> so it wasn’t necessary to scroll back up to the top to rate/copy/edit a message.

Something else I added quick was,

header {
  transform: translateY(0%) !important;
}

To keep the header with the model and sharing button always visible.

EDIT:

Also, you should update your “Wider chat window” CSS to account for when the sidebar is closed.

/* Wider chat window */
.xl\:max-w-3xl, .md\:max-w-3xl {
    max-width: 96%;
}

EDIT 2:

I also added CSS to bring in a Google Monospace font,

Fira Code
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37Nv7g.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7Nv7g.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7Nv7g.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7Nv7g.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77Nv7g.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

And some styling to improve readability,

p, ol, ul, div.empty\:hidden{
  width:60ch;   /* Keep text lines from getting crazy long and difficult to read. 60–75 characters is typically ideal for lines of text.*/
}

:root {
  font-size: 14pt; /* Bump up the font size a bit because my eyes aren't as young as they used to be.*/
}

code {
  font-family: 'Fira Code'; /* Display code blocks using a monospace font with ligature support.*/
}
2 Likes

Thanks, I noticed a few discrepancies as well with the css I posted, but for the most part it’ll do. Some stuff is personal preference as well and I’ve made a few more changes that are suitable for me but may not be for others. I’m not sure if I understood your question correctly, but I’ve also got a bit of CSS to move the copy and rating buttons from the top right to the bottom left of the response if that’s what you’re looking for. That way you don’t need to scroll up at all. I left it out of the post as I don’t usually copy the message but only the code. I’ll post it for you tomorrow.

The idea would be that if you are at the top of the response, the divs with the buttons would be where they currently are. But, as you scroll down, the rating and copy buttons would scroll with you, so they are always visible.

I think it requires some CSS position: sticky; somewhat, but the layout is a little weird and I don’t have the knowledge or bandwidth to quickly figure it out.

But, I’ve finished modifying mine for now with some extra flair.

Elmstedt CSS

pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}

code.hljs {
padding: 3px 5px
}

.hljs {
color: aqua;
background: navy
}

.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable {
color: #ff0
}

.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type,.hljs-variable {
color: #fff
}

.hljs-comment,.hljs-deletion,.hljs-doctag,.hljs-quote {
color: #888
}

.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp {
color: lime
}

.hljs-meta {
color: teal
}

.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title {
font-weight: 700
}

.hljs-emphasis {
font-style: italic
}
div.bg-black {
background:rgba(52,53,65,var(–tw-bg-opacity));
}

@font-face {
font-family: ‘Hasklig’;
font-style: normal;
font-weight: 400;
src: url(https://github.com/elmstedt/junk/releases/download/untagged-04c5c5945a552baa52d5/Hasklig-Regular.ttf) format(‘ttf’);
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Wider chat window */
.xl:max-w-3xl, .md:max-w-3xl {
max-width: 96%;
}

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

/* Move scrollable area up*/
[class^=“react-scroll-to-bottom–”] {
height: 93%;
overflow-y: ;
width: 95%;
overflow-x: hidden;
}

/* Increase side scroll bar width*/
[class^=“react-scroll-to-bottom–”]::-webkit-scrollbar {
width: 20px;
}

/* Increase side scroll bar thumb and scroll speed*/
[class^=“react-scroll-to-bottom–”]::-webkit-scrollbar-thumb {
min-height: 40px;
}

/* Remove prompt suggestions */
.md:overflow-visible {
display: none;
}

/* Move regenerate button under the prompt input */
.md:items-end {
align-items: flex-end;
position: absolute;
left: 0;
bottom: -45px;
}

/* Add red bg color to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md:border {
border-radius: 10px;
background: #ee0008;
border: 1px solid #ee0008;
color: #fff
}

/* Regenerate button hover*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md:border:hover {
background: #9c1519;
border: 1px solid #9c1519;
transition: 0.25s;
}

/* 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: “last response”;
}

/* Increase horizontal code scroll bar height */
.p-4.overflow-y-auto::-webkit-scrollbar {
height: 20px;
}

/* Move copy code to the left side */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}

/* Change the copy code into a button */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2 {
margin: 0 10px 0 0;
align-items: center;
background: navy;
padding: 5px 10px;
border-radius: 5px;
min-width: 60px;
}

/* Hover state for copy button*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2:hover {
background:darkslateblue;
transition: 0.25s;
}

/* Increase size of copy code clipboard*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md svg.h-4.w-4 {
width: 25px;
height: 25px;
}

/* Increase the size of the main copy to clipboard*/
button.flex.ml-auto.gap-2.rounded-md.p-1.hover:bg-gray-100.hover:text-gray-700.dark:text-gray-400.dark:hover:bg-gray-700.dark:hover:text-gray-200.disabled:dark:hover:text-gray-400 svg.h-4.w-4 {
width: 50px;
height: 50px;
}

/* Move clipboard icon below the response rating*/
.text-gray-400.flex.self-end.lg:self-center.justify-center.mt-2.gap-2.md:gap-3.lg:gap-1.lg:absolute.lg:top-0.lg:translate-x-full.lg:right-0.lg:mt-0.lg:pl-2.visible {
display: flex;
flex-direction: column-reverse;
}
header {
transform: translateY(0%) !important;
}

p, ol, ul, div.empty:hidden{
width:70ch;
}

ul.overflow-auto{
width:100%;
}
:root {
font-size: 15pt;
}

code {
font-family: ‘Hasklig’;
font-size: 16pt;
}

nice work! I fiddled around a bit with the positioning of the clipboard, but I can’t see a way to make it sticky. The parent container is a flex box that sits at the bottom of the response and in order to make a sticky element the parent div needs to be a scrollable div, which you don’t want for individual responses. The best I could do is move the clipboard to the left bottom of the response. That way you don’t need to scroll up either as it’s always left bottom, near your prompt input:



You just need to add/update this part:
.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible {
    display: flex;
    flex-direction: column-reverse;
    position: relative; /* Add this line */
    left: -75px; /* Add this line */
    float: left; /* Add this line */
}

Most of this CSS is over my head and very useful. Thanks!

One thing I wanted to add is to wrap code blocks. This works but there is probably some smarter way to do it.

/* Wrap Text in Code Blocks */
.\!whitespace-pre {
    white-space: pre-wrap!important;
}

Then I wanted to expand text to fit width, which isn’t working in some of the solutions above. Then I realized it’s already right here

p,
ol,
ul,
div.empty\:hidden {
    width: 80ch;
    /* Keep text lines from getting crazy long and difficult to read. 60–75 characters is typically ideal for lines of text.*/
}

For Edge Browser (not sure why I’m using Edge for this) I’m using Custom Style Script or Stylus on Chrome.

Thanks everybody!

1 Like

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!!

1 Like

@slippydong it seems like the

/* Remove prompt suggestions */
.md\:overflow-visible {
    display: none;
}

Doesn’t remove promts anymore. I’m assuming the site design has changed.
Do you have an updated code snippet to hide the prompt suggestions?

Thank you for posting this tutorial. Your customizations do make it look better and easier to use.
I also like using the dark theme, however, I would prefer another dark color other than the purple(?) gray. Do you know how to change the background colors? Thanks again!

Can you post your latest, please? My current code does nothing with the latest ChatGPT.

@dr2050 A quick fix for the width would be:

.gizmo .gizmo\:xl\:max-w-\[48rem\] {
    max-width: 100%;
}

@capability_space - try this:

button.btn.relative.btn-neutral.group.w-full.whitespace-nowrap.rounded-xl.text-left.text-gray-700.dark\:text-gray-300.md\:whitespace-normal {
    display: none;
}

@bmlupos There’s been a UI update so most of the custom CSS actually doesn’t work or apply anymore, but the default is a bit better now in my opinion. Just had a quick look and for the background of the main area you can add a HEX color to your liking with something like this:

.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
    background: black;
}

Just change the word black with whatever color code you like. For the purple there are various elements and there’s some gradients as well but don’t have time right now to figure them all out.

I’ll review the new UI some time next week and provide an update for the CSS where I think it’s necessary.

1 Like

Edited the CSS slightly so the full width is fixed.
Also added alternating background colors for the chat window:

Alternating chat colors was default in the previous UI but it got removed so here you go:

.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
    background: #1b1818;
    margin: 10px ;
}

Change color and margin to your liking :wink:

1 Like

Here’s my entire CSS for now, just relying on @slippydong’s answers above.

/* Allow width to expand for the main chat panel */
.gizmo .gizmo\:xl\:max-w-\[48rem\] {
    max-width: 95%;
}

/* Wrap Text in Code Blocks */
.\!whitespace-pre {
    white-space: pre-wrap !important;
}

/* Stretch the input box to 95% */
form.stretch {
    max-width: 95%;
}

/* Alternate Colors */
.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
    background: hsl(180, 50%, 90%);
    margin: 10px;
}

@dr2050 per your request. I will say that there are times that chrome does not work if you need to update to the latest version. Good luck

/* Wider chat window */
.xl\:max-w-3xl, .md\:max-w-3xl {
    max-width: 85%;
}
/* remove grey space */
.md\:h-48 {
    height: 0rem;
}

/* Move scrollable area up*/
[class^="react-scroll-to-bottom--"] {
    height: 91%;
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden;
}

/* Increase side scroll bar width*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar {
    width: 15px;
}

/* Increase side scroll bar thumb and scroll speed*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar-thumb {
min-height: 60px;
}

[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
}

/* Remove prompt suggestions */
.md\:overflow-visible {
    display: none;
}

/* Move regenerate button under the prompt input */
.md\:items-end {
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: +69px;
}

/* Add red bg color to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border {
    border-radius: 10px;
    background: #BF5700;
    border: 1px solid #BF5700;
    color: #fff
}

/* Regenerate button hover*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border:hover {
    background: #9cadb7;
    border: 1px solid #9cadb7;
    transition: 0.25s;
}


/* 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-variation-settings: normal;
    line-height: 1.5;
    tab-size: 4;
    text-indent: -.5ch; /* Move "response" one character space to the left */
}

/* Increase horizontal code scroll bar height */
.p-4.overflow-y-auto::-webkit-scrollbar {
    height: 20px;
}

#prompt-textarea {
    border-radius: 10px;
    border: 3px solid #BF5700;
}



/* cyrillic-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37Nv7g.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7Nv7g.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7Nv7g.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7Nv7g.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77Nv7g.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Move copy code to the left side */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Change the copy code into a button */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2 {
    margin: 0 10px 0 0;
    align-items: center;
    background: #BF5700;
    padding: 5px 10px;
    border-radius: 5px;
    min-width: 60px;
}

/* Hover state for copy button*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2:hover {
    background: #9cadb7;
    transition: 0.25s;
}

/* Increase size of copy code clipboard*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md svg.h-4.w-4 {
    width: 25px;
    height: 25px;
}

/* Increase the size of the main copy to clipboard*/
button.flex.ml-auto.gap-2.rounded-md.p-1.hover\:bg-gray-100.hover\:text-gray-700.dark\:text-gray-400.dark\:hover\:bg-gray-700.dark\:hover\:text-gray-200.disabled\:dark\:hover\:text-gray-400 svg.h-4.w-4 {
    width: 50px;
    height: 50px;

}

/* Wrap Text in Code Blocks */
.\!whitespace-pre {
    white-space: pre-wrap!important;
}

This is a lifesaver! Currently trying to adapt this code for a mobile browser using the CSS makeover extension for safari

Since mobile doesn’t have a grey margin between the menu and the chat, I edited the margin and also changed the color to be a bit more blue.

}

/*Alternating chat background color*/
.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
    background: #262630;
    margin: 0px;
}

The fixes for the paste and retry options don’t work on mobile, and neither does removing the suggestions, but I’m working of a fix for that. There’s also a few issues with the text size, spacing, and scroll bars that I’m currently trying to fix (the mobile UI update added a useless horizontal scroll bar which has made reading difficult).

I’ll post updates if I can get it working.

1 Like

I love Stylebot and this thread! Below are a couple selectors and properties to get this look:

main {
background-image: url('wwwdotlinktoimagedotcom');
background-repeat: no-repeat;
background-size: cover;
} 

/* chat stream width */
.flex.flex-col.text-sm {
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}

div {
  max-width: none;
}

/* nav */
.sticky.top-0.flex.items-center {
  background-color: transparent;
  color: white;
}

/* mobile top bar */
.text-token-primary.sticky.top-0.z-10 {
  background-color: black;
}

/* source button */
[id*="radix"] {
  color: white;
  background-color: black;
}

.icon-md, button {
  color: white;
}

.flex.flex-1.gap-4.text-base.mx-auto {
  background-color: #29252400;
  backdrop-filter: blur(30px);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 1px 1px 1px;
}

#prompt-textarea {
  background-color: black;
}

/* sender name */
.font-semibold {
  color: white;
}

p {
  color: white;
}

.flex.flex-grow.flex-col.max-w-full {
  color: white;
}

This has a custom background image, a wider chat width, transparent and blurred conversation backgrounds.

1 Like

FYI This broke for me in the newest update, so I made a fix using CSS Stylus in Firefox, as well as fixed a few other things that I didn’t like. This works well on mobile but there’s no side margin for chats on browsers and I haven’t found out how to adjust that yet.

I also figured out how to disable the sticky webkit since I despise the new top bar as takes up too much space on mobile for reading/creative writing exercises. I couldn’t figure out how to disable sticky on the top bar specifically so I just turned it all off. (this may cause other problems as future updates are implemented)

/* remove sticky*/
.\!sticky {
    position: static !important;

}

.sticky {
    position: -webkit-sticky;
    position: relative;

}

/*Alternating Conversation Colors*/
/*color for your input*/
[data-testid^="conversation-turn-"]:nth-child(even) {
    background-color: #32353e;

}

/*color for ChatGTP Response*/
[data-testid^="conversation-turn-"]:nth-child(odd) {
    background-color: #424651;

}
@-moz-document domain("chat.openai.com") {
    /* change the input area*/
    .xl\:max-w-3xl {
        max-width: 90% !important;
    }
    /* change the message area*/
    .text-base {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

perfect!!!
This is for super wide messages. Here is the illustration

Thank you so much! I was going crazy after the update broke my wide messages.

Hi,

Can anyone help me to make the side scrollbar move with the window in the code section?
Because it’s annoying that I have to scroll down to the side scroll, then scroll back up. Does anyone know how to implement this?
It would be great if the scrollbar could move with the window.

Thanks!